프론트엔드 클린코드 - 복잡한 네이밍 회피
필자를 포함한 우리 모두는 프로그래밍을 하면서 변수, 함수, 클래스, 파일 등을 네이밍하는 것을 가장 어려운 문제 중 하나라는 것을 알고 있다. 아마도 우리 대부분은 프로그래밍을 처음 시작했을 때 다음과 같은 코드를 작성했을 것이다.
필자를 포함한 우리 모두는 프로그래밍을 하면서 변수, 함수, 클래스, 파일 등을 네이밍하는 것을 가장 어려운 문제 중 하나라는 것을 알고 있다. 아마도 우리 대부분은 프로그래밍을 처음 시작했을 때 다음과 같은 코드를 작성했을 것이다.
React Context API는 트리의 상위 부모 컴포넌트에서 하위 자식 컴포넌트로 prop을 전달해야 하는 prop 드릴링 문제를 해결하기 위해 만들어졌다. Context API가 없다면 여러 중간 컴포넌트를 통해 prop을 드릴링하거나 HoC 또는 Hook을 사용해 글로벌 스토어에서 데이터를 읽어야 한다. 그러나 Context API를 다른 용도로 사용할 수도 있다.
웹이서 크기를 조정하는 전통적인 단위는 CSS 픽셀이지만 적어도 폰트 크기에는 픽셀을 사용하지 않는 것이 좋다. 픽셀은 디자인 시안을 쉽게 CSS로 변환 할 수 있지만 절대 길이 단위 이므로 하나의 CSS픽셀이 사용자의 화면의 고정된 물리적 픽셀(모니터 및 장치 픽셀) 크기에 해당한다.
switch-case는 코드가 장황하고 반복되는 보일러 플레이트 코드가 많기 때문에 필자를 포함해 많은 개발자들의 싫어한다. 이는 동작에 문제가 있거나 어렵기 때문이 아니다. 문제는 해당 코드 블록의 읽기 위해 다른 코드 블록 읽기를 중단함으로써 스위칭 비용이 발생한다는 것이다. 간단한 switch-case 조차 20줄 정도는 쉽게 발생한다.
styled-components를 처음 사용하기 시작했을 때를 기억해 보면 마법처럼 느껴졌다. 처음엔 약간 모호했던 반은 문자열, 반은 함수로 작성되고 CSS를 우회하여 React 컴포넌트에 마크업을 하기도 했다. 이후 필자를 포함한 많은 개발자들이 styled-components를 사용하는 방법을 배웠지만 내부에서 무슨 일이 일어나고 있는지 제대로 이해하지 못했을 것이다.
토스트는 짧은 시간에 나타났다가 사라지는 알림 컴포넌트이다. 일반적으로 토스트 메세지는 사용자와 상호작용이 필요하지 않거나 중요하지 않은 메세지를 표시한다. 지도앱에서 검색 버튼을 누르면 결과가 나오기 전까지 표시 되는 "위치 검색 중"과 같은 메세지를 예로 들 수도 있다.
일반적으로 웹에 접근할 수 있다는 것은 웹에서 제공하는 컨텐츠 및 기능을 사용할 수 있다는 것이다. 즉 누구나 기능을 사용할 수 있어야 한다. 개발자는 모든 사용자가 키보드, 마우스 또는 터치를 사용하여 서비스와 상호작용할 수 있다 가정하고는 한다.
현재 사용자 중심에서 생각할 수 있는 프론트엔드 개발자의 수요가 많다. 기업은 고객으로부터의 지속적인 피드백을 기반으로 제품 및 경험을 만든다. 기업은 더 나은 사용자 경험을 제공하기 위해 앞으로도 지속적으로 투자할 것이며, 조직은 사용자 경험을 공유하며 발전 시키는 책임을 지게 되는 것이다.
새로운 변수를 생성하거나 기존 변수를 재할당하지 않고 JavaScript의 객체 또는 배열을 변경할 때 예상치 못한 mutation(변이) 일어난다. 현재 원본 puppy 객체의 age 속성을 변경하여 객체를 변화 시키고 있다. 이러한 mutation…
어떤 방식으로 상태관리를 사용할 것인가에 대한 고민은 React의 라이브 기간(또는 더 오래전에)과 함께 했으며, 이에 대한 답변은 다양하다.
어느덧 개발을 시작한 지 3년이란 시간이 흘렀다. 그중 올해는 개발을 시작한 이후 가장 변곡점이 많은 해였기에 2021년 회고를 작성하고자 한다. 개발자라면 누구나 개발자로서 한걸음 나아가기 위한 노력을 할 것이다. 필자는 202…
리액트 개발자는 메모이제이션과 레퍼런즈 보존을 안정적으로 유지하기 위해, 보통 useMemo를 가장 먼저 떠올린다. 최근에 있었던 실제 예를 하나 들어보고자 한다.
본 글은 props로 얻은 값으로 state를 초기화 하려는 일반적인 상황에 대해 이야기한다. 아마도 많은 개발자들이 비슷하게 코드를 작성 했을 것이다. 코드 자체의 문제는 아니지만 우리는 잠재적인 문제 몇 가지를 인지해야한다.
필자는 최근 주변에서 이러한 hook이 잘못 사용 되는 경우를 종종 봤다. hook 사용법 자체는 어렵지 않아 문제 없지만 상태관리는 결코 쉽지 않기 때문이다.
queryKey는 React Query에서 중요한 개념이다. 내부적으로 데이터를 캐시하고 쿼리에 대한 종속성이 변경될 때 자동으로 다시 가져올 수 있게 한다.
변수를 재할당하는 것은 코드의 히스토리를 바꾸는 것과 같다.
조건(condition)은 코드를 읽고 복잡하게 만든다. 중첩된 조건은 행을 더 길게 만들기도 해서 여러 행으로 분할 하도록 해야하고, 각 조건은 특정 모듈 또는 기능에 대해 작성 해야하는 테스트 케이스의 수도 증가시키기도 한다.
for또는 while 반복문은 일반적으로 코드가 장황하고 오류가 발생하기 쉽기 때문에 퀄리티 높은 코드를 만들기 힘들다. 항상 length를 따로 관리해야 하고, 반복문 횟수가 조작 가능하다는 잠재적 위험도 포함하고 있다. 그리고 이와 같은 반복문은 코드를 반복 수행한다는 점을 제외하면 특별한 의미를 가지지 않는다.
본글은 useCallback, useMemo에 대해 설명하는 글이 아님을 알린다.
yarn-berry, yarn2 는 무엇일까? Yarn Berry는 새로운 패키지 관리 시스템으로, 기존의 npm, yarn v1 의 패키지 비효율적인 매니징 방법을 개선한 것이다. Yarn Berry는 고전 패키지 매니저의 문제를 Plug’n…
Lubycon 이란? 간단하게 설명하면 루비콘은 개발자들과 디자이너들이 모인 팀이다. 다른 사이드프로젝트 동아리와 공통점으로는 팀 단위로 사이드프로젝트를 진행하지만 차이점은 내부에서 스터디, 멘토링, 테크톡, 오픈소스 개발등 다양한 활동이 활발하게 이루어지고 있다.
amplitfy를 이용해 nextjs 호스팅하는 방법 두가지
Javascript 개발자라면 템플릿리터럴 문법을 사용할 때 백틱을 사용해야 하는데 키보드 입력기가 영어 일 때만 백틱을 사용할 수 있다.
외경 측정기 MODBUS RTU RS485 (CRC16 for node) Modbus RTU frame format start slave addr comand code data content CRC Check end 10ms 텀으로 구분 8bit…