🧑‍💻 짧은호흡/React

세오스 리액트 메신저 과제를 준비하면서 6개월 전에 제출했던 과제를 다시 보았다. 시간에 쫓겨가면서 하다보니, 굉장히 더러운 부분이 꽤 있다. 이런저런 기능을 추가하면서 이런저런 옵션과 props가 들어가게 되고, 그렇게 몬스터 컴포넌트가 되어간다. 스타일링을 할때도 원하는 대로 될때까지 수정에 수정을 거듭하다보니 매우 복잡해졌다. 그래서 이번 포스팅은 6개월 전 과제물 리팩토링의 기록! Recoil selectorFamily 커스텀훅을 이용해 로직 추상화 Funtion as Child Component 타입 가드 1. 네이밍 제일 시급했다. 계속 기능을 추가하면서 급급하게 변수를 만들어갔다. Room, chats, chatList 등의 이름이 별다른 기준 없이 사용되는게 스스로도 감당하기 힘들 정도였다..

중간고사 기간 잘 보내셨나요.. 전 못보냈습니다. 흑흑 다음 학기엔 무조건 기숙사에 들어가겠다는 생각을 다시 한번 해보면서, 이번주 WIL을 적고 있습니다. 중간 휴식기간동안 짜잘짜잘하게 프로젝트를 건드려보았습니다. 1. 이전에 있었던, 바텀시트 관련 문제 각 TodoItem마다 있던 바텀시트를 더 상위로 올려서 관리하도록 했다. 이젠 어떤 투두에서 연 바텀시트인지 바로 알 수 없기 때문에, 선택된 투두를 전역상태로 관리하도록 했다. useBottomSheet.tsx import { useRecoilState } from 'recoil'; import { ITodoItem } from '../interfaces/ITodoItem'; import { bottomSheetState } from '../sto..

만들어둔 과제 커리큘럼을 찬찬히 다시 보다가. 어라 이거 투두메이트 아닌가? 해서 GDSC 스터디 기간 동안 투두메이트 클론코딩 프로젝트를 시작해보기로. 클론코딩인 만큼 최대한 똑같이 스타일을 넣으려 노력했다. 갖고 있는 산세리프 글꼴을 몇개 넣어봤는데, 프리텐다드였다. 좋아하는 폰트야. 그 외에 이미지나 아이콘 등은 개발자도구 네트워크탭에서 가져오거나 피그마에서 직접 만들어 svg로 내보내 사용했다. 코드를 짜기에 앞서 컴포넌트 구조를 어떻게 짤지에 대해서 고민을 꽤 오래 했었다. 실제 투두메이트를 보면 드래그앤 드랍으로 투두를 옮겨 순서를 바꿀 수 있게 되어 있다. 심지어 다른 카테고리로도! 하지만 - 카테고리별 투두- -카테고리별 투두- 이렇게 분리해놓으면 나중에 드래그앤드랍을 구현할 때 다른 카테..

프로젝트가 규모가 커지고 뎁스가 깊어지면서 파일을 import 해올때마다 번거로워졌다. ../이 4개라니. 타입스크립트 리액트 환경에서 절대경로를 사용할 수 있도록 세팅을 해보았다. 이번 글은 그 삽질의 기록. import { useAppDispatch } from '../../../../store/app/hooks'; import { dispatchItemName } from '../../../../store/slices/challengePayloadSlice'; import a1 from '../../../../assets/icons/itemName/a1.svg'; 1. Craco로 config 건드리기 절대경로를 사용하기 위해서는 webpack의 config를 건드려야 한다. CRA로 프로젝트를 생..

리액트 프로젝트를 깃허브 액션을 통해 도커 허브에 푸쉬하는 과정까지는 이전 글에. 조직 내에 deploy용 레포지토리를 하나 파서 사용한다. 이곳에선 도커 컴포즈를 이용해 백엔드, 클라이언트, nginx 세개의 이미지를 받아와 실행한다. 먼저 깃허브 액션부터. prod-deploy.yml name: Deploy to Ec2 on: workflow_dispatch: push: branches: - main jobs: build: name: Build runs-on: ubuntu-latest steps: - name: checkout uses: actions/checkout@master - name: create remote directory uses: appleboy/ssh-action@master wit..

깃허브 액션과 도커를 이용해 리액트 프로젝트 자동 배포 환경을 구축해보기. 도커에 관한 인강을 전역하고 얼마 안됐을때 조금 듣다 말았고, 그 이후론 CI/CD에 대한 경험이 없었기 때문에. 이 기회에 정리를 해놔야겠다는 생각이 든다. 내가 한 부분은 프론트 레포지토리 관련 뿐이지만 팀에서 구축한 전체적인 흐름을 적어보겠습니다. 전체적인 코드는 이전에 고스락 프로젝트 하면서 찬진이가 세팅한거 보고 열심히 뜯어서 배워왔음. 사용할 것들 Github Actions Docker, Docker Compose Nginx 전체적인 흐름 프론트 레포지토리의 main 브랜치에 push Github Actions에서 이벤트를 감지하면 리액트 프로젝트를 빌드하고 도커 허브로 push 새로 배포를 원할 때 Deploy 레포지..

1. 스토리북 설치 기존 프로젝트의 루트 디렉터리 내에서 실행 .storybook 디렉토리 안에 main.js와 preview.js가 생성된다. # Add Storybook: npx storybook init npm run storybook 명령어를 통해 로컬호스트 6006번 포트에서 실행할 수 있다. 2. Styled-components 적용 preview.js에서 설정을 해준다. import React from 'react'; import { ThemeProvider } from 'styled-components'; import { GlobalStyle } from '../src/lib/styles/global-style'; import { theme } from '../src/lib/styles/t..