본문 바로가기

Projects

 (10)
[회고] 넥스터즈 19기를 마무리하며 2021. 8. 30. 21:55 저번주로 넥스터즈 19기 정규 활동이 막을 내렸다. 지금까지 개발로그를 작성하면서 어떤 서비스인지 꽁꽁 숨기고 있었는데 이제는 어느정도 안정화되어서 블로그에도 소개하고 회고를 작성한다. 안녕, 나야 안녕, 나야 오늘의 내가, 미래의 나에게 보내는 편지(코시국편) halo-its.me 한줄 소개 : 과거의 내가 미래의 '나'에게 쓰는 편지 (코시국 편) 모토 : 현재의 우울함을 잊게 해주고, 훗날 지금을 회상하며 미소 지을 수 있는 서비스 2주일 전부터 배포 준비를 하고 있어서 발표시간 하루 전날 마지막 QA를 마무리하고 픽스 후 팀에 사전 공유할 수 있었다. 이벤트성 서비스라 미리 편지를 작성하면 팀발표 때 맞춰 메일을 발송해드리기로 했다. 최종 발표 당일 (본인이 속한 팀 빼고) 투표를 통해 1,2,3..
8/26 Nexters 9주차 : HTTPS 적용 2021. 8. 26. 22:08 구글 OAuth2.0 로그인을 대외로 오픈하기 위해서는 https 적용이 된 호스트 URL이 필요했다. 따라서 어제 부랴부랴 SSL 인증서를 구입하고 Nginx에 작성하는 시간을 가졌다. nginx.conf nginx.conf에 ssl 적용은 nginx 설치 후 default.conf에 가이드되어 있어서 쉽게 적용할 수 있었다. 😊 9번째 줄에서 http로 접근했을 때 https로 리디렉션하는것을 잊지 말자. k8s 배포 ssl이 설정된 nginx를 이미지로 재빌드하여 Pod를 재생성해야한다. 필자가 선택한 방법은 ssl 인증서(.pem 파일들)들을 Secret으로 생성하고 이를 Deployment에서 volumeMount로 주는 것이다. Secret 생성 kubectl create secret gene..
[NCP] Helm 사용하여 Kubernetes 기반으로 서비스 배포하기 2021. 8. 24. 20:18 넥스터즈에서 배포를 준비하는 글에서 Kubernetes를 사용하여 배포하는 것을 최종 목표로 잡았었다. 네이버 클라우드 플랫폼(NCP) 에서 제공하는 Kubernetes 서비스와 Container Registry 를 사용하여 배포한 과정을 기록한다. 아직 초보라 많은 설정을 써보진 못해서 차차 개선해나가기로 한다. 목차 0. 배포해볼 구조 및 용어 정리 1. 설치 2. docker image 레지스트리에 저장 3. helm chart 생성 및 배포 4. 이미지 재배포 5. 정리 0. 배포해볼 구조 먼저 서비스를 어떻게 배포하는가를 짚고 넘어간다. 정말 단순하게 End User가 Load Balancer* 외부 IP를 통해 접속하면 부하 분산에 의해 적절한 Pod로 접근하고, nginx가 프록시하는 구조이..
8/20 Nexters 8주차 : Docker 기반 배포 2021. 8. 20. 00:06 넥스터즈가 벌써 8주차로 곧 끝이 보이고 있다. 시간 진짜 빠르다... 내가 맡은 개발 분량은 끝났다. 개발중인 API가 완료되면 API 호출하는 거랑 정적 페이지 하나랑 리팩터링 정도 남은거 같다 그래서 배포를 신경쓰고 있는데 현재는 간단하게 vercel로 띄운 상태이다. (꼼수지만 vercel은 organization에 속한 저장소는 돈을 내야하기 때문에 개인 저장소로 포크 떠서 배포했다 🙄) 하지만... 뭔가 있는 툴을 사용하는 건 내 성에 안차기도 하고, 이것저것 건드리면서 공부해보고 싶었다. (참고) vercel에서도 콘텐츠 캐싱과 폰트나 이미지 캐싱또한 제공하고 있었다 ㅋㅎ; 그래서 직접 nginx와 docker, 그리고 최종 목표는 kubernetes까지 적용된 구조로 배포 환경을 구축해보기..
7/31 넥스터즈 5주차 : 단위테스트, 디자인 시스템 2021. 8. 1. 15:28 4주차는 회사일이 급해서 회사일을 더 많이 했으므로 스킵 2주차에서 jest를 설치하고 jest.config.js 설정을 마쳤다면 이번주에는 jest로 단위테스트를 작성할 수 있는 Mocking을 준비하였다. 2주전에 구현한 Oauth2.0 로그인 단위테스트를 작성하면서 진행하였다. Mocking이 끝나면 앞으로의 기능은 회사에서 그랬던 것처럼 TDD로 구현할 생각이다. (TDD에 대해서 썼던 글) 8/26 추가 TDD로 하겠다고 호언장담했었으나 안했었다...😭 1. Axios Mocking 먼저 Axios Mocking이다. jest Mocking Modules 가이드에서 소개하듯이 jest.mock 으로 mocking하는 방법이 있다. // users.test.js import axios from '..
7/16 넥스터즈 3주차 (2) : 에러 처리 설계와 SWR 2021. 7. 16. 19:15 개발순서는 이게 먼저인데 작성하다보니 인증 구현을 먼저 작성했다 🙄 저번주에 Setup한 개발환경에서 본격적으로 구조 설계에 들어갔다. 이번에도 사심을 담아 사내에서 미리 사용할 구조를 설계한다는 기분으로 구현했다. 😏 사내에 이미 nextjs로 구현중인 프로젝트가 있는데 해당 코드를 많이 참고했다. 에러 처리 클라이언트 에러처리는 크게 세 부분으로 구분하였다. 1. 모든 페이지에 공통적으로 처리할 에러 2. 페이지 혹은 관심사별로 처리할 에러 3. 단일 컴포넌트 내 이벤트 핸들러 등에서 처리할 에러 들어가기 전에 httpRequest에서 발생하는 에러는 Axios Interceptor에서 처리하였다. 에러 클래스를 정의하고 http응답에서 내려주는 에러에 따라 다른 에러 인스턴스를 throw한다. 1...
7/16 넥스터즈 3주차 (1) : 인증 구현 2021. 7. 16. 16:06 3주차때에는 소셜 로그인 구현 중 네이버 로그인을 구현하였다. Next.js의 API 서버를 마치 Api Gateway처럼 생각하고 BE와 Server to Server로 구현할 계획이다. 네이버 아이디로 로그인 구현(이하 네아로)의 OAuth2.0 구현은 Gateway에서 할 수있을듯 해서 Gateway에서 구현하였다. 개요 위 다이어그램에서 볼 수 있듯이 로그인 시에만 인증서버(여기서는 네이버)를 거치고, 그 이후에는 BE에서 생성한 자체 토큰(jwt)으로 검증한다. 시나리오 시나리오 1. 최초 로그인 (a.k.a 회원가입) 1. 사용자가 '네이버 로그인'을 클릭 2. 정보제공 동의를 받는 인증 화면으로 이동하여 정보 제공에 동의한다. 3. redirectURL인 /bridge/naver 로(이하 브..
7/10 2주차 세션 : 해커톤 2021. 7. 11. 16:19 넥스터즈 19기 활동이 본격적으로 시작되었다. 2주차부터 해커톤을 시작하는데 밤을 새는 일정(!)이었다. 그렇지만 어디까지나 자유라서 우리 팀은 밤을 새진 않았다. (하루만 새도 다음주 평일이 힘들기 때문에 😢) 금요일에 아이스 브레이킹+아이디어에 관한 생각을 공유하면서 모두 같은 방향을 바라볼 수 있도록 의견을 맞추었다. 따라서 해커톤동안 아이디어를 구체화하면서 와이어 프레임이 나올 수 있었다. (다하고 나니 밤 12시가 되었다 😳) 우리는 밤을 새지는 않기 때문에 1차 목표를 '개발 환경 구축'으로 소신 정의하였다. 본격적인 개발에 착수하기 전, 기술 스택 확정 및 형상 관리 Setup을 진행하였다. 기술스택 (Frontend) Nextjs 11 + Typescript Data Fetching: Sw..
React Native 초기 설정 2021. 7. 4. 16:05 3월부터 착수했는데 이래저래 바빠서 정리하고 있지 못했던 React Native 맨땅에 헤딩한 경험을 기록한다. * 기억하면 좋을 설정들만을 기록하여 아예 처음부터 설정하는 건 아님 목차 1. 디버깅 Setup 2. styled-components 설정 3. react-navigation 설정 (4.x) 4. Root import 설정 개발 환경 1. 디버깅 Setup 참고 URL. React Native Docs feat. 안드로이드 개발자 고수 친구👍 1. Jdk 설치 2. 환경 변수에 맞게 설정 (나는 zsh를 쓰고 있어서 ~/.zshrc) export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator ex..
[팟캐스트] 2020-04-29 사이드 프로젝트, 꼭 해야 하나요? 2020. 5. 10. 02:24 동생 아이폰에 있는 팟캐스트로 디자이너 두 분이 나오셔서 사이드 프로젝트에 대한 좋은 의견들을 공유해주셨다. 디자이너 뿐만 아니라 개발자한테도 도움이 많이 될 듯 싶어 정리해 보았다. 개인적으로 사이드 프로젝트를 진행할 때 꼭 기억하고 싶은 키워드는 굵은 글씨로 표기하였다. 1. 사이드 프로젝트를 왜 하게 되었나요? - 회사에서 일정한 성취감을 유지하기 힘들어서 - 다양한 경험을 쌓고 싶어서 2. 사이드 프로젝트의 장점 - In-out discount 현상을 감소시킬 수 있다. In-out discount란 외부자의 의견보다 회사 내부의 의견의 설득력이 더 떨어지는 현상으로, 외부 프로젝트 경험을 통해 타인을 설득할 수 있는 힘과 요령을 쌓을 수 있다. 3. 사이드 프로젝트의 단점 - 주말도 사이드 프로..

티스토리툴바