Next.js 15 설치 next.js 에서 eslint + prttier + husky + lint-staged 우선 VSCode에서 prettier 확장 프로그램을 설치하는 것이 좋다. prttier 해당 프로젝트에서 파일을 만들고 규칙을 넣어주면된다. eslint next.js를 설치하면 eslint 사용하는 구분에 yes 하면 파일 만들어짐. eslint는 이제 8 → 9버전으로 업그레이드되면서 포맷팅 기능을 없앤다고 공식문서에 나와있음 하지만 여전히 9번저에서도 포맷팅 기능이 가능하지만, 언젠간 사라지니깐 분리를 해놓긴 해야 함. eslint-config-prettier : eslint와 prettier 충돌을 방지하기 위해서 설치✅ eslint-plugin-prettier : eslint에서 prettier 실행하는 명령어인데 이제 필요 없어짐❌ husky 초기화를 진행하면 해당 프로젝트 최상위 루트에  디렉토리가 생성되고 에  스크립트가 자동으로 추가된다. 참고로 …

Why? The Odin Project를 하면서 grid 와 flex에 대해서 나왔는데 개발을 하면서 display에 대한 배치를 정확하게 생각해 본 적은 없었지만, 과제를 하면서 grid 와 flex를 상황에 맞게 언제 사용해야 할지 의문점이 들어서 글을 남겨보려 한다. The Odin Project CSS Grid vs FlexBox 일단 grid와 flex에 차이점에 대해서 알아볼 필요가 있다. 차이점 Flex Box 1차원 레이아웃용으로 설계된 Flexbox는 단일 축(가로 또는 세로)을 따라 항목을 정렬한다. 컨테이너 내의 공간을 분배하고 품목을 한 방향으로 정렬하는 데 이상적이다. CSS Grid 2차원 레이아웃을 위한 CSS 그리드를 사용하면 열과 행을 동시에 제어할 수 있다. 따라서 두 축을 따라 정렬해야 하는 보다 복잡한 레이아웃에 적합하다. 각각의 사용시기 Flex Box 항목을 한 방향(행 또는 열)으로 정렬할 때 더 간단한 구성 요소 수준 레이아웃. CSS G…

1. Material Theme & Material Icon Theme 두개의 익스텐션을 설치해줍니다. Material Theme 사용법 원하는 색상을 골라 선택해주면 vscode 테마 색상을 바꿀 수 있습니다. (code를 오래보고 있으면 눈아프니 어두운 색상으로 해주시면 👍) Material Icon Theme 사용법 폴더 아이콘 테마도 사진과 같이 바꿀 수 있습니다. 2. Prettier 코드를 정해진 규칙에 맞춰 이쁘게 포맷팅 해주는 익스텐션입니다. → prettier 검색 → Tab Width 2 , Single Quote 체크 → format on 검색 → format on save 체크해주시면 됩니다. 간혹 prettier가 적용이 안되거나 하는 경우에는 Default Formatter 확인해보면 null 이거나 설정이 잘못되어 있는 경우가 있기 때문에 prettier로 설정해줍니다. 3. ESLint 문법 에러나 버그를 찾아주는…

1. 기본 개발 환경 세팅 & 터미널 설정 1. homebrew 구버전 삭제 위의 커맨드 실행시 /usr/local/bin/brew 가 출력되었다면 이미 설치되어 있는 것입니다. 삭제하려면 를 실행해주세요. 2. homebrew 설치 실행 후 설치가 완료되면, 이라는 문구와 함께 각각 , 로 시작하는 커맨드가 두 개 안내될 것입니다. 모두 실행해주시면 됩니다. 후에 brew install로 node, yarn, zsh 을 깔아줍니다. 3. iterm2 설치 iterm2 설치로 들어가서 다운로드를 해줍니다. iTerm2 을 실행 시켜 을 눌러 원하는데로 설정을 해주시면됩니다. 4. ohmyzsh 설치 ohmyzsh 설치 5. 폰트 저의 폰트는 fira-code를 사용합니다. font의 다운 받은 Fira Code 를 설정해줍니다. 6. 테마 iterm 테마 색상에 들어가셔서 원하는 테마 색상을 저장을 해줍니다. 으로 설정에 들어가셔서 다운받은걸 import 해주시면 됩니…