리액트 입문주차 수업을 들었다. 자바스크립트를 깊이 공부하고 나서 리액트를 다시 해보니 예전과는 다르게 리액트를 사용해야하는 이유와 작동원리도 알 수 있었다. 동시에 리액트로 todolist 개인 프로젝트도 진행헀다. 고민했던 부분은 컴포넌트의 구조와 state들의 상태관리였다. 컴포넌트화의 기준이 명확하지 않았기에 반복 될 여지가 있는 부분을 컴포넌트화 했다. useState를 제외한 hook들을 사용하지 않았기에 데이터를 props로 전달했고 필요한 부분에서 useState의 set 함수를 전달했다. 하지만 이렇게 코드를 짰을 때 버그가 발생했을 때 각종 컴포넌트에서 set함수로 state를 변경하기 때문에 어디서 문제가 발생했는지 찾는게 어려웠다. 그래서 set 함수를 사용하는 함수를 만들어놓고 필..

TodoLIst 만들기 개인과제를 진행하면서 깃플로우 전략을 활용하려고 했다. 깃플로우란 브랜치 전략 중 하나이다. 각 기능을 feature 브랜치로 각각 나누어 작업 후 Develope브런치에 PR한다. 이번 프로젝트에서 기능을 크게 Todo저장과 수정삭제 두개로 나눴다. 먼저 Develope에서 layout 스타일링을 하고 feature1, feature2 브런치를 생성하고 feature1에서 저장 기능을 작업했다. feature2에서 수정삭제기능을 구현하려면 feature1의 기능이 필요했기에 feature1을 pull로 받아왔다. 하지만 의도와 다르게 dev 브런치에서 나뉘는 게 아닌 feature1과 feature2가 이어졌다. 내 의도대로 하려고 했으면 dev에서 feature1을 pull 받..

SPA특강을 듣고 놓치고 있던 것들이나 팁을 리마인드 해본다 MPA와 SPA의 의미는 알고 있었지만 특강에서 JS만으로 spa를 구현하는 걸 보면서 자세한 작동원리를 알게되면서 SPA와 MPA가 명확하게 구분되는 것이 아닌 공존하는 경우가 많다는 점도 알았다. alios(별칭 ex: origin) / Loopback(자신의 IP로 접근) url의 구조에서 hash(flagment)는 클라이언트만 가지고 있는 정보다. const a = " " ?? 10 a가 null이나 undefined면 10을 할당한다. 이벤트리스너는 가비지 컬렉터의 수집 대상이 아니다. 사용하지 않을 때는 removeEventListener로 제거해주는게 성능을 향상시킬 수 있다. 의도적으로 에러를 던져줘야 하는 경우가 있다. thr..

두번째 팀 프로젝트의 주제는 API를 활용한 영화정보를 가져와서 메인페이지에서 영화목록을 보여주고 상세페이지에서 각각의 영화정보 페이지와 Review의 CRUD를 구현하는 것이다. 라이브러리나 서버와 데이터베이스를 사용하지 않고, 바닐라 자바스크립트로 구현하고, 로컬스토리지를 이용한다. 내가 맡은 역할은 영화를 클릭했을 때 이동되는 detail페이지의 구현이었다. 단순히 API로 받아온 정보로 소개만 하는건 너무 평범하다고 느꼈고, 추가적인 기능을 고민해서 트레일러 영상을 받아와 보여주고 좋아요 기능을 통해 메인페이지에서 좋아요를 클릭한 리스트를 구현했다. https://github.com/Rimsunwoo/movie_review UI 기능구현 및 설명 1. main page - detail page 영..

두번째 팀프로젝트를 진행했고, 리액트주차로 들어가기 전 자바스크립트의 마무리 주차였다. 아무리 해도 채워지지 않는 느낌의 자바스크립트였다. 이번에 꽤 깊은 이론까지 학습한 것 같다. 그만큼 어려웠고 헷갈렸다. 그동안 당연하게 사용해왔던 여러 기능들이 어떤 원리로 작동하는지 알 수 있었다. 그 원리를 앎으로서 코드를 아무렇게 사용하지 않고 효율성과 최적의 방법을 고민할 수 있을 것 같다. 이론에 그치지 않고 바로 팀프로젝트를 통해 적용해보며 체화할 수 있었다. 첫번째 팀프로젝트때 협업으로 고생했던 만큼 이번에 깃의 중요성을 더욱이 알고 잘 활용하려고 노력했다. 아직 완벽하진 않았지만 각종 에러와 버그를 만나며 다양한 상황에서의 대처법을 배웠다. 또 이번 프로젝트를 통해 느낀 것은 단순히 구현하는 것에 집중..

기존의 영화소개 페이지에서 상세페이지 기능을 더하는 두번째 팀프로젝트가 끝났다. 코드리뷰를 통해 우리가 구현한 코드의 의도를 다시 떠올리고, 보완해야할 점들도 피드백 받을 수 있었다. 1. 기초적이지만 자주 놓치는 HTML 마크업의 구성(SEO & Semantic한 구조설계) 2. HTML파싱 타이밍을 고려한 script태그의 위치와 속성(defer) 3. 코딩컨벤션의 통일(파일구조, 변수명, 모듈화) 4. 크로스브라우징 이슈를 해결하기 위한 reset.css 5. git과 github의 적절한 활용으로 협업의 효율성 증가(clone, pull, push, commit , branch)