🧑‍💻 짧은호흡/React

프론트엔드 개발을 하다보면 흔히 마주할 수 있는 상황이다. Select, Toggle 또는 DatePicker 등의 인풋 컴포넌트들을 설계할 때, 그 컴포넌트들을 핸들링할 커스텀훅도 같이 작성해 사용할 수 있다. 보통은 useToggle, useSelect 등의 이름으로 쓰고 [value, onChange] 같은 배열을 return해 사용한다. 외주 개발을 하면서 초기에 이런 컴포넌트 작업을 해야할 일이 많았다. import useSelect from '~hooks/useSelect'; import Select from '~components/Select'; const App = () => { const [value, handleSelectValue] = useSelect(); return ( ); };..

귀찮은 일은 꽤나 자주 일어난다. 외주 작업 중 테이블 컴포넌트를 구현해야하는 일이 있었고, 기존 코드는 Core UI라는 라이브러리를 사용하고 있었다. 라이브러리가 4.0버전으로 업그레이드 되면서 PRO버전이 새로 생겼고, 그를 위한 급나누기에 테이블 컴포넌트가 걸려버렸다. 기존에 사용하던 onRowClick, scopedSlots등의 기능들이 사라졌고 직접 구현해야 했다. { navigate(`/notices/${data.id}`); }} customCellItem={{ info: data => alert(data.index)}>커스텀cell, date: data => {data.date}, }} />; 추상화된 Table은 상위 컴포넌트는 위와 같이 사용할 수 있다. 컬럼과 data 배열을 넘겨주면..

두둥 프로젝트를 시작하면서 Next.js를 처음 프로젝트에 사용했다. 기획상 이전 프로젝트보다 SEO를 더 신경써야했고, 이미지 최적화와 같은 것들을 자동으로 제공해준다는 점이 좋았다. 이전부터 계속 써보고 싶었던 기술이었어서 공부하면서 프로젝트에 사용할 가치가 있었다. 이번 포스팅은 서버사이드 렌더링 환경에서 카카오 소셜 로그인을 구현하면서 공부했던 내용과 마주쳤던 고민들을 기록한 글이다. 목차 1. Next.js의 서버 사이드 렌더링(SSR) 2. 서버 사이드에서 쿠키 사용하기 3. getInitialProps를 사용해도 되는가? 1. Next.js의 서버 사이드 렌더링 글을 준비하면서 Next.js에서 서버사이드 렌더링의 방식을 조금 더 공부해보았다. 먼저 다들 아는 얘기. Next.js는 SSR을..

사실 한번에 끝날 줄 알고 dev 브랜치에 바로 테스트를 했다. 그 결과 아직 제대로 시작도 안했는데 커밋이 100개가 넘어가는 불상사가 생겼다. 어쨌든 모노레포 시리즈 마지막은 Docker와 Github Actions를 이용한 CI/CD 구축 삽질기. 별로 어려운 내용이 아니고, 그렇기에 거창한 정보 공유 목적은 결코 아니다. 하지만 나처럼 쌩판 처음 모노레포를 시도해보는 사람들이 쉽게 참고할 수 있을만한 글이 별로 없어 힘들었기 때문에 꾸역꾸역 쓰는 글. 기본적으로 이전에 구축해 사용하던 세팅을 바탕으로 하고 있다. (1편, 2편) 크게 다를건 없지만, 거기서부터 한줄한줄씩 바꿔가는 과정이라고 보면 될 것 같음. 따지고 보면 한줄한줄씩 고쳐나가는 과정.. "scripts": { // ... "admi..

1. 시작하기 yarn set version berry yarn init yarn add -D typescript @types/node @types/react 디렉토리 하나를 파고 yarn 버전을 berry로 설정한 후에 package.json을 생성해준다. 타입스크립트도 함께 세팅해준다. yarn 관련 설정은 이전 글에서 짤막하게 적어놓았다. 다시 간략하게 적자면, // ./package.json { "name": "dudoong-front", "packageManager": "yarn@3.3.0", "private": true, "workspaces": { "packages": [ "apps/*", "shared/*" ] }, // ... } 루트의 package.json에서 workspaces를 추..

고스락에서 프로젝트를 세번째 이어오면서 효율적인 구조를 계속 고민하고 있다. 이번에 새로운 프로젝트, 두둥을 시작하면서 모노레포를 도입하게 되었다. 이번 포스팅은 모노레포 개발 환경과 CICD를 구축하면서 공부했던 것들과 삽질에 대한 기록이다. 1) 도입 이유, yarn workspaces, berry 2) 모노레포 환경 세팅 - vite, nextjs, storybook, emotion 3) CI/CD - docker, github actions 세팅 1. 도입 이유 작년에 처음 프로젝트를 시작할때 프론트쪽을 3개의 레포로 구성했다. 유저 프론트 사이트, 어드민 사이트, 그리고 컴포넌트로 분리했다. 스토리북 레포지토리의 컴포넌트들은 npm 패키지로 배포해서 프론트와 어드민에서 공통으로 사용할 수 있도록..

대략적인 기능 구현이 모두 끝났습니다. 하루이틀동안 급하게 마무리했음. 정리하자면, todoItem을 유저와 날짜에 따라 별도의 상태로 관리한다. 할일을 완료할 때마다 해당 날짜의 달력에 색깔과 남은 개수가 업데이트된다. 1. TodoItem 기능 확장 달력 기능 전에 먼저 투두 피드를 구현하면서 날짜를 생각하지 않고 단순하게 하나의 상태로만 관리했다. 이젠 선택한 날짜와 선택한 프로필에 따라 투두들을 관리하고 보여줘야했다. 많은 고민을 했음. 처음엔 백단 디비에서 관리한다면 어떻게 되어있을지를 생각했다 (원래는 서버에서 받아와야 하는 데이터를 프로젝트에선 목데이터처럼 사용하는 것이기 때문에). '투두' 테이블을 하나 두고, userId와 date 컬럼을 추가해서 그걸 통해 정보를 패칭해오지 않았을까? ..

미루고 미루던 투두메이트 달력을 구현해봅시다. 프론트 공부를 하면서 한번쯤은 만들어야하는 관문 같은 느낌이 있는데, 이번 기회에 해보는거로. dayjs 라이브러리를 사용했다. 실제 투두메이트라고 해도 믿겠죠? 아직 달력에서 날짜를 선택하고 해당 날짜의 투두를 띄우는 로직은 구현하지 않았다. 다음주까지 해갈 예정. 달력을 만들기 전에 참고하기 위해 여러 블로그들을 가봤었는데, 뭔가 다 시원찮복잡하고 참고하기 싫은 방법밖에 없었다. 그래서 열심히 고민을 해보았음. Calender.tsx const Calender = () => { const [selectedDay, setSelectedDay] = useState( dayjs().format('MM/DD/YY'), ); const handleSelectDat..