# next
[Next] Next.js 시작하기
Next.js 시작하기 📌 프로젝트 Setup Next.js는 create-next-app을 이용하여 어플리케이션을 생성하는 것을 권장합니다. create-next-app은 set up에 필요한 것들을 자동적으로 준비해줍니다. 만약 타입스크립트를 사용하고 싶다면
[node.js] 비동기 프로그래밍1 - generator(yield/next)
반복자를 사용할 수 있는 객체, 혹은 그 객체를 사용할 수 있는 함수이다.우리가 보통 사용하는 함수는 로직을 실행한 후 return을 통해 반환한 후, 재호출이 발생하기 전까지는 완전히 종료된다.그러나 generator는 종료의 개념이 아닌, 보류의 개념이다.yield
Python 03: Iterator and Generator
🤔 Let's talk about the difference between iteration and generation in Python and how to construct the Generators with the yield statement. Generators
Next.js의 Link Tag
코드 분할 및 프리페치 Next.js는 코드 분할을 자동으로 수행하므로 각 페이지는 해당 페이지에 필요한 것만 로드한다. > 홈페이지가 렌더링될 때 다른 페이지의 코드는 처음에 제공이 되지 않는다. 요청한 페이지의 코드만 로드하면 페이지가 격리된다. 특정 페이지에서
next에서 Head 설정
next에서 \_app.js 에 Head를 설정하는 방법은 아래와 같다.공식페이지에서는 component와 pages에 설정하라고 되어 있지만 반복적인 작업을 피하기 위해서 \_app.js에 추가함.Unable to use Head component with meta
next build시 eslint 에러
특별한 build 실패 에러가 안보이는데 eslint에러만 막 뜨다가 실패하는 경우엔 eslint때문에 빌드가 실패했다고 보면 된다. 이때는 빌드시 eslint를 무시하는 옵션을 넣어줘야 빌드가 된다.아래와 같이 next.config.js에 빌드 무시 설정을 넣어주면
Next JS Static Generation - fallback
Next JS에서 파라미터가 동적으로 바뀌는 페이지(ex - users/:userId)를 빌드타임에 생성하려면, 해당 페이지 컴포넌트에서 getStaticPaths + getStaticProps 함수를 export 해줘야한다.이 때, 어떤 path들에 대해서 정적 페이
Next JS Page Static Generation
Next JS에서는 각 페이지에 대해서 pre-rendering을 위해 SSR(서버 사이드 렌더링) 또는 SG(정적 생성) 옵션을 제공한다. 각각 페이지 컴포넌트에서 getServerSideProps, getStaticProps/getStaticPaths 함수 expo
Next JS - 0
NextJS의 구조. 이전 포스팅 CSR VS SSR 을 통해 SSR을 실행하기 위해 React의 대표적인 라이브러리 Next JS 를 시작하기에 앞서, 먼저 NextJs의 구조가 어떻게 되고 어떤 식으로 실제로 구현이 되는 지 정리하고자 합니다.
웹 개발자라면 알아야할 📖 - SSR , CSR
( ⚠️ 이 포스팅은 드림코딩님 을 기반으로 작성했습니다 )먼저 SSR을 알기 위해선 CSR을 알아야합니다. CSR 은 우리가 흔히 아는 SPA (React, Vue, Angular) 로 작성한 웹 페이지를 의미합니다. 사용자가 hello.com 사이트에 들어감.클라이
쉽게 따라하는 프론트엔드 웹 어플리케이션 패키지 최적화
본 포스트는 Next.js 기반 프로젝트의 트리셰이킹 진행 과정을 따라할 수 있도록 설명과 함께 정리한 글입니다. 비록 가능한 모든 최적화를 진행하지는 못했지만, 방법의 문제는 아니었으며 결과적으로 가장 중요한 페이지의 로딩 속도를 30% 가량 줄일 수 있었습니다.
# [Next.js] redux ,redux-saga 적용
6버전 이상 ~ ! 리액트에서는 단 하나의 리덕스 스토어만 존재한다.하지만, Next를 사용하는 순간 리덕스 스토어가 여러개가 될 수 있다. Next.js는 유저가 요청할때마다 redux store를 새로 생성한다. Next.js가 제공하는 getInitialProps
[7일차-2] 과제 복습.
작성자, 내용 등을 입력하여 버튼을 눌렀을 시 다음 화면에 해당 값들이 적용되야함. 주소는 해당 게시물의 ID가 나와야 함. 작성자, 제목, 타이틀 3가지 및 ID 주소 반영하기 과제.\*\*css는 수업 첫날 한거라 미숙함. 나중에 수정할 예정. 이렇게 나와야한다.
[7일차] codecamp 첫 주말/ 복습2
어제에 이어 두번째 페이지 만들기 도전.아직 완벽히 이해 안가는 부분도 있으나 일단은 따라해보며 파악해보자.버튼 클릭 시 결과화면에 띄우기 -> 데이터 조회 요청 -> query\-필요 기능 목록-통신 기능(조회) - API -> apollo -> usequery,
[6일차] codecamp 첫 주말/ 복습1
코드캠프 정규수업 일주일째가 끝나고 첫 주말이 찾아왔다.어제 수업이 이번주 배운 내용들의 전반적인 응용이었고 아직 숙지를 못한 부분이 있었기 때문에 오늘은 숙제 완료 후 어제 실습 내용을 다시 해보았다.데이터 입력 후 버튼을 누르면 작성한 이름명의 페이지로 넘어가면서
포스트 검색 기능
이번 시간에는 작성된 포스트 중 검색을 통해서 해당되는 포스트을 불러오는 기능을 정리한다.이번 개인 프로젝트에서는 작성한 포스트를 검색 기능을 구현해서 해당 포스트를 찾을 수 있도록 작업했다. 처음에는 없던 기획이었지만, back에서 라우터들을 만들고 해보니 한번 넣어
[Node-Express]Middleware/next - Final Project
Express 에서의 미들웨어 활용은 필수이다. 미들웨어를 활용하면 코드의 길이가 절반이상 줄어든다. 그리고 위 사진처럼 깔끔하게 정리하기도 용이하다.이번에 기록해두고 싶은건 콜백 next를 활용해 공통적으로 들어가는 응답처리를 미들웨어를 이용해 한번에 처리해주는 것이
