훈돌라

나는 이상하게 강의만 듣고 실전에 적용하기가 너무 어려운 것 같다. (강의를 이해하지 못하고 있는건가?) 강의에서 필요한 부분만 빼서 듣고 해설 강의를 보면서 진행 -> 완성한 후에 이해가 되지 않는 부분을 추가적으로 찾아보거나 지운 후에 다시 스스로 로직을 완성하는 학습법이 더 맞는 것 같다.. 개취니까..!  다행이라 해야할지, 그래도 해설을 보면서 진행하다 보면 어느정도 감이 잡힌다. 진행하면서 추가적으로 의문이 드는 부분은 강의를 돌려보거나 스스로 찾아보는 게 맞는 것 같다. 하다보면 " 아 내가 너무 어렵게 생각했구나,, " 하며 이마를 탁! 치는 경우도 있는 거 보면, 조금은 단순하고 자신있게 시작해도 될 것 같다. Next.js 에서 서버 컴포넌트와 클라이언트 컴포넌트는 각각 서버와 클라이언..

리덕스 툴킷(Redux Toolkit)은 리덕스(Redux) 상태 관리를 간편하고 효율적으로 만들기 위해 공식적으로 제공되는 패키지이다. 기존의 리덕스는 설정 과정이 복잡하고, 보일러플레이트 코드가 많아서 초기 학습 곡선이 가파르다는 단점이 있다. 리덕스 툴킷은 이러한 문제를 해결하고자 등장하였다. 간편한 설정import { configureStore } from '@reduxjs/toolkit';import rootReducer from './reducer';const store = configureStore({ reducer: rootReducer,}); 리덕스 툴킷은 configureStore 함수를 제공하여 스토어 설정을 간소화한다. 이 함수는 미들웨어 설정, 리듀서 결합, 디버깅 도구 통합 등..

특징 서버 사이드 렌더링(SSR): Next.js는 서버에서 초기 HTML을 생성하여 클라이언트로 전달한다. 이로 인해 페이지 로드 시간이 단축되고 SEO가 향상된다. 정적 사이트 생성(SSG): 빌드 타임에 HTML을 생성하여 클라이언트에 전달한다. 정적 파일이므로 빠른 로딩 속도를 제공하고, CDN을 통해 쉽게 배포할 수 있다. 자동 코드 분할: 페이지 단위로 코드를 분할하여 초기 로딩 시간을 줄이고, 필요한 페이지를 로드할 때만 관련 코드를 불러온다. 라우팅: 파일 시스템 기반의 라우팅을 제공하여 별도의 라우팅 설정 없이 파일을 추가하면 자동으로 라우팅이 설정된다. API 라우트: API 엔드포인트를 쉽게 설정할 수 있어 서버리스 함수나 간단한 백엔드 로직을 구현할 수 있다. 기능페이지 생성: pa..

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 웹 애플리케이션의 성능과 SEO(검색 엔진 최적화)를 향상시키는 데 중점을 둔다. 서버 사이드 렌더링(SSR): 각 요청마다 서버에서 페이지를 렌더링하여 클라이언트에게 HTML을 전달. 이를 통해 초기 로딩 속도가 빠르고, SEO에 유리 정적 사이트 생성(SSG): 빌드 시 모든 페이지를 미리 생성하여 정적 파일로 제공하므로, 빠른 페이지 로딩 속도와 간편한 배포가 가능 파일 기반 라우팅: 파일 시스템을 기반으로 자동으로 라우트를 생성함. pages 디렉터리에 파일을 생성하면, 해당 파일 이름이 URL 경로가 됨 API 라우트: API 엔드포인트를 간단하게 설정할 수 있음. pages/ap..

Zustand Zustand는 React 애플리케이션을 위한 작고, 빠르고, 확장 가능한 상태 관리 라이브러리입니다. "Zustand"는 독일어로 "상태"를 의미하며, React 애플리케이션의 상태를 관리하는 데 초점을 맞추고 있습니다. 간단하고 유연한 API를 제공하여 전역 상태를 관리하는 데 용이하며, 최소한의 설정으로 강력한 기능을 제공합니다. Zustand의 주요 특징 간단한 사용법: Zustand는 직관적인 API를 통해 쉽게 상태를 정의하고 사용할 수 있다.작은 크기: Zustand는 가벼워서 애플리케이션의 성능에 거의 영향을 미치지 않는다.불변성 유지: Zustand는 상태를 불변하게 관리하여 React의 재렌더링을 효율적으로 처리한다.미들웨어 지원: 로깅, 퍼시스턴스 등 다양한 미들웨어를 ..

CountriesApi.tsapi 호출import axios from "axios";export const CountriesApi = async () => { try { const response = await axios.get("https://restcountries.com/v3.1/all"); return response.data; } catch (error) { console.error("컨트리 못 불러옴", error); throw error; }}; try 블록 내에서 axios.get 메서드를 사용하여  https://restcountries.com/v3.1/all 로 GET 요청을 보낸다.이 요청이 성공하면, 응답 데이터 (response.data)를 반환한다.요청..