WEB14 [NEXT] 4강 에러 페이지, 환경 변수 + 6강 isFallback, getStaticPaths 타이틀 링크를 클릭하면 해당 주차 강의 코드가 정리된 깃허브로 연결됩니다. 4강 에러 페이지, 환경 변수 (Custom Error Page, Environment Variables) 에러 페이지 핸들링 404 에러 // pages.404.js import { Icon } from "semantic-ui-react"; export default function Error404() { return ( 404 : 페이지를 찾을 수 없습니다. ); } 기타 에러 - 클라이언트, 서버 측 에러 핸들링 가능 // pages._error.js function Error({ statusCode }) { return ( {statusCode ? `An error ${statusCode} occurred on server.. 2022. 5. 10. [NEXT] 3강 서버사이드 렌더링, 5강 정적 생성(Static Generation) 타이틀 링크를 클릭하면 해당 주차 강의 코드가 정리된 깃허브로 연결됩니다. 3강 서버사이드 렌더링 (Server-side Rendering/SSR/Dynamic Rendering) (5강 설명이랑 합침) Next.js: 모든 페이지 사전 렌더링 (Pre-rendering) 기본적으로 모든 페이지 pre-render 사전에 HTML 파일을 만든다는 의미 퍼포먼스 향상, SEO 안 하는 경우: 아무것도 렌더링 안 되다가 JS 파일 로드되면 보임 하는 경우: 사전에 초기 HTML 요소가 렌더링되고 JS 렌더링됨 효과 더 좋은 퍼포먼스 검색엔진최적화(SEO) 형태 둘의 차이점: html 파일 생성 시기 Static Generation: 정적 생성 [정적 생성]은 프로젝트가 빌드하는 시점에 html 파일 생성 모.. 2022. 5. 10. [NEXT] 1강 소개, 페이지 레이아웃 + 2강 Dynamic Routes, next/link 타이틀 링크를 클릭하면 해당 주차 강의 코드가 정리된 깃허브로 연결됩니다. 1강 소개, 페이지 레이아웃 npx create-next-app으로 설치 설치 시 앱 이름을 디폴트인 my-app으로 해줬다면 cd my-app → yarn dev 혹은 npm run dev로 실행 create-next-app 으로 설치하면 컴파일과 번들링이 자동으로 됨 (webpack 과 babel) 자동 리프레쉬 기능으로 수정하면 화면에 바로 반영 서버사이드 렌더링 지원 스태틱(정적) 파일 지원 자동 라우팅 지원: pages 폴더에 js 파일 만들면 자동으로 라우팅 적용됨. 다이나믹 라우팅 가능: pages/view/[id].js 생성 시 /view/[id] 라우팅. [id]에 아무거나 쳐도 인식됨. css 프레임워크 Sema.. 2022. 5. 9. [REACT] 변수를 사용한 JSX 조건부 (IF문) 렌더링 JSX(JavaScript + Xml) 내부에서는 if문을 쓸 수 없다. 쓸 수 있는 방법은 1. 삼항 연산자 사용 2. and 연산자 사용 3. 즉시발동함수 사용 이다. 1) 삼항 연산자 사용 가장 보편적으로 사용되는 방식이다. 조건 ? true일(조건을 만족할) 때 실행할 것 : false일 때 실행할 것 의 문법이다. import React from 'react'; const Hello = () { const yes = 1212; return ( yes === 1212 ? 보여줄 내용 : null ); } export default Hello; false일 경우 아무것도 안 보여주고 싶다면 null, 다른 걸 보여주고 싶다면 그걸 넣으면 된다. 이때 백엔드 내용을 변수로 받아올 때는 {}로 감싸줘야.. 2022. 3. 20. [REACT] 부모 컴포넌트로 자식 컴포넌트의 state 전달 자식과 부모 간 데이터 전달 관련 포스트는 많은데, 자식에서 부모로 전달할 때 useState를 부모에 쓰는 방법이 대부분이라 한참 찾다가 글을 쓰게 되었다. pagination을 구현하면서, 다른 페이지 버튼을 클릭하면 현재 페이지가 변화해야 하고, 변화할 때마다 재렌더링을 해야 현재 페이지가 변화한 것을 바로 시각화할 수 있다. 그런데 부모 컴포넌트에 state가 있으면 상태는 변화해도 뷰에 반영이 바로바로 안 되기 때문에 useState 함수는 자식 컴포넌트에 있으면서 자식 컴포넌트에서 변경된 상태를 부모 컴포넌트에 전달해 주어야 함 을 구현해야 했다. 부모 컴포넌트 import React from 'react' function MainPageList() { // 다른 코드 생략 // places에.. 2022. 3. 14. 지도, 우편주소, 구글로그인, 이미지 삽입, 토큰 로그인, 페이지네이션, qr 인식 관련 api 링크 모음 지도 api 사용법 (해당 위치 지도에 표시하는 법) 구글맵 사용하기 Api 인스톨해서 마커 찍기 화면에 구글맵 띄우고 dotenv로 키 숨기기 dotenv 사용법 마커 렌더링 현재 위치로부터의 거리 현재 위치 받아오기 우편번호 주소 api 실제사용렌더링 구글로그인...일반로그인... 구글로그인 구글로그인 버튼 만들기 공식문서 뭔가 자세한듯한 영어문서 토큰으로 로그인 유지하는 법 1 로그인 처리 이미지 삽입하는 방법 페이지네이션 qr 인식 큐알코드 스캔 공식문서 2022. 2. 16. 이전 1 2 3 다음
