[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 7일차 기록

어제 개인 사정으로 수업에 빠져서 6일차 기록은 없당...ㅠ

 

오늘의 학습 (핵심 내용 & 인사이트)

• 프로젝트 생성
• 테일윈드 설치
• 폰트import 및 css 파일 설정하기
• 컴포넌트 생성 기준에 대하여
• 컴포넌트의 이벤트: onClick, onDoubleClick, onChange 등..
• form태그를 이용한 로그인 처리
• props를 이용한 데이터 전달
  • 같은 변수 props로 받는 컴포넌트가 여러 개라면??
  • interface / type으로 정의된 것을 따로 모아둔 파일 (index.d.ts)에서 import 해서 쓰기
  • 위 방법을 이용하는 3가지 상황
    1. props의 타입이 여러 군데에서 사용되는 건 아닌데, props가 너무 많아서 코드의 가독성을 해칠 때
    2. 복잡 유무를 떠나서 그냥 여러 군데에서 사용되는 경우
    3. 그냥ㅋ 하고싶어서ㅋ (원하는 대로 타입정의 하기~)
  • 하지만, 재사용되는 게 아니라면 하나의 컴포넌트 상에 적어주는 게 일반적임
• Children
  • props와 children의 차이: 콘텐츠 그 자체를 전달
  • ⇒ 좀더 확장성 있게 활용 가능(children 안에도 태그가 있을 수 있기 때문)
• tailwind-merge 플러그인 사용하기
  • import { twMerge } from "tailwind-merge";
  • import { twJoin } from "tailwind-merge";
• input, button에 대한 중복컴포넌트 제작 시 개꿀팁!!!!!!!
  • React.ComponentPropsWithoutRef<"input">;
  • React.ComponentPropsWithoutRef<"button">;
  • 태그가 갖고 있는 모든 속성을 props 설정 없이 가져와서 사용 가능

 

 

오늘 기록

 

오늘 점심은 마곡역 앞에 있는 꼬마김밥이었다.

근데 점심시간 되자마자 사진 찍을 겨를도 없이 와구와구 먹어버려서 사진이 없당...ㅎ

그리고 항상 도시락 싸오는 멤버들과 조금 많이 친해져서 이런저런 이야기 하면서 먹어서 즐거운 점심시간이었다.

동갑친구도 벌써 2명이나 사귀고!! 

 

리액트를 시작하고부터(오늘임) 진도가 우다다닫 나가는 것 같은 느낌적 느낌이지만

이미 알고 있는 내용을 실무에서 사용되는 꿀팁과 함께! 또 직접 만들면서! 배우니

정말정말 재밌다..

내가 평소에 잘 모르던 것과, 꿀팁 등이 언제 터져나올지 몰라서 졸 틈도 없이 긴장하며 듣고 있다ㅋㅋ

 

 

실습 시간 동안엔 쌤이 저렇게 이리저리 다니면서 봐주시는데

이 시간에 개인적으로 궁금한 것(깃...)도 여쭤보고, 내 코드가 효율적인지도 보여드리는

이 아주 짧은 시간이 되게되게 감사하다. 

 

내일 수업이 기대된다!