React13 [Next.js] Routing Groups(경로 그룹) app 디렉토리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑되지만, 의도적으로 해당 폴더가 URL 경로에 포함되지 않도록 할 수 있다. Convention(컨벤션) 경로 그룹은 폴더 이름을 괄호로 묶어 생성할 수 있다.(ex: (folderName)) URL 경로에 영향을 주지 않고 경로 구성하기 아래 구조에서 (marketing)과 (shop)은 URL 경로에서 제외된다. URL 경로에서 제외되더라도, 아래 구조처럼 내부에 layout.js 파일을 추가해 서로 다른 레이아웃을 적용할 수 있다. Opting specific segments into a layout(특정 세그먼트를 레이아웃으로 선택하기) 특정 경로를 레이아웃으로 선택하려면 새 경로 그룹(ex: (shop))을 생성하고 동일한 레이아웃을.. 2023. 9. 24. [SWR] 무한스크롤 구현할 때 useSWRInfinite에서 항상 첫 페이지를 다시 불러오는 문제 문제 React에서 SWR 사용중 무한스크롤을 구현할 때, useSWRInfinite를 써서 구현할 수 있다. 이 때, 네트워트탭을 보면 이상한 점이 보인다.(중간 sentry는 무시) 이미지를 보면 최초 1페이지를 요청 후, 스크롤을 내려 2페이지를 요청할 때, 또 1페이지를 부른다. 그 후 3페이지를 요청할 때도 마찬가지로 1페이지를 다시 요청한다. (왜 그러지..?) 원인 SWR 깃허브의 유사한 이슈들과 공식 문서를 확인 결과, SWR에서는 관련된 옵션을 제공하고 있었다. revalidateFirstPage revalidateFirstPage 옵션은 무한스크롤 요청시마다 첫 페이지의 유효성을 검사할건지를 선택하는 옵션이며, 기본적으로 true로 활성화 되어있다. 예를 들어, 1페이지를 요청 후 2페.. 2023. 9. 16. [Next.js] Defining Routes(라우트 정의) 라우트 생성 Next.js는 폴더 자체가 라우트를 정의하는 파일 시스템 기반 라우터를 사용한다. 각 폴더는 URL 세그먼트 에 매핑되는 라우트를 나타내며, 폴더를 서로 중첩해서 중첩 라우트를 구현할 수 있다. 라우트에 액세스할 수 있도록 page.ts 파일을 사용하며, page.ts는 각 라우트의 루트이다. 위 예시에서 /dashboard/analytics에는 page.ts 파일이 없으므로 엑세스 할 수 없다. UI 생성 각 라우트에 대한 UI를 생성하기 위해 일반적으로 page.ts 파일을 사용하며, 여러 라우트의 공용 UI를 생성하기 위해서는 layout.ts 파일을 사용한다. 예를 들어, Next.js에서 첫 번째 페이지를 만든다고 하면, app 폴더 내부에 page.ts 파일을 생성하고 해당 컴포.. 2023. 8. 11. [Next.js] Getting Started - Installation(설치하기) Next.js 공식문서 바로가기 Next.js 설치하기 React의 CRA와 유사하게 간편 설치할 수 있으며, 자동 설치와 수동 설치가 있다. 자동 설치 자동 설치의 경우, 명령어로 설치 후 기본적인 폴더 구조가 자동으로 생성된다. npx create-next-app (프로젝트명) 설치 시 아래와 같은 프롬프트가 표시된다. Would you like to use TypeScript? (타입스크립트 사용 여부) Would you like to use ESLint? (eslint 사용 여부) Would you like to use Tailwind CSS? (테일윈드 사용 여부) Would you like to use `src/` directory? (src 폴더를 사용할지 여부) Would you like .. 2023. 8. 2. [Next.js] Getting Started Next.js를 시작하며 조금 더 디테일한 구현을 위해, 공식 문서를 학습 목표로 삼아 번역하는 개인 스터디입니다. Next.js ? Next.js는 React의 서버사이드 렌더링 구축을 위한 프레임워크이다. 번들링, 컴파일 등의 도구들을 추상화하고 자동으로 구성하며 애플리케이션 구축에 집중할 수 있게 해준다. 주요 기능 Routing 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터 Rendering 클라이언트/서버 컴포넌트를 사용한 렌더링. 서버의 정적/동적 렌더링을 더욱 최적화할 수 있다 Data Fetching React 컴포넌트의 async/await 지원과 웹 플랫폼과 일치하는 fetch API를 통해 간소화된 데이터 불러오기 가.. 2023. 7. 30. React 환경 변수 설정 React 환경 변수 설정 React 개발 시 환경 변수로 분리되는 값들이 있는데, 이 환경 변수들은 .env 파일을 생성해 값을 설정하여 사용할 수 있다.(React에서는 REACT_APP_ 키워드가 앞에 붙은 변수들만 환경 변수로 사용 가능하다) // .env 파일 예시 REACT_APP_ENV=development REACT_APP_API_BASE_URL=https://url GENERATE_SOURCEMAP=false .env 설정을 마치고 나면 React에서는 설정했던 변수명을 아래와 같이 가지고 올 수 있다. const BASE_URL = process.env.REACT_APP_API_BASE_URL; .env의 우선 순위 env 파일은 우선순위를 가지고 있는데, .env가 가장 마지막으로 적.. 2023. 6. 2. AWS CodePipeline 환경 변수 세팅 1. AWS → CodePipeline에 접속해서 설정하고자 하는 파이프라인 선택 2. 해당 파이프라인 오른쪽 위 편집 버튼 클릭 3. Build 단계 스테이지 편집 클릭 (등록 설정에 따라 명칭은 다를 수 있습니다.) 4. + 작업추가 버튼 왼쪽 아래의 편집 아이콘 클릭 (X 버튼 왼쪽 위치) 5. 환경 변수 항목에서 환경 변수 추가 클릭 6. 변수명(이름)과 값을 작성 후 최하단 저장 버튼 클릭 2023. 6. 2. iframe 내부 스크롤 위치 감지하기 React에서 iframe 사용하기 iframe은 외부 파일을 중첩으로 삽입하는 것이기 때문에 별도의 환경으로 취급되어 React에서 일반적인 방법으로 컨트롤 할 수가 없지만, window.postMessage 메서드를 활용하면 상호작용 가능하다. 아래는 외부 html 파일을 삽입했고, 외부 파일의 스크롤을 감지하여 React 컴포넌트에 이벤트를 줘야하는 상황에 대한 해결책이다. window.postMessage() postMessage()는 다른 윈도우나 프레임으로 메시지를 안전하게 전달하는 데 사용되며, 부모와 자식 프레임, 또는 다른 도메인 간에도 통신할 수 있다. 두 가지의 매개변수가 있다. 1. message: 전송할 데이터: 문자열, 객체, 숫자 등 모든 형태 데이터 2. targetOrigi.. 2023. 6. 1. netlify 커스텀 도메인 연결하기 1. netlify.com 접속 후 왼쪽 사이드 메뉴의 Sites 클릭 후 도메인을 연결할 사이트 클릭 2. 왼쪽 사이드 메뉴의 Site settings → Domain management → Domains 클릭 3. Production domains 항목 하단에 있는 Add a domain 버튼 클릭 4. 아래 입력창에 타사(카페24, 가비아 등)에서 구매한 도메인을 입력하고, 아래 Add domain 클릭 5. 도메인을 등록했으면, 이제 구매한 도메인 업체 사이트에 로그인해서 네임서버를 변경 netlify의 네임서버는 도메인 등록 후 확인 가능하며, 3번 항목에서 등록한 도메인을 클릭하면 노출(카페24의 경우, 호스팅 로그인 후 도메인관리 → 해당 도메인을 선택하고 네임서버 변경 클릭 후 netlif.. 2023. 5. 27. react-hook-form + yup으로 효율적인 폼 관리하기 react-hook-form 공식 문서 yup 공식 문서 react-hook-form + yup react-hook-form은 사용자로부터 데이터를 수집하는 form을 좀 더 효율적으로 관리할 수 있도록 도와주는 라이브러리. 비제어 컴포넌트 방식으로 구현되어 있어 렌더링 이슈를 해결가능하며, yup은 form의 유효성 검증을 도와주는 라이브라리이며 주로 react-hook-form과 함께 사용한다. 설치 yarn add react-hook-form yup @hookform/resolvers yup 세팅 우선 유효성 검증을 하기위한 schema를 세팅한다. import * as yup from "yup"; const schema = yup.object({ id: yup .string() .required(.. 2023. 3. 25. 이전 1 2 다음