이번 주는 기존 TodoList 프로젝트를 리덕스와 스타일컴포넌트, 리액트 돔 라이브러리를 이용해 리팩토링했다. 페이지나 컴포넌트가 많지 않아서 이번 프로젝트에 사용할 필요성은 없었는데도 불구하고 state관리가 훨씬 편리했고 계속 사용해보면서 익숙해졌다. 스타일컴포넌트도 처음엔 이질감이 들었지만 props전달로 다양한 스타일의 요소들을 만들어보니까 사용하는 이유를 알 수 있었다. 다음주는 리액트 첫번째 팀프로젝트로 파이어 베이스를 이용한 회원가입, 로그인과 기본적인 CRUD를 구현한다. 그전에 리엑트의 기본과 다양한 훅들을 한번 더 복습해야겠다.

useState를 사용하면서 set함수를 각 컴포넌트에 전달하는 식으로 구조를 짰다. 하지만 이런 구조에서 문제점은 state변경이 각 컴포넌트에서 모두 가능하기 때문에 에러가 발생했을 때 어디서 발생했는지 찾기가 어렵다. 그랬기에 State변경 함수를 만들어 각 컴포넌트로 전달하는 구조로 리팩토링했다. 그런데 함수내에서 set을 이용해 state를 변경하고 그 state를 localStrorage에 저장하는데 빈 값이 저장되는 문제가 발생했다. setState의 작동 방식을 알고나서 해결할 수 있었다. setState함수는 비동기 방식으로 작동하며 함수 내에서 작동시 리턴되는 값을 기존 값과 비교해 변경사항이 있을 시 렌더링 시키는 방식이었다.(배치 업데이트) 그래서 localStorage에는 아직 변..

리액트 입문주차 수업을 들었다. 자바스크립트를 깊이 공부하고 나서 리액트를 다시 해보니 예전과는 다르게 리액트를 사용해야하는 이유와 작동원리도 알 수 있었다. 동시에 리액트로 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..

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