🧑‍💻 짧은호흡

프론트엔드 개발을 하다보면 흔히 마주할 수 있는 상황이다. 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 배열을 넘겨주면..

타입스크립트가 결국 타입을 위한 언어이기 때문에, 변수를 선언할 때마다 타입을 명시해야 한다고 생각할 수 있다. 그러나 타입스크립트의 많은 타입 구문은 사실 불필요하다. 이렇게 아무 생각없이 명시했던 타입들이 있다. 하수의 코드. 타입 추론이 된다면 명시적 타입 구문은 필요하지 않다. 오히려 코드가 길어지고 가독성이 안좋아질 수 있기 때문에. 하지만 타입이 추론될 수 있음에도 타입을 명시하는 것이 더 좋은 몇가지 상황들이 있다. 더 정확한 위치에 오류를 표시하기 위함이다. 객체 리터럴을 정의할 때 함수의 반환값을 명시할 때 타입 넓히기 let 으로 선언하는 경우. 값이 재할당될 가능성이 있다. 따라서 처음 초기화한 값을 가지고 할당 가능한 값들의 집합을 유추해야 함. 어느정도 가능성을 열어주기 위해서 타..

책을 이용한 스터디를 하면서 평소에 쓰지 않는 (경험이 아닌 책 내용을 정리하는) 글을 쓰면서 많은 고민을 하게 된다. 어떻게 해야 완벽히 이해하고, 정리하고, 기록할 수 있을까. 책의 순서 그대로 쓰지 않고 내가 이해한 흐름대로 재구성해서 글을 쓰도록 노력해보려고 한다. 효율적인 방법인지는 모르겠지만. 지난주에 공부했던 구조적 타이핑의 관점에서 보면 아래의 코드는 오류가 발생하지 않는다. interface Room { numDoors: number; ceilingHeightFt: number; } const obj = { numDoors: 1, ceilingHeightFt: 10; elephant: 'present', } const r: Room = obj; 추론된 obj의 타입은 Room타입의 부분 ..

타입을 쓰는데서 실력의 편차가 크게 나타난다. 지난 넥스터즈 활동 후기에 적었던 문장이다. 어렵게 막 타입을 이리저리 쓰고 이런문제가 아니다. 오랫동안 끙끙대다 발견한 방법이 알고보면 굉장히 기본적인 타입 문법이었던 경우가 꽤 있었다. 이렇게 얼레벌레 개발해온 한규진을 위한 타입스크립트 뿌수기 스터디. 타입 이해하기 자바스크립트의 모든 값은 데이터 타입을 갖는다. 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해, 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해, 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해. 하지만 자바스크립트는 정적 타입 이 아닌 동적 타입 언어이다. 변수를 선언할 때 데이터의 타입을 사전에 선언하는 것이 아니다. 어떤 데이..

두둥 프로젝트를 시작하면서 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를 추..