[번역] useEffect 완벽 가이드 원본: https://overreacted.io/a-complete-guide-to-useeffect/ Hook과 함께 몇몇 component를 작성해 봤을 것입니다. 아마도 작은 앱까지도. 대부분 만족 했을 것입니다. API가 편안하다는 느낌을 받고 몇가지 트릭을 익혔을 것입니다. 심지어 반복된 코드를 custom Hooks으로 만들어 내었습니다.(300 줄이 줄었습니다!) 그리고 동료들에게 보여주면 "잘했어"할 것입니다. 하지만 useEffect를 사용할 때마다 잘 들어맞지 않습니다. 뭔가 놓치고 있다는 느낌을 계속 받게 됩니다. class lifecycles와 비슷하게 보이지만... 정말 그렇습니까? 아래의 질문을 하게되는 자기자신을 보게 됩니다: 🤔 useE..
React + TypeScript + Babel + ESLint & Prettier With Webpack 세팅 (CRA X) CRA(Create-React-App)을 사용하여 쉽게 개발을 진행하였지만 생각보다 사용하지 않고 알지도 못하는 library 등이 너무 많아 Boilerplate로 만들게 되었습니다. Github Repository https://github.com/GeonWooPaeng/React-TypeScript-Boilerplate What is inside? Webpack Babel React TypeScript ESLint & Prettier 📍 React & TypeScript 설정 1. package.json 생성 npm init -y 2. React 설치 node-modules..
TypeScript에서 더 나은 구성을 위한 satisfies 연산자 원문: https://www.builder.io/blog/satisfies-operator TypeScript에서 type-safe 구성을 하는 새롭고 더 나은 방법이 있습니다. TypeScript 4.9에서 발표된 새로운 satisfies 연산자를 사용합니다. type Route = { path: string; children?: Routes }; type Routes = Record; const routes = { AUTH: { path: '/auth', }, } satisfies Routes; // 😍 왜 satisfies가 필요합니까? 위 예시를 표준 type 선언으로 다시 작성하는 것부터 시작하겠습니다. type..
[번역] JavaScript Deep Cloning 객체 최신 방법 원문: https://www.builder.io/blog/structured-clone JavaScript에 객체의 깊은 복사를 하는 기본적인 방법이 있다는 것을 알고 있었습니까? 맞습니다, structuredClone 함수는 JavaScript 런타임에 내장되어 있습니다.: const calendarEvent = { title: 'Builder.io Conf', date: new Date(123), attendees: ['Steve'], }; // 😍 const copied = structuredClone(calendarEvent); 위의 예시에서 객체 뿐만 아니라 중첩 배열, 심지어 Date 객체까지 복사..
[번역] memo() 하기 전에 원문: https://overreacted.io/before-you-memo/ React 성능 최적화에 대한 글이 많이 있습니다. 일반적으로, state 업데이트가 느리면, 다음과 같은 것을 해야합니다: production 빌드가 동작 중인지 확인합니다. (Development 빌드들은 극단적인 상황일때 엄청나게 의도적으로 느려집니다.) 필요 이상으로 state를 tree에서 높은 부분에 놓여있는지 확인해야 합니다. (예를 들어, input state를 중앙 store에 놓는 것은 최고의 방법이 아닐 수 있습니다.) React DevTools Profiler을 실행하여 어떤 요소가 리렌더링을 발생시키는지 확인하고 가장 expensive subtrees를 memo()로 감쌉..
안녕하세요! 이번에 인터뷰를 진행한 Paeng 이라고 합니다. 우선, 갑작스럽게 인터뷰를 진행하였는데 좋은 답변으로 힘을 내게해주신 프론트엔드 개발자 분들에게 감사합니다. 인터뷰를 진행한 이유부터 말씀 드리고 가는 것이 좋을 것 같습니다. 사실, 생각한 것보다 취업이 잘 되지 않았고 있습니다. 그래서 '내가 진짜 프론트엔드에 맞는 건가?', '프론트엔드에 대해 잘 이해를 하고 있는 건가?'등의 고민을 하던 중 현재 필드에서 프론트엔드 개발자로 최고의 퍼포먼스를 내고 있는 분들의 이야기를 듣고 싶어 실례를 무릅쓰고 온라인으로 연락을 취하게 되었습니다. 정말 많은 분들이 도와주셨고 프론트엔드의 매력을 다시한번 깨닫게 되는 시간이었습니다. 글을 읽으시면서 훌륭한 개발자분들을 통해 프론트엔드의 매력을 다시한번 ..
TypeScript에서 Type을 어떻게 쉽게 파악할까? TypeScript를 통해 프로젝트를 진행했었지만 단순히 VSCode에서 TypeScript의 type을 알려주는 기능을 통해 끼워 맞추고 있었습니다. 그래서 다른 분들의 코드를 이해하기에도 어려움이 따랐고 추 후 큰 프로젝트를 파악하기 위해서는 자세히 공부를 할 필요가 있다고 생각하게 되었습니다. TypeScript를 다시 공부하면서 기본적인 TypeScript의 문법보다는 TypeScript를 다시 재정비하면서 TypeScript의 이 부분을 알게 되어 저한테 매우 도움이 되었다 및 개인 노하우? 를 토대로 작성 해보려고 합니다. 너무 깊게 들어가지 않으니 더 찾아보면 좋습니다. :) (개인마다 차이가 있으니 재미로 읽어주시고 좋은 방법이 있으..
어떻게 Model과 api(데이터)를 효과적으로 연결할까? (MVVM 패턴) 기술 과제(React + TypeScript)에서 MVVM 패턴을 적용해야했습니다. MVVM 패턴을 처음 적용하다 보니 크게 감이 잡히지 않아 여러 문서를 보고 따라하는 식으로 처음 진행을 했는데 MVVM패턴을 적용해 나갔습니다. 그러나 Directory구조 잡기, 데이터 분리, Model과 데이터를 연결등 많은 문제들 중 Model과 데이터를 어떻게 효과적으로 연결하지? 라는 부분을 나누려고 합니다. 우선 내용에 들어가기 앞서 MVVM패턴에 대해 간략하게 알아보도록 합시다. 👣 설명 MVVM(Model - View - ViewModel) 패턴 View: 사용자가 화면에서 보는 것들에 대한 구조, 배치, 그리고 외관 ViewMo..