[개발일지] 3월 3주차 ( 3.17~21 ) - 새로운 프로젝트 시작!! web 프론트 전담,,

commit message 규칙

 

3/ 18 (화) -> 아직까지 전 코드 문제점 파악 중

개발자도구 쓸때 (network, console 둘 다) 꼭 Preserve log 켜고 하자.... api가 오류나서 페이지 이동이 일어나면 오류가 안보이게 된다!! (이건 일단 내가 보는 코드 기준)

 

webstorm 아직 너무 불편하다 ㅜㅠㅠ 왜 폴더 만드는 버튼이 없는거야,, 

next.js 흐아 완벽한 코드로 짜고 싶다!!  공부해야지

 

페이지 타입을  꼭 써야하는 건 아니지만 NextPage 타입을 사용하는 게 여러모로 유리한 점이 있다.

NextPage 타입을 사용하면 좋은 점

1. Props 타입을 명확하게 지정할 수 있음
   

   import { NextPage } from "next";
   
   interface Props {
     name: string;
   }
   
   const Home: NextPage<Props> = ({ name }) => {
     return <div>Hello, {name}!</div>;
   };
   
   export default Home;

   
   
   • NextPage<Props>를 사용하면 컴포넌트의 props가 name을 필수로 받는다고 명확하게 표시됨.
   • 실수로 name을 전달하지 않으면 TypeScript가 경고를 줌.
2. children 자동 지원
   • NextPage를 쓰면 children을 명시적으로 안 적어도 자동으로 포함됨.
   • React.FC도 비슷한 기능이 있지만 Next.js에서는 NextPage가 더 권장됨.

 

굳이 NextPage를 안 써도 되는 경우

const Home = () => {
  return <div>Home Page</div>;
};

export default Home;

• Props를 받지 않는 단순한 페이지라면 NextPage 없이 const Home = () => {}만 써도 무방함.
• NextPage를 안 써도 동작에는 문제없음.

 

결론

• ✅ Props를 받는 페이지라면 NextPage<Props>를 쓰는 게 더 안전하고 명확함.
• ❌ Props가 필요 없으면 그냥 const Home = () => {}로 둬도 OK.
• 🚀 Next.js 공식 문서에서도 NextPage 사용을 추천함.

 

3/ 19 (수)  - 프로젝트 웹 프론트 개발 환경 셋팅,,  하다가 실패 

App Router 에서는 useRouter() 훅은 기본적으로 클라이언트에서만 사용할 수 있기 때문에

next/navigation에서 가져와야 한다.

import할 때 경로가 next/router가 기본으로 되어있다.  바꿔주자!!

 

📌 주의:

• pages 디렉터리에서 useRouter는 "next/router"에서 가져와야 함.
• app 디렉터리(Next.js App Router)에서는 "next/navigation"에서 가져와야 함.

 

3/ 20 (목) - 다 지우고 새로 환경 셋팅 + 로그인 페이지 맛보기

• 전역적으로 테일윈드 theme 사용해서 색상 설정,
• api SWR로 데이터 받아오기(GET)

Tailwind - 커스텀 색상 설정하기!! + 색상말고도 많은 것들이 있음.

https://tailwindcss.com/docs/theme

Theme variables - Core concepts

 

tailwind.config.js 계속 찾았는데 설치해도 파일 안만들어주고 ㅠㅠㅠㅠ 근데 최근 업데이트로 변경되었다고 함.

 

기존의 tailwind.config.ts 혹은 js 파일이 삭제되고 하나의 css 파일에 선언하도록 변경 되었습니다.

 

+ UI라이브러리는 shadcn ui 로 결정 , 일단 컴포넌트 필요한 것들 받았는데 하 코드 이해하고 우리 디자인에 맞추려면 어떻게 해야할지 공부해야 할 거 같다.

 

코피 호도도독 흘림 ㅠㅠㅠㅠ 또 지져야 할 수도,,

 

3/ 21 (금) - SWR로 로그인 토큰 받아오기 (POST) 

• 아직 post api만 만들어 놓고 연결은 못시켰다, form에 들어있는 데이터를 보내줘야 하는데 이걸 아직 안함.

이 날은 컨디션이 너무 안좋았다... 여러모로.. 

퇴근 길 2시간은 진짜 선넘었음.. 5시 퇴근인데도 너무해서 앞으로 카페에서 공부하다가 7시 반쯤 버스타고 가기로 정했다. ( 1시간 10~20분정도 걸린다 ^3^) 동네에 필라테스를 끊어놔서 자취하기도 애매하고 아직 자취할 생각은 없는거 같다!

근데 필라테스 넘나 재밌다 ㅎㅎㅎ 아 오랜만에 해서 진짜 너무 아픈데 뿌듯하고 수업도 잘해주시고 히히 주 3회씩 가야지ㅣ

 

혼자 웹 프론트 처음부터 배포까지 담당해야하는 거라 부담도 되고 힘들지만 너무너무너무 재밌다

깃에 디렉토리 만들고 환경셋팅해서 완전히 그냥 내가 다 만들었는데 하나하나 모든 과정에 내 손길이 들어가니까 이게 어떻게 흘러가는지 이해가 되고 하나하나 쌓아가는게 너무 재밌다.

 

아직은 정말 뭐 할 때마다 알아봐야하고 공부해야해서 느리지만 점차 빨라지겠지ㅣ 웹을 6주내로 완성해야하는데 실제 개발기간은 4-4.5주로 잡고 그 이후는 Test해야한다고 하셨다. 벌써 1주가 날라갔다ㅠㅠㅠㅠ 3~3주반 정도 남았다고 보면 되는데 할 수 있겠지!! 일단 다음주 열심히 일하다가 안되겠다 싶으면 카페에서 학교 공부말고 일이나 해야겠다 ㅠㅠ

 

할 수 있다!!!!!!!!!!!