DEVELOPMENT RECORD

특정 조건에 따라 다른 결과물을 렌더링하는 것을 의미한다. props 값에 따라 다른 뷰 설정하기 props 값에 조건부 렌더링을 설정할 때 크게 두 가지로 나눌 수 있다. 특정 뷰를 보여주거나 아예 숨기기 여러 뷰 중 하나의 뷰를 보여주기 1번 경우에는 && 연산자를 사용하는 것이, 2번 경우에는 삼항 연산자를 사용하는 것이 바람직하다. 출처 https://velog.io/@mnz/React-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%97%90%EC%84%9C-%EC%82%BC%ED%95%AD-%EC%97%B0%EC%82%B0%EC%9E%90%EC%99%80-%EC%97%B0%EC%82%B0%EC%9E%90-%EB%AA%A8%EB%91%90..

.env : 프로젝트를 하다 보면 google, kakao api key값 같은 민감한 정보를 관리햐야할때가 있다. 해당 정보를 그대로 노출하면 보안에 문제점이 생기기 때문에 이번 시간에는 env에 대하여 알아보자. React Api key값 관리하기 1. 환경변수 파일 설정 : 루트 경로에 .env파일을 만들어준다. src폴더 안에 만드는건 아니다! .env파일 안에는 원하시는 정보를 적자. 꼭 REACT_APP_으로 시작해야한다. REACT_APP_KAKAOMAP_API_KEY=key 입력 사용법 - jsx 안에서 사용하는 경우 {process.env.REACT_APP_KAKAO_API_KEY} - html같은 경우 %%사이에 넣는다. 서버 재시작 : 환경변수를 수정하고 나서는 서버를 재시작해야한다...

출처 https://cpro95.tistory.com/464 NextJS에서 환경변수 .env 사용하는 방법 NextJS는 기본적으로 환경 변수를 지원하고 있으며, 사용하기가 매우 쉽습니다. 환경 변수가 필요한 이유 환경 변수가 필요한 이유는 우리가 웹 애플리케이션을 만들 때 개발 모드(development mode)와 cpro95.tistory.com https://kyounghwan01.github.io/blog/React/next/basic/#import-style-component next.js 기본 개념 알아보기 next.js 기본 개념 알아보기, react, seo, ssr kyounghwan01.github.io

https://kyounghwan01.github.io/blog/React/next/basic/#app-tsx next.js 기본 개념 알아보기 next.js 기본 개념 알아보기, react, seo, ssr kyounghwan01.github.io

getStaticPaths : 데이터에 기반하여 pre-render때 특정한 동적 라우팅 구현 - Static Generation - 동적 라우팅이 필요하다면 getStaticPaths로 경로 리스트를 정의해야한다. 설정 export async function getStaticPaths() { return { paths: [ { params: { ... } } ], fallback: true or false }; } 속성 1) path paths는 동적 라우팅 경로를 pre-render한다. (ex. pages/posts/[id].js) params는 페이지 이름에 사용되는 매개변수와 일치해야 한다. 만약 페이지 이름이 pages/posts/[postId]/[commentId]라면, params는 pos..

getServerSideProps : 요청(request)아 있을 때 데이터를 불러옴 - SSR (Server Side Rendering) - pre-render가 꼭 필요한 동적 데이터가 있는 page에 사용 - 내용을 언제든 동적으로 수정이 가능 설정 : 어떤 페이지에서 getServerSideProps 함수를 async로 export하면, Next는 각 요청(request)마다 리턴되는 데이터를 getServerSideProps로 pre-render한다. export async function getServerSideProps(context) { return { props: {}, // 컴포넌트로 넘어갈 props } } context 속성 params - 만약 해당 페이지가 동적 라우팅이 사용된다..

getStaticProps : 언제 접속해도 데이터가 바뀔 일이 없을 때 사용 - Static Generation - 데이터가 유동적으로 패칭될 필요없이 고정된 값을 불러올 때 사용 ex) 블로그 게시글 등 - 수정 불가 - getStaticProps는 쓰기 까다로우니까 getServerSideProps를 주로 쓸 것! 설정 : 어떤 페이지에서 getStaticProps 함수를 async로 export하면, getStaticProps에서 리턴되는 props를 가지고 페이지를 pre-render 한다. export async function getStaticProps(context) { return { props: {}, // 컴포넌트로 넘어갈 props } } context 속성 params: 페이지의 ..

Layout : 공통된 레이아웃 컴포넌트를 만들고 각 페이지에서 사용 설정 : /components/layout.js 파일을 생성 1) children prop을 이용하여 Layout 컴포넌트 생성 : {props.children}을 지운다면, Layout 요소 안에 넣은 내용이 렌더링 되지 않는다. export default function Layout({ children }) { return {children} } 2) 생성한 layout 컴포넌트를 상위 컴포넌트로 감싸주면 된다. import Layout from '../components/Layout'; export default function Index() { return ( Hello Next.js ); } 출처 https://www.howd..

_error : 전역에서 Error 처리를 공통으로 사용 - Next에서 자체적으로 제공해주는 에러 태그는 서버와 클라이언트 모두에서 동작한다. - 404에러(not found)와 500에러(서버 에러)를 제외한 이외의 에러들은 _error.js 라는 파일명으로 커스텀한다. 설정 function Error({ statusCode }) { return ( {statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client'} ) } Error.getInitialProps = ({ res, err }) => { const statusCode = res ? res.statusCode : err ? err.statusCo..

_document : head 태그나 body태그 안에 들어갈 내용들을 커스텀할 때 활용 - _app.js 파일 다음에 실행 - title, description, meta 등 정보 제공 HTML 태그 작성 가능 - CSS-in-JS의 서버 사이드 렌더링을 위한 설정을 할 때 사용 설정 1) _document를 작성할 때는 Document 클래스를 상속받는 클래스 컴포넌트로 작성 - 렌더 함수는 꼭 , ); } } 3) _document는 언제나 서버에서 실행되므로 브라우저 api 또는 이벤트 핸들러가 포함된 코드는 실행되지 않는다. - 부분을 제외한 부분은 브라우저에서 실행되지 않으므로 이곳에 비즈니스 로직을 추가해서는 안되며, _app과 마찬가지로 getStaticProps와 getServerSide..