본문 바로가기

ALL

[React] 더미데이터를 만들 때 필요한 Shortid, faker 라이브러리
Dot Programming/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 Programming/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 Programming/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 Programming/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 Programming/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..
[Next.js] CSS(styled-components) 서버사이드 렌더링(SSR)
Dot Programming/React ∙ Next.js 2021. 1. 11. [Next.js] CSS(styled-components) 서버사이드 렌더링(SSR) Next.js CSS 경고 : Warning: Prop `className` did not match SEO최적화를 위해 Next로 SSR을 하는 경우 styled-components와 같은 CSS styling이 새로고침하는 경우 작동이 안되는 에러가 있다. 이는 CSS가 SSR이 안되었기 때문인데, console에 아래와 같은 warning이 발생한다. Warning: Prop `className` did not match CSS(styled-components) 서버사이드 렌더링(SSR) Next Babel 커스터마이징하기 Next내부에도 Webpack과 Babel이 있는데 Babel을 커스터마이징해서 CSS를 SSR해주면 된다. 1) babel-plugin-styled-components 설치 $..
[React Error] antd bug (fixed dosen't work with -webkit-transform)
Dot ./에러 모음 2021. 1. 10. [React Error] antd bug (fixed dosen't work with -webkit-transform) antd bug (fixed dosen't work with -webkit-transform) position: fixed를 하여도 특정 블록에 속해있는 버그가 생겼다. 이는 antd card cover에 아래와 같이 transform의 유명한 버그라고 한다 .ant-card-bordered .ant-card-cover { margin-right: -1px; margin-left: -1px; -webkit-transform: translateY(-1px); transform: translateY(-1px); */: ; } https://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform Pos..
[Next.js Error] Next.js png, svg사용하기 (@babel/plugin-transform-react-jsx)
Dot ./에러 모음 2021. 1. 10. [Next.js Error] Next.js png, svg사용하기 (@babel/plugin-transform-react-jsx) 에러 내용 Syntax error: Support for the experimental syntax 'jsx' isn't currently enabled (8:9) Next.js에서 png, svg를 사용하려하는데 적용이 안되었다. 그래서 아래 링크를 참고하였다. Rendering SVG Image in Next.js with next-images and babel-plugin-inline-react-svg Next.js is very beautiful and powerful react framework loved by more people day by day because of its amazing features. People often… medium.com 그러던 도중 svg를 가져오던 도중 오류가..

티스토리툴바

티스토리툴바