What I studied

What I Learned 기본적으로 구현해야하는 MVP 기능을 구현한 후 AWS Amplify console을 통한 배포 자동화를 시도했다. 지금까지는 firebase 웹 호스팅과 AWS S3을 이용해 정적 웹호스팅을 진행했었다면 이번에는 Git과 연결하여 배포를 자동화시켜주는 AWS Amplify를 이용했다. AWS Amplify는 모바일 및 프런트엔드 웹 개발자가 AWS를 기반으로 안전하고 확장 가능한 풀 스택 애플리케이션을 구축 및 배포할 수 있도록 지원하는 제품 및 도구 세트로 프론트엔드뿐만 아니라 백엔드까지 배포자동화 시스템을 구축할 수 있다. Git 브랜치를 연결해놓으면 자동으로 build가 이루어져 배포가 자동화되는 것이다. AWS Amplify 배포자동화 구축 (1) Aws Amplify..

What I Learned MVP개발을 하는 3주동안 프론트엔드 쪽에서는 리액트와 리덕스, axios를 활용한 API 통신, react-h5-audio-player 등의 여러 라이브러리를 다뤘다. 상태관리 라이브러리인 리덕스를 활용해 전역 상태관리가 이루어질 수 있도록 하였고 저번 프로젝트에는 구현하지 못했던 클린업까지 구현했다. CSS 라이브러리로는 mui를 이용했고 필요한 것들을 가져와 커스텀하여 사용했다. 기본적인 MVP 기능 개발은 시간내애 어느정도 마무리했고, 중간 발표를 통해 지금까지 진행된 진행상황을 점검해볼 수 있는 시간을 가졌다. 전체적으로 기능구현에 있어 큰 어려움은 없었지만 프론트쪽에서 처리해야할 부분이 많았던 것 같다. 사소한 부분 하나하나 놓치지 않고 처리하기 위해 꼼꼼하게 기록하..

What I Learned 실전프로젝트를 시작한지 2주차가 시작되면서 기본적인 mvp 기능에 대한 구성이 어느정도 자리잡혔다. MVP 기간을 설정하고 프론트와 디자이너의 협업, 백엔드와의 소통 등의 다양한 과정을 거치며 구현해야하는 기능을 구현해나갔다. 구현해야할 페이지 및 MVP 기능 페이지 메인, 회원가입, 로그인, 마이페이지, 책 목록, 책 상세, 펀딩 목록, 펀딩 상세, 펀딩 등록, 오디오북 등록, 오디오 상세, 1:1 채팅 페이지, 오디오북 요청하기, 판매자 상세페이지 MVP 기능 메인 : 카테고리별 도서, 오늘의 크리에이터, 추천도서, 랜덤 오디오펀딩 get 로그인 & 회원가입 : 로그인 회원가입 유효성 검사, 중복확인, 로그인 유지 책 목록 & 책 상세 : 카테고리별 도서 get, 책 상세페..

What I Learned 협업을 배우다 실전 프로젝트 주차에 들어오면서 백엔드 3명과 프론트엔드 2명, 디자이너 2명이 한 팀이 되었다. 클론코딩 주차에서 백앤드와의 협업은 이미 경험했지만 디자이너분들과의 협업은 이번주차에 들어서면서부터 처음 시작되었다. 기획단계부터 MVP 실현까지 총 3주간의 시간이 주어졌고, 이 기간 내에 MVP를 구현하는 것이 우리 팀의 목표이다. 우리 팀은 오디오북 사이트를 구현하기 위해 필요한 기능과 서비스를 기획했고 그 후에 API를 설계한 후 본 작업에 들어갈 수 있었다. 프론트엔드는 기본적으로 디자이너분들과 소통하며 작업을 해야했기에 협업툴로 피그마와 노션을 활용했으며 피그마를 통해서 디자이너분들과 프론트의 즉각적인 피드백이 이루어졌다. 디자이너분들께서 작업해주신 것들을..

What I Learned 이번 주차에서는 프론트와 백이 협업하여 클론코딩을 진행했다. 어떤 사이트를 클론할지 고민하다가 마켓컬리로 결정하게 되었는데 백엔드와의 협업이 잘 이루어진 것 같아 최종적으로 클론코딩 주차를 잘 마무리할 수 있었다. 서로가 모르는 부분을 물어보고 내가 아는 것을 가르쳐주면서 서로가 성장할 수 있었던 좋은 시간이었던 것 같은데 앞으로도 팀원 모두가 같이 성장할 수 있는 그런 환경을 만들고 싶다. 저번주 미니프로젝트에서는 로그인/회원가입 기능을 맡아 이번에는 CRUD에 도전해보고 싶었다. 주특기 심화 주간에 CRUD를 구현해보긴 했지만 강의를 보고 따라하는 수준이었기 때문에 이번에는 내가 직접 적용하며 구현해보고 싶었던 것이다. 그래서 CRUD에 더하여 좋아요 기능과 추가로 스크롤 ..

What I Learned 6주차를 마무리하며 프론트와 백의 첫 협업에 대해 되돌아보는 시간을 가졌다. 그 전까지는 프론트와 백을 나누지 않고 하나하나의 개인 프로젝트를 진행했다면 이제부턴 현업에서 필요한 의사소통 기술과 협업 기술을 배우기 위한 단계인 것 같다. 처음으로 API 명세서를 같이 짜보고 그에 따라 서버와 데이터를 주고 받으며 프로젝트를 완성해나갔다. API 명세서를 보고 적는 것이 처음이라 헷갈리는 부분도 있었지만 이 부분을 정확하게 짚고 넘어가야 데이터를 주고 받을 때 문제가 생기지 않는다는 것을 알게 되었다. 프론트와 백 서로 수정되는 부분이 있을 때는 미리 사전에 고지를 하고 그 부분을 맞춰나가기 위해 소통하였으며 그 결과 투두리스트 서비스를 구현할 수 있었다. 프로젝트 소개 해야할 ..

What I Learned 이번 주차에서 리액트를 활용해 magazine 사이트 만들기를 진행했다. magazine 사이트에는 기본적으로 로그인과 회원가입 기능, CRUD 기능 등이 들어갔는데 웹에서 가장 기본적인 부분을 학습할 수 있었다. 일주일만에 이 기능을 모두 구현하기까지 어려움은 있었지만 강의 내용을 꼼꼼하게 따라하며 최종적으로 완성을 할 수 있었다. 아직 강의를 보고 따라하는 수준이라고 생각하는데 이 코드를 다시 되돌아보며 어떤 로직으로 돌아가고 있는 것인지를 확실하게 다시 공부할 필요가 있어 보인다. - Axios란? Axios는 브라우저와 백앤드를 위한, Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드와 프론트엔드 통신을 쉽게 하기 위해 Ajax와 비슷하게 활용..

What I Learned 이번 주차에서는 리액트와 조금 더 친숙해지는 시간을 가진 것 같은데 게시글 입력과 삭제 등의 기능을 파이어스토어와 연결하는 방법을 공부했다. DB와 연결하여 DB에 들어간 내용을 불러오고 삭제하는 기능을 구현하면서 오류가 발생했고 그 오류의 원인에 대해 알게 되며 리덕스로 상태관리하는 부분을 조금 더 공부해야겠다는 생각이 들었다. 라이프사이클(class형 컴포넌트 기반) 보통 라이프사이클은 class형 컴포넌트 기반을 이야기하는 것이고 함수형 컴포넌트에서는 Hook을 사용하게 된다. 먼저 class형 컴포넌트 기반의 라이프사이클을 살펴보면 "생성(mounting) -> 업데이트(updating) -> 삭제(unmounting)"와 같은 생명주기를 갖고 있다는 것을 알 수 있다...

What I Learned 이번 주차에서 리액트를 처음 다뤘는데 기존에 공부했던 자바스크립트 언어를 기반으로 새로운 프레임워크를 사용해봤다. 처음이라 익숙하지 않았지만 리액트에 대해 알고 원하는 기능을 구현하면서 점점 리액트에 재미를 붙이고 있는 것 같다는 생각이 들었다. - DOM이란? DOM은 Document Object Model의 약자로 문서 객체 모델이라고 할 수 있는데 여기서 문서 객체는 html 문서의 태그들을 자바스크립트가 이용할 수 있는 객체로 만들어 놓은 것을 말한다. 여기에 모델을 더하여 DOM을 다시한번 정의해본다면 HTML문서에 접근하기 위한 일종의 인터페이스라고 정의할 수 있을 것이다. 이 객체 모델은 문서 내에 있는 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공할 ..