FrontEngineer JungBam

404 처리하기 위해서 notFound 컴포넌트를 활용하기! 기본적으로 next.js에서는 경로가 잘못되면 404페이지를 제공한다. next 13.3버전 이후에는 app 경로에 있는 not-found.tsx 파일로 404페이지를 커스텀 할 수 있도록 바뀌었다. 404를 제외하고도 개발자가 처리할 수 있는데 next/navigation에 notFound함수를 import 해서 활용할 수 있다. import { notFound } from "next/navigation"; export default function Home() { notFound(); return ; } notFound() 함수를 호출하면 아래와 같이 네트워크 창에서 404에러를 발생시키는 것을 알 수 있다. notFound() 함수는 자신..

리액트로 개발을 하다가 next.js로 개발을 시작하면 가장 크게 와닿는 부분이 바로 라우팅 방식이다. 리액트는 자체적으로 라우팅을 제공하지 않기 때문에 react-router-dom을 활용하여 라우팅을 하지만 next.js는 이전 12버전까지는 pages 디렉토링을 통해, 13버전부터는 app 디렉토링을 통해 라우팅 기능을 제공한다. next.js에서 기본적으로 제공되는 라우팅 방식이 어떤지 확인해보자. 라우팅이 뭔데? 아주 쉽게 말하면 우리가 브라우저 주소창에 적는 경로를 의미한다. 예를 들어, 도메인/contact/next 주소로 접속을 하려고 하면 서버에서는 contact/next 라는 api에 맞는 화면을 제공하는 것을 이야기한다. 리액트에서는 Route 라는 컴포넌트의 path 속성을 통해서 ..

create-next-app을 만들면 아래 사진과 같이 초기 설정에 대한 물음이 나온다. 아래 물어보는 것들에 대한 대답이 기본값이 되어있는데 여기에서 하나 눈에 띄는 것은 내가 next.js 12버전으로 배웠을 와는 달리 tailwind css에 대한 질문과 App Router에 대한 질문이 추가되었다. npx create-next-app@latest src/ 디렉토리를 사용할것인가에 대한 차이가 궁금해서 각각 만들어봤을때, 그냥 app이 root에 생기는지 아니면 src/app으로 생성되는지의 차이일 뿐이었다.(아래그림 참조) 기존에 12버전으로 프로젝트를 만들다가 이번에 정리를 하면서 13버전을 공부하다보니 왜 13버전을 사용해야하지? 라는 근본적인 궁금증이 생겼다. 1. 라우팅 방식의 변화 : p..

티스토리 오픈 API를 활용하여 게시글에 대한 데이터베이스로 활용하는 경우 백엔드 개발자와 함께 오픈 API를 DB로 활용하기 => 서버에서 해당 글 id에 대해서 유저와 매칭을 하고 매칭된 티스토리 글 id값을 기억했다가 보내주는 방식으로 구현 가능 1. 글을 작성했을 때 넘어오는 response값에서 postId를 그 글의 id로 유저테이블에 매칭해서 저장 { "tistory":{ "status":"200", "postId":"1", "url":"http://informationjunk.tistory.com/1" } }​ 2. 프론트에서 해당 글에 대한 정보를 요청하면 서버에서 티스토리 API를 활용하여 티스토리에서 글에 대한 정보를 가져옴. 아래가 티스토리 API에서 글 내용을 가져왔을 때의 값이면..

보호되어 있는 글입니다.

next.js에서 jest로 테스트를 하기 위한 초기 설정을 알아보자. 1. package.json 의존성에 아래 라이브러리 추가하고 npm install 하기 ** msw 는 서버 요청에 대한 모킹을 하기 위해 추가한 라이브러리 "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", "jest": "^29.6.1", "jest-environment-jsdom": "^29.6.1", "msw": "^1.2.2", 2. root 폴더에 아래 두가지 설정 파일 추가 // jest.config.js const nextJest = require("next/jest"); const createJestConfig = nextJest(..

next.js는 리액트의 프레임워크! 그렇다면 리액트는? 라이브러리(UI, 상태관리, 라우팅 등에 대한) 그럼 먼저 프레임워크와 라이브러리의 차이에 대해서 알아봐야겠군! 프레임워크와 라이브러리의 가장 큰 차이는 제어 흐름의 소유권을 누가 갖고 있는지! 즉, 개발자가 제어 흐름의 소유권을 갖고 단지 도구로 가져다 쓰는 것이라면 라이브러리, 개발에 대한 구조와 규칙이 제공되어서 개발자가 그것에 맞춰서 코드를 작성해야한다면 프레임워크라고 할 수 있다. 두 개의 개념을 찾다보면 철근뼈대가 잡혀있는 건물안에서 건물을 짓고 있는 그림과 망치를 들고 있는 그림을 자주보는데 이처럼 구조가 잡혀서 그 안에서 작업을 하는 것을 프레임워크라고 생각하면 되고, 망치처럼 필요할 때 꺼내서 사용할 수 있는 것을 라이브러리라고 생..

React-native로 개발하던 중 프로필 이미지 작업을 하다가 React-native에서 기본적으로 제공하는 Image 컴포넌트보다 성능을 최적화 할 수 있는 FastImage 컴포넌트에 대해서 알게 되었다. 어떤 차이점이 있는지 살펴보고 어떤 상황에 어떤 컴포넌트를 사용하는 것이 좀 더 좋을지 고민해보자. 웹 성능최적화에서와 마찬가지로 프론트엔드에서 직접적으로 성능에 많은 영향을 미치는 것이 바로 이미지이다. 이미지를 효율적으로 로딩되도록 구현하여 성능을 최적화하는 것은 프론트엔드 개발자에게는 필수적인 덕목이다. 이러한 점에서 FastImage와 Image 컴포넌트를 비교해보자. Image와 FastImage에 대한 각각의 공식문서 내용을 정리해보면 아래와 같다. Image 컴포넌트 Image 컴포..