profile
허허벌판에 씨 뿌리기
post-thumbnail

타입스크립트가 필요한 이유

자바스크립트의 변수, 함수의 매개변수, 함수의 리턴값에 타입이 명시된 것이 타입스크립트타입스크립트는 자바스크립트의 상위 집합체로 자바스크립트의 모든 것을 갖고 있다.타입스크립트로 자바스크립트가 약타입에서 강타입 언어가 되는데 이것의 의미는 안정적인 언어가 된다, 오류가

3일 전
·
0개의 댓글
post-thumbnail

퇴사 후 35일 방향 잡기

2020년 1월 12일에 퇴사를 했다. 퇴사 전부터 시작했던 포트폴리오 만들기 및 이직을 위한 새로운 기술 공부는 가족 이벤트나 여행을 가는 날을 제외하고 하루도 빠짐 없이 Today I Learn에 일일식으로 기재하며 나름 꾸준히 진행을 했다. 불안했고, 사실 지금도

2020년 2월 18일
·
0개의 댓글
post-thumbnail

인피니트 스크롤링

@제로초님 강의 @리액트/넥스트 기반의 SNS 만들기

2020년 2월 15일
·
0개의 댓글

20.02.05 global 전역 객체 & path 모듈

global 전역 객체 노드에서의 전역 객체로 window를 사용하지 않고 global를 쓴다. image.png globalA 파일에서 함수를 exports 하고 globalB 파일에서 불러와 전역객체로 지정된 message를 공유해 콘솔로 해당 함수를 실행시킨다. 결과는 image.png path 모듈 path.sep : \\ 경로의 구분자로 ...

2020년 2월 5일
·
0개의 댓글

20.02.04 노드 & 이벤트루프 & 논플로킹

노드란? 자바스크립트 런타임. 즉, 자바스크립트를 웹브라우저 바깥 환경에서 실행시킬 수 있게 만드는 프로그램. 이벤트 루프란? 위 코드의 콘솔을 예상해보면 first가 선언이 되니 second 함수 호출 후 콘솔로그 '1'부터 찍을 것 같은데 실제로는 아래 그림과 같이 함수들이 스택이 된 후 콘솔은 스택의 위부터 차례대로 빠져나온다. (3->2->1)...

2020년 2월 4일
·
0개의 댓글

20.02.03 lambda 사용하기

lambda 작은 화면이나 모바일에선 리사이징된 이미지를 보여줌으로서 사용자의 데이터 소모를 줄여줄 수 있는데 이때 lambda를 사용한다. 분리된 컴퓨터고 클라우드 서비스이기 때문에 무거운 작업과 지속적으로 해야 하는 작업이 있다면 lambda로 빼는 것이 좋다. 24시간 돌아가는 개념이 아닌 호출을 했을 때만 실행되는 함수의 개념이다. 블로그를 조금...

2020년 2월 3일
·
0개의 댓글

20.02.03 프론트, 백엔드 쿠키 통일 & 배포용으로 cors 수정

로컬 백엔드 서버 쪽 미들웨어 세팅 수정 사항 프론트엔드와 백엔드 서버가 달라서 생기는 문제 중 하나가 공통된 쿠키값을 읽지 못하는 부분이고 아래 코드들은 그 문제를 해결하기 위한 수정 내용이다. expressSession cookie 수정 cookie 옵션 중 domain 추가. 해당 값을 '.도메인'으로 사용해야 프론트엔드 주소와 백엔드(api.도메...

2020년 2월 3일
·
0개의 댓글

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:

2020년 2월 2일
·
0개의 댓글

20.02.02 aws에서 도메인 연결하기

1. Route53 호스팅 영역 생성에서 원하는 도메인 명을 만들기. image.png 2. 도메인 구매 후 네임서버 4개 등록하면 권한이 아마존으로 넘어온다 그리고 레코드 세트 생성에 프론트 ip 주소 추가하기. image.png 레코드 하나 더 생성해서 api.rgproject.co.kr 은 백엔드 ip 주소 추가하기. image.png 3....

2020년 2월 2일
·
0개의 댓글

20.02.01 ec2 생성, 접근하기

1. 아마존에 가입 후 ec2 탭 클릭 2. 우분투 서버 선택 image.png 3. 계속 다음 누르다 보안 그룹에서 HTTP, HTTPS 규칙을 넣어줘야 프론트에서 접근이 가능 image.png 4. 인스턴스 생성까지 가면 pem 파일을 다운 받을 수 있고 이

2020년 2월 1일
·
0개의 댓글

20.02.01 스타벅스 클론 (협업 프로젝트) 들어가기 전

intro 이전 회사에 계시던 퍼블리셔 분과 스타벅스 홈페이지를 간단하게 클론하는 계획을 짰다. 해당 작업이 스타벅스 홈페이지인 이유는 반응형이라는 점과 간단한 효과를 구현해 볼 수 있는 페이지이기도 했고, 퍼블리셔분이 혼자 만들어보고 싶어하셨던 페이지라 레이아웃 + 자바스크립트 효과는 내가 서포트로 도와주면서 +a로 지금까지 공부한 리액트로 퍼블리셔분이 ...

2020년 2월 1일
·
1개의 댓글

2020.01.31 next.config(webpack) 설정 / next-bundle-analyzer / compression-webpack-plugin

next.config Next의 환경설정 파일로 sass나 기타 모듈, 플러그인들을 연결해주는 옵션을 이곳에서 처리한다. 해당 프로젝트에서는 withSass, withBundleAnalyzer 두 패키지를 연결해보았다. 한줄 한줄 살펴보자면 1) distDir : next 가 빌드한 파일을 어디에 넣을지 정하는 디렉토리로 기본은 .next 폴더 안에 넣는...

2020년 1월 31일
·
1개의 댓글

2020.01.30 react-helmet

정리하기

2020년 1월 31일
·
0개의 댓글

2020.01.23 next의 getInitialProps를 이용해 서버사이드렌더링 (SSR)하기

검색 엔진에게 노출되도록 도와준다 사용자를 고려한 측면에서 효율적인 퍼포먼스를 낸다 메인 페이지 ssr로 렌더링해보기 _app.js 안에 있던 ctx가 컴포넌트들로 전달이 된다 아래와 같이 메인(Home)컴포넌트에서 getInitialProps를 기재하여 context를 전달 받는다. 홈 컴포넌트의 dispatch를 SSR 방식으로 옮기기 ...

2020년 1월 23일
·
2개의 댓글

2020.01.22 next로 getInitialProps를 이용해 동적 라우터 만들기

예제 라우터 : user/1, user/2... 등 유저 상세페이지 만들기 next에서 실행시켜주는 getInitialProps를 _app.js에 추가 Component(pages들)에 getInitialProps가 있으면 getInitialProps를 실행을 한다 user 페이지에서 context query를 받는다 _app.js getInitial...

2020년 1월 22일
·
0개의 댓글

2020.01.19 next환경에 express 연결하기

next 에서 주소를 동적으로 변경하기 위해 next환경에 express 연결했다. express 및 필요 모듈 설치 server.js 파일 생성 next와 express 연결 app을 next로 호출하고 개발모드인 경우 {dev} 라는 옵션을 설정 작성한 app 안에 express 코드 넣기 COOKIE_SECRET은 백엔드서버의 쿠키와 같은 걸...

2020년 1월 19일
·
0개의 댓글

2020.01.18 게시글 작성 사이클 정리

프론트에서 폼으로 값을 submit ADDPOSTREQUEST 와 같은 액션이 실행 리덕스 사가에서 비동기처리로 게시글 작성 api를 요청 포스트관련 api를 백엔드 서버로 요청 백엔드 서버에서는 요청 받은 api 주소를 실행시켜 프론트에서 전달된 값으로 게시글 만듦 다 만들어진 정보를 json 형태로 프론트에 응답 리덕스 사가가 결과값을 받고 ADD...

2020년 1월 19일
·
1개의 댓글

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 프론트에서 전달한...

2020년 1월 17일
·
1개의 댓글

20.01.17 백엔드 / serializeUser 와 deserializeUser

serializeUser 사용자 정보 객체를 세션에 아이디로 저장 매개변수로 user를 받아 done 함수에 두번째 인자로 user.id를 넘긴다. 이렇게 id만 저장하면 세션 용량이 커지는 걸 막을 수 있기 때문. deserializeUser 세션에 저장한 아이디를 통해서 사용자 정보 객체를 불러옴 passport.session() 미들웨어가 이 ...

2020년 1월 17일
·
0개의 댓글

20.01.16 백엔드 / 테이블간의 관계들

image.png 2020-01-16 14:01 작성됨 해당 파일 back/models/user.js 위 ERD 구조에 따라 모델 유저 파일은 아래와 같이 작성된다.

2020년 1월 16일
·
1개의 댓글