FE/Next.js

Next.js는 페이지 라우터와 앱 라우터, 두가지의 라우터를 제공한다. 페이지 라우터는 Next 초창기부터 제공되어 오던 구 버전의 라우터이고,앱 라우터는 Next13버전과 함께 2023년 처음 공개된 신규 라우터이다. 앱 라우터는 페이지 라우터의 단점을 보완하기 위한 서버 컴포넌트나 스트림이나 서버 액션등의 새로운 기능이 포함되어 있고 아직은 과도기를 겪고 있다. 그래서 페이지 라우터란, 현재 많은 기업에서 사용되고 있는 안정적인 라우터로 react router처럼 특정 조건을 기준으로 웹 서비스의 페이지를 분할하고 그 페이지 간의 이동을 제공하는 기능이다. 이름에 걸맞게 pages라는 폴더를 기준으로 라우팅한다. pagesㄴ index.js ㄴ about.js ㄴ item.js  next는 파일명 ..

node js로 구현된 백엔드 서버 코드를 깃허브에 올려주셔서 다운받아 사용했다.DB 연결도 supabase라는 서비스를 사용해 간편하게 진행했다. (이거 신기하더라 ,, ㅎ) supabase 설정 이후 받은 database url을 .env 파일에DATABASE_URL = [DB 비밀번호]postgresql://어쩌구의 db 주소설정을 해주고 npm run buildnpm run start명령어를 통해 서버를 켠다. 그리고 localhost 포트 12345번으로 접속하고 엔드포인트를 /api로 설정하면 swagger로 넘어가 자세한 api호출을 볼 수 있게 구성되어 있다. 서버 종료는 ctrl+c로 진행하면 되고, 데이터를 좀 더 간편하게 보기 위해서 vs 터미널 창의 휴지통 왼쪽의 split 아이콘을..

세감 서비스에서 Next.js14를 사용하기 때문에 Nextjs 공부를 진행하려 한다.감자 탈출기 On ... 인프런에서 이정환 님의 2024년 8월 기준으로 제작된 강의다!Next.js란?: React.js 전용 웹 개발 프레임워크(라이브러리X)로 react.js보다 더 강력하고 편하게 사용할 수 있는 기능들을 제공한다. 예를 들어, 페이지 라우팅, 빌트인 최적화 기능, 다이나믹 HTML 스트리밍 등의 기능이 추가되었다.: 리엑트에 비해 자유도는 낮지만 그만큼 웹개발에 있어 필요한 거의 모든 기능들을 제공한다. 렌더링1. JS 실행 : 자바스크립트 코드(React 컴포넌트)를 HTML로 변환하는 과정을 의미2. 화면에 렌더링 : HTML 코드를 브라우저가 화면에 그려내는 작업을 의미 사전 렌더링(Pre..