AI가 타입스크립트 전쟁에서 승리했다
AI가 타입스크립트 전쟁에서 승리했다. 논쟁은 끝났다. 타입스크립트가 더 나은 논리로 승리한 것이 아니다. AI 도구들이 그 논쟁을 무의미하게 만들었기 때문에 승리한 것이다. 연구원들은 핵심적인 패턴을 발견했...
GyaanSetu JavaScript
The JavaScript and TypeScript ecosystem.
A Width Check Said the String Was Safe to Cut. It Split a Kanji in Half.
A Width Check Said the String Was Safe to Cut. It Split a Kanji in Half. A name entered a terminal table and came out broken. The surname was 𠮷田. The first character is not the c…
DOM CRUD 작업
DOM CRUD 작업. 문서 객체 모델(DOM)은 브라우저가 HTML을 표현하는 방식입니다. DOM은 모든 요소, 속성, 텍스트 조각을 객체로 변환합니다. 자바스크립트는 이러한 객체들을 사용하여…
React Context 설정 방법
React Context 설정 방법. Prop drilling은 코드를 망가뜨립니다. 필요하지 않은 5개의 컴포넌트 계층을 거쳐 데이터를 전달하게 되는데, React Context가 이 문제를 해결해 줍니다. 하지만 대부분의 설정 방식은...
Testing Nodejs Digest Emails Without Inbox Noise
Testing Nodejs Digest Emails Without Inbox Noise Digest emails cause problems when preview environments send summaries to one shared mailbox. You lose track of which message belon…
링크 누락 없이 이메일 변경 흐름 테스트하기
링크 누락 없이 이메일 변경 흐름 테스트하기. 계정 이메일 변경은 사소해 보일 수 있지만, QA 팀이 빠지기 쉬운 흔한 함정입니다. 한 테스터가 주소를 업데이트하고, 다른 사람이 이메일을 확인하면...
웹 성능의 3초 법칙
웹 성능의 3초 법칙. 당신에게는 3초의 시간이 있습니다. 그 이후에는 사용자들이 떠나갑니다. 구글의 연구에 따르면, 사이트 로딩 시간이 3초 이상 걸릴 경우 모바일 사용자의 53%가 사이트를 이탈한다고 합니다...
React Refs와 useRef Hook 사용하기
React Refs와 useRef Hook 사용하기. React는 선언적 방식을 사용합니다. 상태를 업데이트하면 React가 UI를 업데이트합니다. 이는 대부분의 작업에 적합하지만, 때로는 그 범위를 벗어나야 할 때가 있습니다...
React에서 index를 key로 사용하는 것이 좋지 않은 이유
React에서 index를 key로 사용하는 것이 좋지 않은 이유. React에서 동적인 리스트를 만들었습니다. 아이템 하나를 삭제하자 갑자기 다른 아이템의 UI 상태가 변합니다. 또는 리스트를 정렬하면...
구독 없이 실시간 웹사이트 방문자 추적하기
구독 없이 실시간 웹사이트 방문자 추적하기. 한 고객이 웹사이트에 접속 중인 사용자를 실시간으로 확인하고 싶어 했습니다. Tidio 위젯은 마음에 들어 했지만, 구독료를 지불하고 싶어 하지는 않았…
React Key Prop이 필요한 이유
React Key Prop이 필요한 이유. 콘솔에서 "Each child in a list should have a unique 'key' prop."라는 에러를 보게 됩니다. 많은 개발자들이 이를 무시하곤 하지만, 이는 실수입니다. 이 경고는...
내 코딩 에이전트는 작업이 아닌 세션만을 기억했다
내 코딩 에이전트는 작업이 아닌 세션만을 기억했다. 코딩 에이전트는 스레드를 유지하면서도 정작 중요한 내용은 잊어버릴 수 있다. CliGate를 구축하는 과정에서 이 문제에 직면했고, 세션 지속성 문제를 해결했다...
React 리스트와 키 마스터하기
React 리스트와 키 마스터하기. React에서 리스트를 렌더링하는 것은 간단하지만, 올바르게 구현하는 것은 어렵습니다. 많은 개발자들이 배열 인덱스를 키로 사용하곤 하는데, 이는 실수입니다. 이는 버그와 ...
TypeScript using 키워드와 명시적 리소스 관리
TypeScript using 키워드와 명시적 리소스 관리. 프로덕션 환경의 메모리 누수는 종종 한 가지 오류에서 비롯됩니다. 개발자가 리소스를 획득하지만 이를 해제하지 못하는 경우입니다. 데이터베이스 연결...
메일함의 혼란 없이 패스워드리스 로그인 테스트하기
메일함의 혼란 없이 패스워드리스 로그인 테스트하기. 데모에서는 패스워드리스 로그인이 쉬워 보입니다. 사용자가 이메일을 입력하면 매직 링크가 도착하고 세션이 시작됩니다. 하지만 스테이징 환경에서는 이 흐름이...
Node.js가 수천 개의 요청을 처리하는 방법
Node.js가 수천 개의 요청을 처리하는 방법. 사람들은 Node.js가 싱글 스레드라고 말합니다. 하지만 Node.js는 멈추지 않고 수천 개의 요청을 처리하고, 파일을 읽으며, API 호출을 수행합니다. 어떻게...
모든 npm 설치에 숨겨진 비용
모든 npm 설치에 숨겨진 비용. 우리는 자바스크립트 문제를 해결하기 위해 10년 동안 라이브러리를 다운로드하며 시간을 보냈습니다. 날짜 처리를 위해 moment.js를 사용했고, 유틸리티를 위해 lodash를 사용했으며, node fetch를 사용해서...
식품 생산 시 UV 공기 순환기 사용 시 주의해야 할 실수
식품 생산 시 UV 공기 순환기 사용 시 주의해야 할 실수. 식품 생산에서 공기 위생은 매우 중요합니다. 특히 포장 구역은 매우 민감합니다. 공기 중의 미생물은 제품의 질을...
인터랙티브 앱 가이드 구축하기
인터랙티브 앱 가이드 구축하기. 지원 팀은 설치해 본 적 없는 앱 때문에 어려움을 겪는 경우가 많습니다. 스크린샷이 포함된 PDF가 일반적인 해결책이지만, 대부분의 사람들은 PDF를 읽지 않습니다...
보이지 않는 프론트엔드: 제품을 살리는 작은 결정들
보이지 않는 프론트엔드: 제품을 살리는 작은 결정들. 최고의 프론트엔드 작업은 데모에서 결코 드러나지 않습니다. 제가 가장 가치 있게 여기는 작업은 보이지 않는 것입니다. 아무도 그것을 스크린샷으로 찍지 않습니다. 하지만...
기기 하나 건드리지 않고 모든 지점을 업데이트한 방법
기기 하나 건드리지 않고 모든 지점을 업데이트한 방법. 저는 Electron을 사용하여 내부 데스크톱 도구를 제작했습니다. 이 도구는 여러 지점 사무실의 기기에서 실행됩니다. 이 사무실들은 다양한...
React 성능 최적화 체크리스트
React 성능 최적화 체크리스트. 느린 애플리케이션은 비즈니스에 치명적입니다. 높은 이탈률을 유발하고 사용자에게 불편을 주며, 인프라 비용까지 증가시킵니다. 여러분은...
React 학습 5일 차: 배칭과 함수형 업데이트
React 학습 5일 차: 배칭과 함수형 업데이트. 상태 세터를 여러 번 호출하면 렌더링이 여러 번 일어난다고 생각했습니다. 하지만 제 생각이 틀렸습니다. React는 그보다 더 똑똑합니다. React는...
당신의 콘솔은 당신을 속이고 있습니다
당신의 콘솔은 당신을 속이고 있습니다. 브라우저 개발자 도구(DevTools)는 디버깅 중에 혼란을 줄 수 있습니다. 이는 고장 난 것이 아니라, 완벽한 정확도보다는 속도에 최적화되어 있기 때문입니다. 그 이유는 다음과 같습니다...