개발기록

화면을 구성하면서 당연하게도 일어나는 일은 컴포넌트가 중복된다는 점이다. 나는 로그인 페이지와 회원가입 페이지의 구현을 담당했는데, 그래서 그런 건지는 모르겠지만 버튼(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 파일 내에서 중복되는 클래스 명이 있는데, 두 컴포넌트 사이의 관계가 부모-자식일 때,..

이때까지 개발을 공부하며 의도적으로 피했던 단어가 있다. 프로그램 개발 과정에서 자주 들을 수 있는 '빌드 및 배포' 라는 단어였다. 단어 자체로 어떤 느낌인지 대충 감은 왔다. 빌드는 내 코드를 하나의 실행 가능한 어떤 프로그램으로 만들어주는 일인 것 같은데, 그럼 컴파일이랑은 뭐가 다른 거지? 배포는 웹 서버에 프로젝트를 올려서 다른 사람들도 내가 만든 프로그램을 쓸 수 있게 하는 것 같은데, 어떻게 배포가 되는 거지? 감이 오면서도 오지 않았기 때문에 이 두 단어에 대해선 보면서도 못 본 척을 했었다. 오늘은 빌드가 무엇인지에 대해 알아보고, React에서 사용하는 빌드 도구인 Webpack에 대해 간단하게 작성해 볼 것 같다. 빌드 빌드는 소스 코드 파일을 실행 가능한 소프트웨어 산출물로 변환하는..

Redux 이론 강의에 이어 실습 강의에서도 Redux에 대해 배웠다. Recoil에 대해서도 배웠지만 그건 나중에 적어보려고 한다. 오늘은 Redux 공식문서를 번역하면서 그에 대한 정보를 정리해보려고 한다. (Redux 기초 튜토리얼) Redux란 무엇인가? Redux는 애플리케이션의 상태를, action이라는 이벤트를 사용해 업데이트하고 관리하는 라이브러리이며 동시에 패턴이다. 이 action은 전체 애플리케이션에서 사용해야 하는 상태에 대한 중앙 저장소 역할을 하며, 상태를 예측 가능한 방식으로만 업데이트할 수 있도록 규칙을 제공한다. Redux를 사용해야 하는 이유 애플리케이션 내 여러 곳에서 사용되어야 하는 "전역" 변수를 관리하는 것을 도와준다. Redux에 의해 제공되는 패턴과 도구들은, ..

Redux에 대해 배웠다. Redux는 React와 이름이 비슷해, React 애플리케이션에서만 작동할 수 있는 라이브러리라고 생각했는데, 딱히 그건 아니고 자바스크립트 앱을 위한 상태 관리 라이브러리였다. React가 등장하고, 그 이후 Flux 패턴이 등장, 이후에 Vue.js나 Angular.js와 같은 웹 애플리케이션 프레임워크에서도 해당 개념을 도입해 사용할 수 있는 것 같다. (혹시 틀린 정보라면 이후에 삭제할 것이다. 일단 React 애플리케이션에서만 사용 가능한 라이브러리는 아니다.) Redux에 대해 사용하기 이전에, Flux 패턴에 대한 이해가 필요하다고 느껴 정리해보려고 한다. 1. MVC 패턴 Flux 패턴에 대해 배우기 이전에, MVC 패턴에 대해 알아야 한다. MVC는 Model..

useContext라는 리액트 기본 훅에 대해서 배웠는데, 여러 개념에 대해 헷갈리는 부분이 있어 정리하려고 한다. 다음은 리액트 공식 문서를 번역한 글이다. useContext는 컴포넌트에서 context를 구독할 수 있고, 조회할 수 있게 해주는 리액트 훅이다. 참조 useContext(SomeContext) 컴포넌트가 읽고 구독하기 위해선, 사용하는 컴포넌트의 상위 레벨에서 useContext를 호출한다. import { useContext } from 'react'; function MyComponent() { const theme = useContext(ThemeContext); // ... 구독(subscribe)라는 단어의 의미가 감이 안 왔었는데, 컴포넌트를 구독한다는 것은 구독당한 컴포넌..