Work abroad

최근 회사에서 React를 통해 프로젝트를 진행하면서, "한 컴포넌트 내에서 useState를 많이 사용해도 괜찮을까?" 에 대한 고민을 하게 되었습니다. 그리고 이 고민과 더불어 useState를 적게 사용하기 위해서 component를 더 작은 단위로 나눠야 하는 것일까? useState가 아닌 일반 정규 변수(let, const)를 통해 event가 발생했을 때 update하는 식으로 useState를 대체할 수 있지 않을까? 와 같은 어떤 방식이 렌더링 최적화를 이끌어낼 수 있을까에 대해 알고 싶어졌습니다. 이런 고민들을 하다 보니 제가 useState를 React에서 왜 사용하는지를 제대로 이해하지 않고 사용해서 생겨나는 문제라는 생각이 들었고, 이 글을 작성하게 되었습니다. 글의 구성은 아래와..

개인적인 사이드 프로젝트를 진행하며 google 검색을 통해 Cmd+c, Cmd+v 를 통해 의미없이 babel.config.js를 수정하다가 무수히 많은 에러가 발생했다. 이를 통해 Babel이 정확히 어떤 기능을 수행하는지 공식문서를 통해 알아보았다. What is Babel? Babel은 JavaScript 컴파일러이다. 주로 ECMAScript 2015+ 코드를 현재와 예전 브라우저 또는 환경에서 호환이 가능한 예전 버전의 JavaScrip로 변환하는 데 사용되는 toolchain이다. Babel이 제공하는 주요 기능 Transform syntax : 구문 변형 개발자가 대상으로 하는 환경에 없는 Polyfill 기능 제공 ( core-js와 같은 third-party Polyfill을 통해) 소..

앞서 zustand 개념에 대해 공식 문서를 통해 살펴 보았다. → 2023.01.16 - [Front-end] - 🐻zustand 이해하기 그렇다면, 스터디에서 공부한 오픈소스 쇼핑몰 분석 프로젝트에서 사용한 예시를 통해 zustand를 자세히 알아보자! Create a store /store/products/long-sleeve.ts import create from 'zustand'; import { devtools, persist } from 'zustand/middleware'; interface IProducts { products: PhotoType[]; setProducts: (value: PhotoType[], title: string) => void; reset: () => void; ..

What is zustand? zustand란 단순화한 flux원칙을 사용하는 작고, 빠르고 확장 가능한 아주 기본적인 상태 관리 solution이다. Why zustand over other state management? Redux를 넘어서는 이유. 단순하고, 편향적이지 않다. Simple and un-opinionated 'un-opinioned'의 뜻은 개발자들은 지속가능한 clean code의 quallity를 보장하는 일종의 패턴을 따르고 있는지 확실하게 해야한다는 의미를 담고 있습니다. hook을 통해 상태 소비에 주요 수단으로 사용한다. context provider로 app을 감싸지 않는다. component에게 렌더링을 발생시키지 않고 상태를 전달할 수 있다. context를 넘어서는 ..

2022년 회고 📖 '한 번이라도 모든 걸 걸어본 적 있는가' 도서관에서 이 책의 제목을 보는 순간, 나는 지난 2022년을 빠르게 되돌아 보았다. 나름 바쁘게 열심히 지내려고 노력했던 한 해이고, 실제로도 꽤 바쁘게 살았다고 자부했던 1년이었다. 취업 준비를 하고, 취업을 하고, 스터디 활동도 참여하고, 영어 학원도 다니고, PT도 꾸준히 진행하며 다이어트도 성공했다. 주변 지인들의 "너처럼 열심히 사는 애는 드물다"라는 말을 들으며 '나 정도면 잘 살고 있는 25살이겠지'하며 스스로 삶에 대한 불안감을 낮추려 했던 것 같다. 그러나 2023년을 일주일 앞두고 문득 2022년을 실속없이 보냈다는 생각이 들었다. 나는 항상 과정보다 결과라고 외치는 사람인데, 스터디를 3번이나 참여했음에도 불구하고 눈으로..