Ayden's journal

이전에 [ 유틸리티 컴포넌트 : Show & Map ]에서 잠깐 언급했었던 것처럼, 나는 꽤 오래 전부터 여러 조건을 일괄적으로 처리하는 Switch와 Match 컴포넌트를 만들고 싶어했다. 대강 어떻게 만들지에 대한 아이디어는 여럿 있었지만, 실제로 구현하려니 문제가 산더미였다.처음에는 타입스크립트를 사용하려 했다. 그러나 수많은 시행 착오 끝에 나는 [ 타입스크립트에서의 컴포넌트 추론 ]의 결론에 도달할 수 있었고, 타입스크립트를 사용하여 Switch 컴포넌트를 정의하려는 나의 아이디어는 물거품이 되어버렸다. 머리를 열심히 굴려보았지만 방법이 없었다. 나는 런타임에서 에러를 던지는 것으로 스스로와 타협했다. 그렇게 만들어진 Switch 컴포넌트는 아래와 같다. 런타임에서 ReactElement는 객체..

합성 컴포넌트 패턴이란 무엇인가합성 컴포넌트 패턴(Composite Component Pattern)은 컴포넌트를 보다 유연하게 구성하고 재사용할 수 있도록 여러 하위 컴포넌트를 조합하여 만든 컴포넌트이다. 세간의 인식은 조금 더 복잡한 무언가를 예상하는 듯하지만, 실제로는 리액트를 사용하는 사람이라면 누구나 children을 통해 합성 컴포넌트 패턴을 사용하고 있다.function Dialog({ children }) { return {children};}function App() { return ( 이것은 합성 컴포넌트입니다. );} 만약 특정한 형태의 컴포넌트만을 사용하고 싶다면 children 대신 다른 props 이름을 사용하여 아래와 같이 구현할 수도 있다. pro..

앞서 작성한 input 연대기 초반에 잠깐 언급했었는데, 내가 프론트엔드 공부를 처음 시작했을때부터 지금까지 꾸준히 고민하고 있는 문제 중 하나가 'Button과 Link가 같은 스타일을 가질 때 어떻게 처리할 것인가'이다. 이 두 개의 컴포넌트는 받는 props의 타입도 조금 다르고, 클릭했을 때의 동작도 다른 편이지만, 결국은 '클릭할 수 있는 영역'이기 때문에 UI 적으로 비슷하거나 동일한 디자인을 가져가는 경우가 종종 있다. 처음에는 하나의 스타일시트를 만들고, Button과 Link 컴포넌트에 className으로 동일한 css를 넘겨줄 생각이었다. 그러나 이 방법은 곧 한계를 드러냈다. 내가 간과한 사실 중 하나는 '스타일은 결국 여러 옵션의 내용(size, color etc)을 중첩하여 사용..

나는 다른 라이브러리나 프레임워크의 공식 문서를 보면서 좋은 코드에 대한 아이디어를 얻는 편이다. 그리고 어제는 SolidJS를 살펴보다가 굉장히 재미있는 아이디어 하나를 캐치할 수 있었다.기존에 나는 특정 조건에 따라 컴포넌트를 다르게 처리함에 있어 아래와 같은 방식으로 코드를 작성했다. 아주 일반적인 방법이지만 컴포넌트와 JS 로직이 뒤섞여서 전체적인 코드의 통일감을 해친다는 인상을 받았다.export default function Comp() { const [count, setCount] = useState(0) const list = [1, 2, 3, 4, 5] return ( {count > 5 ? "숫자가 5보다 커요" : "숫자가 5와 같거나 작아요"} ..

리액트를 처음 배우던 시절 나는 비동기 데이터를 다루는 방식의 하나로 useAsync라는 이름의 커스텀 훅을 접하게 되었다. 이는 컴포넌트 내부에서 비동기 작업을 안전하게 처리하기 위한 수단이었는데, 그 코드를 기억나는대로 작성해보자면 아래와 같았다.export const useAsync = (fn) => { const [state, setState] = useState({ data: null, loading: true, error: null }); useEffect(() => { const fetchData = async () => { try { setState((prev) => ({ ...prev, loading: true })); ..

내가 프론트엔드 공부를 처음 시작했을때부터 지금까지 꾸준히 고민하고 있는 문제가 둘 있다. 하나는 다음 포스트에서 풀어볼 'Button과 Link가 같은 스타일을 가질 때 어떻게 처리할 것인가'이고, 다른 하나는 input의 type을 text와 password로 바꿔주는 기능을 어떻게 처리할 것인지에 대한 것이다. 회원가입/로그인 폼을 생각해보면 거기에는 늘 비밀번호 입력을 감출 수 있는 눈동자 버튼이 있다. 이 눈동자 버튼을 누르면 input의 type이 password에서 text로 바뀌고, 다시 누르면 그 반대로 바뀌게 된다. 리액트를 배우고 한 시간 정도면 아마 누구라도 구현할 수 있을 지 모른다.그런데 이 눈동자가 토글된 상태는 어느 컴포넌트에 위치시키고, 눈동자 버튼은 어디에 배치해야 하며,..

이 문서는 caro-kann@3.0.3을 기반으로 작성되었습니다. caro-kann은 내부적으로 useSyncExternalStore 훅을 사용해 작성된 전역 상태 관리 도구입니다. 타입스크립트를 지원하며 Next.js와 React.js에서 사용할 수 있습니다. useState와 유사한 문법을 채택하고 있기에 React.js에 익숙한 개발자라면 누구나 쉽게 사용할 수 있습니다. what's new in caro-kann@3.0.0새로운 버전의 caro-kann은 내부 코드 구조를 개선하고, 트리 셰이킹 등의 방법을 적극적으로 도입하였습니다. 그 결과 2.2.0 버전과 비교하여 번들 크기가 최대 6배 가까이 줄어들었습니다. 이 과정에서 StoreContext가 제거되었으며 useDerivedStore는 u..

[ Github / NPM ] Utilinent는 SolidJS의 간결하고 직관적인 Control Flow API를 React에 도입하고 발전시켜, 개발자들이 더욱 생산적이고 효율적으로 작업할 수 있도록 돕는 것을 목표로 합니다. React에서 자주 사용되는 패턴과 조건부 렌더링 로직을 컴포넌트로 감싸는 방식으로 재사용성을 높이며, 이를 통해 대규모 프로젝트에서도 코드 스타일을 일관되게 유지할 수 있습니다. 또한, 가독성이 뛰어난 코드를 작성하고 복잡한 로직을 단순화하여 유지보수를 더욱 편리하게 만듭니다. install 및 importnpm i utilinentimport { Show, For, Switch, Match, Mount } from "utilinent" ShowReact에서 조건부 랜더링을 ..

이 문서는 sicilian@2.1.12을 기반으로 작성되었습니다 sicilian은 전역 상태를 기반으로 동작하는 form 상태 관리 도구입니다. 타입스크립트를 지원하며 Next.js와 React.js에서 사용할 수 있습니다. 프론트엔드 분야에서 form 상태 관리 도구로 널리 쓰이는 react-hook-form은 ref를 기반으로 동작합니다. 이 때문에 컴포넌트를 forwardRef로 감싸거나, 라이브러리에서 제공하는 useFormContext를 사용해야 합니다. Next.js를 사용하는 개발자로서 이러한 제약 사항이 여러모로 불편하게 느껴졌습니다.sicilian은 이러한 불편함을 해결하기 위해 전역 상태를 기반으로 개발되었습니다. 이는 sicilian이 각각의 input을 state로 관리하며, 제어 ..

상황 서버 상태관리를 React Query로 관리하기 시작하면서 기존에 fetch로 만들었던 리퀘스트 함수들을 AXIOS로 싹 갈아 엎기로 했다. AXIOS 자체가 러닝 커브가 낮은 편이라 갈아 엎는 작업 자체는 금방 끝났다. 그런데 npm run dev를 때리자 getServerSideProps에서 즉시 에러가 튀어나왔다. 문제 Error serializing .dehydratedState.queries[0].state.data.headers returned from getServerSideProps in "/mydashboard". "/mydashboard"페이지에서 사용한 getServerSideProps 함수에서 serializing 에러가 발생했다. 메세지만 놓고 보면 아주 단순한 에러이다. 여..

상황 진행중인 프로젝트에서 기존에 사용하던 module css가 아닌 tailwind를 사용하기로 결정되었다. 작업 빨리 쳐내야 할 때 클래스 검색하는 거로 시간을 쓰는 게 싫어서 공식문서도 읽고 카카오FE의 사용 후기도 읽어보면서 이것저것 테스트해보는 시간을 가지고 있었다. tailwind.config.ts 파일을 원하는 수준으로 개조하는 데 ─ 솔직히 tailwind의 크기 체계 좀 구린 듯 ─ 특히 도움을 많이 받았다. spacing: { ...range(1, 100).reduce((acc, px) => { acc[`${px}`] = pxToRem(px); return acc; }, {}), } 문제 여러 테스트 과정에서 '버튼을 누르면 튀어나오고, 또 버튼 누르면 도로 들어가는' 사이드바를 만들어..

상황내가 혼자 개발하고 있는 onef에 댓글 기능을 추가하기로 했다. 우선은 댓글 작성 로직과 작성 컴포넌트를 구현하였다. 이후에 댓글 수정 기능이 필요하다는 걸 깨닫고 보니 댓글 작성 로직에서 post만 put 메소드로 바꿔주면 된다는 사실을 알게되었다. 이를 위해 댓글 작성 컴포넌트에서 해당 로직을 추출하고, 필요한 로직은 Context를 사용해 외부에서 주입하는 방식으로 변경하였다.// CommentMutation.tsexport class CommentMutation extends MutationFn { constructor() { super(); } postComment() { return ({ parentId, value, depth }: { parentId: string; v..

상황Button과 Link 및 여러 컴포넌트를 인자로 받아서 통일된 스타일을 처리해주는 Clickable 컴포넌트를 만들고 난 직후의 일이다. 로그인 페이지에서 Clickable 컴포넌트가 문제 없이 동작하는 걸 확인한 뒤 코드를 커밋했고, github action이 동작하며 라이브 서비스 서버로 배포가 완료되었다.그런데 잘 적용되었는지 살펴보던 중 한 가지 문제점을 발견하게 되었다. 어떤 Clickable은 스타일이 제대로 적용되어있는 반면에, 어떤 Clickable은 일부 스타일만 적용되어있는 것이 아닌가! 추리를 위해 당시 Clickable 컴포넌트가 어떤 모습이었는지 그 코드를 아래에 첨부한다.type ComponentType = typeof Button | typeof Link;type Clic..

이번 에러 케이스에는 서술 트릭이 존재한다. 상황나는 onef라는 이름의 풀스택 프로젝트를 혼자서 진행하고 있다. AWS로 배포하는 데 익숙해져서, 이번에도 AWS를 통해 서비스를 배포하려고 했다. 늘 그렇듯 VPC를 하나 만들고 거기에 두 개의 서브넷을 만들었다. 퍼블릭 서브넷에는 NextJs와 NestJs 서버가, 프라이빗 서브넷에는 NestJs 서버와만 통신하는 PostgreSQL 데이터베이스가 있다.그리고 https 통신을 구현하기 위해 [ ELB https 통신 구현 ]의 내용과 같이 로드밸런서를 하나 만들었다. 리스너에 요청 경로에 따른 규칙을 설정하여 중간에 api가 들어가면 NestJs 서버로, 그렇지 않은 경우에는 NextJs 서버로 요청이 가도록 했다. 이후에는 가비아에서 도메인을 하나..

이터레이션 프로토콜은 자바스크립트에서 컬렉션(배열, 객체 등)을 순회하는 방식을 정의한 규약이다. 이 프로토콜은 준수하는 객체는 for ... of 문으로 내부를 순회할 수 있고, 스프레드 연산자를 사용할 수 있으며, 비구조화 할당을 통해 필요한 값만을 꺼내 사용할 수도 있다. 따라서 이터레이션 프로토콜을 이해하는 것은 그 자체로 자바스크립트의 많은 기능을 더 깊이 있게 활용할 수 있도록 한다.  이터러블과 이터레이터이터레이션 프로토콜은 다시 '이터러블 프로토콜(이하 이터러블)'과 '이터레이터 프로토콜(이하 이터레이터)'로 나뉘어진다. 이터러블은 단어 그대로 '순회할 수 있는' 객체를 정의하는 데 사용된다. 만약 어떤 객체가 이터러블하다면, 해당 객체는 이터레이터를 리턴하는 메소드 [Symbol.iter..

실행 컨텍스트자바스크립트 엔진(이하 JSE)은 코드를 실행하기에 앞서 코드를 평가하는 과정을 거친다. 이를 '실행 컨텍스트 평가'라고 부르고, 이후 선언문을 제외한 소스코드가 실행된다. 사실 클로저를 지원하는 대부분의 언어에서 이와 유사하거나 동일한 개념이 적용되어있다.실행 컨텍스트 평가 과정을 통해 JSE는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 생성하게 된다. 이 객체가 바로 실행 컨텍스트(이하 컨텍스트)이다. 컨텍스트가 구성되면 JSE는 이를 콜 스택에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드를 하나씩 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.하나의 컨텍스트를 구성할 수 있는 방법으로는 전역 공간, eval 함수, 함수 실행 등이 있다. 자바스크립트 파일..

조건부 타입타입스크립트는 특정 조건에 따라 타입을 다르게 정의할 수 있도록 하는 '조건부 타입'을 지원한다. 자바스크립트의 삼항 연산자와 유사하게 타입 수준에서 조건을 평가하며, 그 결과에 따라 다른 타입을 선택할 수 있다. infer 키워드와 함께 사용하면 함수나 배열, 객체 등에서 특정 타입을 추출하거나 분해하는 데 도움이 된다.아래의 예시 타입은 배열을 인자로 받아서 해당 배열의 첫번째 아이템을 리턴하는 함수의 타입을 조건부 타입과 infer 키워드를 사용해 설계한 것이다. type FirstElement = (arr: T) => T extends [infer First, ...any[]] ? First : never;const getFirstElement: FirstElement = (arr) =..

구조 분해 할당은 모던 자바스크립트 문법으로서 변수 선언 시 사용되며, 객체나 배열의 특정 요소를 선택적으로 변수에 할당하여 쉽게 사용할 수 있게 한다. 이를 통해 코드를 더 간결하고 읽기 쉽게 만들 수 있다.어느정도 숙련된 자바스크립트/타입스크립트 사용자라면 숨쉬듯이 사용하는 문법이기도 하다. 그런데 이 문법을 메모리 주소와 연관지어 생각해본 적은 한 번도 없었다. 적어도 오늘 어떤 일이 있기 전까지는.  나는 NestJs로 백엔드 작업을 하며 유저 기능을 위한 커스텀 가드를 만들고 있었다. 아주 간단한 작업이었으며, 나는 별 생각 없이 코드를 마무리지었다. 그리고 코드를 한번 쓱 보는데 뭔가 이상하다는 생각이 들었다. validateRequest 함수 내에서 this.authService.verify..

form 관리 라이브러리 sicilian을 만들면서 여러 타입을 작성하다가 아래와 같은 타입을 만들었다. 여기서 사용되는 Input 타입은 handleChange 함수의 인자로 들어오는 이벤트 객체의 타겟 이름이 특정한 K를 만족시키도록 강제한다. 아래의 스크린샷에서 확인할 수 있는 것처럼 이 타입의 추론은 두 개의 타입이 인터섹션되어있는 것으로 표시된다.export type Input = ChangeEvent & { target: { name: K; value: string } }; 그러다 지인의 추천으로 네이버 사내 기술 교류 행사에서 발표된 타입스크립트 세션 영상을 보게되었다. 다양한 테크닉을 배울 수 있는 좋은 기회였지만, 그 중에서 내 눈을 사로잡은 건 유틸리티 타입 Role의 동작이었다. Ro..

최근 라이브러리를 개발하는 과정에서 한 가지 타입 에러 때문에 꽤 오랫동안 골머리를 앓았다.function foo>(selector?: (state: T) => S) { const { getBar } = useContext(bar); if (selector) return selector(getBar()) else return getBar()}foo 함수는 selector라는 함수를 옵셔널하게 받고 있다. 이 selector 함수가 있으면 객체의 프로퍼티 일부만을 리턴하고, 없으면 객체 전체를 리턴하도록 만들었다. 나는 아규먼트 여부에 따라 타입스크립트가 그 리턴 값을 '정확하게' 추론해줄 거라 생각했다. 하지만 타입스크립트는 아규먼트 여부와 관계 없이 리턴 타입을 T | S로 추론했다.  내가 만들..