728x90 전체 글79 [Next.js] App Router에 대해서 (+ Pages Router와 비교) 얼마 전 Next.js 가 새로운 라우팅 방식인 App Router 를 소개했다. 이를 정리해보고, (기존 방식인) Pages Router와 비교해 보고자 한다. 📌 페이지 만드는 방법 Pages Router : 기존 방식인 Pages Router 에서 페이지를 만드려면 다음과 같이 하면된다. src/ └── pages ├── about.js ├── index.js └── team.js ▲ pages 폴더 안에 파일을 만들면, 이 파일의 이름은 URL path 가 되어 페이지가 생성된다. App Router : App Router 에서 페이지를 만드려면 다음과 같이 해야한다. src/ └── app ├── about │ └── page.js ├── globals.css ├── layout.js ├── l.. 2023. 9. 5. [CSS] grid 속성들 정리 📌 flex vs grid ? 아이템을 자유자재로 배치할 수 있는 CSS Layout 에는 flex 와 grid 가 있다. flex : 아이템을 1차원적으로 배치할 수 있음 (가로 or 세로) grid : 아이템을 2차원적으로 배치할 수 있음 (가로 and 세로) 📌 grid 사용법 1. 부모 컨테이너에 display: grid 를 지정한다. 2. grid 안에 들어 있는 자식들은 각각 grid cell 로 변환된다. 📌 grid 속성들 정리 부모 속성들 ► grid-template-columns : 컨테이너 열(column)의 크기 지정 ► grid-template-rows : 컨테이너 행(row)의 크기 지정 ► grid-auto-rows : 컨테이너 행(row)이 몇 줄인지 모를 때, 전체적으로 자.. 2023. 9. 3. [Next.js] 개념 간단 정리 Next.js 강의를 들으며 배운 개념들을 정리해보겠습니다 Routing Routing ? : url로 페이지를 나누는 것을 말함 Next.js 에서 Routing을 하기 위해선 (*App Router 버전) 1. app 폴더 안에 폴더를 만들고 2. 그 안에 page.jsx 파일을 만든다. (* Next.js 는 app 폴더 안에 있는 폴더들을 자동으로 url 로 만들어 준다.) Next.js 의 레이아웃 작동방식 (*App Router 버전의 Next.js 폴더 구조는 아래 이미지와 같다.) ▲ Next.js 는 page.js 를 보여줄 때, 옆에 layout.js 파일이 있으면 layout.js 내용 안에 page.js 내용을 담아서 보여준다. (* layout.js의 {children} 이 pag.. 2023. 8. 31. 1년차 주니어 프론트엔드 개발자의 회고록 어느덧 입사한지 1년하고도 며칠이 지났다지난 9개월 회고록 이후 3개월 간의 업무는 가장 널널했던 것 같다그럼에도 배운 것들이 꽤 있어 기록해보고자 한다 무엇을 했는가 ?🐣 '메인 모바일 페이지' 배포 및 리팩토링[ 사용 기술 | React + TypeScript + Next.js + Redux Toolkit + React Query ] : 지난 9개월 회고록에서 진행하고 있던 프로젝트를 계속 진행하여 마무리하였다. 1차로 마무리된 프로젝트에 next-seo를 사용하여 SEO 관련 설정을 하고, 구글 광고 등을 세팅하여 배포하였다.그 후, 다른 프로젝트를 진행하다 시간이 남아 리팩토링 작업을 해보기로 했다.혼자 모든 페이지의 코드를 짜다보니 부족한 부분이 많았고 그만큼 아쉬움이 남았다. ● 먼저 VO.. 2023. 8. 29. 이전 1 ··· 7 8 9 10 11 12 13 ··· 20 다음 728x90
