나의 개발 기록지

저번주 이력서 넣은 회사 중 한 곳에서 면접을 본 뒤 기술과제를 받아서 하게 되었다.기술 과제자체는 난도가 높진 않았다. TodoList 만들기였는데필수로 넣어야 할 기능들이 몇 가지 존재하는 정도였다.프런트와 백엔드 둘 다 작성해서 사용한 곳에서 면접을 본 뒤 기술과제를 받아서 하게 되었다. 기술 과제자체는 난도가 높진 않았다. TodoList 만들기였는데 필수로 넣어야 할 기능들이 몇 가지 존재하는 정도였다. 프런트와 백엔드 둘 다 작성해서 사용해서 만들어봤다.백엔드로 지원한 회사에서 사용하는 기술을 사용해보고 싶었으나이사한 지 얼마 되지 않은 시점이라 개인 사정상 시간이 많지 않아서 Express를 사용해 봤다.지금 Next를 공부 중이라 Express가 빨리 구현가능할 것 같아서 해봤는데 필수조건..

Next.js 13 이상에서 **use server**는 Server Actions를 사용하는 함수에서 해당 함수가 서버에서 실행되어야 함을 명시하기 위해 사용되는 선언입니다. 기본적으로 Next.js는 컴포넌트를 서버 컴포넌트(Server Component)로 처리하지만, Server Actions는 함수 단위에서 클라이언트와 서버의 동작을 분리하기 때문에 명시적으로 선언해야 합니다.use server를 사용하는 이유1. 명확한 서버 실행 보장Next.js 컴포넌트는 기본적으로 서버 컴포넌트로 동작하지만, Server Actions는 클라이언트와 서버 간의 상호작용을 처리할 수 있는 특수한 함수입니다.이러한 함수가 클라이언트에서 실행되지 않도록 보장하려면, use server를 사용하여 해당 함수가 서..

Next에서 가장 많이 헷갈릴 것 같은 파일 이름마다 갖는 고유한 특성을 작성해둔 뒤 종종 보면서 작업해야할 것 같다. 1. page.js역할: 페이지를 구성하는 파일로, 특정 경로를 렌더링합니다.위치: app/ 디렉토리 하위에 위치.특징:URL 경로에 매핑되며, 각 파일은 고유한 페이지를 생성.예: app/about/page.js → /about 경로로 매핑.2. layout.js역할: 페이지나 하위 경로에서 공통으로 사용되는 레이아웃을 정의.위치: app/ 디렉토리에서 사용.특징:하위 경로에 있는 모든 page.js에 공통 레이아웃을 제공.React의 children을 사용하여 중첩된 내용을 표시.예: app/layout.js → 모든 경로에 공통 레이아웃 제공.3. loading.js역할: 페이지나..

특정 경로의 값을 동적으로 처리할 수 있는 라우팅 방식, 리액트와 사용 방법이 다르다. 기본적으로 Next.js는 폴더 라우팅이다. 그래서 동적 라우팅도 방식이 다르다.처음 접할 때 생소하기도 하고 이상한 구조라서 당황했지만 간단하다. 폴더 구조 예시 (동적 라우팅) 📌 설정 방법: [id] 폴더 생성 후 page.js 작성post 폴더 안에 **[id]**라는 폴더를 생성해당 폴더에 page.js 파일을 작성id라는 동적 변수를 경로에서 받아와 사용할 수 있습니다.이게 무슨말이냐면 post라는 페이지는 이미 생성됐다. 폴더 라우팅이 되어있으니. post/1 들어가면 그것도 나온다.post/2 이것도 당연히 나온다.id 내부에 작성한 page.js에 작성한 코드를 토대로 화면에 잘 뿌려지고Next.js..

Next에서는 리액트처럼 리액트 라우터 같은 라이브러리를 사용하지 않고 폴더 기반 라우팅이라는 방식을 사용한다. Next.js의 경로 추가 방식 (폴더 기반 라우팅) 폴더와 파일을 만드는 것만으로 라우팅이 자동으로 설정된다. app/page.tsx → / (루트 경로)app/about/page.tsx → /about 경로app/products/page.tsx → /products 경로app/products/details/page.tsx → /products/details 경로 ✅ 폴더 생성만으로 경로 추가되는 이유 Next.js의 **App Router (13버전 이후)**는 폴더 구조를 기반으로 자동으로 라우팅을 생성합니다.page.tsx 파일이 해당 경로의 페이지 컴포넌트로 인식됩니다. ✅ 경로 이동..

Next.js에서는 서버 컴포넌트라는 새로운 개념이 도입되었다. 처음에 내가 이해한게 긴가민가해서 메모를 하며 이해해야할 것 같다. React와 Next.js의 주요 차이점 - React : 브라우저에서 모든 자바스크립트가 실행된다. 즉 클라이언트 사이드 렌더랑 (CSR) 방식으로 작동된다. - Next.js : 서버 컴포넌트와 클라이언트 컴포넌트를 분리해서 사용할 수 있다. 서버 컴포넌트란? 서버에서 실행되는 컴포넌트Node.js 환경에서 실행된다. -> 따라서 콘솔을 찍으면 터미널에서 출력이된다. (페이지에서 관리자 도구로 확인해도 나타나지않는다.)브라우저에 자바스크립트를 거의 전달하지 않는다. -> 성능 최적화가 좋다. (페이지 로딩이 빠르다)데이터베이스 접근, API호출, 보안 로직에 적합하다. ..

action은 리액트 라우터 6버전 이후부터 생긴 폼 제출 처리를 도와주는 메서드다.페이지 전환 없이 데이터를 서버로 전송하고 성고적으로 데이터 전송이 완료되면 페이지를 리다이렉트하는 데 사용한다. 예제 코드 (강의 일부) Main.jsximport React from 'react'import ReactDOM from 'react-dom/client'import './index.css'import { createBrowserRouter, RouterProvider } from 'react-router-dom'import NewPost, { action as newPostAction} from './routes/NewPost'import RootLayout from './routes/RootLayout'i..

리액트 라우터에서 6버전 이상부터 생긴 loader기능 데이터 로딩 메커니즘으로 페이지가 렌더링 되기 전에 데이터를 불러오는 기능을 제공한다. 이를 활용해 사용자가 페이지에 접근할 때 필요한 데이터를 미리 로드 후 바로 데이터를 컴포넌트에서 사용 가능하다. Loader 사용하는 이유데이터 미리 가져오기 : 페이지가 렌더링 되기 전 데이터를 불러와 준비한다. (컴포넌트보다 빨리 데이터를 불러옴)SEO 친화적 : 페이지를 렌더링할 때 데이터를 이미 확보해 완전한 페이지 제공클린 코드 : useEffect와 상태 관리를 최소화하여 데이터 로딩 로직을 라우터 레벨에서 분리.기존에 리액트는 클라이언트 사이드 렌더링에서 loader를 사용하면 서버 사이드 렌더링처럼 사용해볼 수 있다. 사용 예제 (강의 내용 일부 ..