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

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

코드를 배우는 것과 소프트웨어 엔지니어가 되는 방법을 배우는 것은 별개입니다. 자바스크립트 메모리 관리 웹 애플리케이션 101 개발자 생산성에 대한 개발자의 생각 개발자를 위한 CI/CD 설정 react useEvent

2022년 react libraries 100 버전이 된 크롬의 지금까지의 여정 요약 좋은 UI를 위한 궁극적인 가이드 코드 조각 검색 및 공유 서비스 LCP 최적화(이미지 관련 힌트) 2022 JS testing best practice 구글 폰트 빠른 로드 *자바스크립트 프레임워크 4번째 시대 - 2012년 부터 자바스크립트 개발을 시작한 저자는 그 때부터 지금까지 주요 자바스크립트 트렌드와 라이브러리를 기반으로 구분하여 각 시대를 정의한다.

comment를 이용한 타입 추론 제안 코드 리뷰 피라미드 - 코드 리뷰를 5가지 관점에서 계층적으로 나눈 시각화 자료를 보여준다. 일반적으로 코드 리뷰 퀄리티가 높지 않다면 코드 스타일과 문법적 스타일 리뷰에 머무를 가능성이 높다. 더 핵심적이고 중요한 부분에 코드 리뷰 시간을 할애 할 수 있도록 도와주는 코드 리뷰 가이드 자료. 웹 애니메이션 성능 기초 Gmail UX 사례 연구 10년 동안 팽창(웹 리소스 크기) 소프트웨에 개발자를 위한 비개발 도서 Ladle - 스토리 북의 경량 및 초고속 드롭인 대안(for React) 접근성 및 사용자 상호 작용 문서화를 위한 디자이너 가이드 Node 아키텍처 모범 사례

React 스토리(영상) - React가 어떻게 현재의 위치에 와있는지를 설명하며 React의 탄생 이전 웹 개발의 상황부터 현재까지를 재미있게 풀어 설명 *소프트웨어 엔지니어로 20년 동안 일하면서 배운 20가지 2022년 React Best Practice React context로 고성능 앱 설계 - Provider는 children만 prop으로 받고 state와 state 변경 로직을 갖는 context를 정의한다. context state와 변경 로직을 사용하는 컴포넌트는 hook으로 직접 사용. 핵심은 Provider 컴포넌트로 children 렌더에 관여하지 않는 비의존 관계를 형성함에 있다. 2022 CSS 웹의 생존편향 - 너무 느려서 측정하지 못하는 케이스는 파악할 수 도 없다는 점에..