2022년 웹 연감 나이 든 프로그래머 40세가 된 프로그래머로서 프로그래머가 나이가 들면 관리자가 되거나 프로그래밍에 흥미를 잃게 된다는 생각을 자신의 경험과 생각을 통해서 부정한다. PR 및 피드백을 효과적으로 관리하는 6가지 방법 React 렌더링 동작에 대한 가이드 - 2020년 5월 게시글이지만 React18과 향후 업데이트를 포함해서 수정됨 - React 구성 요소, 재사용성 및 추상화 - 잘못된 추상화 - 복사는 잘못된 추상화보다 훨씬 저렴하다. 더 깔끔한 코드를 위한 '6의 법칙' 소프트웨어 엔지니어링 사례 코드와 동일한 리포지토리에 있는 문서 테스트 데이터 생성 메커니즘 견고한 데이터베이스 마이그레이션 새 프로젝트 및 구성 요소를 위한 템플릿 자동화된 코드 서식 새로운 개발 환경을 위한 ..

useEffect 와 useLayoutEffect 차이 React 컴포넌트의 라이프사이클 1. 사용자 는 구성 요소 변경 의 앱 및 상태 또는 소품 과 상호 작용합니다. 2. React는 DOM(Document Object Model)을 업데이트합니다. 3. useLayoutEffect 후크가 발사됩니다. 4. 브라우저 페인트 => 시각적 변경 사항이 사용자에게 표시됩니다. 5. useEffect 후크가 발사됩니다. UI & UX 설계시 12가지 TIP - Z pattern & F pattern 2022년 Storybook useSyncExternalStore AI 를 지원하는 Replit Web IDE - Hacker plan 에서 사용가능하며 작성 기준으로 7/mo 2022년에 npm package를..

UI 디자인에서 사용하는 컬러를 위한 10가지 팁 Docusaurus 2.0 문서화 도구 개발자의 기술 문서 작성 - 기술 문서 세부적인 범위에 따른 가이드들 Cloudscape design system - AWS에서 사용된 디자인 시스템 Petterns.dev - 웹앱 설계에 대한 포괄적이고 시각화된 안내서 text로 이루어진 웹사이트를 위한 모범사례 devhub - 깃허브 리포지토리 활동을 관리하고 알림을 받을 수 있는 앱 라이브러리 이미지 줌 https://github.com/rpearce/react-medium-image-zoom 해당 라이브러리 5.0.1 버전을 safari 15.0.0 버전에서 사용하면 렌더 문제가 있는데 개선되면 사용성 높을 라이브러리 node 스크래퍼 및 브라우저 자동화 라..

무엇이 시니어 엔지니어를 만드는가? 그리드를 통한 인터페이스 디자인(디자인 시스템) 프론트엔드 마이그레이션 가이드 뉴비 개발자가 가면 증후군을 다루는 방법 다크 모드 가이드 더글라스 크락포드의 자바스크립트에 관한 생각에 관한 인터뷰에서 나온 일과 삶의 균형 Evrone: 인터뷰가 끝나면 일과 삶의 균형에 관한 몇 가지 팁을 공유해 주세요. 일상적인 생산성을 위해 필요합니까? Douglas: 저는 직장 생활을 하면서 수면 부족으로 어려움을 겪었고 잘 쉬었을 때 최고의 글을 쓴다는 것을 배웠습니다. 너무 늦게 또는 너무 오래 일하는 것은 궁극적으로 역효과라고 생각합니다. 지칠 때 최선을 다하지 않는 것이고, 이 사업에서 우리의 모든 일은 최선을 다해야 합니다. 적당한 시간을 일하면 긴 산책을 하고, 건강에 ..

룩앤필은 시각적인 요소만으로 사용자가 무엇인지를 알 수 있도록 만드는 요소다. 예를 들어 사용자가 어떤 웹페이지에 있는 회원가입 버튼을 보았을때를 생각해보자. 회원 가입 버튼에는 버튼이라는 단어는 없지만 룩앤필을 제대로 구현한 UI를 구현했다면 사용자는 회원가입 텍스트에 마우스를 가져다가 클릭을 하거나 모바일 디바이스라면 손가락으로 터치를 할 것이다. 분명히 버튼이라는 설명은 없지만 UI상 사용자는 충분히 버튼으로 기능을 할 것임을 인지한다. 룩앤필의 주체는 사용자이며 제품과 사용자간의 상호작용에 중점을 둔다. 제품을 보고 어떻게 다뤄야 하는지 쉽게 인지하도록 만든다면 좋은 룩앤필을 구현했다고 할 수 있다. 톤앤매너는 시각적인 요소를 통해서 브랜드를 인지할 수 있게 만드는 요소다. 예를 들어 도로에서 순..

JS&TS 모노레포 프로젝트로 시작하기 React18 동시성 모드(concurrent) 스트레스 테스트로 이해하기 - startTransition 내부에서 호출된 상태변환은 리액트에게 지연되어 상태변환 되도록 요청하게된다. - 동시 렌더링은 UI 응답성을 유지하면서 대규모 UI 업데이트를 렌더링하는 성능 문제를 해결한다. jest image snapshot Object 보다 Map을 선호해야 할 때는 언제인가? - Object는 코드 작성 시점에 정의되는 경우와 일회성으로 사용되는 경우 사용한다.(config 같은 경우) - 코드 작성 시점에 키를 알 수 없는 경우에는 Map을 사용한다. - Object가 작은 수의 정수를 키로 갖는 경우를 제외하고 Map이 삽입, 삭제, 순회 성능에서 더 나은 성능을..