Frontend

Frontend

상태관리 유형 분류

1. Flux 방식Redux, Zustand가 이 유형에 속한다.top-down 방식옵저버 패턴Action이 발생하면, Dispatcher에서 이를 해석한 후 Store에 저장된 정보를 갱신하고, 그 결과가 다시 View로 전달된다. 2. Proxy 방식MobX가 이 유형에 속한다.이 유형은 상태를 프록시 객체로 래핑직접 객체를 다루지 않고, 프록시를 통해 작업을 수행객체지향 프로그래밍과 잘 맞다.물론 함수형 프로그래밍과 함께 사용할 수 있긴 하지만, 이들의 핵심 원칙과 기능은 객체 지향 프로그래밍의 원칙과 더 잘 어울린다. 3. Atomic 방식Recoil, Jotai가 이 유형에 속한다.이 유형은 전체 상태를 원자 (Atom)으로 나누는 것을 추구한다.원자는 업데이트 가능하고 구독 가능한 상태의 단위..

Frontend

lint와 formatter는 엄연히 다르다.

fomatter는 코드 스타일에 관여lint는 잠재적인 오류를 정적 테스트하는 것 ESLint는 8.53.0 버전에서 핵심 포맷팅 규칙을 폐기하고, 코드 포맷터 사용을 권장한다는 것!이는 ESLint 유지보수 부담을 줄이고, 일관성을 높이기 위한 결정. 포맷팅 규칙은 점점 복잡해져서 여러 스타일 가이드를 지원해야 했고, 이는 비효율적이었기에 결정을 했다. ESLint 8.53.0 이전 버전에서는 린트임에도 불구하고 포맷팅 규칙이 존재했다. (포맷팅 규칙은 띄어쓰기, 세미콜론, 문자열 형식 등을 아우르는 코드 컨벤션을 강화시켜 주는 규칙을 의미) 둘은 엄연히 다른데 왜 ESLint에는 포멧팅 규칙이 존재했을까? 2013년 ESLint가 처음 릴리즈되었을 때 자바스크립트 생태계는 린터가 코드 포멧팅을 포함할..

Frontend

url 상태관리

원티드 프리온보딩 강의를 듣던 중 상태관리를 url로도 많이 한다는 강사님의 이야기를 들었다.  url로 상태관리를 한다면 해당 페이지를 공유하기에도 좋고 상태관리 라이브러리를 사용하지 않아도 되고뒤로가기 스택도 조절할 수 있는 큰 장점이 있다!  정말 많은 사이트에서 url을 많이 활용하고 있는 것 같았다.  use-query-state로 사용할 수 있다. https://nuqs.47ng.com/ nuqs | Type-safe search params state management for Next.jsType-safe search params state management for Next.js. Like React.useState, but stored in the URL query string.nuqs..

Frontend

moduleResolution이란

tsconfig.json을 보면 moduleResolution의 속성이 있는 것을 확인해볼 수 있다.  moduleResolution은 TypeScript 컴파일러 옵션 중 하나로, TypeScript가 모듈을 찾고 해석하는 방식을 지정한다.  moduleResolution의 옵션 1. nodenode.js의 모듈 해석 전략을 따른다. 대부분의 현대 TypeScript 프로젝트에서 사용되는 기본 모드이다.  절대 경로: node_modules 디렉터리에서 모듈을 찾는다.상대 경로: 현재 디렉터리에서부터 상위 디렉터리로 거슬러 올라가며 모듈을 찾는다.파일 확장자: .ts, .tsx, .d.ts, .js 등의 파일 확장자를 순서대로 시도하여 모듈을 찾는다.패키지 파일: 패키지의 package.json 파일에..

*히아*
'Frontend' 카테고리의 글 목록