DogGae

Firebase Authentication 과 Firebase Admin 을 이용한 JWT 기반 세션관리 구현

개요최근 들어 AI 덕분에 토이 프로젝트를 매우 쉽게 시작할 수 있게 되었다. 하지만 프로젝트가 '회원' 기반의 서비스라면, 회원 인증/인가 플로우를 구현할 필요가 있다. 이번엔 아내와 함께 제작중인 신혼부부 가계부 서비스에 인증/인가 플로우를 구현한 과정을 소개해볼까 한다. Firebase Authentication 소개https://firebase.google.com/docs/auth?hl=ko Firebase AuthenticationFirebase 인증을 사용하면 코드 몇 줄만으로 손쉬운 사용자 인증, 로그인, 온보딩을 위한 엔드 투 엔드 ID 솔루션을 앱에 추가할 수 있습니다.firebase.google.com 회원의 인증/인가를 담당할 서버를 구축하는 것은 너무나도 큰 작업이기 때문에 이를 직..

개요아래 도서를 사내 스터디의 일환으로 읽게 되었다. 이론 뿐만 아니라 실습에 대한 내용도 있기 때문에 분량이 600 페이지에 달한다. 누군가는 처음엔 내용이 완전히 이해되지 않더라도 쭉 읽어보고 그 후에 다시 읽으면서 내용을 정리하라고 하지만, 이 정도의 분량을 두번이나 읽는 것은 염두가 안나는 것이 사실이다. https://www.yes24.com/product/goods/153499985 밑바닥부터 시작하는 웹 브라우저 - 예스24웹 브라우저! 쌓고, 뜯고, 이해하라하나씩 이해하는 웹의 작동 원리크롬, 파이어폭스, 브레이브, 웨일 같은 웹 브라우저는 겉으로는 단순해 보이지만, 그 밑에는 무려 1천만 줄에 달하는 코드가www.yes24.com 그래서 이참에 요즘 유명한 학습 도구인 Notebook L..

개발자가 되기 전에는 프로그래밍으로 먹고 살 수 있을지가 막막했다. 개발자가 된 후에는 더 막막해졌다.높은 연봉을 받는 것을 받을 수 있을지 막막하고, 남다른 차별점을 가질 수 있을지가 막막하다.이럴 때마다 내가 했던 방법을 이번에도 써보기로 했다. 그 간의 과정을 회고해보는 것이다.개발자가 된지 3년 9개월만에 회고를 해본다니, 많이 늦은 감이 없지 않다. 왜 개발자가 되었나?프로그래밍이 내게 즐거움을 주고, 내 불안을 없애주었기 때문이다. 잠깐 딴소리지만, 그림을 그려본 적이 있는가? 역설적이게도, 그림을 그리는 과정 자체는 그리 즐겁지 않다. 괜찮은 그림을 그리기 위해서는 디테일을 위해 엄청나게 긴 시간을 써야한다. 나는 초상화를 그렸었는데, 코를 그리는 데만 2시간 50분을 썼다. '이게 뭐하는..

이전 글 최근 아내와 함께 진행한 가계부 서비스에 커밋이 좀처럼 올라오고 있지 않다. 처음 생각했던 기본 기능들을 구현했으니 이제 기능을 고도화 하고 코드 리팩터링을 진행해야 할 타이밍인데, 항상 이 타이밍에 흥미를 잃는 듯하다. 아마 '회사에서 하던 일을 집에서 또 하기 싫다' 라는 무의식적인 마음이 드는 것이 아닐까 싶기도 하다. 그러나 이대로 프로젝트를 가만히 두었다가는 내 레포 목록의 자리만 차지하게 될 것이다. 이 프로젝트를 회사에서 하는 것과 다르게 하기 위해서, 나도 '바이브 코딩'을 시도해보려고 한다. 무작정 프롬프트를 입력해서 유지보수도 안될 코드 덩어리를 만들어 내고 싶지는 않고, AI 에 컨텍스트를 최대한 많이 부여해서, 내가 짜는 코드 퀄리티와 스타일을 그대로 베끼는 도플갱어를 만..

나는 4월 중순에 결혼했고, 결혼 직후 신혼여행을 다녀왔다.여러 감사한 분들께 마저 인사를 돌리고 나서, 모든 것이 드디어 마무리 되었다고 생각할 때 쯤. 통장잔고가 거의 비어 있다는 것을 깨달았다. 원래 계산대로라면 그래도 천만원에 가까운 돈이 남아 있었어야 했는데, 어째서일까?내가 애초에 계산을 잘못했나? 최근 너무 많은 일들이 지나갔기에 슈퍼 회피형인 나는 솔직히 그려러니 하고 넘어가고 싶었다. 하지만 우리 와이프는 나와는 다른 인종이다.몇달간의 내역을 뒤진 끝에 와이프는 우리가 신혼여행에 원래 예산보다 900만원을 더 썼다는 결론에 도달한다.신혼여행을 다녀온 후에도, 코스트코에 한번 가서 40만원을 쓰는 등 우리 부부는 돈을 펑펑 뿌리고 다녔다는 것이 밝혀졌다. 이대로는 안된다.'이제 돈을 아껴..

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=J-g9ZJha8FE useRef 를 사용하여 디펜던시 문제 해결하기 위와 같은 코드는 리액트 코드를 작성하면서 심심치 않게 볼 수 있습니다. useEffect 안에서 사용하는 함수가 외부 함수라서 이를 useEffect 에 넣어버리고 의존성에 등록해두지 않으면 linter 가 이를 지적할 것입니다. 해당 함수가 업데이트 될 필요가 있다고 합시다. 이때 useEffect 안에서 상태를 바꾸는 로직이 있다면 리렌더링이 수행될 것이고, 해당 외부함수가 useCallback 처리 되어 있지 않으면 매번 아예 새로 생성될 것이기 때문에 무한 렌더링의 수렁에 빠지게 됩니다. 하지만 그렇다고 useCall..

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=cCOL7MC4Pl0 이벤트 루프란? 자바스크립트의 단일 스레드 환경에 맞춰서 비동기 처리와 이벤트 핸들링을 수행하는데 사용되는 제어방식입니다. 간단히 설명하자면, 끊임없이 콜스택의 상태를 감지하며 태스크 큐의 콜백을 콜스택에 밀어넣는 방식입니다. 왜 자바스크립트는 단일스레드 방식을 택한 것일까? 이벤트 루프의 배경에는 흔히 자바스크립트가 '단일 스레드로만 동작한다'는 사실이 깔려 있습니다. 하지만 다른 언어들은 스레드를 나누는 일이 흔한데, 왜 하필 자바스크립트는 단일 스레드를 고집하는 것일까요? 이는 자바스크립트의 주요 실행 환경이 브라우저라는 점에 기반합니다. 이용자가 발생시킨 이벤트와 서..

컨셉트 기본적인 사용법은 리액트와 유사하게 구성하였습니다. 기존의 JSX 문법이 아닌 독자적인 문법을 한번 고안해보고 싶어서 함수 컴포넌트가 객체가 아닌 제가 template 이라고 명명한 특수한 형식의 문자열을 return 하도록 지정했습니다. import useState from "../lib/hooks/useState"; import Counter from "./Counter"; const App = () => { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; const onReset = () =..

실습용 파일 준비 Cloud Front 를 직접 활용해보기 위해 간단한 웹사이트를 위한 HTML/CSS/Javascript 파일들을 준비해봅시다. 저는 과거에 제가 사용했던 포트폴리오 웹사이트를 사용하겠습니다. S3 에 파일 업로드 (s3 업로드 방법은 여기서 따로 다루지는 않겠습니다) 별다른 설정 없이 s3 에 index.html 을 비롯한 각종 웹 자원들을 업로드했다면 기본으로 퍼블릭 엑세스가 차단되어 있을 것입니다. 그리고 이건 정적 호스팅을 활성화하더라도 마찬가지입니다. 이제 파일의 접근권한을 이대로 내버려둔채로 정적 호스팅을 위해 Cloud Front 서비스를 이용해봅시다. Cloud Front 도메인 배포 처음 cloud front 를 이용한다면 위와 같은 화면을 보게 될 것입니다. Creat..

간단히 말해서, 직접 만들 수 있는 CDN(Content Delivery Network) 라고 볼 수 있습니다. CDN 은 간단히 말해 세계에 널리 퍼진 중계서버들의 집합이라고 보시면 됩니다. 보통 S3 와 같은 일반적인 정적 호스팅을 통해 웹 컨텐츠를 이용자들에게 제공하게 되면, 예를 들어 한국에 해당 정적 서버를 호스팅하는 컴퓨터가 위치하고 있다고 가정하면 유럽과 같은 다른 먼 나라의 이용자들에게는 한국에 거주하는 이용자들에 비해 빠른 로딩 속도를 제공하기 어려울 것입니다. 물리적인 거리가 증가함에 따라 컨텐츠를 로드하는데 걸리는 시간 또한 증가할 것이기 때문입니다. 이 비효율을 없애기 위해, 전세계에 뿌려져 있는 각종 중계서버들, 즉 CDN이 웹 자원을 대신 전달하는 역할을 해줄 수 있습니다. 프론..