728x90 반응형 SPA/Next37 [Next] Data Fetching에 대해 알아보기 (3) - ISR 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 세 번째인 ISR에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR [Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing 들어가기에 앞서 Next 공식문서에 따르면 Next의 Data Fetching의 종류에는 다음과 같이 있습니다. SSR SSG CSR Dynamic Routing ISR 그리고 이번 글에서는 ISR에 대해 알아보도록 하겠습니다. ISR - 기본 ISR은 Incremental Static Regeneration의 약자로 Dynamic Routing의 이점을 가져가며 단점을 보완하기 위해 .. 2023. 2. 20. [Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 두 번째인 SSG와 Dynamic Routing에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR 들어가기에 앞서 Next 공식문서에 따르면 Next의 Data Fetching의 종류에는 다음과 같이 있습니다. SSR SSG CSR Dynamic Routing ISR 그리고 이번 글에서는 SSG와 Dynamic Routing에 대해 알아보도록 하겠습니다. SSG SSG는 Static-site generation의 약자로 특정 페이지에서 fetching이 이루어져야 할 데이터들을 build 단계 때 prerendering 하여 props로 사용함으로 써 페.. 2023. 2. 17. [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 첫 번째인 CSR과 SSR에 대해 적어보는 시간을 가져보려고 합니다. Data Fetching에 대해 알아야 하는 이유 최근 Next에 대해 하나, 둘 배워가면서 Next를 제대로 활용하지 못하고 있었다는 것을 깨닫게 되었습니다. 그중 하나가 Data Fetching에 관련된 것입니다. React대신 Next를 사용하는 개발자분들의 95% 이상은 SSR 때문일 것이라고 생각합니다. 그리고 저 또한 어떤 사람이 "React대신 Next를 왜 사용하냐?"라고 묻는다면 당연히 "SSR 때문에 사용합니다."라고 말할 것입니다. 그런데 만약, 다음 질문으로 "API를 통해 서버로부터 가져온 데이터들은 어떻게 SSR에 활용될 수 있냐?" 라고 묻는.. 2023. 2. 12. [Next] next-sitemap 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 next-sitemap 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. sitemap이란? sitemap은 구글, 네이버와 같은 검색 사이트들의 크롤링 봇들에게 우리 서비스에서 사용할 수 있는 사이트 주소를 알려주기 위해 활용합니다. 그러면 검색 사이트들의 크롤링 봇들에게 사이트 주소를 알려주는 이유에 대해 궁금증이 생길 수 있습니다. 이 질문에 대한 이유는 우리가 운영하는 서비스가 사용자들의 검색어에 많이 노출되어 더 많은 사용자가 유입될 수 있도록 도와주기 때문입니다. 하지만 상황에 따라서 우리 서비스의 특정 사이트 주소는 외부에 노출되면 안 되는 것이 존재할 수 있습니다. 즉, 검색 사이트의 크롤링 봇들이 특정 사이트에 대한 정보를 크롤링하는것을 막.. 2023. 2. 8. [Next] 하위 경로 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 하위 경로 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 하위 경로 사용 방법 React에서 하위 경로를 사용할 땐 Router에 /board/:no와 같이 등록하여 사용하곤 합니다. 만약 Next에서도 위와 같은 경로를 사용하고 싶다면 파일 구조를 활용해야 되고 다음과 같은 파일 구조를 구성하면 위와 같은 경로를 사용하는 것과 동일한 결과를 만들어냅니다. 또한 위의 예시에서 필요한 사항은 no로 넘어온 값을 확인할 수 있어야 합니다. no 값을 확인하기 위해서는 [no].tsx 파일 안에서 useRouter를 이용하여 다음과 같이 query값을 조회해보면 됩니다. import { useRouter } from 'next/router'; import *.. 2022. 6. 27. [Next] 환경 변수(.env) 타입을 설정하여 자동 완성 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 환경 변수(.env) 타입을 설정하여 자동 완성 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 해당 방법은 TypeScript를 사용할 때만 적용이 가능하기에 참고 부탁드립니다. 자동 완성 설정 방법 [Next] 환경 변수(.env) 사용하기를 참고하시면 Next에서 환경 변수 사용 방법을 확인할 수 있습니다. 그리고 .env나 next.config.js에 설정한 변수를 사용하기 위해 코드를 작성하고자 하면 자동 완성이 되지 않기에 자연스럽게 입력한 변수 값의 이름을 Copy & Paste를 하는 자기 자신을 확인할 수 있습니다. 이런 불편함을 제거하기 위해 환경 변수를 위한 타입을 설정하여 자동 완성할 수 있도록 해보겠습니다. [ 1... 2022. 4. 16. [Next] Production에서 Console 출력 제거하기 안녕하세요. J4J입니다. 이번 포스팅은 production에서 console 출력 제거하는 방법에 대해 적어보는 시간을 가져보려고 합니다. console 출력 제거 방법 [ 1. 패키지 설치 ] $ npm install babel-plugin-transform-remove-console [ 2. babel 설정 ] root경로에 .babelrc 파일을 생성한 뒤 다음 내용을 입력해주면 됩니다. { "presets": ["next/babel"], "env": { "production": { "plugins": ["transform-remove-console"] // console 출력 제거 } } } 테스트 테스트를 위해 index.tsx 파일을 다음과 같이 간단하게 작성해봤습니다. import * as.. 2022. 4. 10. [Next] AG Grid 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 AG Grid 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 AG Grid에서 제공해주는 여러 기능들 중 기본적인 기능들만 다뤄보려고 합니다. 추가적인 상세 내용이 필요하신 분들은 공식 문서를 참고하시면 좋을 것 같습니다. 기본 설정 [ 1. 패키지 설치 ] $ npm install ag-grid-react ag-grid-community [ 2. 기본 코드 작성 ] 기본적인 구조를 가지는 코드를 base.tsx 파일을 생성하여 작성해보겠습니다. import * as React from 'react'; import { NextPage } from 'next'; import 'ag-grid-community/dist/styles/ag-gr.. 2022. 4. 3. [Next] 정적 이미지 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 정적 이미지 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 정적 이미지 사용하는 방법 [ 1. public 폴더 생성 ] root 경로에 다음과 같이 public 폴더를 생성해줍니다. [ 2. images 폴더 생성 ] 만들어진 public 폴더 하위 경로에 다음과 같이 images 폴더를 생성해줍니다. 여기서 만들어지는 images 폴더는 파일 이름을 달리 네이밍해도 무방합니다. 그리고 만들어진 폴더 내부에 이미지를 넣어놨습니다. [ 3. 이미지 사용 파일 ] img태그의 src에서는 public 폴더 내부에 있는 경로를 /를 통해 접근할 수 있습니다. 그러므로 위와 같이 폴더를 생성해뒀다면 img태그의 src에 "/images/friends.png".. 2022. 3. 20. [Next] 환경 변수(.env) 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 환경 변수 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. .env 파일 활용 Next에서 환경 변수를 사용하는 방법은 첫 번째로 .env 파일이 있습니다. React를 이용해서도 주로 사용하는 방식이 .env 파일이 있는데 Next도 동일한 방법으로 환경 변수를 사용해줄 수 있습니다. 사용 방법은 다음과 같습니다. [ 1. .env 파일 생성 ] root경로에 .env 파일을 다음과 같이 생성해줍니다. [ 2. 변수 작성 ] 그리고 .env 파일에 변수를 사용할 때는 변수 앞에 "NEXT_PUBLIC_"을 입력해줘야 합니다. 변수 앞에 해당 문자열이 포함되지 않을 경우 Next에서는 환경 변수 값인지를 인지하지 못하기 때문에 정상적으로 사용되지 않습니다.. 2022. 3. 19. [Next] 구글 로그인 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 구글 로그인 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다른 로그인도 구현해보고 싶은 분들은 다음 글들을 참고하시면 좋을 것 같습니다. [Next] 카카오 로그인 구현하기 [Next] 네이버 로그인 구현하기 구글 로그인 설정 [ 1. 구글 클라우드 플랫폼 사이트 로그인 ] Google Cloud Platform에 접속하여 로그인해주시면 됩니다. [ 2. 프로젝트 생성하기 ] 사이트에 접속을 했다면 상단 바에 프로젝트 선택이라는 메뉴가 존재합니다. "프로젝트 선택 → 새 프로젝트" 순서대로 클릭을 하면 다음과 같이 프로젝트 정보들을 입력하여 만들어줄 수 있습니다. [ 3. 애플리케이션 등록 ] 프로젝트를 생성 완료했으면 좌측 메뉴바에서.. 2022. 3. 2. [Next] 네이버 로그인 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 네이버 로그인 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 로그인도 구현해보고 싶은 분들은 다음 글들을 참고하시면 좋을 것 같습니다. [Next] 카카오 로그인 구현하기 [Next] 구글 로그인 구현하기 spring과 함께 로그인을 구현하는 방법에 대해 궁금하신 분들은 다음 글을 참고하시면 좋을 것 같습니다. [Next] Naver 로그인 Spring을 활용하여 구현하기 네이버 로그인 구현 방법 [ 1. 네이버 디펠로퍼 사이트 로그인 ] Naver Developers에 접속하여 로그인해주시면 됩니다. [ 2. 내 애플리케이션 등록하기 ] 상단 메뉴에서 "Application → 애플리케이션 등록" 을 다음과 같이 확.. 2022. 3. 1. [Next] 카카오 로그인 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 카카오 로그인 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 로그인도 구현해보고 싶은 분들은 다음 글들을 참고하시면 좋을 것 같습니다. [Next] 네이버 로그인 구현하기 [Next] 구글 로그인 구현하기 spring과 함께 로그인을 구현하는 방법에 대해 궁금하신 분들은 다음 글을 참고하시면 좋을 것 같습니다. [Next] Kakao 로그인 Spring을 활용하여 구현하기 카카오 로그인 구현 방법 [ 1. 카카오 디벨로퍼 사이트 로그인 ] Kakao Developers에 접속한 뒤 로그인을 해주시면 됩니다. [ 2. 내 애플리케이션 등록하기 ] 로그인을 하면 우측 상단에 내 애플리케이션이라는 메뉴가 보일 것입니다. 클.. 2022. 2. 27. [Next] Styled Components 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Styled Components 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Styled Components 사용 방법 [ 1. 패키지 설치 ] $ npm install styled-components $ npm install -D babel-plugin-styled-components // typescript 사용할 경우 추가 $ npm install -D @types/styled-components [ 2. babel 설정 ] root경로에 .babelrc 파일을 생성하여 다음과 같은 설정을 해주시면 됩니다. { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", .. 2022. 1. 11. [Next] Editor 사용하기 (3) - React Draft Wysiwyg 안녕하세요. J4J입니다. 이번 포스팅은 React Draft Wysiwyg Editor 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글도 참고해보시면 좋을 것 같습니다. [Next] Editor 사용하기 (1) - React Quill [Next] Editor 사용하기 (2) - Toast UI 앞선 글들에서 언급했듯이 Next에서 Editor를 사용해보기 위해 다음과 같은 총 3개의 패키지를 확인할 수 있었습니다. react-quill @toast-ui/react-editor react-draft-wysiwyg 이번엔 개인 순위로 3등으로 생각했던 react-draft-wysiwyg에 대해 소개를 해보겠습니다. 구현 방법과 간단한 특징들에 대해 적어보겠습니다. 이미지.. 2022. 1. 9. [Next] Editor 사용하기 (2) - Toast UI 안녕하세요. J4J입니다. 이번 포스팅은 Toast UI Editor 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글도 참고해보시면 좋을 것 같습니다. [Next] Editor 사용하기 (1) - React Quill [Next] Editor 사용하기 (3) - React Draft Wysiwyg 앞선 글에서 언급했듯이 Editor를 사용해보기 위해 다음과 같이 총 3개의 패키지를 찾을 수 있었습니다. react-quill @toast-ui/react-editor react-draft-wysiwyg 이번에는 이들 중 현재 사용했을 때 두 번째로 괜찮다고 생각한 @toast-ui/react-editor에 대해 소개를 해보겠습니다. 간단한 사용 방법과 제가 경험할 수 있었던.. 2022. 1. 7. [Next] Editor 사용하기 (1) - React Quill 안녕하세요. J4J입니다. 이번 포스팅은 React Quill Editor 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글도 참고해보시면 좋을 것 같습니다. [Next] Editor 사용하기 (2) - Toast UI [Next] Editor 사용하기 (3) - React Draft Wysiwyg Next를 사용하면서 Editor를 구현해야 하는 상황이 생겨 사용할 수 있는 Editor를 찾고 테스트해본 결과 다음과 같이 3개의 패키지를 찾을 수 있었습니다. react-quill @toast-ui/react-editor react-draft-wysiwyg 3개를 전부 깊게 사용해보지 않았지만 테스트 코드만 구현해봤을 때 사용성에 있어서 괜찮다고 생각한 순으로 작성해봤습니.. 2022. 1. 6. [Next] 타입 스크립트 개발환경 구축하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 Next에도 React의 CRA와 동일한 것이 존재합니다. 다음 명령어를 이용하면 Next에 타입 스크립트가 얹어있는 환경을 제공해주기는 합니다. $ npx create-next-app --ts {프로젝트 명} 하지만 저는 기본적으로 나만의 환경을 구축하는 것과 CRA 사용으로 몰랐던 여러 설정 방법을 경험하고 싶다는 이유 등으로 CRA를 사용하지 않고 프로젝트 개발 환경을 구축하고는 합니다. 저와 동일하거나 또는 다른 사유로 인해 CRA로 프로젝트를 생성하고 싶지 않으신 분들은 다음의 절차를 따라 환경을 세팅하시면 될 것 같습니다. [ 1. package.json.. 2021. 12. 30. 이전 1 2 3 다음 728x90 반응형
