이번주는 그래도 저번주였던 실전 1주차에 비해 새로운 기술에 대해 적응한 것을 바탕으로 많은 것을 이뤄냈던 주차였다. 타입스크립트와 리액트 쿼리 사용에 보다 능숙해진 상태에서 진행을 하니 생각보다 빠르게 진도를 나갈 수 있었다. 1주차에 했었던 검색기능을 보완하였고, 메인 기능 중 하나인 달력 일정 관리 기능을 80% 이상 완성할 수 있었다. 달력 기능의 경우 여러가지로 복잡한 로직들이 있어서 본격적으로 기능구현을 시작하기 전에 백엔드 사람들과 디자이너님이 알기 쉽게 나름대로 플로우 차트를 만들어보았다. Figma Created with FigJam www.figma.com 1. 달력 - 일정 관리 기능 - 달력 틀 만들기 가장 먼저 달력 자체를 어떻게 만들어야 할지를 몰라 구글링을 많이 했었다. 여러가..

1주일 늦게 쓰는 12월 5주차 WIL이다ㅎㅎㅎ 변명이지만 12월 4주차부터 5주차까지 정말 눈코뜰새 없이 코딩만 했다. 일주일중 딱 하루 쉬는 일요일은 또 휴식을 취하느라 바빴다. 그래서 1월이 되고 1주일이 더 지나서 쓰는 WIL이다. 항해 7주차에 해당하는 클론 코딩을 진행하였고, 우리조는 인스타그램을 클론 해보기로 하였다. 항상 스마트폰으로 써서 몰랐던 인스타그램의 UI들을 많이 알게 되었다. 특히나 모달창이 매우 많다는 것이다. 모달창이 한두개가 아니라 너무 많아서 portal이 아닌 그냥 컴포넌트로 모달창을 만들다 보니 어려운 점이 많았다. 그치만 또 나름대로 성공적으로 잘 완료하였다. 아래는 우리조의 최종적인 구현을 담은 유튜브 영상이다. 최대한 UI를 똑같이 구현하려고 노력하였다. 1. 모..

이번주에는 실전프로젝트를 본격적으로 시작하였다. 시작하고 나서 호기롭게 우리조는 지금까지 해왔던 리덕스를 쓰지말고 리액트 쿼리를써보자고 결정하였고, 또한 타입스크립트를 배워서 사용하기로 하였다. 문제는 지금까지 리액트 쿼리와 타입스크립트를 한번도 쓴 적도 배운 적도 없다는 것이었다! 그래서 지난 주 주말까지 계속 헤맴의 연속이었다가 이번주에 오면서 다소 적응이 되면서 다행히 1주차 스코프를 완벽하진 않지만 대략적으로 완성할 수 있었다. 그런데 디자이너와 협업하면서 아직 와이어프레임 조차 다 완성되지 않아서 css 작업은 전혀 되지 않았다. 디자인이 확정되지 않았으므로 확정되고 나서 한번에 몰아서 하는 게 나을 것 같다. 1. 로그인 / 회원가입 기능 : react-hook-form, 카카오 소셜 로그인 ..

이번주는 처음으로 백엔드와 협업해본 주차였다. 어찌보면 CRUD 자체는 지난 주와 크게 다르지 않았지만 그 외적인 부분에서 구현해야할 기능들이 있었다. 로그인 및 회원가입 기능과 게시글 좋아요 기능이 추가되다보니 이 부분에서 새롭게 배우는 부분이 많았다. 먼저 이번주에 완성한 결과물은 다음과 같다. 유튜브 링크 http://hh99-mini5-codingvibe.s3-website.ap-northeast-2.amazonaws.com/ 코딩할 때 좋은 플레이리스트라는 컨셉으로 코딩할 때 발생하는 상황에 따라 카테고리를 정하였다. 메인페이지에는 카테고리와 좋아요를 많이 받은 플레이리스트 Top3가 나온다. 카테고리별 페이지다. 옆에 메뉴바는 position:fixed로 만들어서 스크롤해도 올라가지 않는다. ..

이번주는 정말 너무 너무 바빴다. 학교 시험도 있었고 리액트 협업 주차다 보니 전 주에 비해 배우는 것들이 어려웠다. 사실 이번주에 겪은 트러블 슈팅들을 하나도 빠짐없이 다 TIL로 썼다면 얇은 책 한권이 나올 정도로 겪은 트러블 슈팅이 많았고 또 그걸 통해 배운 것이 많았던 주차였다. 그래서 이번주에 배우고 겪은 개념들과 문제들을 주요 키워드를 중심으로 러프하게 정리해보고자 한다. 최종적인 결과물은 다음과 같고 배포까지 성공적으로 마쳤다. 크리스마스에 어떤 유형으로 보낼지(가족과 함께, 연인과 함께, 혼자서, 부모님과 함께)에 따라 카테고리가 나눠지고 카테고리 별로 게시물 작성및 게시글들을 볼 수 있다. React App christmas-project-wruding-christmas.vercel.ap..

이번주는 리액트 숙련 주차로 다양한 것들을 배웠다. 리액트의 기본적인 훅인 useEffect와 리덕스, 라우터에 대해 배웠다. 그리고 지난 주에 한 과제를 배운 리덕스와 라우터를 적용해 바꿔보며 응용해보았다. 생각보다 일찍 끝나서 코딩애플 강의도 좀 듣고, 마지막 남은 학기 시험도 보고 왔다. 리액트 훅이 나오기 전에는 컴포넌트의 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를 사용했다고 한다. 물론 state 관리도 가능했기 때문이다. 클래스형 컴포넌트를 다음과 같이 세밀하게 컴포넌트의 생명주기를 일일히 코드로 설정해주는 방식이다. 라이프 사이클들은 크게 세 가지로 나눌 수 있다. 생성될 때 (마운트 될 때 - mount) constructor, render, componentDidMount ..

이번주는 항해에서 주특기 입문 주차였다. 나의 주특기인 리액트로 간단한 Todo 리스트를 작성할 수 있는 페이지를 만드는 것이 과제였다. 제목과 내용을 등록하면 진행중인 todo 리스트에 등록되고 완료버튼을 누르면 완료된 리스트에 추가가 된다. 반대로 완료된 리스트에 있는 todo게시물의 취소버튼을 누르면 다시 진행중인 todo로 바뀌게 된다. 삭제를 누르면 해당 todo 게시물이 삭제된다. Vercel을 통해 배포까지 진행하였다. React App todo-pearl-ten.vercel.app 이번 과제로 기본적인 리액트 개념인 state, props, 리렌더링에 대해 배우게 되었다. 리액트는 SPA 방식으로 MPA와 다르게 가상돔을 사용하여 변경된 부분만 따로 요청하는 방식이다. 그렇다보니 useSt..

이번주는 알고리즘 주차였다. 일주일 동안 프로그래머스 중간 단계문제들 26문제를 풀었다. 사실 자바스크립트로 알고리즘 문제는 처음 풀어봐서 처음에는 달리기반에 온 것을 약간 후회할 뻔 했지만, 그래도 일주일 동안 실력이 많이 늘은 것이 보여서 매우 뿌듯해하는 중이다. 일주일 전만해도 깊은 복사, 얕은 복사도 모르고 call by value도 몰랐던 나였다ㅋㅋㅋ 알고리즘뿐 만 아니라 자바스크립트라는 언어 자체에 대한 이해도가 높아졌다. ES라는 자바스크립트의 언어 규격, 스펙에 대해 알게 된 점도 많다. 특히나 ES5에서 ES6 (정확히는 ES 2015이다.)으로 넘어오면서 달라진게 많아졌다고 한다. 가장 중요한 3가지에 대해 설명하자면 먼저 let, const 키워드가 추가되었다. 기존의 변수는 함수 s..