NYchicken's blog ;

오랫동안 미뤄뒀던 프로젝트를 시작하려고한다. 사용할 기술 스택을 정리하는데 Next.js 13 이 beta에서 stable 이 되어 해당 버전을 사용하기로 했다! Nextjs12 버전과는 차이가 있기 때문에 이부분을 한번 정리하고 넘어가려고 한다. 💡 Next.js 는 리액트 문법을 사용하는 프론트 + 백엔드 프레임 워크이다. 1. /pages 폴더 삭제 /app 폴더 신규 생성 예약된 폴더명을 통해 주로 사용되는 기능 추가 가능 [이전] 기존 /pages 폴더 내부에 원하는 경로명으로 폴더를 생성해 페이지를 생성 (각각의 파일이 개별적인 경로가 되었었음) [현재] page.tsx 파일이 url을 나타내도록 변경되었음 /app 하위에 page.tsx 로 지어진 파일만 경로로 인식되어 접근 가능함 이전에는..

Library 란? 사용자가 파일 이름이나 구조등을 정하고, 모든 결정을 내린다. 공통으로 사용될 만한 유용한 기능을 모듈화해서 제공하는 것이다. 코드의 자율성이 높지만, 다른 개발자와 협업시 이 자율성이 문제가 될 수도 있어 반드시 협의가 필요하다. -> React.js Framework 란? 파일 이름이나 구조등 정해진 규칙에 따라 만든다. 기능뿐만 아니라 프로그래밍 방식도 규칙으로 제한해, 개발의 생산성을 높이고, 유지보수를 편하게 도와준다. 자율성은 낮지만, 다른 개발자들과 협업시 유지보수 및 개발 방식 통일이 용이해진다. -> Next.js, Vue.js, Nuxt.js create react-app 을 사용하게되면 App Component 로 시작하게 된다. 우리는 이때 Components 폴..

📌 _app.js 파일을 만들자. 무조건 저 이름이어야한다. _app 은 서버로 요청이 들어왔을 떄 가장 먼저 실행되는 컴포넌트이다. 페이지에 적용할 공통 레이아웃의 역할을 한다. import '../styles/globals.css' function MyApp({ Component, pageProps }) { return } export default MyApp 여기서 Component 속성값은 서버에 요청한 컴포넌트들이다. import "../styles/globals.css"; import NavBar from "../components/NavBar"; function MyApp({ Component, pageProps }) { return ( // 공통 Navigation 설정 ); } expor..

Next.js 에서는 특별한 방법으로 css 를 사용할 수 있다. 바로 Module. 🍎 CSS Module 파일 만들기 원하는 위치로 가서 모듈을 만들자. 이름.module.css 그리고 이 모듈을 사용할 곳으로 가자. 🍎 CSS Module 연결하기 사용해줄 파일에 module css 파일을 import 해온다. 그리고 쓴다! import Link from "next/link"; import { useRouter } from "next/router"; // css 모듈 사용하기 import styles from "./NavBar.module.css"; export default function NavBar() { return ( // 이렇게 중괄호 안에 자바스크립트 객체의 포로퍼티 형식으로 작성한다...

우리는 페이지를 이동할 때 태그를 이용한다. 하지만 NextJs 에서 페이지를 이동하려고 한다면 에러가 뜨고만다. 안뜰수도 있지만... React 에서 React Router Link 를 사용해야 하는 것처럼 NextJs도 페이지를 이동할때는 특정 컴포넌트를 사용해야한다. 태그를 사용해 페이지를 이동하게 된다면 페이지 전체가 새로고침되는 것을 볼 수 있다. 이는 CSR (Client Side Rendering) 네비게이션이 없다는 것인데, CSR 은 사용자의 행동에 따른 필요한 부분만 다시 읽어들이기 떄문에 필요한 부분만 리로딩 없이 서버로부터 값을 받아 화면을 갱신한다. 다른 페이지로 이동하기 위해서는 전체 페이지를 새로고침해야 한다는 것이다. 이때 발생하는 문제로는 페이지 로딩이 느려 보일수 있고, ..

앞의 포스팅을 잘 따라해 Nextjs 프로젝트를 문제없이 생성했다면 이런 파일구조를 가진 폴더가 생긴다. 🥨 Pages Next.js에서 page는 pages 디렉터리의 .js, .jsx, .ts, .tsx 파일로부터 export된 React Component 이다. 각 페이지는 그들의 파일 이름을 기반으로 route 된다. 별도의 React router Dom 을 다운 받을 필요도 없고, 설정도 안해도 되고, router 안만들어도 되고, 컴포넌트도 import 해야하고... 굉장히 편리하다! 따라해보자. pages 안에 들어있는 각 컴포넌트들은 하나의 페이지로 사용된다. 참고로 앱의 홈은 기본적으로 index.js 이다. 🥨 Next.js 의 Rendering 🍳 알고가야하는 개념(1) CSR (Cl..

NextJs 는 React 의 프레임워크이다. 서버사이드렌더링 (SSR) 을 쉽게 구현할 수 있도록 도와준다. 공식 홈페이지에서는 - 직관적인 페이지 기반 라우팅 (동적 라우트 지원) - 각 페이지 마다 사전 렌더링, SSG(Static Generation)과 SSR(Server Side Rendering) 페이지 단위 지원 - 빠른 페이지 로드를 위한 자동 코드 분할 - 최적화된 프리패칭을 갖춘 클라이언트 사이드 라우팅 - 내장 CSS 및 SCSS 지원, 다른 CSS-in-JS 라이브러리에 대한 지원 - 개발 환경에서 빠른 새로고침 지원 - 서버리스 Functions 를 사용한 API 엔드 포인드 빌드 - 넓은 확장성 이라고 한다. 엄청나... 빠르고 쉽게 NextJs 로 프로젝트를 만들어 보자! Ne..