본문 바로가기

분류 전체보기64

[항해99] 8주차 회고 한 주에 대한 정리 이제 항해 마지막 프로젝트인 실전 주차입니다. 이번 주는 vscode를 거의 켜지 못하고 프로젝트를 기획하는데 시간을 보냈습니다. 먼저, 기획했던 웹 게임이 기술적인 어필이 부족하다고 느껴진다는 피드백이 있어 기획을 바꾸게 되었고 이번 주차가 끝날때 즘에 기본적인 기획을 완료하게 되었습니다. 기획이 어렵다는 것을 새삼 다시 느끼며 다음 주차는 코딩에 집중할 수 있었으면 좋겠습니다. 2022. 3. 6.
[React: code] 리덕스는 어떻게 사용할까? 이 글의 목적은 제가 작성한 코드를 다시 되집어 보는데 있습니다. 프로젝트를 진행하면서 리액트의 리덕스를 어떠한 순서로 사용하여 CRUD를 구현하였는지 다시 보고 정리하는 글입니다. 사용한 주요 패키지는 아래와 같고, firebase를 사용했습니다. - react-redux - redux-action - redux-thunk - immer 먼저, 리덕스를 살펴보면, 스토어 - 데이터가 저장되는 곳 구독 - 스토어에서 컴포넌트로 데이터를 보내는 행위 리듀서 - 저장된 데이터(상태)를 관리하는 곳 액션 - 컴포넌트에서 데이터를 변경하여 스토어에 전송하고 싶을 때 선언하는 객체 디스패치 - 스토어의 내장 함수 중 하나로 액션 객체를 넘겨줘 상태를 업데이트하는 것 리덕스의 흐름 1) 리덕스 스토어를 컴포넌트가 .. 2022. 3. 1.
[항해99] 7주차 회고 한 주에 대한 정리 이번 주차는 처음으로 클론코딩 주차였습니다. 저희 조가 선택한 서비스는 마켓컬리였습니다. 이번 클론코딩을 진행하면서 가장 중요하게 신경쓴 부분은 화면의 구성이 거의 똑같도록 만드는 것이었습니다. 패딩이나 마진, 글자의 크기 간격 등 완벽하게 따라하기 위해 집중했습니다. 기술적으로 집중한 부분은 redux를 사용하는 것 이었습니다. 개인이 원하는 상품을 장바구니에 담아야했기 때문에 이를 어떤식으로 관리해야하는지에 대해 고민을 했습니다. 처음에는 장바구니에 담은 물품들만 redux의 스토어에 저장하고, 장바구니에서 각 물품의 수량을 useState로 관리하니 오류가 발생했습니다. 이를 해결하고자, redux로 수량과 총 가격까지 관리했고 문제를 해결할 수 있었습니다. 이번 주차를 진행하면.. 2022. 2. 28.
[항해99] 6주차 회고 한 주에 대한 정리 이번 주차는 처음으로 프론트엔드와 백엔드가 같이 프로젝트를 진행했습니다. 간단히 소감을 말하자면 너무나 어려웠고 진이 빠지는 듯한 주차였습니다. 처음으로 항해기간이 쉽지 않구나 라고 생각했었습니다. 먼저, 가장 어려웠던 부분은 소통을 하는 부분이었습니다. 프론트 엔드는 백엔드가 사용하는 용어나 어떻게 서버작업이 되는지 알지 못했고, 백엔드는 프론트엔드가 어떤 특성을 가지고 있는지 알지 못해 서로 필요한 부분을 설명하기에 어려운 부분이 많았습니다. 코드를 작성하는 부분도 생각보다 오류가 많았습니다. 서버랑 연결하기 위해서 axios를 사용해 요청하고 응답을 받았는데 이 과정에서 알 수 없는 오류들이 많이 나와 생각했던 것보다 많은 부분에서 오류를 겪었습니다. 그래도, 이번 주차를 진행하.. 2022. 2. 20.