220524 프론트엔드 부트캠프 16일차 : husky, modal, prevState

  freeboard 리뷰

 📺 Youtube   - 아직 안 함(5/24)

youtube state를 만들어서 onchange, defaultvalue 추가한다.

그리고 패치보드에서 유튜브 url도 가져와야한다! 

width, height를 라이브러리에서 자체제공해서 emotion에선 수정 불가능하기 때문에 presenter에서 값을 수정해준다.

 

🔧 수정

아무 수정도 하지 않고 누르면 수정한 내용이 없습니다, alert

early exit 패턴을 쓴다. 

 

작성자 변경을 백엔드에서 막아놨음에도 불구하고 수정 페이지에선 수정이 가능, 못하게 하기

1. presenter의 input 태그에 readOnly(색깔 흰색, 클릭해서 바꾸는 것 불가능)를 props.isEdit에 따라 바뀌게 하기

2. 패치보드에서 받아온 작성자가 있으면 수정하기 페이지인 것을 이용

 

* as string   <- readOnly에 들어갈 수 없다. true나 false만 들어갈 수 있음. 그래서 이중 부정 연산자를 사용

(!!writer) 있으면 true로 없으면 false로 boolean값처럼 만들어준다.

 

📂 별점 라이브러리

state 추가한다. 

ant design, Next.js 등의 Docs를 숙지한다. 

댓글을 등록하면 disabled를 true로 변경한다. 

 

  modal

 알림창이 예뻐졌어요~ 모달! 실무에서 짱 많이 쓰인다. 

 

🔫 모달을 종료하는 방법

1. 기본적으론 숨김처리 됨 - 나갔다와도 작성하던 걸 그대로 남겨놓고 싶을 때

2. 삭제했다가 새로 만들기 - 나갔다오면 초기화되게 하고 싶을 때 : isModalVisible 이용해서 state를 바뀌게 만들어 다시 그리게 한다. 아예 html 삭제가 됐다가 새로운 모달을 만들게 하는 것

 

  husky

eslint에서 오류 발생시 아예 커밋을 하지 못하게 할 수 있음😞 불편할 수 있지만 협업할 때 좋다.

 

yarn add husky@4 // (4버전 설치)

package.json

yarn add lint-staged

나중엔 devedependencies에 옮겨서 다시 설치할 거지만, 지금은 dependencies에 있음

 

커밋하기 전에 hook → lint-staged 먼저 실행

 

거기서 npx eslint . 해보고 통과하면 커밋하게 해주겠다^^🥹

"npx eslint .”

"npx eslint '**/*.{ts,tsx}'”

 

npx eslint '**/*.{ts,tsx}'

터미널에 쓰면 커밋 할 수 있는지 확인 가능!

 

 

 오늘은 윤쉪~~~ 찍긴 했는데 항상 너무... 맛있어보이지 않네... 오늘은 실제로 그냥 그랬다~

속 안 좋아서 안 먹을까하다가 항상 점심 먹고나면 상태가 괜찮아지길래 그냥 먹었는데, 실제로 괜찮았다.

내일은 다른 식당에 가서 먹기로함!!! 기대기대기대즁

 졸진 않았는데 컨디션이 좋진 않았다. 아 진짜 왜이러지😫 오늘은 일찍 자볼거다... 

나만 댓글이 아직인 것 같아서 조금 초조했다... (아, 오늘 나온 점수도 정말 안 좋았다.) 숙제도 댓글을 썼다는 전제하에 나온 게 있어서 퀴즈 풀었다가 알고리즘 풀었다가 프리보드 했다가 난리법석이었다. 그리고 원하는 UI 컨셉이 있어서 그거 실험해보느라 또 시간 가구, 배우는 건 재밌는데 시간이 너무 부족하고 내 체력이 아직 딸린다. 부트캠프가 끝나면 꼭 수영을 할거야!!! 아픈날도 있었지만 그래도 이렇게 기운없진 않았던 것 같은데(아닌가ㅎㅎㅎ) 오늘은 약간 지쳐서... 일기 쓸 것도 별로 없다. 그리고 오늘따라 왜 이렇게 배고픈거지..?!?!?!?!!!! 내일은 오늘보다 더 행복하길!@❤️‍🔥