Next.js
1.Next.js
the React Framework for Productionnext.js 페이지를 들어가면 제일 먼저 보이는 문구이다. 프로덕션을 위한 리액트 프레임워크리액트 - 사용자 인터페이스를 만들기 위한 javaScript 라이브러리그러면 next.js는 프로덕션을 위한 ja
2.Next.js 프레임 워크 구조 (1)
commerce 프로젝트 뜯어보기 https://github.com/vercel/commerce 의 커머스 사이트 리포지 토리를 참고 typescript로 되어있고 Turbo 로 mono repo를 관리하고 있으며 4개의 extension을 recommendation으로 정해두었고 yarn build를 먼저 해야지 yarn start로 실행해볼수 있다. ...
3.next.js 13
13 버전에서 12버전보다 매우 많은 변화가 있었다.따라서 이 변화를 알아보면서, next.js 13버전을 사용해서 프로젝트를 만들어보자.공식 페이지를 들어가면 설치 커멘드를 찾아볼수 있다.next 최신 버전으로 설치할겁니다. 라는 뜻으로, 입력하면프로젝트 이름tail
4.next.js file Based Routing
next.js 13 버전에서는 app 폴더 내부의 page.tsx가 메인 페이지로 접속했을때 보여주게 되는 화면이다.물론 메인 페이지 내부에서 /search 경로 페이지로 이동한다면 이런 식으로 파일을 만들면된다.같은 방법으로 /restaurant 경로를 만들고 싶다면
5.next.js Navigating Between Routes
Link 와 useRouter
6.next.js Components
현재 html 페이지 코드를 집어넣은 상태라서 각 페이지의 코드가 상당히 길어져있는데, 이를 컴포넌트별로 나눠서 구현을 하고자 한다.app 폴더 내부에 componenets폴더를 생성하고 각 페이지들이 사용하는 컴포넌트들 만들어서 import 하는 방식으로 코드를 작성
7.next.js server vs client components
서버 컴포넌트 와 클라이언트 컴포넌트
8.next.js DRY code
홈 에서의 코드를 보면 전체를 감싸는 main이 이렇게 적혀있다.검색 페이지에서 코드를 보면 전체를 감싸는 main이 이렇게 적혀있다.스타일링 코드 뿐만이 아니라. 페이지를 둘러보니이런 방식으로 구현되는 형태가 많았다.여러 페이지들을 제작하면서 반복적인 형태가 만들어지
9.next.js loading, error state
next.js에서의 loading, error state 생성 방법을 알아본다.
10.next.js authentication
authentication이 뭐임? 참이라는 근거가 있는 무언가를 확인하거나 확증하는 행위 유저의 identification을 확인하는 절차 유저의 아이디와 비밀번호를 확인 인증을 위해서 먼저 유저의 아이디와 비번을 생성할수 있는 기능이 필요 메인 화면에서 로그인고