# nextjs

38개의 포스트
post-thumbnail

nextjs 페이지 전환 애니메이션 주기

새로운 프로젝트를 시작하기전 사용할만한 리소스를 찾고있던 중에라우팅시 화면 전체가 부드럽게 나타나게 할수는 없을까 하다가 react-transition-group이라는 라이브러리를 발견했고 사용법에 대해 기록하려고한다.nextjs에서 기본적으로 pages directo

1일 전
·
0개의 댓글

[next.js] Link로 props 전달하기

Link로 prop 전달하는 법

2020년 11월 17일
·
0개의 댓글

NextJS : 클라이언트 렌더링 단계에서 모듈 불러오기

window 객체를 사용하는 자바스크립트 모듈의 경우 nextjs 에서 import 할때 오류가 생긴다. nextjs 는 서버사이드렌더링(SSR)을 하는데, window 객체는 클라이언트가 있어야 생기는 거라 그런듯.useEffect 훅을 이용해 클라이언트사이드렌더링(

2020년 11월 13일
·
0개의 댓글

NextJS 에서 map method 문제

.map 메소드 사용시 렌더링할 요소에 key 값을 안넣어주면 렌더링이 안된다.위와 같은 경우 array 안의 요소들이 렌더링되지 않는다.위와 같이 key 에 index 를 할당하니 렌더링이 됐다.버그인건지 아니면 react나 nextjs 에 규칙이 추가된건지 아니면

2020년 11월 1일
·
0개의 댓글
post-thumbnail

nextjs github 페이지 배포 + 커스텀 도메인 적용

nextjs 로 만든 static 웹페이지를 gh-pages 로 배포하고, namecheap 에서 구입한 커스텀 도메인을 적용시키자.깃허브 repo 를 만들어 놓고, 로컬에서 remote 연결해 둔다. env-config.js 와 next-config.js 파일을 프로

2020년 10월 25일
·
0개의 댓글
post-thumbnail

socket.io 채팅 5분만에 만들기!🚀

https://socket.io/docs/rooms/ 글을 참고했습니다.너무 간단하다. join이라는 이벤트가 들어오면 룸 아이디를 join 하고 방의 인원들에게 참여했다는 메시지를 뿌려준다.chat이라는 이벤트가 들어오면 룸 전체에 채팅 메시지를 뿌려준다.유

2020년 10월 4일
·
0개의 댓글

[NextJS] NextJS 관련 사이트

React, Next and Typescript #1 설치

2020년 9월 15일
·
0개의 댓글
post-thumbnail

[Electron] Electron 운영체제에 따른 디버깅과 app.getPath()

Electron 프로젝트를 진행하면서 가장 헤맸던 부분은 디버깅이었다. s3에서 다운 받은 파일을 로컬에 저장하는 과정에서 개발/운영 모드, 운영체제에 따라 코드를 다르게 작성해야하는데 Electron에 대해 자세히 몰랐던터라 미흡한 점이 많았다 :( 디버깅(De

2020년 8월 31일
·
0개의 댓글
post-thumbnail

[Electron] Electron의 IPC 통신 - ipcMain과 ipcRenderer

안녕하세요 :) 오늘은 Main과 Renderer 프로세스의 통신, <span style="background-color: Electron에는 ipcMain, ipcRenderer라는 두 가지 IPC 모듈이 있습니다.ipcMain와 ipcRenderer은 각 Ma

2020년 8월 30일
·
2개의 댓글
post-thumbnail

[Electron] Electron의 main과 renderer 프로세스

이전 게시글에서 Electron과 Nextron에 대해 간단히 알아봤습니다! Electron은 JavaScript, html, css를 사용하여 <span style="background-color: Electron에서 메인 프로세스는 main 스크립트를 실행하는

2020년 8월 23일
·
0개의 댓글
post-thumbnail

[Electron] Electron에 Next.js까지?! Nextron 설치 및 폴더 구조

[ Node.js를 기반으로 javascript를 사용하여 데스크탑 App을 만드는 플랫폼 ] 자주 사용하는 사진 앱인 'SNOW 스노우'로 예를 들어볼께요 : ) 데스크탑에서 Google Play나 App Store에 접속해 앱을 설치해 본적이 있나요?

2020년 8월 21일
·
0개의 댓글

Styled-components # nextjs에서 className 오류

Warning : Props 'className' did not match next로 styled-components로 스타일 적용하고, 개발 서버를 띄워서 확인해보면 첫 페이지 로딩은 문제없이 잘 작동하고, 새로고침 이후 Warning : Props 'classNa

2020년 8월 1일
·
0개의 댓글
post-thumbnail

Styled-component #3 with typescript

오늘은 글로벌 스타일 적용하고, 스타일 컴포넌트에 타입 적용하는 방법을 해보겠돠.하루에 아조조~금씩🔨 야금야금🔨npm i styled-componentnpm i -D @types/styled-componentsstyled-components를 사용할때 보통 테마/전

2020년 8월 1일
·
0개의 댓글

nodeJS #11 getInitalProps를 이용한 SSR

nextJS를 빌드할 때 해당문구가 나왔다.사진에서 잘안보이는데.. getInitalProps 라는 단어가 등장하고 해석하면 server side 랜더가 getInitialProps, getServerSideProps를 사용해서 되었다는 의미이다.해당 함수를 일전에 본

2020년 7월 25일
·
0개의 댓글

nodejs #10 nextJS build된 정적파일 무중단 서비스하기, nginx SSL적용 및 리버스프록시설정

nextJS를 배포하기 위해 .next라는 정적파일로 build하고 이를 배포하는 방법으로 기존에 진행했었다.무중단서비스를 위해 PM2로 서버가 크래시나도 재시작을 할 수 있도록 도와주거나 VM이 종료되어도 서버를 계속 배포할 수 있는 도구를 사용했었다.하지만 이 방식

2020년 7월 22일
·
0개의 댓글
post-thumbnail

Let`s encrypt로 SSL인증서 발급받고 적용하기 (nodejs + nextJS)

Secure Sockets Layer. SSL은 OSI의 특정 계층에 속해있지 않고 전송-응용계층 사이에 독립적인 계층을 만들어 동작한다.이를 SSL Layer라고 한다HTTP는 ww상에서 정보를 주고 받는 프로토콜.HTTP는 클라이언트 - 서버간 웹 페이지 같은 자

2020년 7월 17일
·
0개의 댓글

nodejs #08 무중단배포하기

기존의 nextJS를 이용한 프로젝트를 배포하는 방법으로 next build, start해서 .next정적파일을 배포하는 방식을 사용했다.그러나 이 방법은 VM을 종료하면 배포가 중단되는 이슈가 있었다.현재 Back서버를 배포하는 방법으로 PM2를 이용하고 있는데 이를

2020년 7월 17일
·
0개의 댓글

[Next.js] CSS모듈과 복수의 class 사용하기

이 글에서는 next.js 프레임워크를 사용한 리액트 프로젝트에 CSS 모듈을 적용하는 방법과 classnames 라이브러리를 이용해 여러 개의 className을 적용하는 방법을 정리했다.

2020년 7월 9일
·
0개의 댓글

NEXT JS Custom Server

기본적으로 nextjs 에서의 url의 params 접근은 쿼리스트링을 이용한다. 그 이유는 pages의 폴더의 각 js파일마다 접근 하는데, "/id/1"의 깔끔한 url을 사용하고 싶으면, 맵핑을 해줘야 한다. 그렇지 않으면 pages/id/1.js를 찾아가기 때문

2020년 6월 6일
·
0개의 댓글