What I studied

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문서에 접근하기 위한 일종의 인터페이스라고 정의할 수 있을 것이다. 이 객체 모델은 문서 내에 있는 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공할 ..

자바스크립트의 ES란? 자바스크립트는 언어를 뜻하고 ES는 자바스크립트의 표준 규격을 의미한다. ES뒤에 붙는 숫자는 버전을 의미하는데 ES5는 2009년, ES6은 2015년 출시하였다. ES5와 ES6 사이에는 6년이라는 기간이 존재하는데 그 사이에 많은 기능이 추가되었다. ES5와 ES6의 차이 우리가 사용하는 것들은 시간이 지나면서 편의를 위해 더욱 더 발전하게 되는데 프로그래밍 언어 또한 기존의 취약한 점을 보완하고 필요한 기능을 추가하면서 발전해나가고 있다. ES5 버전 다음으로 나온 것이 ES6 버전이며 ES6에는 새로운 기능들이 많이 추가 되었기에 지금부터 추가된 부분을 살펴보려고 한다. 1. let과 const 추가 2. 화살표 함수 추가 3. 템플릿 리터럴 추가 4. 프로미스 5. 모듈..

내가 개발자가 되기로 결심하게 된 이유 원래 나는 대학교 졸업을 앞둔 4학년 학기 초까지만 해도 전공을 살린 사회복지사의 길을 생각하고 있었다. 사람 만나는 것을 좋아하고 사회복지사의 길이 내 성향과도 잘 맞았기 때문에 그렇게 생각했던 것 같다. 원래부터 하고 싶은 것이 정말 많았던 사람이기에 대학교 1학년 때부터 4학년이 끝나는 시점까지 정말 바쁘게 산 것 같은데 4학년 때까지만 해도 참여했던 교내/대외활동이 20개정도 된다. 수많은 서포터즈 활동과 아르바이트, 동아리 활동이 나에게는 정말 큰 경험이 되었고, 앞으로 내가 어떤 것을 하고 싶은지 다시한번 깊게 생각해볼 수 있는 계기를 만들어주었다. 스타트업 서포터즈 활동을 하면서 웹사이트 전반적인 것에 관심을 가지게 된 것이 첫번째 이유이다. 각각의 기..