fe 2

[Clean Code] React에서의 클린코드

클린 코드의 의의 - 실무에서 공공연한 지뢰코드가 존재한다. - 지뢰코드 === 흐름파악이 어렵고, 도메인 맥락 표현X , 동료에게 물어봐야하는 코드 - 즉 실무에서 클린코드란 유지보수 시간의 단축과 같다. ( 클린코드 != 짧은코드 ) == 원하는 로직을 빠르게 찾을 수 있는 코드 원하는 로직을 빠르게 찾으려면? 1. 하나의 목적을 가진 코드가 흩뿌려져 있다면 => 1.응집도를 높여라 2. 함수가 여러 가지 일을 하고 있다면? => 2.단일책임의 원칙을 따라라 3. 함수의 세부구현 단계가 제각각이라면? => 3.추상화 단계를 조정해 핵심 개념을 필요한 만큼 노출해라 1. 응집도 응집도가 낮은 코드 예제 리팩토링 시도 - custom Hook 사용 - custom hook을 이용하여 한번에 뭉쳤을때의 위..

FE 2023.10.10

[디자인패턴] 아토믹패턴이란?

프로젝트를 준비하며, 폴더구조를 짜던중 디자인패턴 얘기가 나왔다. 리액트에 적용시킬 디자인 패턴을 고려하는 중, 최근에 자주 들리던 (?) 아토믹 패턴에 대해 알아보기로 했다. Atomic Design이란? - 화학에서 용어를 빌린 개념을 웹에 적용한 패턴이다. - 웹사이트에서의 가장 작은 컴포넌트 단위를 원자(Atoms)로 설정하고, 이를 퍼즐을 조립하듯 사용하여 상위 컴포넌트를 만드는 패턴이다. Atomic Design의 5단계 1. Atoms 원자(Atoms)은 인터페이스를 구성하는 기본 블록역할을 한다. 즉, 디자인과 기능의 최소단위라고 볼 수 있다. ex ) Label , Text ,Button , Icon , input 등 basic HTML elements 2. Molecules 분자(Mol..

FE 2022.07.04