작년에 React deep dive 스터디를 했었다. 당시 context API를 Props drilling을 해결하기 위한 의존성 주입 도구로 활용할 수 있다는 걸 배웠다. 하지만 실무에서 props drilling이 깊어질수록 복잡해졌고 무작정 전역상태로 넘겨버리는 방식을 택하게 되었다. 그러다 최근 토스 FF 레포지토리에서 논의되는 것들을 보며 다시금 Context API의 본질을 고민하게 되었고 이렇게 글을 쓰게 되었다. Props DrillingReact는 부모 ⇒ 자식 컴포넌트로 이루어진 트리 구조를 가지고 있다.부모가 가진 데이터를 자식에서 사용하려면 props를 통해 전달해야 한다. 위와 같은 구조에서 A ⇒ D 까지 데이터를 전달하려면 중간에 있는 모든 컴포..

2023년 6월 27일 JWT에 대한 글을 쓴 과거 Velog 포스팅을 보았다. 실무 경험도 없고, 이론적으로 이해가 되지도 않았던 때이지만 어떻게든 적어보며 익숙해질 때가 있지 않을까 하며 적은 당시가 생각났다. 다시 JWT에 대해 적어보면 얼마나 달라졌는지 비교할 수 있을 것 같았다. JWT를 접한 사람, 접하지 못한 사람 전부 누구나 이해할 수 있도록 쉽게 적어보려 한다.JWT JSON Web Token웹에서 사용되는 JSON 형식의 토큰 기반 인증 방식이다. 클라이언트와 서버 간 JSON 데이터를 안전하게 공유하기 위한 개방형 표준(RFC 7519). 간결하고 URL에 안전하게 사용할 수 있다는 장점이 있다. Session-Based Authoentication VS Token-Based Auth..

Javascript로 진정한 객체지향이 가능할까? 사실 어느 정도 도발이지만 스스로 이 간극을 탐구해보고 싶었다. 그리고 개인적인 욕심으로는 어렵기보다 쉽게 설명하고 싶다. Javascript와 객체지향 프로그래밍의 간극을 좁혀보고 진정한 객체지향이란 무엇인지 쉽고 편안하게 탐구하고자 한다! 객체지향 프로그래밍(Object-Oriented Programming)이란? 객체지향 프로그래밍은 프로그래밍의 패러다임 중 하나이다. 프로그램을 명령어의 목록으로 보는 시각에서 벗어나, 여러 개의 독립된 단위. 즉, "객체"들의 모임으로 파악하고자 하는 것이다. 이는 Wiki에서 정의한 객체지향 프로그래밍의 개념이다. 여기서 '프로그램을 명령어의 목록으로 보는 시각'은 절차적 프로그래밍(Procedural progr..

최근 실무에서 Express ⇒ Nest.js 마이그레이션을 요하는 의견이 있었어서 Nest 강의를 듣고 있다. Nest 강의를 듣다가 클라이언트에서 보낸 데이터의 유효성을 체크하기 위해 class-validation 패키지에서 제공하는 ValidationPipe를 사용해보았다. ValidationPipe에는 다양한 옵션이 있었는데, 그 중 대표적인 3가지 옵션에 집중해보려 한다. 개인적인 공부를 위해 들여다보는 것이지만 Nest를 모른거나, Nest를 써보고 싶은 사람들 혹은 Nest에 막 입문한 분들께도 도움이 되었으면 좋겠다. *Nest의 공식 문서 내용이 포함되어있다.  Nest.js Validation웹 애플리케이션으로 전송되는 모든 데이터의 정확성을 검증하는 것이 좋다. 들어오는 요청의 유효성..

이 주제는 4월에 쓰기 시작하여 5월까지 다뤄보다가 포스팅을 하지 않았다. 단순히 javascript니까 당연히 싱글 스레드 아닌가,,, 했었는데 모호한 영역이 있었고. 그 부분을 제대로 이해하지 못한 채 올린다는 게 스스로 내키지 않았다. 다시 붙잡아보면서 스스로 이 주제에 대한 충분한 이해를 할 수 있길 바란다. 이전에 스레드와 프로세스에 다룬 글이 있다. 스레드의 개념을 먼저 정확히 알고 싶다면 해당 글을 먼저 보면 좋을 듯 하다. 2024.04.04 - [Software Engineering] - Difference between Process and Thread (+ Program) Node.jsNode.js는 크로스 플랫폼 오픈소스 자바스크립트 런타임 환경으로 Window, Linux, mac..

2024.08.10 - [Development Environment] - Why Vite? JS 모듈화의 역사, CJS, ESM, Webpack 2024.08.17 - [Development Environment] - 2016, Left-pad 사건에 대한 Rich Harris(Rollup)의 글로 알아보는 번들링의 중요성 위 글과 함께 차례대로 보게 된다면 더욱 이해가 잘 될 것이다. 이전 글에서 ES Modules에 비해 CommonJS의 단점으로 Tree-shaking이 어렵다는 점을 꼽았다. 단순히 import와 require만이 차이점은 아닐 것이다. 정확히 어떤 이유로 그렇게 말을 하는지, 동작 방식을 파헤쳐보면서 이유를 알아보자. Tree-shaking의 정의와 역사코드를 최적화 할 때 적용..

최근 실무에서 상태 관리를 위해 Zustand docs와 상태 관리와 관련한 책을 들여다보다 문득 상태 관리를 하려면 상태에 대해서 알아야되는 것 아닌지, 이미 상태에 대해 잘 안다고 단언할 수 있는가하고 스스로 의심하게 되었다. 제일 기본적인 useState도 제대로 알고 쓰는지 확신할 수 없었다. 리액트 공식 문서와 리액트 딥다이브, 리액트 훅을 활용한 마이크로 상태관리 등의 책을 참고하여 상태를 알아보고자 한다. 참고로 원문을 직접 번역해서 적었기 때문에 부족한 부분이 있을 수 있고 그렇기에 react-ko.dev 내용과 차이가 있을 수 있다. State 상태 컴포넌트는 상호작용의 결과에 따라 화면에 표시되는 내용을 변경해야하는 경우가 잦다. form에 입력할 때, input field를 업데이트해..

리액트 스터디 중 "가상DOM과 리액트 파이버" 주제가 나왔다. 발표를 맡게된 리액트 렌더링 부분을 준비하고, 발표 당일 스터디원들과 얘기하며 조금씩 윤곽이 잡히기 시작했다. 하지만 여전히 어려운 건 매한가지... 그러다가 좋은 글을 발견했는데 포스팅 일자가 리액트 15,16 기준이라 렌더가 동기식으로 진행된다고 되어있어서 🤔 제대로 스터디 내용을 복기할 겸, 그리고 파이버와 좀 친해질 겸 포스팅 주제로 선정하게 되었다. 조금 의문이었던 것은 재조정 과정은 똑같고, 여전히 유효할 것 같은데 리뉴얼된 React 사이트에는 파이버와 관련된 내용이 전부 생략되어있다. 왜일까????? 그래서 더 어렵게 느껴졌던 것 같다. 더이상 관련이 없는 내용인지? 레거시한 부분인 건지에 대한 고민. 리액트 파이버 아키텍처 ..

Introduction 나는 null이 아니라 any 형식이 포함된다고 Error가 떴다. React에서의 event를 제대로 이해하지 못한 탓인지 tsx를 화나게 했다. 나처럼 js에서의 Event는 익숙한데, React + TypeScript에서의 Event 타입을 어떻게 다루어야 할 지 이해하지 못하는 분들을 위해 글을 쓴다! React, TypeScript에서의 Event Type JavaScript에서 자주 쓴 `addEventListener( )`, `on____` 예시로 `onChange` change event는 주로 input element의 값이 수정되었을 때 발생하도록쓰인다. // Syntax addEventListener("change", (event) => {}); onchange..

2023.09.29 - [JavaScript/TypeScript] - Type의 근원을 알아보고 타입스크립트의 Type System 바라보기 🔼 이전 글을 읽고 읽어보면 더욱 이해가 잘 될 것이다. Top Type, Bottom Type TypeScript에서는 any와 unknown이라는 Top Type(최상위 타입: ⊤)과 never라는 유일한 Bottom type(최하위 타입)이 있다. 이것은 모든 타입들의 상한(Upper bound)과 하한(Lower bound)를 나타낸다. TypeScript의 모든 Type은 계층 구조를 기반으로 자리를 잡고 있다. Supertype, Subtype ✔️ 일반적인 타입을 슈퍼타입Supertype, 특수한 타입을 서브타입Subtype이라 한다. 어떤 타입이 다른..