차마시는 개발자

프로젝트 회고 이번에 안경을 도매로 판매하는 회사의 영업사원들을 위한 웹/앱을 메인 개발자로 진행을 했습니다. 즉, 100명 이상의 영업사원이 대금을 받으러 다닐 때 사용하는 웹/앱을 만들었습니다. (웹 프론트 개발과 Flutter 개발을 맡아서 진행하였습니다) 디자이너분과의 문제 이때 디자이너분과 처음 합을 맞추는 것이어서 디자이너분이 어떠한 방식으로 일을 하고 있는지 파악하는 시간이 필요했습니다. 그러나 급하게 완성해야 해서 서로를 파악하는 시간이 부족했고 삐걱대기 시작했습니다.... 디자이너분은 회사에 거의 8년 이상 계셨던 분이어서 다른 팀원들은 디자이너분이 만들어 놓은 대로 많이 따랐습니다. 그리고 저는 신입이지만 뭔가 잘하고 싶은 마음에 하나하나 같이 이야기하고 좀 저의 의견도 들어갔으면 했지..

[번역] JavaScript 가비지 컬렉터 실험 원문: https://dev.to/codux/experiments-with-the-javascript-garbage-collector-2ae3 #javascript #performance #webdeb #debugging 웹 어플리케이션에서 메모리 누수는 디버깅하기 어려운 것으로 악명이 높습니다. 가비지 컬렉터가 어떻게 수집가능한 객체와 수집 불가능한 객체를 결정하는지 이해하면 이를 피하는데 도움이 됩니다. 이 아티클에서 해당 동작이 너를 놀라게 할 수 있는 몇 가지 시나리오를 살펴보겠습니다. 가비지 컬렉터의 기초에 익숙하지 않는다면, Lin Clark의 A Crash Course in Memory Management 또는 MDN의 Memory Manage..

ES2023있으니 어서 배웁시다. 원문: https://javascript.plainenglish.io/es2023-is-here-hurry-up-to-learn-2de85c61f0ae 서문 ES6는 2015년도에 제안되었으며, 이 논리에 따르면 ES2023은 ES14로 불려야 되지만 혼동을 피하기 위해 이름에 연도를 사용합니다. ES 표준에 집중했던 때를 돌이켜보면, 여전히 ES6에 머물러 있습니까? ES 표준이 되풀이 되는 것을 위해 최근에 어떤 새로운 특징이 추가되었는지 보겠습니다. ES2023 2023년도에 완료될 제안들 Array가 수정되면 수정본을 반환 Array, TypedArray에는 다음과 같이 Array 자체를 변경하는 다양한 방법들(sort/splice, etc)이 있습니다.: con..

[번역] useEffect 완벽 가이드 원본: https://overreacted.io/a-complete-guide-to-useeffect/ Hook과 함께 몇몇 component를 작성해 봤을 것입니다. 아마도 작은 앱까지도. 대부분 만족 했을 것입니다. API가 편안하다는 느낌을 받고 몇가지 트릭을 익혔을 것입니다. 심지어 반복된 코드를 custom Hooks으로 만들어 내었습니다.(300 줄이 줄었습니다!) 그리고 동료들에게 보여주면 "잘했어"할 것입니다. 하지만 useEffect를 사용할 때마다 잘 들어맞지 않습니다. 뭔가 놓치고 있다는 느낌을 계속 받게 됩니다. class lifecycles와 비슷하게 보이지만... 정말 그렇습니까? 아래의 질문을 하게되는 자기자신을 보게 됩니다: 🤔 useE..

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()로 감쌉..

STU-TI STUDY + MBTI MBTI 와 개발자 스터디를 결합하여 성격이 맞는 사람끼리 스터디를 진행 하도록 하는 서비스 입니다. 배포: https://stu-ti.netlify.app/ Github: https://github.com/prgrms-web-devcourse/Team_KPPL_STUTI_FE YouTube: https://www.youtube.com/watch?v=MlLwIza06fw 많이 사용을 해주시고 문제점을 알려주시면 계속해서 리팩토링을 해보도록 하겠습니다.!!! 할 것이 여러개 보이긴 합니다. : ) FE 팀 팀장으로 프로젝트를 하면서 많은 경험을 했지만 가장 기억에 남는 것들 위주로 회고를 작성하겠습니다. 😶‍🌫️ 프로젝트 순서 팀 Commit, Code Conventio..