Grace's Tech Blog

push notification을 구현하면서 지금까지 프로젝틀를 하면서 키운 내공들+가치들이 한꺼번에 발휘되었던 것 같다. 모든 팀원들의 책임감있는 태도에 힘이 났으며, 혼자 할 때는 막막했던 것이 HJ님과 협력하니 내가 몰랐던 부분이 채워지고, 필요한 기능이 무엇인지 정확하게 파악하고, 그 기능을 구현하기 위해 정확하고 효율적인 질문/검색을 하고, 찾은 해답을 어떻게 내 상황에 맞게 적용할 수 있었다. 그리고 추가로, 언제나 답은 '공식 문서'와 '원리 파악'에 있다는 값진 깨달음도 얻었다. 🙂 이제 앞서 [프로젝트 기획 및 준비작업] 마일스톤 정하기, UX/UI 디자인, 컴포넌트 리스트업의 에서 계획한 모든 기능구현은 마무리 되었고, 내가 한 일에 대한 회고 글도 끝이 났다. 자면서도 코딩하는 꿈을 ..

3주차 때는 2주차의 복용 일정 등록 및 관리 기능에 이어서 약올림의 또다른 핵심 서비스인 복약 정보 제공 및 관리 기능을 구현했다. 이 기능은 구현 이전부터 '약 상세 정보를 제공해주는 곳이 있나, 있으면 어디인가?' , '이 데이터를 우리 DB에 저장 할 것이냐 아니면 매번 OpenAPI로 요청할 것이냐', '어떤 정보를 제공해 줄 것인가?', 'OpenAPI를 요청하는 곳을 Client에서 할 것인가 Server에서 할 것인가?' 등에 대한 팀원간 논의가 활발하게 이루어진 부분이기도 하다. 이번에 구현했던 기능들은 기술적인 이슈나 원리를 아는 것 보다 '사례와 사용법'을 아는 것이 핵심이다. 그만큼 공식문서보다는 나보다 먼저 공공데이터, OpenAPI, xml정보의 json화를 고민했던 사람들이 기..

1. 알람 일정 등록 기능 2주차의 알람 일정, 특히 등록에 관한 기능은 약올림 서비스의 핵심 서비스 중 하나로, 카메라 촬영 또는 직접 입력으로 촬영한 이미지와 함께 알약을 등록하며 캘린더와 시간, 주기 계산 등이 모두 복합적으로 이루어져야한다. 그래서 온 팀원이 마치 한 몸인 것처럼 기능구현의 티키타카가 이루어져야했고, 실제로 그렇게 하였다! 그래서 아래와 같은 아름다운 기능이 구현 될 수 있었던 것이다. 특히 약 등록의 과정이 매우 복잡했다. 스크린 이동이 많았고, 그 스크린마다 정보(state)를 항상 가지고 이동시켜야했기 때문이다. 이 과정에서 나는 camera에 접근하여서 전방/후방카메라 선택/이미지 촬영/선택 또는 재촬영 기능과 알약 이미지를 통한 종류 예측 기능에 대해 집중하였고, HJ님이..

이번에 Full Stack 포지션을 맡게 되면서 Server와 Client의 작업을 동시 진행하였다. 프로젝트를 진행하면서 개발적인 역량을 키울 수 있었던 것도 정말 큰 성장이지만 무엇보다1. 필요한 기능이 무엇인지 정확하게 파악하고(문제 정의 능력),2. 그 기능을 구현하기 위해 정확하고 효율적인 질문/검색을 하고,3. 찾은 해답을 어떻게 내 상황에 맞게 적용하는 능력을 기를 수 있어서 정말 값진 시간이었다는 것이다. Milestone 기준 본격적인 기능구현 1주차에 Server와 Client side에서 한 일을 적어보고자 한다. 1. Server side로그인 완료 후 처음 앱에 들어가자마자 보이는 Home 페이지와 약올림 서비스의 핵심 페이지라 할 수 있는 Calendar 페이지에 필요한 API를..

이번 프로젝트 역시 프로젝트 진척도 관리, 이슈 관리, 코드 작업, 코드 리뷰 모두 Github을 통해 이루어진다. 그래서 전체적인 방식은 첫번째 프로젝트와 동일하며, 이에 Github 활용과 Gitflow에 대한 내용은 1. [Basic] 프로젝트 Intro, 첫 번째 미팅 2. [Basic] 프로젝트 준비 - 프로젝트 협업을 위한 Gitflow 에 정리해 둔 바 있다. 1. Project관리를 위한 Issue카드 생성 및 마일스톤 정하기 다만 이번에는 마일스톤을 더 촘촘하게 짜고, 최대한 마일스톤 마감기한을 맞출 것을 팀 내 약속으로 정하였다. 그리고 이번에 SH님께서 front, HI님께서 Back, HJ님과 내가 Full stack을 맡게 되면서 기능 구현량이 많은 이슈카드에는 assinee에 미..

AWS 공부와 병행하여 배포를 진행하였기때문에 AWS 카테고리에 정리 및 저장해 놓았습니다. 여기에는 링크를 순서대로 삽입하는 것으로 대신하겠습니다. Server Side 1. [EC2] AWS를 이용한 서버 환경 이해 및 구축 2. [ACM] 도메인 주소 생성 및 AWS Certification 3. [ELB] Elastic Load Balancer 생성 및 세팅 4. [Route 53] Route53의 도메인과 DNS 연결 5. [NGINX] EC2에 nginx 설치 및 세팅 Database 1. [RDS] 데이터베이스 서버 생성과 접속 Client Side 1. [ACM] 도메인 주소 생성 및 AWS Certification 2. [S3] S3를 이용한 정적 웹 사이트 호스팅 3. [CloudFro..

첫 번째 프로젝트로 진행한 SAFU 웹 서비스 의 client side를 배포하고자 한다. 순서는 1.ACM 에서 SSL 인증서 발급 2. S3를 이용한 정적 웹 사이트 호스팅 3. CloudFront에 S3 버킷 배포하고 SSL Certificate설정 4. Route 53에서 도메인 연동 으로 진행 될 것이다. 이번에는 3. CloudFront에 S3 버킷 배포하고 SSL Certificate설정에 대해 알아보고자 한다. CloudFront에 대해 배운 개념 정리와 앞서 CloudFront 웹 배포 생성 후 앞서 생성한 S3와 연결하는 것을 진행해보도록 하겠다. 1. 이해해야하는 개념 CDN(Contents Delivery Network)의 개념과 동작 원리에 대해서는 아직 공부가 더 필요하다.. 일..

첫 번째 프로젝트로 진행한 SAFU 웹 서비스 의 client side를 배포하고자 한다. 순서는 1.ACM 에서 SSL 인증서 발급 2. S3를 이용한 정적 웹 사이트 호스팅 3. CloudFront에 S3 버킷 배포하고 SSL Certificate설정 4. Route 53에서 도메인 연동 으로 진행 될 것이다. 왜 CloudFront와 Route53을 사용하는가? ([ACM] 도메인 주소 생성 및 AWS Certification에 적어놓은 것을 다시 가져오자면) 왜냐면 SAFU 웹 서비스 을 배포단계에서 막혔던 부분이 sameSite issue였는데, 이유는 HTTPS 프로토콜을 사용하지 않아서 sameSite = none을 설정하더라도 역시 쿠키가 보내지지 않기 때문이다. 그래서 로그인 후에도 세션..

우리 서비스(SAFU)는 '깃헙으로 로그인하기(간편 로그인 기능)'을 제공한다. HJ님과 나를 아주 맘고생시켰던 깃헙 소셜로그인..ㅎㅎ 특히 client가 사용하는 주소(port:3000)와 server가 사용하는 주소(port:4000)이 달라서 리다이렉트 로직이 너무 헷갈려서 힘들었다. 예전에 OAuth2와 소셜로그인에 대해서 블로그에 정리한 적이 있었지만 백지상태에서 처음부터 구현하려고 하니 결국 내가 아무것도 모르고 있는 상태였구나를 깨달았다. 그 포스팅과 이번에 구현해본 코드를 통해 여기에 내가 이해한 바를 다시 한번 자세히 정리해보기로 했다. 1. OAuth2의 이해 libertegrace.tistory.com/entry/40-Authentication-OAuth-20 40. Authentic..

점점 SAFU 웹페이지가 예뻐지고 있다! SH님께서 CSS를 전적으로 담당해주셔서 시간이 갈 수록 점점 예뻐지고 있다. 회원가입, 로그인, 로그아웃, 아이디 비번 찾기, 리뷰 카드 랜더링, 로그인 전/후 메인 페이지 까지 구현이 완료 되었다. 로그인 후 Mypage 버튼을 누르면 이 페이지로 이동하며 Mypage는 컴포넌트는 회원 정보 출력과 컴포넌트로 구성되어 있다. 들어가자마자 자신의 회원 정보와 자신이 작성한 리뷰카드들이 보여야 하며 컴포넌트의 '회원정보수정' 버튼을 누르면 비밀번호와 githubID를 수정할 수 있는 /Editinfo 페이지로 넘어간다. 그리고 컴포넌트의 각 카드인 컴포넌트에서 바로 리뷰 수정을 할 수도 있다. 여기서 Oct 26, 2020 ~ Oct 30, 2020 동안 구현한 ..