개발기록

3주에 걸친 2차 프로젝트가 끝이 났고, 3개월에 걸친 부트캠프도 끝이 났다. 시작할 때는 정말 열심히 해야지 생각했는데 끝나고보니 아쉬운 부분도 많고, 그래도 참 열심히 했구나 싶다. 부트캠프 자체에 대한 감상을 적어보자면, 정말 빨리 지나갔다. 3개월이 그렇게 긴 시간까지는 아니긴 하지만... 가장 초반에 HTML, CSS 배울 쯤에는 이미 아는 내용이라 강의 1시간 만에 다 듣고 그랬는데, 완전 처음 접하는 개념이나, 후반에 접어들어갈수록 개념을 이해하는 데에만 꽤 긴 시간이 걸렸다. 그리고 '이 개념을 정말 하루만에 배우고 넘어간다고??' 싶은 부분도 많았다. (이건 어쩔 수 없다 부트캠프니까...) 프로젝트나 스터디를 할 때는 기본적으로 4~5시에 자게되니까 개인적으로 실력의 부족함도 느끼고, ..

프로젝트도 마지막에 접어든다. 다행인지 아닌지 나 혼자 메인 기능이 아닌 자잘한 기능들을 맡게 되어서 생각보다 빨리 기능 구현이 끝나게 되었다. 빨리 끝내서 다른 분들도 도와주고 싶은데... 아무튼 어제~오늘은 무한 스크롤을 구현하게 되었는데, 무한 스크롤의 로직 자체는 대강 알고 있었는데 직접 구현해보는 것은 처음이었다. 내가 생각하는 로직 1. 스크롤을 맨 밑으로 내림 2. 스크롤 이벤트를 감지함 3. API 요청 전달 4. 받아온 데이터를 기존 데이터에 추가 구현하고 보니 그렇게 틀린 생각은 아니었다. 무한 스크롤은 대략 이런 방식으로 일어난다! 구현으로 얘기를 넘기자면, 원래는 React Query 에서 제공하는 useInfiniteQuery 훅을 사용할 생각이었는데, 코치님께서 리액트 쿼리를 사..

맡은 부분의 기능 구현은 (아마도) 끝냈고, 중복되는 코드를 커스텀 훅으로 만들어 파일 분리를 시도했다. 그러나 문제가 있었는데, 분리한 파일 내에서 다른 훅에서 사용하는 데이터를 참조하고 있다는 점이었다. 어떤 뜻이냐면, 예를 들어 여러 페이지에서 이메일 값 입력을 받고, 입력한 이메일을 검증하고, 이메일을 통해 인증번호를 전송하는 코드를 중복으로 사용하고 있어서 useEmail이라는 파일로 분리했다. 근데 useEmail 내에서 인증번호를 전송하고, 검증하는 데 서버에 요청을 전송하고 응답 코드에 따라 모달 창의 메시지를 다르게 보여주려고 한다. 그렇지만 모달 창 상태의 경우 useModal이라는 파일로 따로 분리를 해 둔 상태이다. 이럴 경우에 모달 창 데이터를 어떻게 가져오느냐에 대해 생각했는데,..

컴포넌트 분리에 시간을 너무 많이 써서 기능 구현이 늦어졌다. (...) 오늘 안에 구현해야지~ 라고 생각은 했었는데 코치님들께서 제일 빠르게 구현되어야 할 부분이 이 부분이라고 한 걸 듣고 부담이 많아졌다. 아무튼 어떻게든 구현을 해냈고, 일단 기능 구현 후에 중복되는 코드를 분리하는 식으로 갈 것 같다. 그리고 이 글에선 페이지를 만들면서 겪었던 문제들에 대해 적어보려고 한다. 1. axios timeout 설정 const api = axios.create({ baseURL: import.meta.env.VITE_BACKEND_URL, timeout: 5000, withCredentials: true, }); 처음 axios 인스턴스를 생성할 때 timeout을 1000(1초)로 하였다. 그러나 이메..

화면을 구성하면서 당연하게도 일어나는 일은 컴포넌트가 중복된다는 점이다. 나는 로그인 페이지와 회원가입 페이지의 구현을 담당했는데, 그래서 그런 건지는 모르겠지만 버튼(Button)과 입력 창(Input)이 모든 페이지에서 비슷한 모양으로 중복되었다. 그래서 공통 컴포넌트로 분리를 하였는데... export default function Button({ bgColor, textColor, width, height, type, borderColor, fontSize, isDisabled, children, }) { return ( {children} ); } 로그인과 회원가입 페이지에서 사용하는 버튼은 다음과 같다. (아래는 내가 임의로 지은 버튼의 이름이다.) 1. 기본 버튼 배경: 파란색 글씨: 흰색 ..

프로젝트를 시작한 지 한 주가 지나고 있다. 진행도는 다른 팀의 진행 상황을 몰라서 잘 얘기하지 못하겠지만 꽤 빠른 편이 아닐까 라고 생각한다. 내가 속도가 더뎌서 오히려 팀원 분들께 민폐를 끼치고 있는 것 같아 걱정이다. (그래도 걱정해서 뭐하나... 그 시간에 하나라도 더 배우는 게 팀에게도 나에게도 좋은 일일 것이다...) 1. react-icons 용량 줄이기 React 프로젝트에서 아이콘을 쉽게 컴포넌트 형태로 사용할 수 있도록 도와주는 라이브러리이다. (링크)에서 사용할 수 있는 아이콘과 아이콘을 현재 프로젝트에 적용시키는 방법도 제공해준다. 그 중 우리는 ionicons5 를 사용하기로 했다. 제일 아이콘 종류가 많았기 때문에... ionicons 자체만 사용하려면 script 태그로 설치하..

피그마로 전체적인 웹(애플리케이션)의 프로토타입이 완성되었다. 또, 프로젝트 시작을 위해 폴더 구조를 어떻게 해야 할지 얼추 정하였다. 최종적으로 결정된 폴더 구조는 다음과 같다. 📦 client └─ src ├─ components │ ├─ commons │ │ └─ (공통적으로 사용하는 컴포넌트) │ └─ (페이지 폴더) │ └─ (페이지에서 사용하는 컴포넌트) ├─ pages │ └─ (페이지 파일) ├─ services │ └─ (도메인 별로 나눈 서비스 파일) // axios로 서버에 데이터 요청 ├─ hooks │ └─ (커스텀 훅) ├─ recoils │ └─ (데이터 별 atom과 selector를 합친 파일) ├─ stores │ └─ (React Query를 사용해 가져온 데이터를 저장..

오늘은 3주간의 2차 프로젝트 중 첫 번째 날이다. 일요일에 미리 만나 서로 소개 후 주제에 대해 얘기를 나눴지만 어쨌든 공식적인 시작은 오늘부터다. 오늘은 프로젝트를 받아 서로 적용이 잘 되는지 확인하고, yarn이나 node 등의 버전을 통일했다. 또 주제에 대한 상세 요구사항을 적어보는 시간을 가졌다. 우리 팀에서 선정한 주제는 '요양 병원 정보 제공 및 예약, 추천 사이트' 이다. 주요 내용은 '요양 병원에 대한 내용을 제공하는 것'이고, 그 다음 여러 조건을 입력 받아 사용자에게 알맞는 요양 병원 추천, 그리고 예약 버튼을 누르면 바로 해당 병원의 전화번호로 연락할 수 있도록 연결해주는 기능을 구현하고자 했다. 이슈1) 데이터 선정 데이터를 위해 참고하려고 했던 사이트는 공공 데이터 포털이였다...

recoil의 atom과 selector에 대해 조금 헷갈려서 정리해보았다. atom은 그 자체로 단일 데이터를 저장하고, selector는 atom을 통해 계산하여 얻어야 하는 데이터가 있을 때 정의하면 되는 것 같다. 호환성이나 단순함을 위해 외부 전역 상태를 사용하는 것보다, React에서 이미 만들어진(built-in) 상태(state) 관리 기능을 사용하는 것이 좋다. 컴포넌트 상태는 공통 조상 컴포넌트까지 올라가서야 공유가 가능하지만, 그렇게 되면 해당 전역 상태를 사용하는 모든 트리들에 대한 리렌더링이 필요하다. Context는 단일 값으로만 저장이 가능하고, 스스로 consumer를 가지지 못했다. 이것이 전역 상태를 선언한 트리와 해당 상태를 사용하는 트리 간의 분리가 불가능하게 했다. ..

부트캠프 수강도 마지막을 달리고 있다. 여느 학교의 수업들처럼, 끝나고나면 배운 것도 없이 몇 달이 훌쩍 지난 것 같다는 생각이 든다. (진짜 배운 게 없다는 건 아니다. 실제로 많은 걸 가르쳐주셨고, 매우 유용했지만, 내가 잘 체득한 건지 모르겠다.) 이 블로그에 글을 쓰면서, 이제서야 느낀 건데 이때까진 배운 내용의 외전 같은 느낌으로 배운 내용 외에 궁금한 내용을 알아보는 글을 썼었는데(남들 눈엔 어떻게 보였는지 몰라도, 일단 나는 그런 의도로 작성했다...) 배운 내용을 우선적으로 정리하는 게 중요하다는 생각을 했다. 오늘은 스타일을 적용하는 여러 방법에 대해 배웠다. 1. CSS Module 서로 다른 JSX 파일 내에서 중복되는 클래스 명이 있는데, 두 컴포넌트 사이의 관계가 부모-자식일 때,..