# nextjs
nextjs 페이지 전환 애니메이션 주기
새로운 프로젝트를 시작하기전 사용할만한 리소스를 찾고있던 중에라우팅시 화면 전체가 부드럽게 나타나게 할수는 없을까 하다가 react-transition-group이라는 라이브러리를 발견했고 사용법에 대해 기록하려고한다.nextjs에서 기본적으로 pages directo
NextJS : 클라이언트 렌더링 단계에서 모듈 불러오기
window 객체를 사용하는 자바스크립트 모듈의 경우 nextjs 에서 import 할때 오류가 생긴다. nextjs 는 서버사이드렌더링(SSR)을 하는데, window 객체는 클라이언트가 있어야 생기는 거라 그런듯.useEffect 훅을 이용해 클라이언트사이드렌더링(
NextJS 에서 map method 문제
.map 메소드 사용시 렌더링할 요소에 key 값을 안넣어주면 렌더링이 안된다.위와 같은 경우 array 안의 요소들이 렌더링되지 않는다.위와 같이 key 에 index 를 할당하니 렌더링이 됐다.버그인건지 아니면 react나 nextjs 에 규칙이 추가된건지 아니면
nextjs github 페이지 배포 + 커스텀 도메인 적용
nextjs 로 만든 static 웹페이지를 gh-pages 로 배포하고, namecheap 에서 구입한 커스텀 도메인을 적용시키자.깃허브 repo 를 만들어 놓고, 로컬에서 remote 연결해 둔다. env-config.js 와 next-config.js 파일을 프로
socket.io 채팅 5분만에 만들기!🚀
https://socket.io/docs/rooms/ 글을 참고했습니다.너무 간단하다. join이라는 이벤트가 들어오면 룸 아이디를 join 하고 방의 인원들에게 참여했다는 메시지를 뿌려준다.chat이라는 이벤트가 들어오면 룸 전체에 채팅 메시지를 뿌려준다.유
[Electron] Electron 운영체제에 따른 디버깅과 app.getPath()
Electron 프로젝트를 진행하면서 가장 헤맸던 부분은 디버깅이었다. s3에서 다운 받은 파일을 로컬에 저장하는 과정에서 개발/운영 모드, 운영체제에 따라 코드를 다르게 작성해야하는데 Electron에 대해 자세히 몰랐던터라 미흡한 점이 많았다 :( 디버깅(De
[Electron] Electron의 IPC 통신 - ipcMain과 ipcRenderer
안녕하세요 :) 오늘은 Main과 Renderer 프로세스의 통신, <span style="background-color: Electron에는 ipcMain, ipcRenderer라는 두 가지 IPC 모듈이 있습니다.ipcMain와 ipcRenderer은 각 Ma
[Electron] Electron의 main과 renderer 프로세스
이전 게시글에서 Electron과 Nextron에 대해 간단히 알아봤습니다! Electron은 JavaScript, html, css를 사용하여 <span style="background-color: Electron에서 메인 프로세스는 main 스크립트를 실행하는
[Electron] Electron에 Next.js까지?! Nextron 설치 및 폴더 구조
[ Node.js를 기반으로 javascript를 사용하여 데스크탑 App을 만드는 플랫폼 ] 자주 사용하는 사진 앱인 'SNOW 스노우'로 예를 들어볼께요 : ) 데스크탑에서 Google Play나 App Store에 접속해 앱을 설치해 본적이 있나요?
Styled-components # nextjs에서 className 오류
Warning : Props 'className' did not match next로 styled-components로 스타일 적용하고, 개발 서버를 띄워서 확인해보면 첫 페이지 로딩은 문제없이 잘 작동하고, 새로고침 이후 Warning : Props 'classNa
Styled-component #3 with typescript
오늘은 글로벌 스타일 적용하고, 스타일 컴포넌트에 타입 적용하는 방법을 해보겠돠.하루에 아조조~금씩🔨 야금야금🔨npm i styled-componentnpm i -D @types/styled-componentsstyled-components를 사용할때 보통 테마/전
nodeJS #11 getInitalProps를 이용한 SSR
nextJS를 빌드할 때 해당문구가 나왔다.사진에서 잘안보이는데.. getInitalProps 라는 단어가 등장하고 해석하면 server side 랜더가 getInitialProps, getServerSideProps를 사용해서 되었다는 의미이다.해당 함수를 일전에 본
nodejs #10 nextJS build된 정적파일 무중단 서비스하기, nginx SSL적용 및 리버스프록시설정
nextJS를 배포하기 위해 .next라는 정적파일로 build하고 이를 배포하는 방법으로 기존에 진행했었다.무중단서비스를 위해 PM2로 서버가 크래시나도 재시작을 할 수 있도록 도와주거나 VM이 종료되어도 서버를 계속 배포할 수 있는 도구를 사용했었다.하지만 이 방식
Let`s encrypt로 SSL인증서 발급받고 적용하기 (nodejs + nextJS)
Secure Sockets Layer. SSL은 OSI의 특정 계층에 속해있지 않고 전송-응용계층 사이에 독립적인 계층을 만들어 동작한다.이를 SSL Layer라고 한다HTTP는 ww상에서 정보를 주고 받는 프로토콜.HTTP는 클라이언트 - 서버간 웹 페이지 같은 자
nodejs #08 무중단배포하기
기존의 nextJS를 이용한 프로젝트를 배포하는 방법으로 next build, start해서 .next정적파일을 배포하는 방식을 사용했다.그러나 이 방법은 VM을 종료하면 배포가 중단되는 이슈가 있었다.현재 Back서버를 배포하는 방법으로 PM2를 이용하고 있는데 이를
[Next.js] CSS모듈과 복수의 class 사용하기
이 글에서는 next.js 프레임워크를 사용한 리액트 프로젝트에 CSS 모듈을 적용하는 방법과 classnames 라이브러리를 이용해 여러 개의 className을 적용하는 방법을 정리했다.
NEXT JS Custom Server
기본적으로 nextjs 에서의 url의 params 접근은 쿼리스트링을 이용한다. 그 이유는 pages의 폴더의 각 js파일마다 접근 하는데, "/id/1"의 깔끔한 url을 사용하고 싶으면, 맵핑을 해줘야 한다. 그렇지 않으면 pages/id/1.js를 찾아가기 때문