Web
공통 컴포넌트 설계 여정
🎯 개요최근 회사에서 공통 컴포넌트를 분리하는 리팩토링 작업을 하면서 느꼈던 공통 컴포넌트 분리할 때 고려해야 하는 것들, 재사용성을 높이기 위한 노력들, 그 과정에서의 실수와 고민거리 등등을 정리했습니다. 📒 과거의 나의 실수📌 UI가 비슷해보이면 무조건 하나로똑같은 코드가 중복되는 건 무조건 나쁜 코드(?)인 줄 알았습니다. UI만 비슷해 보이면 이건 앞뒤 잴 필요도 없어 무조건 공통 컴포넌트로 분리해야 하는 코드로 정의했습니다. 이건 연쇄적인 문제점들을 떠안고 왔는데요. 📌 눈덩이처럼 불어나는 나의 공통 컴포넌트서비스에서 사용되는 모든 UI들을 하나의 컴포넌트로 묶어야 한다는 강박에 억지로 props, emits들을 끼워 맞추게 되고, 오만가지 분기처리와 예외처리들이 생겨났습니다. 처음에는..
Typescript 사용할 때 주의할 점 10가지
1. strict 모드를 사용하지 않는 것tsconfig.json에 strict 모드를 활성화 시키자. 2. Fallback으로 || 옵셔널 오퍼레이션을 사용하는 것=> ??을 사용하던지 더 나은 방법은 파라미터 레벨에서 fallback을 써주는 것이다. 3. any 타입을 사용하는 것unknown타입을 대신해서 쓰자. any는 타입체크를 비활성화시킨다. 즉, 버그를 확인하기 어려워진다. 4. val as SomeType강제로 특정 타입이라고 컴파일러에 알려주는 방식.function isArrayOfProducts (obj: unknown): obj is Product[] { return Array.isArray(obj) && obj.every(isProduct)}function isProduct (o..
프론트엔드 웹 최적화를 위한 Code Splitting
📒 Code Splitting 이란? Code spliting은 큰 자바스크립트 번들을 더 작고 관리하기 쉬운 청크로 분할하여 웹사이트 성능을 최적화하는 데 사용되는 기술이다. 이러한 작은 청크는 필요에 따라 로드할 수 있으므로 웹 애플리케이션의 초기 로드 시간을 단축할 수 있다. 📒 Javascript에서 Code Splitting을 구현하는 방법 📌 동적 import 사용 최신 자바스크립트에서는 동적 임포트와 "import()" 함수를 사용하여 모듈을 온디맨드 방식으로 로드할 수 있다. 동적 import는 Promise를 반환하므로 필요할 때 모듈을 비동기적으로 로드할 수 있다. 아래 예시에서는 페이지가 처음 로드될 때가 아니라 버튼이 클릭될 때 my-module.js 모듈이 로드된다. const b..
타입스크립트 'interface' 총정리
타입으로 사용되는 인터페이스. 함수에서 반환되는 타입을 명시할 때 객체의 타입을 모두 명시했을 때 코드가 복잡해 보인다. function getStudentDetails(studentId: number):{ studentId: number, studentName: string, age: number, createDate: Date } { return { studentId: 3, studentName: 'Moon', age: 19, createDate: new Date } } 위 코드 보다 가독성 좋은 코드를 작성하기 위해서 인터페이스란 개념을 도입해서 사용할 수 있다. 인터페이스(interface) 타입 명시를 위해 사용되며, 변수, 함수, 클래스 등에 사용된다. 인터페이스는 코드의 재사용성을 높인다. ..
React hook에서 클로저가 어떻게 쓰일까?
1. React Hook에서의 useState React에서는 상태가 변경되면 변경되었음을 컴포넌트에 알려주고, 변경된 상태를 반영해서 컴포넌트가 리렌더링된다. 기존 클래스형 컴포넌트에서는 state로 컴포넌트 내부 상태를 정의하고 setState를 사용해 이 로직을 구현했다. 반면 React Hook에서는 useState라는 Hook을 통해 컴포넌트 내의 상태를 관리한다. useState는 초기값(initialValue)를 받아서 [상태, 상태를 변경하는 함수] 형태의 배열을 반환한다. 비구조화 할당을 통해 아래 형태로 사용한다. const [state, setState] = useState(initialValue) 함수형 컴포넌트에서 이전 상태와 현 상태의 변경이 있는지를 감지하기 위해서는 함수가 실..
Redux 발 담가보기
📒 Redux란?React에서 주로 사용하며, 상태관리를 별도의 저장소에서 다룰 수 있는 라이브러리 📌 useState와 Redux의 차이📝 useState()의 경우단방향으로만 상태를 갱신할 수 있다.물론 당연히 props를 통해 상태 갱신 함수를 내려주면 되지만 좋은 방법은 아니라고 알고 있다. 📝 Redux의 경우모든 컴포넌트에서 Redux Store에 접근하여 상태를 가져오거나, reducers를 통해 상태를 갱신할 수 있다. 📌 Redux Store의 구성 요소`initialState`: 상태의 기본값`reducers`: 상태를 바꾸는 방법을 정의한 코드. reducers를 사용하지 않고서는 상태를 변경할 수 없다.`action` : reducers를 실행하는 함수 (dispatch라..