지나가던 개발(zigae)

26 Posts (1 - 26)

Tailwind CSS를 싫어하는 이유

2023년 12월 16일 • ☕️ 2 min read

이 글은 Tailwind CSS에 대한 지극히 주관적인 글입니다. 몇몇 개발자들은 Tailwind CSS를 좋아하고 사용하고 있고, 그들의 의견을 존중합니다. Tailwind CSS의 존재 목적 Tailwind CSS…

프론트엔드 클린코드 - 복잡한 네이밍 회피

2023년 12월 15일 • ☕️☕️ 12 min read

필자를 포함한 우리 모두는 프로그래밍을 하면서 변수, 함수, 클래스, 파일 등을 네이밍하는 것을 가장 어려운 문제 중 하나라는 것을 알고 있다. 아마도 우리 대부분은 프로그래밍을 처음 시작했을 때 다음과 같은 코드를 작성했을 것이다.

React Context 중첩 된 컴포넌트 검사

2023년 5월 29일 • ☕️ 5 min read

React Context API는 트리의 상위 부모 컴포넌트에서 하위 자식 컴포넌트로 prop을 전달해야 하는 prop 드릴링 문제를 해결하기 위해 만들어졌다. Context API가 없다면 여러 중간 컴포넌트를 통해 prop을 드릴링하거나 HoC 또는 Hook을 사용해 글로벌 스토어에서 데이터를 읽어야 한다. 그러나 Context API를 다른 용도로 사용할 수도 있다.

프론트 개발자의 2021년 회고

2023년 1월 2일 • ☕️ 6 min read

어느덧 개발을 시작한지 3년이란 시간이 흘렀다. 그 중에 올해는 개발을 시작한 이후 가장 변곡점이 많은 해였기에 2021년 회고를 작성하고자 한다.

프론트엔드 웹 접근성(a11y) - rem

2022년 10월 15일 • ☕️☕️ 8 min read

웹이서 크기를 조정하는 전통적인 단위는 CSS 픽셀이지만 적어도 폰트 크기에는 픽셀을 사용하지 않는 것이 좋다. 픽셀은 디자인 시안을 쉽게 CSS로 변환 할 수 있지만 절대 길이 단위 이므로 하나의 CSS픽셀이 사용자의 화면의 고정된 물리적 픽셀(모니터 및 장치 픽셀) 크기에 해당한다.

프론트엔드 클린코드 - Swich Case 회피

2022년 9월 13일 • ☕️ 6 min read

switch-case는 코드가 장황하고 반복되는 보일러 플레이트 코드가 많기 때문에 필자를 포함해 많은 개발자들의 싫어한다. 이는 동작에 문제가 있거나 어렵기 때문이 아니다. 문제는 해당 코드 블록의 읽기 위해 다른 코드 블록 읽기를 중단함으로써 스위칭 비용이 발생한다는 것이다. 간단한 switch-case 조차 20줄 정도는 쉽게 발생한다.

우리가 몰랐던 styled-components 동작원리

2022년 6월 27일 • ☕️☕️☕️ 13 min read

styled-components를 처음 사용하기 시작했을 때를 기억해 보면 마법처럼 느껴졌다. 처음엔 약간 모호했던 반은 문자열, 반은 함수로 작성되고 CSS를 우회하여 React 컴포넌트에 마크업을 하기도 했다. 이후 필자를 포함한 많은 개발자들이 styled-components를 사용하는 방법을 배웠지만 내부에서 무슨 일이 일어나고 있는지 제대로 이해하지 못했을 것이다.

프론트엔드 웹 접근성(a11y) - toast

2022년 5월 8일 • ☕️ 5 min read

토스트는 짧은 시간에 나타났다가 사라지는 알림 컴포넌트이다. 일반적으로 토스트 메세지는 사용자와 상호작용이 필요하지 않거나 중요하지 않은 메세지를 표시한다. 지도앱에서 검색 버튼을 누르면 결과가 나오기 전까지 표시 되는 "위치 검색 중"과 같은 메세지를 예로 들 수도 있다.

프론트엔드 웹 접근성(a11y) - 기본

2022년 4월 25일 • ☕️ 5 min read

일반적으로 웹에 접근할 수 있다는 것은 웹에서 제공하는 컨텐츠 및 기능을 사용할 수 있다는 것이다. 즉 누구나 기능을 사용할 수 있어야 한다. 개발자는 모든 사용자가 키보드, 마우스 또는 터치를 사용하여 서비스와 상호작용할 수 있다 가정하고는 한다.

프론트 개발자에게 사용자 경험이란?

2022년 3월 30일 • ☕️ 4 min read

현재 사용자 중심에서 생각할 수 있는 프론트엔드 개발자의 수요가 많다. 기업은 고객으로부터의 지속적인 피드백을 기반으로 제품 및 경험을 만든다. 기업은 더 나은 사용자 경험을 제공하기 위해 앞으로도 지속적으로 투자할 것이며, 조직은 사용자 경험을 공유하며 발전 시키는 책임을 지게 되는 것이다.

프론트엔드 클린코드 - 객체 변이(mutation) 지양

2022년 3월 6일 • ☕️☕️ 12 min read

새로운 변수를 생성하거나 기존 변수를 재할당하지 않고 JavaScript의 객체 또는 배열을 변경할 때 예상치 못한 mutation(변이) 일어난다. 현재 원본 puppy 객체의 age 속성을 변경하여 객체를 변화 시키고 있다. 이러한 mutation…

상태관리의 선택, useState, useReducer

2022년 1월 30일 • ☕️ 5 min read

어떤 방식으로 상태관리를 사용할 것인가에 대한 고민은 React의 라이브 기간(또는 더 오래전에)과 함께 했으며, 이에 대한 답변은 다양하다.

2년만에 돌아온 2023년 회고

2022년 1월 2일 • ☕️ 6 min read

어느덧 개발을 시작한 지 3년이란 시간이 흘렀다. 그중 올해는 개발을 시작한 이후 가장 변곡점이 많은 해였기에 2021년 회고를 작성하고자 한다. 개발자라면 누구나 개발자로서 한걸음 나아가기 위한 노력을 할 것이다. 필자는 202…

useState의 참조 동일성

2021년 11월 23일 • ☕️ 3 min read

리액트 개발자는 메모이제이션과 레퍼런즈 보존을 안정적으로 유지하기 위해, 보통 useMemo를 가장 먼저 떠올린다. 최근에 있었던 실제 예를 하나 들어보고자 한다.

useState에 props 주입

2021년 11월 8일 • ☕️ 5 min read

본 글은 props로 얻은 값으로 state를 초기화 하려는 일반적인 상황에 대해 이야기한다. 아마도 많은 개발자들이 비슷하게 코드를 작성 했을 것이다. 코드 자체의 문제는 아니지만 우리는 잠재적인 문제 몇 가지를 인지해야한다.

useState 과도하게 사용하지 않기

2021년 10월 21일 • ☕️ 3 min read

필자는 최근 주변에서 이러한 hook이 잘못 사용 되는 경우를 종종 봤다. hook 사용법 자체는 어렵지 않아 문제 없지만 상태관리는 결코 쉽지 않기 때문이다.

React Query Key 관리

2021년 9월 23일 • ☕️ 5 min read

queryKey는 React Query에서 중요한 개념이다. 내부적으로 데이터를 캐시하고 쿼리에 대한 종속성이 변경될 때 자동으로 다시 가져올 수 있게 한다.

프론트엔드 클린코드 - 조건문 지양

2021년 8월 30일 • ☕️☕️ 9 min read

조건(condition)은 코드를 읽고 복잡하게 만든다. 중첩된 조건은 행을 더 길게 만들기도 해서 여러 행으로 분할 하도록 해야하고, 각 조건은 특정 모듈 또는 기능에 대해 작성 해야하는 테스트 케이스의 수도 증가시키기도 한다.

프론트엔드 클린코드 - 반복문 회피

2021년 8월 20일 • ☕️ 4 min read

for또는 while 반복문은 일반적으로 코드가 장황하고 오류가 발생하기 쉽기 때문에 퀄리티 높은 코드를 만들기 힘들다. 항상 length를 따로 관리해야 하고, 반복문 횟수가 조작 가능하다는 잠재적 위험도 포함하고 있다. 그리고 이와 같은 반복문은 코드를 반복 수행한다는 점을 제외하면 특별한 의미를 가지지 않는다.

Lubycon 3기 후기 및 회고

2021년 6월 27일 • ☕️ 5 min read

Lubycon 이란? 간단하게 설명하면 루비콘은 개발자들과 디자이너들이 모인 팀이다. 다른 사이드프로젝트 동아리와 공통점으로는 팀 단위로 사이드프로젝트를 진행하지만 차이점은 내부에서 스터디, 멘토링, 테크톡, 오픈소스 개발등 다양한 활동이 활발하게 이루어지고 있다.

Modbus rtu rs485 / CRC Check

2019년 5월 21일 • ☕️ 4 min read

외경 측정기 MODBUS RTU RS485 (CRC16 for node) Modbus RTU frame format start slave addr comand code data content CRC Check end 10ms 텀으로 구분 8bit…