본문 바로가기

Dot Web/React ∙ Next.js

[Next.js] Front 서버 배포시 First Load JS 용량 줄이기
Dot Web/React ∙ Next.js 2021. 2. 13. [Next.js] Front 서버 배포시 First Load JS 용량 줄이기 Front 서버 배포시 First Load JS 용량 줄이기 클론 코딩을 하면서 ec2 프리티어를 사용하여 프론트 서버를 배포했다. 그런데 오류와 버그를 수정해나가면서 로컬에서 변경된 코드 부분을 git에 업로드했다. 그리고 git을 다시 ec2에 git pull한 다음 npm run build를 하는데 어느 순간부터 build만 하면 먹통이 되었다. 로컬 : git commit -am " ~comit msg" git push origin master에서 git에 등록한 후 ubuntu 접속: sudo git pull sudo npm run build ec2 프론트 서버가 터진 것이었고 ec2 서버를 재부팅을 해야만 다시 작동이 되었다. 처음에는 뭔지 몰라 pm2 kill도 해보고 뭐 다시 npm i 하..
[React] infinite scrolling 구현하기 (redux-saga) | react-virtualized
Dot Web/React ∙ Next.js 2021. 1. 23. [React] infinite scrolling 구현하기 (redux-saga) | react-virtualized React, redux로 게시글 무한 스크롤링을 구현 1. 서버와 연결하지 않고 프론트에서 더미 데이터로 테스트를 하는 경우 아래와 같이 redux에 더미데이터를 생성한다. (faker 라이브러리 사용) // 서버에서 20개씩 데이터를 불러오는 경우 시뮬레이션 export const generateDummyPost = (number) => Array(number).fill().map(() => ({ id: shortId.generate(), User: { id: shortId.generate(), nickname: faker.name.findName() }, content: faker.lorem.paragraph(), Images: [{ src: faker.image.image(), }], Comment..
[React] 불변성 관리 라이브러리 Immer사용하기
Dot Web/React ∙ Next.js 2021. 1. 22. [React] 불변성 관리 라이브러리 Immer사용하기 Immer react useState나 redux에서 불변성을 지켜줘야할 때 사용하는 라이브러리 (check) $ npm i immer immer Create your next immutable state by mutating the current one www.npmjs.com hook 버전은 사용하려면 'use-immer' (check) immer 기본 형태 import produce from 'immer'; // reducer: 이전 상태를 액션을 통해 다음 상태로 만들어내는 함수 (불변성 지키면서) const reducer = (state = initialState, action) =>{ return produce(state, (draft) => { }); } state → draft로 사용 dr..
[React] 더미데이터를 만들 때 필요한 Shortid, faker 라이브러리
Dot Web/React ∙ Next.js 2021. 1. 20. [React] 더미데이터를 만들 때 필요한 Shortid, faker 라이브러리 shortid 겹칠 수 없게 id를 생성 해줌 (check) shortid Amazingly short non-sequential url-friendly unique id generator. www.npmjs.com const shortid = require('shortid'); console.log(shortid.generate()); // PPBqWA9 faker 사람, 닉네임, 게시글 같은 더미데이터를 제공해줌 (check) faker Generate massive amounts of fake contextual data www.npmjs.com → 성능 최적화할 때 수 천개의 더미데이터를 만들고 끊김없는 페이지를 만들어주면 됨 dummy image할때 좋은 곳 (faker.image 사용해도 됨)..
[React/ Next.js] Redux-saga 설치 및 알아보기 (vs thunk / generator, effect)
Dot Web/React ∙ Next.js 2021. 1. 16. [React/ Next.js] Redux-saga 설치 및 알아보기 (vs thunk / generator, effect) 1. redux-thunk vs redux-saga thunk는 리덕스에서 비동기 작업을 처리할 때 많이 사용한다. 아래와 같이 9줄정도 되는 코드로 1만5천개정도의 git Star를 받았다. function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) => (next) => (action) => { if (typeof action === 'function') { return action(dispatch, getState, extraArgument); } return next(action); }; } const thunk = createThunkMiddleware(); thunk.withExtraArgument = crea..
AWS로 Next.js 배포하기3 (pm2)
Dot Web/React ∙ Next.js 2021. 1. 14. AWS로 Next.js 배포하기3 (pm2) Next.js 배포하기3 (pm2) foreground process : 터미널 끄면 서버도 같이 꺼짐 background process: 터미널 꺼도 서버 안꺼짐 1. pm2 설치 pm2는 background process할 수 있는 방법이다. $ npm i pm2 2. 설치 후 pm2로 실행 $ sudo npx pm2 start npm -- start node서버는 vim package.json으로 가서 'pm2'를 추가해야한다. "start" : "pm2 start app.js" 그 후 pm2 monit 명령어로 상태 관리하면 된다 $ sudo npx pm2 monit 실행과 상태관리 동시 명령어 $ sudo npm start && sudo npx pm2 monit 주의할 점 port번호 ec2포트..
AWS로 Next.js 배포하기2 (aws)
Dot Web/React ∙ Next.js 2021. 1. 14. AWS로 Next.js 배포하기2 (aws) Next.js 배포하기2 (aws) aws 인스턴스 생성 & git 연동 우분투에 노드, DB 설치 1. AWS 계정 생성 후 AWS에 로그인 1) EC2 접속 > Ubuntu 프리티어 인스턴스 생성 6단계 ) 보안 그룹 구성에서 HTTP, HTTPS를 허용해줘야 한다. * SSH에는 사용자 로컬아이피를 입력하여 해커 접속 방지를 해도 좋음 2) 우분투 접속하기 > aws ec2 환경에 가서 ssh클라이언트에서 예시로 나온 ' ssh -i ~ '주소 복사 > pem이 있는 터미널 경로에 붙여넣는다. 주의! 키페어 .pem파일을 소스폴더에 넣은 후 git에 소스코드를 올릴 때는 .gitignore 필수로 설정해줘야 한다. 3) 처음에 우분투에 접속하려 할 때 아래와 같은 에러가 발생할 수 있다. pem파일..
AWS로 Next.js 배포하기1 (next.config .js)
Dot Web/React ∙ Next.js 2021. 1. 14. AWS로 Next.js 배포하기1 (next.config .js) Next.js 배포하기1 (next.config .js) Root 디렉토리에 next.config.js파일을 생성하면 next의 설정을 변경할 수 있다. 1.next.config.js 설정 nextConfig는 전역설정으로 배포에 관련된 코드를 작성한 것이다. next.config.js const path = require('path'); const withPlugins = require('next-compose-plugins'); const withImages = require('next-images'); const withVideos = require('next-videos'); const withBundleAnalyzer = require('@next/bundle-analyzer')({ enable..

티스토리툴바

티스토리툴바