본문 바로가기

ALL

[AWS] Lambda로 image resizing하기
Dot Computer Science/Cloud 2021. 2. 14. [AWS] Lambda로 image resizing하기 react-next.js + node.js로 풀스택 개발을 하던 도중 이미지를 줌인 했을 때 리사이징을 하고 싶어서 AWS lambda를 사용해보겠다. 1. 최상위 루트에 lambda폴더 생성 | --- back | |--- front | |--- lambda 2. lambda 관련 라이브러리를 설치 $ npm i aws-sdk sharp // sharp는 일반적인 형식의 큰 이미지를 더 작게 리사이징해주는 모듈이다. sharp High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images www.npmjs.com 3. /lambda/index.js 파일 생성 및 AWS ..
[Next.js] Front 서버 배포시 First Load JS 용량 줄이기
Dot Programming/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 하..
[AWS Error] Ubuntu SSH 접속할 때 pem 접근권한 설정 (Permissions 0644 for 'xxx.pem' are too open)
Dot ./에러 모음 2021. 2. 10. [AWS Error] Ubuntu SSH 접속할 때 pem 접근권한 설정 (Permissions 0644 for 'xxx.pem' are too open) Ubuntu SSH 접속할 때 pem 접근권한 설정 (Permissions 0644 for 'xxx.pem' are too open) 처음에 우분투에 접속하려 할 때 아래와 같은 에러가 발생할 수 있다. pem파일의 접근권한에 관련한 문제이다. ➝ chmod로 파일 접근권한을 설정해주면 된다. (chmod 알아보기) ➝ chmod 400 xxx.pem으로 권한을 변경해주면 된다. 여기서 100번대는 소유주, 10번대는 그룹, 1번대는 다른 사용자에게 권한을 주겠다는 뜻이다. 나만 사용할 수 있어야 하니까 당연히 100번대에만 권한을 준다. 이때 읽기는 4, 쓰기는 2, 실행은 1입니다. 읽기만 가능해야 하므로 400으로 권한 설정을 한다.
[Node.js] Passport로 로그인 구현하기
Dot Programming/Node.js 2021. 1. 28. [Node.js] Passport로 로그인 구현하기 passport는 node.js 미들웨어로서 사용자 인증을 구현해준다. 페이스북, 카카오 등 다양한 passport가 있지만 일단은 기본인 이메일을 통한 로그인을 구현해보려 한다. (check) Documentation: Facebook Facebook The Facebook strategy allows users to log in to a web application using their Facebook account. Internally, Facebook authentication works using OAuth 2.0. Support for Facebook is implemented by the passport-facebook module. Install $ npm install p www.pass..
[Node.js] Cors 설정 ( credentials )
Dot Programming/Node.js 2021. 1. 28. [Node.js] Cors 설정 ( credentials ) Cors 설정하기 지금 나의 노드 서버 통신구조는 이렇게 되어있다. 브라우저- 프론트간의 통신은 괜찮지만 백서버랑 브라우저 서버 사이의 통신을 할 때 Cors 보안 정책 위반으로 에러가 난다. 브라우저(port: 3060) - 프론트 서버(port: 3060) - 백엔드 서버(port: 3065) Proxy 방식 브라우저 -> 백엔드 서버로 통신하기 위해서 중간에 프론트 서버를 넣는 방식이다. (브라우저가 아닌 서버와의 통신 또한 Cors정책 위반이 아니다) 브라우저 > 프론트엔드 > 백엔드 1. header에 'Access-Control-Allow-Origin' 넣기 router/user.js router.post('/', async(req, res) => { // POST /user/ try{ con..
[Node.js] node mysql 시퀄라이즈 연결하기, 엔티티 연관 관계 설정
Dot Programming/Node.js 2021. 1. 25. [Node.js] node mysql 시퀄라이즈 연결하기, 엔티티 연관 관계 설정 1. mac mysql설치하기(v.8) [MySQL] 설치와 초기 설정 for macOS MAC에서 MySQL설치방법은 MySQL Community Server dmg파일을 다운받아 설치하는 방법과 Homebrew로 MySQL 패키지 다운받아 설치하는 방법 두가지이다.MySQL 공식 dev 페이지에서 MySQL Community Server 를 다운받는다. velog.io 2. mysql설치 후 node 패키지에 라이브러리 설치하기 $ npm i sequelize sequelize-cli mysql2 mysql2 > node와 mysql을 연결해주는 드라이버 sequelize > javscript를 sql문으로 변환 3. sequelize 세팅 $ npx sequelize init 프로젝트에 config..
[React] infinite scrolling 구현하기 (redux-saga) | react-virtualized
Dot Programming/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 Programming/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..

티스토리툴바

티스토리툴바