전체 글

1. ESLint, Prettier / 설치 및 사용 / 차이점 / 더 잘쓰기 (충돌방지, 쉽게 쓰기)

ESLint Lint, Linter ESLint 를 알아보기 전에 Linter 에 대해 알아보자. Lint 는 보풀 이라는 뜻이다. 즉 Linter 의 의미는 보풀 (뭔가 지저분한, 뭔가 잘못된) 을 찾아주는 의미인 듯 하다. 옷의 보풀은 입어보지 않고도 알 수 있는데, 이는 실행시키지 않아도 코드를 보고 문법의 오류나 안티패턴을 찾아낸다는 의미의 정적분석과도 일맥상통하는 듯 하다. Linter 에는 JSLint, JSHint, ESlint, JSCS 등이 있지만, ESLint 가 커스텀이 좋아서 가장 대중적으로 사용한다고 한다. (ESLint, JSLint 외에는 처음들어봤다) ESLint 니콜라스 C. 자카스에 의해 개발되었으며, ECMAScript 와 실험적인 문법들을 지원한다고 한다. TypeSc..

3. useInfiniteQuery

useInfiniteQuery useInfiniteQuery = 몇몇 인자들이 추가된 useQuery 파라미터 값만 변경하여 동일한 useQuery 를 여러번 호출할 때 사용 => Infinite Scroll, Pagination 에 사용 가능 useInfiniteQuery 의 인자들 (Request) useQuery 에서도 사용한 인자들 queryKey queryFn ({pageParam = initialUrl}) => fetchUrl(pageParam) pageParam 은 고정 pageParam 에, 다음에 요청할 정보를 넣어줌, url 이 될 수도 있고 page(숫자)가 될 수도 있음 API 에서 다음 요청 으로 주는 정보가 무엇이냐에 따름 (new) useInfiniteQuery 의 인자들 (옵..

2. React Query 설치 및 실행 / staleTime, cacheTime / 기본 코드

React Query 설치 및 실행 React Query 설치 npm install react-query React Query Devtools 설치 npm install @tanstack/react-query-devtools query client 생성 cache 와 interact 하는 것 queryProvider 적용 cache, client config 를 제공함 3 에서 만든 query client 가 필요함 모든 자식 컴포넌트들이 queryClient 를 사용할 수 있도록 함 useQuery 실행 서버에서 데이터 가져오기 위해 사용 hook 임 Stale, staleTime Stale 해진다는것은? 만료되었다는 의미 Data 는 stale 상태 에서만 데이터를 fetching 함 componen..

1. React Query 란

React Query 란 Powerful asynchronous state management maintains cache of server data on client 클라이언트에 캐싱 되어있는 서버의 데이터 를 (최신으로) 유지 하려 함 최신의 데이터를 유지하는 React Query 캐시는 데이터를 최신의 상태로 유지함 클라이언트는 데이터가 필요하면, 서버로 요청하는 것이 아니라 React Query 의 캐시로 요청함 (React Query 가 요청하고 refetch 하고 알아서 다 함) React Query 에서 State 관리에 도움을 주는 도구들 모든 쿼리에 대한 loading, error 처리 pagination, infinite scroll prefetch - 미리 fetch 해두어서, cl..

타입스크립트 심화 - 타입 결합 (유니온, 교차) / 인터페이스 / 제네릭

타입 결합 유니온 타입 (Union Type) 두 개 이상의 타입을 허용하는 경우 유니언에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있음 (주의) | 기호로 결합함 let myLet: type1 | type2 = value; let union: string | number; union = 'Hello type!'; union = 123; union = false; // Error - TS2322: Type 'false' is not assignable to type 'string | number'. function padLeft(value: string, padding: boolean | number) { } let indentedString = padLeft("Hello world", true);..

타입스크립트 기초 - 단일값 / 복합값 / 특이타입 / 타입강제

단일 값 불리언 (boolean) true, false let isDone: boolean = false; 숫자 (number) 부동 소수값 16진수, 10진수, 2진수, 8진수 리터럴도 지원 let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; 문자열 (string) 큰따옴표, 작은따옴표, 템플릿 리터럴 모두 포함 let color: string = "blue"; color = 'red'; 복합 배열 (Array) let list: number[] = [1, 2, 3]; let list: Array = [1, 2, 3]; 튜플 (Tuple) 요소의 타입과 갯수가 고정..

DOM 에 대해서 - 역사 / 의미 / 객체 / 호환성

알고 있다고 생각했지만 까놓고보면 하나도 모르는 DOM 에 대해 알아봤다. 정의를 파려니 이름이 걸리고, 이름을 파려니 역사가 걸려서 이것저것 다 적어봤다. DOM 의 역사 - 탄생과 표준화 The first DOM specification (Level 0) was developed at the same time as JavaScript and early browsers. It is supported by Netscape 2 onward. 최초의 DOM 은 Netscape 2 라는 browser 가 나올 때 만들어졌다. 그러다 1990년대, 2000년대에 Netscape Navigator 와 Internet Explorer 라는 두 browser 가 유명했는데, 이들이 다른 DOM 을 가지고 있어서 개발..

2. Spring + MongoDB Atlas - Spring 에 적용하기

application.yml spring: data: mongodb: uri: mongodb+srv://{ID}:{PASSWORD}@{CLUSTERNAME1}.{CLUSTERNAME2}.mongodb.net/?retryWrites=true&w=majority database: {NAME} Entity 만들기 package sanga.spring.study.entity; import com.fasterxml.jackson.annotation.JsonIgnore; import lombok.*; import org.springframework.data.annotation.Id; import org.springframework.data.mongodb.core.mapping.Document; @Document(c..