[TIL] 2022-1003

🐈오늘 배운 것

✔️Next.js 프로젝트 셋팅

Next.js + prisma + planet scale + tailwind css 를 사용한 클론코딩 프로젝트를 복습하기 위해서 프로젝트 세팅부터 다시 들여다봤다. 먼저 필요한 라이브러리를 전부 설치한 뒤에 폴더 구조를 바꾸고 절대경로를 수정해 주었다.

// package.json
 "dependencies": {
    "@prisma/client": "^4.4.0",
    "iron-session": "^6.2.1",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.36.1"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "autoprefixer": "^10.4.12",
    "eslint": "8.24.0",
    "eslint-config-next": "12.3.1",
    "postcss": "^8.4.17",
    "prettier-plugin-tailwindcss": "^0.1.13",
    "prisma": "^4.4.0",
    "tailwindcss": "^3.1.8"
  }

디렉토리 구조를 짜기 위해 구글링을 하다가 링크 글을 참고해 위와 같이 src 폴더를 생성해서 정리했다. public 폴더의 경우 정적 파일을 제공할 수 있는 디렉토리라 하여 이미지 파일을 위치시켰다. 공식문서 참고 : Static file serving

디렉토리 구조를 짜는 것도 여러가지 방법이 있는 것 같은데 당장은 이해하고 사용하기 편한 방식으로 했다. 

// jsonconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

jsonconfig 파일을 위와 같이 수정하면, src의 하위에서 접근할 때 @/하위폴더명/... 이렇게 접근해서 import 할 수 있다.

 

추가로 Gitmoji를 사용해봤는데 커밋 메시지가 귀여워졌다. Gitmoji 참고

✔️게시판 리스트 / 로그인 Form 

프로젝트를 셋팅하고 로그인 로직을 만들기 위해 2개의 페이지 뼈대를 만드는 작업을 했다. 

처음 테일윈드 셋팅을 할 때 페이지에 적용이 왜 안되나 했는데, global.css 폴더에 아래 세 가지 코드를 추가하지 않아서였다. 아래 내용이 추가되어 있어야 정상적으로 동작한다.

@tailwind base;
@tailwind components;
@tailwind utilities;

그리고 어처구니 없는 실수를 했는데, 컴포넌트를 만들 때 전달하는 props 에 중괄호로 구조분해할당을 하지 않아서 Objects are not valid as a React child 에러를 만났다. 커스텀 Input 컴포넌트를 만들려고 label, name 같은 속성을 넘겨주었어야 했는데 이 부분을 못봐서 시간을 생각보다 많이 허비했다.

추가적으로 전체 크기가 줄어들어도 flex child 의 사이즈가 줄어들지 않게 하려고 flex-shirink-0 속성을 줄 수 있었다. 

 

오늘 안에 CRUD 를 위한 대부분의 페이지를 작성하려고 했는데 생각보다 시간이 오래걸려서, 페이지 + 단위 기능으로 묶어서 먼저 만들고 차근차근 추가하는 방식으로 구현해 나가려고 한다. 내일은 로그인 기능까지는 꼭 만들어봐야지! 목표는 딱 CRUD 까지 만들어보는 것이다..ㅋㅋ 

🐈더 공부할 것

1. DB 셋팅, 로그인 구현

🐈오늘의 느낀 점

코드를 따라칠때는 이해가 되었으니 스스로 충분히 할 수 있을 것이라고 생각했는데, 막상 실제로 해보니 생각보다 시간이 엄청 오래걸렸다. 처음 프로젝트를 셋팅할 때 맨땅에 헤딩이라고 생각하니 막막해지기도 했고, 결국 강의를 보고 배운 코드를 참고하고 수정하면서 작성했다. 강의 속에서 선생님은 신들린듯이 마구 코드를 써내려가셨는데 나는 왜 화면에 CSS가 적용이 안될까로 1시간을 고민하고 있으니 ㅋㅋㅋㅋ 뭔가.. 이대로 괜찮은건가 싶다. 그렇지만 이것저것 마구 일을 벌린다고 다 따라가지도 못하고 때려칠 나를 알고 있으니 눈 앞에 놓인 것이라도 잘 하자...!