냉장고 프로젝트 업데이트
1.20.01.13 냉장고 프로젝트 들어가기 전 & NEXT
image.png 프론트서버와 백엔드서버를 나누는 이유 장점 : 각각의 기능에 맞는 공간을 분리하기 위함이고 화면을 그려주는 프론트단에 추가가 늘어나면 프론트 서버만 추가하면 되고 디비를 다루는 백엔드단의 추가가 늘어나면 백엔드 부분만 추가시키면 돼서 불필요한 용량이 늘어나는 걸 막을 수 있다. 단점 : 서버간의 통신을 할때 복잡도가 증가하고 CORS의...
2.20.01.16 댓글 작성 사이클
image.png 해당 파일 : pages/detail.jsx 댓글 폼에서 submit 클릭 image.png 해당 파일 : pages/detail.jsx ADDCOMMENTREQUEST 액션 수행하고 액션으로 data 전달 (action.data.postId) 여기서 detailId는 해당 디테일 페이지의 쿼리 id 값으로 지정 ![image.pn...
3.20.01.16 백엔드 / 테이블간의 관계들
image.png 2020-01-16 14:01 작성됨 해당 파일 back/models/user.js 위 ERD 구조에 따라 모델 유저 파일은 아래와 같이 작성된다.
4.20.01.17 백엔드 / serializeUser 와 deserializeUser
serializeUser 사용자 정보 객체를 세션에 아이디로 저장 매개변수로 user를 받아 done 함수에 두번째 인자로 user.id를 넘긴다. 이렇게 id만 저장하면 세션 용량이 커지는 걸 막을 수 있기 때문. deserializeUser 세션에 저장한 아이디를 통해서 사용자 정보 객체를 불러옴 passport.session() 미들웨어가 이 ...
5.2020.01.17 백엔드 / 로그인 사이클
1. 로그인 요청 http://localhost:8080/api/user/login 으로 로그인 api를 요청 2. passport.authenticate 메서드 호출 back/routes/user.js 해당 api 라우터에서 passport.authenticate 실행 3. 로그인 전략 수행 back/passport/local.js 프론트에서 전달한...
6.2020.01.18 게시글 작성 사이클 정리
프론트에서 폼으로 값을 submit ADDPOSTREQUEST 와 같은 액션이 실행 리덕스 사가에서 비동기처리로 게시글 작성 api를 요청 포스트관련 api를 백엔드 서버로 요청 백엔드 서버에서는 요청 받은 api 주소를 실행시켜 프론트에서 전달된 값으로 게시글 만듦 다 만들어진 정보를 json 형태로 프론트에 응답 리덕스 사가가 결과값을 받고 ADD...
7.2020.01.19 next환경에 express 연결하기
next 에서 주소를 동적으로 변경하기 위해 next환경에 express 연결했다. express 및 필요 모듈 설치 server.js 파일 생성 next와 express 연결 app을 next로 호출하고 개발모드인 경우 {dev} 라는 옵션을 설정 작성한 app 안에 express 코드 넣기 COOKIE_SECRET은 백엔드서버의 쿠키와 같은 걸...
8.2020.01.22 next로 getInitialProps를 이용해 동적 라우터 만들기
예제 라우터 : user/1, user/2... 등 유저 상세페이지 만들기 next에서 실행시켜주는 getInitialProps를 _app.js에 추가 Component(pages들)에 getInitialProps가 있으면 getInitialProps를 실행을 한다 user 페이지에서 context query를 받는다 _app.js getInitial...
9.2020.01.23 next의 getInitialProps를 이용해 서버사이드렌더링 (SSR)하기
검색 엔진에게 노출되도록 도와준다 사용자를 고려한 측면에서 효율적인 퍼포먼스를 낸다 메인 페이지 ssr로 렌더링해보기 _app.js 안에 있던 ctx가 컴포넌트들로 전달이 된다 아래와 같이 메인(Home)컴포넌트에서 getInitialProps를 기재하여 context를 전달 받는다. 홈 컴포넌트의 dispatch를 SSR 방식으로 옮기기 ...
10.2020.01.30 react-helmet
정리하기
11.2020.01.31 next.config(webpack) 설정 / next-bundle-analyzer / compression-webpack-plugin
next.config Next의 환경설정 파일로 sass나 기타 모듈, 플러그인들을 연결해주는 옵션을 이곳에서 처리한다. 해당 프로젝트에서는 withSass, withBundleAnalyzer 두 패키지를 연결해보았다. 한줄 한줄 살펴보자면 1) distDir : next 가 빌드한 파일을 어디에 넣을지 정하는 디렉토리로 기본은 .next 폴더 안에 넣는...
12.20.02.01 ec2 생성, 접근하기
1. 아마존에 가입 후 ec2 탭 클릭 2. 우분투 서버 선택 image.png 3. 계속 다음 누르다 보안 그룹에서 HTTP, HTTPS 규칙을 넣어줘야 프론트에서 접근이 가능 image.png 4. 인스턴스 생성까지 가면 pem 파일을 다운 받을 수 있고 이
13.20.02.02 aws에서 도메인 연결하기
1. Route53 호스팅 영역 생성에서 원하는 도메인 명을 만들기. image.png 2. 도메인 구매 후 네임서버 4개 등록하면 권한이 아마존으로 넘어온다 그리고 레코드 세트 생성에 프론트 ip 주소 추가하기. image.png 레코드 하나 더 생성해서 api.rgproject.co.kr 은 백엔드 ip 주소 추가하기. image.png 3....
14.20.02.02 s3 이미지 업로드
1. S3 에서 버킷 만들기 image.png 2. 프로젝트 이미지를 multer로 백엔드 upload 폴더에 보내던 걸 aws S3로 옮기기 image.png => 로컬 백엔드에서 aws-sd, multer-s3 설치 route/post.js 3. 내 보안 자격 증명에서 액세스 키 만들기 image.png ![image.png](https:
15.20.02.03 프론트, 백엔드 쿠키 통일 & 배포용으로 cors 수정
로컬 백엔드 서버 쪽 미들웨어 세팅 수정 사항 프론트엔드와 백엔드 서버가 달라서 생기는 문제 중 하나가 공통된 쿠키값을 읽지 못하는 부분이고 아래 코드들은 그 문제를 해결하기 위한 수정 내용이다. expressSession cookie 수정 cookie 옵션 중 domain 추가. 해당 값을 '.도메인'으로 사용해야 프론트엔드 주소와 백엔드(api.도메...
16.20.02.03 lambda 사용하기
lambda 작은 화면이나 모바일에선 리사이징된 이미지를 보여줌으로서 사용자의 데이터 소모를 줄여줄 수 있는데 이때 lambda를 사용한다. 분리된 컴퓨터고 클라우드 서비스이기 때문에 무거운 작업과 지속적으로 해야 하는 작업이 있다면 lambda로 빼는 것이 좋다. 24시간 돌아가는 개념이 아닌 호출을 했을 때만 실행되는 함수의 개념이다. 블로그를 조금...