dev-hpk 님의 블로그

next.config.js는 Next.js 프로젝트의 설정 파일로, 다양한 옵션을 통해 애플리케이션의 동작을 조정할 수 있습니다. redirects 옵션을 사용하면 특정 URL 요청을 다른 URL로 리다이렉트 하도록 설정할 수 있습니다. 목차   1. Redirect란? 2. Redirect 설정 방법 3. Redirect 예시 4. Redirect 주의사항추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Redirect란?redirects는 사용자가 특정 URL에 접근했을 때, 다른 URL로 요청을 자동으로 전환하는 기능입니다. 예를 들어, 페이지 경로가  /list에서 /products라고 바뀐 경우 list로 들어오는 요청을 /products로 보낼 때 사용합니다.Next.js의 리다이..

Next.js에서 라우팅은 주로 파일 기반 라우팅 시스템을 통해 이루어지며, 이는 다른 프레임워크들과 비교해 매우 직관적이고 효율적입니다. 목차   1. 파일 기반 라우팅 2. 동적 라우팅 3. 동적 경로 라우팅 4. Link 컴포넌트를 통한 라우팅5. useRouter 훅을 사용한 프로그래밍 방식 라우팅위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 파일 기반 라우팅Next.js의 가장 큰 특징 중 하나는 파일 기반 라우팅입니다. 페이지를 라우팅 하려면 단순히 pages 폴더 안에 파일을 생성하는 것만으로 새로운 경로가 자동으로 생성됩니다.  위와 같은 방식으로, pages 폴더에 파일을 추가하면 Next.js가 자동으로 해당 파일을 라우트로 매핑해 줍니다.라우터는 중첩 파일을 지원합니다. 중..

Next.js는 React 기반의 오픈소스 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 방식을 지원하며, 현대적인 웹 애플리케이션을 쉽고 빠르게 개발할 수 있도록 설계되었습니다. 목차 1. Next.js 특징 2. Next.js 설치 및 프로젝트 생성 3. Next.js 실행 4. Next.js 폴더 구조추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Next.js 특징1. 서버 사이드 렌더링 (SSR)Next.js는 서버에서 HTML을 렌더링 하여 클라이언트로 보내는 SSR을 지원합니다. 이를 통해 SEO(검색 엔진 최적화)에 유리하며, 초기 로딩 속도가 향상됩니다.2. 정적 사이트 생성 (SSG)정적 사..

React로 컴포넌트를 만들다 보면 디자인이 바뀌어 컴포넌트를 재사용할 수 없거나, 처음 계획가 달리 컴포넌트의 구조가 복잡해지는 경우가 있습니다. 이로 인해 코드의 가독성이 떨어지거나 새로운 컴포넌트를 만들게 됩니다. 컴파운드 컴포넌트 패턴(Compound Components Pattern)을 사용하면 이와 같은 문제를 해결할 수 있습니다. 목차 1. Compound Component Pattern? 2. 주요 개념 3. 예제 및 문제점 4. Compound Component Pattern 적용 예시 5. Compound Component Pattern 사용 예시위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Compound Component Pattern?Compound Component P..

구성 요소를 재사용 가능하게 만드는 방법은 render prop 패턴을 사용하는 것입니다. render prop은 JSX 요소를 반환하는 함수입니다. 컴포넌트 자체는 render prop 외에는 아무것도 렌더링 하지 않습니다. 대신 컴포넌트는 자체 렌더링 로직을 구현하는 대신 render prop을 호출하기만 합니다. 1. Render Prop VS Children PropChildren Prop 사용Render Prop 사용 Redner Prop을 직접 사용해 보니 더 의문이 생긴다. children과 구조나 결가에서 큰 차이가 없는 것 같은데, 왜 Render Prop을 사용해야 할까? 2. Render Prop과 Children Prop의 값(데이터) 처리Render Prop의 인자로 값(데이터)을..

1. 애플리케이션 추가 및 키 발급 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com위 주소에서 애플리케이션을 등록하고 로컬 환경을 도메인으로 추가했다.  키도 발급 완료했으니 공식 문서를 보면서, 화면에 지도를 띄워보겠습니다. 2. 지도를 그리는 JavaScript API 불러오기index.html에 직접    서버를 실행시켜 확인해 보니, 내 api key가 개발자 도구에 그대로 노출되고 있었다. 3. API Key env로 관리하기API Key를 Github이나 서버에서 개발자 도구로 확인하지 못하게 하기 위해 .env에서 환경변수로 관리하기로 ..

1. 프로젝트 생성터미널을 이용해 프로젝트를 생성합니다.npm create vite@latest ts_project -- --template react-ts 위 명령어에서 ts_project는 프로젝트 폴더 이름입니다. 원하는 이름으로 변경할 수 있습니다.프로젝트 폴더가 생성되었다면 폴더로 이동 후 패키지를 설치합니다.cd ts_projectnpm install 설치가 완료되면, 프로젝트의 기본 구조와 주요 파일들이 자동으로 생성됩니다. 2. 프로젝트 구조Vite와 TypeScript 템플릿을 사용해 생성된 프로젝트는 기본적인 파일 구조가 설정되어 있습니다.src: 소스 코드가 포함된 폴더로, 컴포넌트와 유틸리티 파일들을 여기에 배치합니다.assets: 이미지, 아이콘, 폰트 등 정적 파일을 저장하는 폴..

목차 1. Vite 2. React 3. TypeScript 4. Vite + React + TypeScript 장점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. ViteVite는 최근 많은 개발자들 사이에서 주목받고 있는 빌드 도구입니다. 기존의 Webpack을 대체하는 대안으로, 빠른 빌드 속도와 개선된 개발 환경을 제공합니다. Vite를 선택한 이유는 다음과 같습니다.빠른 개발 서버 : Vite는 코드 변경 시 전체 프로젝트를 다시 빌드하는 대신, HMR( 핫 모듈 리플레이스먼트)를 통해 변경된 부분만 빠르게 업데이트하기 때문에 개발 서버가 매우 빠릅니다. 이로 인해 개발 중에 빠른 피드백을 받을 수 있어 생산성이 크게 향상됩니다.ES 모듈 기반 : Vite는 ES 모듈을 기반으로 ..

throttle과 IntersectionObserver API를 활용하여 Infinity Scroll을 라이브러리 없이 구현했습니다. 직접 구현하면서 여러 모듈을 조합하여 성능을 최적화하고, 부드럽게 데이터를 로드하기 위해 상당한 고민이 필요했습니다. 특히 throttle로 스크롤 이벤트를 제어하고, IntersectionObserver로 뷰포트 내 요소가 감지될 때만 데이터를 추가 요청하도록 구성한 부분이 핵심이었습니다. 1. IntersectionObserver 적용 Infinity Scroll 구현...function ScrollComponent() { ...생략 const endRef = useRef(null); // Infinite Scroll 구현을 위한 Ref 객체 /** * 서버에..

1.  프로젝트 생성https://github.com/hpk5802/Fandom-K GitHub - hpk5802/Fandom-KContribute to hpk5802/Fandom-K development by creating an account on GitHub.github.com 2. 폴더 구조 contexts : 전역으로 사용할 state를 관리하는 폴더hooks : 커스텀 훅을 관리하는 폴더mock : api 연동 전 사용할 mock 데이터를 관리하는 폴더pages : 화면에 렌더링 될 Page를 관리하는 폴더router : 라우팅을 관리하는 폴더style : 스타일 시트를 관리하는 폴더utils : 기능들을 관리하는 폴더3. 기술 스택ReactJavaScriptSCSS