072DATA

Next.js에서 라우팅Next.js에서 페이지 이동을 하는 방법은 파일(폴더) 기반 라우팅임먼저 구조와 요소에 대해서 알아야 함구조와 요소Tree계층 구조를 시각적으로 보기 위한 규칙 (위 -> 아래)임DOM Tree도 같은 구조를 가짐, 큰 틀SubTreetree의 한 부분임. root부터 시작하고 leaf들에 이르기까지의 범위Roottree 또는 subtree의 첫 번째 부분임. root layout처럼 가장 첫 번째 노드, 요소Leafchildren이 없는 마지막 노드, 요소URL 관련 용어 정리URL은 크게 도메인과 Path 부분으로 나뉨URL Segment슬래시로 분류된 URL path의 한 부분임URL Path, Pathname앞에 있는 도메인을 제외한 뒷 부분에 있는 전체임File Syst..

Next.js: High-Quality 웹 애플리케이션High-Quality란?성능SSR(서버 사이드 렌더링) 및 SSG(정적 사이트 생성)를 통해 초기 로드 시간 단축코드 스플리팅과 이미지 최적화로 런타임 성능 향상코드 스플리팅 예시*import React, { Suspense, lazy } from 'react';const LazyComponent = lazy(() => import('./LazyComponent'));function App() { return ( Loading...}> ); } export default App;SEO ->  Search Engine Optimization (웹..

오늘은 TypeScript를 학습하는 과정에서 TodoList를 만들었으며 그 과정을 기록해도록 하겠습니다. 프로젝트 세팅 TypeSript 프로젝트 생성은 생략하며, 먼저 API 요청을 하기위해서 JSON 서버를 Install 합니다npm install json-server  설치를 완료한 뒤 root 경로에 db.json 파일을 추가하여 키와 값을 입력합니다, 형식은 아래와 같습니다!{ "todos": [ { "id": "1", "text": "할 일 1", "completed": false } ]}  또 원할한 프로젝트 구현을 위하여 json-server 명령어를 .pakage.json의 scripts에 추가합니다 "scripts": { //... ..

타입이란?타입은 값의 속성이나 메서드를 참조하는 방법 주요 타입boolean: 참/거짓을 표현number: 숫자 값string: 문자열 값Array: 배열object: 객체any: 아무거나 -> 치트키 같은 존재 사용하면 사실상 js가 되어버림커스텀 타입 선언타입은 기본 제공 타입 외에도 사용자 정의 타입을 선언할 수 있음 type Profile = { id: string; name: string; age: number; isMarried: boolean;} 함수의 타입 선언함수의 매개변수와 반환 값에도 타입을 선언할 수 있음 function add(a: number, b: number): number { return a + b;}const sum: number = add(1, 2);  타입 별..

타입스크립트란?타입스크립트 -> 자바스크립트를 기반으로 한 정적 타입 언어  타입스크립트의 주요 특징  정적 타입 시스템 -> 프로그램이 실행되기 전에 모든 변수와 함수의 타입을 확인하고 고정하는 방식 컴파일 타임에 모든 변수와 표현식의 타입을 확인하고 고정하여 런타임 오류를 방지함함수의 매개변수와 반환 값에 타입을 명시하여 잘못된 타입의 데이터가 전달될 경우 컴파일러가 이를 감지하고 오류를 발생시킴자바스크립트의 상위 집합:자바스크립트의 모든 기능을 포함하고 있기에 자바스크립트 코드가 타입스크립트에서 그대로 동작함자바스크립트로 트랜스파일되며 모든 브라우저에서 실행될 수 있는 자바스크립트 파일을 생성함향상된 개발 경험:코드 자동 완성, 실시간 오류 감지, 리팩토링 지원 등 다양한 도구를 통해 개발 경험을 ..

Toast란? Toast는 화면의 특정 위치에 잠깐 나타났다가 사라지는 간단한 알림 메시지를 제공하고사용자에게 빠르게 정보를 전달하거나 작업의 피드백을 제공하기 위해 사용됨 특징 일정 시간 동안만 화면에 표시된 후 자동으로 사라짐에러, 성공, 경고 등의 간단한 상태 메시지를 전달하는 데 적합함팝업과 달리 사용자의 작업을 방해하지 않으며 인터랙션이 필수가 아님 커스텀 상단, 하단, 왼쪽, 오른쪽 등 화면의 어느 위치에 표시할지 설정할 수 있음토스트 메세지가 사라지는 시간을 설정할 수 있음필요에 따라 사용자가 수동으로 닫을 수 있도록 닫기 버튼을 추가할 수 있음 사용 예시 성공 메시지: 데이터 저장, 사용자 로그인 등 성공적으로 작업이 완료되었을 때.에러 메시지: 네트워크 오류, 잘못된 입력 등 실패한 작업..

공부하다보니 상태 관리 라이브러리에 대해서 정리하면 도움이 될 것 같아서 정리해보려고 한다  상태 관리의 필요성리액트에서는 컴포넌트의 상태를 props와 state를 통해 관리하는데다음과 같은 상황에서는 효율적인 상태 관리가 어렵다.여러 컴포넌트가 동일한 상태를 공유해야 하거나 상태 구조가 복잡해질 때.컴포넌트 트리 구조에서 상태를 여러 단계에 걸쳐 전달해야 할 때 (prop drilling이라고 함).로그인 정보나 테마 설정 등 전역에서 사용되는 상태를 관리할 때.이러한 문제를 해결하기 위해 상태 관리 라이브러리를 사용함각 라이브러리마다 특징과 장단점을 가지고 있고프로젝트에 알맞은 도구를 선택하는 것이 중요하다고 생각한다  Context API Context API는 리액트에 내장된 상태 관리 기능인데..

오늘은 useSuspenseQuery(그리고 React Suspense)와 ErrorBoundary를 사용하여비동기 데이터를 요청할 때 로딩과 에러 처리를 효율적으로 다뤄보겠슨비다. useSuspenseQuery 란..? React Suspense와 Tanstack Query를  함께 사용하여데이터 로딩 상태를 관리하는 훅입니다. useQuery와 비슷하지만 Suspense와 함께 작동합니다.기본적으로 Suspense에서 로딩 상태를처리하고 useSuspenseQuery는  성공적인 응답 데이터를 반환할 때까지컴포넌트의 렌더링을 중단하는 역할입니다!  여기서 React Suspense는 비동기 데이터를 가져올 때 동안 UI를 렌더링하지 않고 대기하는 기능입니다따라서 Suspense를 사용하여 로딩중이라는..

오늘은 팀원분이 구현해주신 로그인 기능에서 로그인된 유저의 정보를 props로 전달하지 않고zustand를 사용하여 유저의 정보를 전역 상태로 관리하는 과정을 기록해볼게요 API 요청export const login = async (userData) => { const response = await axios.post(`${API_URL}/login`, userData); return response.data;}; 로그인 핸들러 const handleLogin = async (formData) => { try { const loginData = await login(formData); localStorage.setItem("accessToken", loginData.acces..

북마크 구현하기  북마크 기능을 구현하기 위해서 유저가 게시물에 북마크를 누르면 해당 게시물에 유저 아이디를 담아서 내가 누른 북마크의 데이터를 불러오고이미 눌러진 북마크에 대해선 UI를 북마크 취소로 변경시켜 UX를 향상 시킬 수 있도록 구현하기로 했다  원래 게시물에 유저의 아이디를 담는 형태가 아닌 유저에 게시물을 담는 형태가 일반적이지만캠프에서 제공되는 데이터 베이스에 유저의 정보를 관리하고 있기 때문에 게시물에 담아북마크 데이터를 관리할 수 있도록 이 방법을 사용했다. 게시물 불러오기const fetchPlaces = async () => { try { const response = await axios.get(API_URL); return response.data; } catch..