104%

이 글은 독자가 JWT, 세션등에 대한 이해를 갖고 있다는 전제하에 정리 차원에서 작성한 글입니다. TL;DR 1. 리프레시 토큰은 HTTP ONLY SECURE 쿠키에 저장하자. 2. 액세스 토큰은 프로그램상 자바스크립트 로컬 변수에 저장하고, http 헤더에 bearer 토큰으로 담아서 매 요청마다 보내도록 하자. 3. 로컬스토리지는 사용하지 말자. (보안에 매우 취약) 브라우저 어디에 토큰을 저장해야 안전할까? 브라우저에서 JWT를 저장할 수 있는 곳은 로컬스토리지, 쿠키 두군데가 있다. 하지만 로컬스토리지나 쿠키나 모두 자바스크립트로 읽을 수 있는 값들이기 때문에 아무런 처리없이 이곳에 저장하면 굉장히 보안에 취약하다. 해커가 이미지 태그 혹은 브라우저 URL에 자바스크립트를 삽입 할 수 있는 취..

만약 프로젝트 A의 파이어스토어에 담긴 데이터를 프로젝트 B로 옮기고 싶다면 1. 프로젝트 A의 스토리지 버킷을 하나 생성한다. 2. 프로젝트 A의 클라우드 콘솔에서 gcloud firestore export gs://버킷명/폴더명 을 입력해서 파이어스토어의 데이터를 버킷으로 옮긴다. 3. 프로젝트 B의 서비스 계정을 알아낸다. [프로젝트명]@appspot.gserviceaccount.com 대충 이렇게 생겼음. 4. 2번에서 생성한 프로젝트 A의 버킷에 프로젝트 B의 서비스계정에 스토리지 관리자 권한을 추가한다. 5. 이제 프로젝트 B의 서비스계정으로 프로젝트 A의 버킷에 접근할 권한이 생겼다. 6. 프로젝트 B의 클라우드 콘솔에서 프로젝트 A의 스토리지 주소 gs://프로젝트A버킷명/폴더명 에 접근해..

현재 게시글에 담겨있는 이미지를 firestorage에 업로드 하면 resizing 핸들러가 trigger 되어서 사이즈가 축소된 이미지를 다시 클라이언트로 내려주는 로직을 작성하고 있다. 그런데 클라이언트에서 게시글을 submit했을때 서버에서 이미지가 리사이징 될때까지 모두 기다리면 제출하는데 꽤 오랜시간이 걸린다. 그래서 이런 방식을 사용하지 않고 우선적으로 이미지를 서버에 업로드한 다음에, (곧 리사이징될) public URL을 DB에 등록한 뒤에, 클라이언트에는 원본이미지의 경로와 리사이징된 이미지의 경로 두개를 내려주려고 한다. 그래서 게시글을 조회할때 우선적으로 리사이징된 이미지를 보여주고 fallback으로 원본이미지를 보여주는 방식으로 구현하고자 한다. getDownloadUrl을 사용하..

서론 프로젝트를 진행하다가 삽질한 내용을 공유합니다. Next.js에서는 getInitialProps라는 메소드가 있습니다. 이 메소드를 사용하면 화면이 렌더링 되기 전에 필요한 데이터를 미리 준비해 놓을 수 있습니다. getInitialProps는 다음과 같은 상황에서 트리거 됩니다. 1. 주소창에 직접 URL을 치고 들어온 경우 SSR(Server Side Rendering)이 일어납니다. 이때 getInitialProps가 실행됩니다. 2. next/link나 next/router를 사용해서 클라이언트 사이드 라우팅(CSR)을 한 경우. 이 경우에도 getInitialProps가 실행됩니다. 이슈 제가 만들고 있는 프로젝트는 SNS라서 메인페이지에 진입했을때 피드의 리스트가 쭉 출력되어야 합니다. ..

그동안 어렴풋하게만 알고 있던 함수형 프로그래밍이란 무엇인지 정리하기 위해 남깁니다. 함수형 프로그래밍의 컨셉 1. 사이드 이펙트(side effect)를 없애라. 사이드 이펙트라는건 부작용이라는 뜻인데, 우리가 함수를 호출 하는 이유는 인풋에 따른 결과값을 얻어내기 위해서 입니다. 근데 함수가 함수 외부의 어떤것을 변경하게 되면 우리가 의도치 않은 동작을 하는 것입니다. 이런 현상을 함수형 프로그래밍에선 사이드 이펙트 라고 합니다. 프로젝트에 사이드 이펙트를 가진 함수가 많아지면 디버깅 하기 굉장히 어려워지게 됩니다. (각 함수 내부를 뒤져서 이게 어디에 영향을 주는지 일일이 파악해야함) 간단한 예시를 하나 살펴 보겠습니다. public Program getCurrentProgram(TVGuide gu..

스토리북으로 UI 컴포넌트들을 정리하려고 하는데 어떤식으로 컴포넌트들을 분리해야하고 관리해야하는지에 궁금해서 정리하게 되었습니다. 본인이 알고 있는 좋은 구조가 있다면 댓글로 알려주시면 감사하겠습니다. 서론 나는 스토리북을 3년간 사용해왔다. 잘 구조화 하지 않으면 스토리북이 별로 유용하지 않다고 느껴 효율적인 구조를 찾아왔다. 내가 생각하는 스토리북의 best practice를 공유하겠다. 이 스토리북을 누가 쓸건가? 스토리북을 팀내에서만 쓸건지, 디자인 시스템 구축용으로 사용하여 외부에서도 같이 사용할건지에 따라서 프로젝트 구성이 달라진다. 외부에서도 사용해야 하는 경우 컴포넌트의 API를 상세히 작성해야 한다. https://github.com/intuit/storybook-addon-sketch ..

처음 웹페이지에 접속하면 브라우저는 서버로 요청을 보내 html, css, js 등의 파일을 다운로드 받고 파싱해서 화면에 보여준다. 이러한 브라우저 로딩과정은 다운로드, 파싱, 스타일, 레이아웃, 페인트, 합성 총 6단계로 나누어진다. 다운로드 유저가 브라우저에서 www.naver.com를 입력했을때, 브라우저는 naver의 서버로 html을 요청해서 응답을 받는다. 파싱 다운받은 html을 파싱한다. 파싱을 하면서 DOM Tree를 만들게 되는데, 파싱 도중에 link태그를 만나면 서버에서 CSS파일 다운로드하고 파싱해서 CSSOM Tree를 만든다. 스타일 HTML과 CSS의 파싱이 완료되면 DOM Tree와 CSSOM Tree를 합쳐서 Render Tree를 생성한다. DOM Tree에는 CSS로..

서론 Redux Saga -> Firebase Cloud Functions -> Express -> Multer의 과정을 거쳐서 이미지 파일을 FormData에 담아서 업로드 하던 도중 request.body가 비어 있는 이슈가 발견 되었다. 단서 I have been suffering from the same problem for a few days, turns out that firebase team has put the raw body of multipart/form-data into req.body with their middleware. If you try console.log(req.body.toString()) BEFORE processing your request with multer, y..