# nextjs
NEXT JS Custom Server
기본적으로 nextjs 에서의 url의 params 접근은 쿼리스트링을 이용한다. 그 이유는 pages의 폴더의 각 js파일마다 접근 하는데, "/id/1"의 깔끔한 url을 사용하고 싶으면, 맵핑을 해줘야 한다. 그렇지 않으면 pages/id/1.js를 찾아가기 때문
Next.js의 장점 (2)
동적 라우팅 계속해서 동적 라우팅에 대해서 이야기 해보도록 하겠다. 가령 게시판을 만든다고 가정했을 때, 특정 게시글 페이지로 이동하게 되면 그 때 URL은 어떻게 구성되어야 할까? http://localhost:3000/posts/4 posts 페이지의 4번
NEXTjs Redux, styled-component 적용하기
일단 초기셋팅으로 globalStyle, redux, redux-thunk를 적용한다.먼저 \_document에 globalstyle을 적용하고 나중에 있을 라이브러리 적용을 위해 customdocument를 만든다. styled-component를 이렇게 적용하는 이
Next.js 시작하기
SSR과 Code Splitting 을 지원하는 react 프레임워크이다.아래는 공식문서에서 밝히는 특징이다.Server-rendered by defaultAutomatic code splitting for faster page loadsSimple client-sid
[Next.js] 왜 Link 태그를 사용할 수 없죠? 삐빅 대소문자 문제입니다
<You should only use "next/router" inside the client side of your app.> & <There are multiple modules with names that only differ in casing.>
Next.js의 장점 (1)
사실 이러한 Next.js의 장점들은 사실 잘 와닿지 않는다. 물론 본인이 Customer들을 대상으로 하는 대외적인 서비스를 만들고자 한다면 SEO는 분명 진지하게 생각해볼만 한 일이긴 하지만, 나는 일반적으로 회사 내에서 사용하는 서비스들을 만들기 때문에... S
Next.js
나는 회사에 들어오면서 거의 처음으로 자바스크립트를 접하게 되었다. 그러다가 React라는 라이브러리에 대해 알게 되었고 이를 통해 작업을 하던 중, 팀 선배에게 Next.js라는 프레임워크를 소개 받게 되었다.이에 따라 Next.js를 사용하면서 생기는 이슈들이나 정
[Next.js] 프로젝트 기초 세팅하기 - ESLint, Prettier 는 필수!
Next.js 프로젝트에서 ESLint, Prettier 설정하기. ESLint Airbnb config 적용하기.
next.js 프로젝트 초기설정하기
본 글에서는 다음을 다룹니다. next.js 는 SSR 을 사용할 수 있게 해주는 모듈입니다. React.js에 SSR을 이용해 SEO(Search Engine Optimization)을 적용할 수 있게 해주며 SEO가 적용된 프로덕트는 구글과 같은 사용자가 많이 사용
NEXT.js : 초기세팅 & 기본 설명 #2
앞서 1편 포스팅에서 \_document.js 파일에 대해 설명할 때 reset.css 와 common.css를 적용하는 법을 함께 언급하였다. \_document.js는 HTML 초기설정 파일정도로 생각하면 될것 같다. Next, react에서는 HTML문서를 작성
Next js 구동방식 과 getInitialProps
Next js가 React Project의 SSR을 가능하게 한다. 라고는 하는데, 어떤 방식으로 SSR을 가능하게 할까, SSR과 CSR의 구분은 어떻게 되어 있을까.이 궁금증을 해결하기 위해, 먼저 알아야 할 것은 Next js의 구동방식 이라고 생각한다.최초에 N
NEXT.js : 초기세팅 & 기본 설명 #1
NEXT.js? next.js는 리액트 서버사이드렌더링(Server Side Randering, SSR) 프레임워크로 다음과 같은 기능 & 장점이 있어 많이 사용되고 있다. 1. 검색앤진최적화(Search engine Optimization, SEO) 2. 빠른 첫페이
웹서비스 개편중 겪는 일들
별 수 있나 월급쟁이가 사장이 시키면 해야지..현재 서비스는 앵귤러로 한번 외도했다가 지금은 Nodejs 기반에 ejs 템플릿으로 구동되고 있다. 뭐 나름 괜찮게 돌아가고 있고 내가 합류해서 서비스의 뷰를 좀 볼만하게 만들어놨고 전담 퍼블리셔가 합류하여 한번 더 업그레
Next.js 라우팅
Next.js의 라우팅에 대해서 적어볼거에요. 요즘 팀프로젝트를 하면서 NEXT를 쓰게 됐거든요. 그래서 기록을 남길겸 혹시 도움 될까 싶어서 써봅니다ㅎㅎㅎ일단 NEXT 프로젝트를 셋팅해야겠죠?을 사용하여 초기세팅을 해줍니다!아니면 직접 세팅할 수도 있어요!!을 입력해
Next js_getInitialProps
Next js에서 데이터를 가져오기 위해서는 'getInitialProps'라 불리는 비동기 함수를 이용한다. async 함수로 'pages' 폴더 아래 어떤 페이지에서든 'static method'처럼 이용할 수 있다.fetch를 통해 받아온 데이터를 'props'로
CHAPTER1. 프로젝트 생성하기
Nextjs 와 graphql 을 사용해보자 mkdir (project-name) 프로젝트 파일 생성 cd (project-name) 프로젝트 파일 이동 yarn init -y package.json 생성 및 업데이트 yarn 을 설치해야 사용 가능 -y : package.json default 생성하는 옵션 package.json 추가 tsc ...
SPA에서의 SSR과 CSR
이 글은 SPA(Single Page Application)에서의 SSR과 CSR을 비교하기 위해 작성되었다(편의를 위해 반말 사용). - 최근 수정: 2019. 09. 22 초기 View 로딩 속도 먼저 전통적인 SSR과 CSR의 가장 큰 차이 중 하나인 '초기 View 로딩 속도'를 살펴보도록 하자. 전통적인 SSR의 경우에는 View를 서버에서 ...
NextJS는 왜 쓰는 걸까?
이 글을 쓰기 전에 NextJS에서 제공하는 Quick Start를 따라 간단한 예제를 구현한 경험이 있었다. 하지만, 그저 쓰면 좋다고만 알았지, NextJS를 왜 써야하고 무엇을 위해 존재하는지를 알지 못했기 때문에 이번 기회를 통해 제대로 NextJS를 사용한다는 것이 무엇을 의미하는지를 이해하고 입문해보려 한다. 더불어 지금 회사에서 인턴 생활을...
[아주 짧은 글] Next.js에서 ScSS파일 sourcemap 기능 사용하기!
영어 실력이 빈약해서 그런지 간단한 기능같아 보이는데 찾지를 못하고 sourcemap이 되어 있지 않은 scss파일로 작업을 계속 했는데, 아무래도 불편하다고 느껴져서 다시 한 번 찾아보니까 아래와 같이 하면 되는 것이었다.