Web Tech (38) 썸네일형 리스트형 CSR & SSR HTTP Method HTTP Method클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식이다.주요 메소드 GET : 리소스 조회 POST: 요청 데이터 처리, 주로 등록에 사용 PUT : 리소스를 대체(덮어쓰기), 해당 리소스가 없으면 생성 PATCH : 리소스 부분 변경 (PUT이 전체 변경, PATCH는 일부 변경) DELETE : 리소스 삭제 기타 메소드HEAD : GET과 동일하지만 메시지 부분(body 부분)을 제외하고, 상태 줄과 헤더만 반환OPTIONS : 대상 리소스에 대한 통신 가능 옵션(메서드)을 설명(주로 CORS에서 사용)CONNECT : 대상 자원으로 식별되는 서버에 대한 터널을 설정TRACE : 대상 리소스에 대한 경로를 따라 메시지 루프백 .. React Query React Query는 React에서 비동기 데이터를 관리하기 위한 라이브러리이며, API 요청 및 상태 관리를 위해 규격화된 방식을 제공한다.서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 쉽게 도와주는 강점이 있다.React Query의 요청 방식Query 요청Query 함수를 사용해서 데이터를 가져오고 캐싱할 수 있으며, 데이터 패칭용으로 사용되며, 보통은 GET 방식때 사용한다.useQuery Hook은 요청마다 (API마다) 구분되는 Unique Key(Query Key)를 필요로 하며, React Query는 이 Unique Key로 서버 상태(API Response)를 로컬에 캐시하고 관리한다.(useQueries, useInfiniteQuery 같은 Hook.. Recoil Recoil리액트의 상태를 이용해 화면의 변화(Context API가 있긴 하지만 페이스북에서는 Context API를 이용해 상태를 관리하는 방식은 어렵다고 판단)를 줄 수 있지만 프론트엔드의 프로젝트가 점점 커지면서 그 상태가 너무 많아졌다. 그래서 상태를 체계적으로 관리해야 하는 필요성을 느껴서 상태 관리 라이브러리가 나오게 되었다. 그 중 리코일은 리액트만을 위한 상태 관리 라이브러리다.RecoilRoot 배치recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 필요하다. next.js -> _app.tsxreact => app.jsreturn ( YM ADMIN .. Formik & Yup Formikform 라이브러리로, Formik을 사용하면 마치 Context API를 사용하는 것처럼 form이 필요한 컴포넌트를 태그로 감싸주어 props drilling 없이 '컴포넌트 내에서 전역적으로 상태 관리'를 할 수 있다Getting values in and out of form state: 값 상태 관리 Validation and error messages: 유효성 검사 Handling form submission: 제출 방식 제어formik 장단점장점폼 값을 유연성있게 다룰 수 있으며, state 방식과 context 방식이기 때문에 직관적이고 쉽게 데이터 흐름을 제어할 수 있다.controlled component 방식이기 때문에 context api처럼 데이터를 다룰 수 있어 하나의 .. DateFormat DateFormat 에 대해서 제대로 이해하지 못하고 쓴 결과 예기치 못한 버그를 만나서 공부하고 정리해야 겠다는 마음으로 글을 남긴다.UTC란?Coordinated Universal Time의 줄임말이며, 세계 협정 시라고 한다.DST란?GNT 는 Greenwich Mean Time의 줄임말이며, URC와 다르게 DST를 사용하지 않는다. UTC와 GMT 공통점과 차이점? 공통점 : 지구 자전 중심으로 측정 차이점 : DST 사용 유무 더보기[참고] DST란? Daylight Saving Time의 줄임말로써 "일광 절약 시간제" 라고 불린다. 여름철 동안 시계를 일정 기간(일반적으로 봄~가을) 동안 아프올 1시간씩 조정하는 시간제날짜 포맷포맷뜻yyyyyear (년도) M 또는 MMmonth (월)d .. 03. 함수 함수는 기본적인 단위이다. 01. 작게 만들어라 - 블록 안에서 호출하는 함수 이름 적절히 짓기 - 들여쓰기 수준은 1단 or 2단이 넘아가면 안된다. 02. 한가지만 해라 지정된 함수 이름 아래에서 추상화 수준이 하나인 단계만 수행한다면 그 함수는 한가지만 작업을 해야한다. 03. 함수당 추상화 수준은 하나로 3-1. 위에서 아래로 코드읽기 : 내려가기 규칙 코드는 위에서 아래로 이야기처럼 읽혀야한다. 즉, 위에서 아래로 프로그램을 읽으면 함수 추상화 수준이 한번에 한단계씩 낮아진다. 3-2. switch 문 각 switch문은 n가지 일을 처리하지만, 다향성을 이용해 저차원 클래스를 숨기고 절대로 반복하지 않는다. 04. 서술적인 이름을 사용하라 - 함수 이름을 정할때는 여러 단어가 쉽게 읽히는 명명.. 02. 의미있는 이름 01. 의도를 분명히 밝혀라 - 변수나 함수 그리고 클래스 이름은 하단 세가지에 답을 할 수 있어야 한다. 1. 존재 이유는? 2. 수행 기능은? 3. 사용 방법은? 02. 그릇된 정보를 피하라 - 그릇된 단서를 코드에 남겨서는 안되며, 나름대로 널리 쓰이는 의미가 있는 단어를 다른 의미로 사용해도 안된다. 유사한 개념을 유사한 표기법을 사용한다. 이것도 정보다. 03. 의미있게 구분하라 - 연속된 숫자를 덧붙이거나 불용어를 추가하는 방식은 적절하지 못하며, 읽는 사람이 차이를 알도록 이름을 짓는다. 04. 발음하기 쉬운 이름을 사용해라 - 사람들은 단어에 능숙하며, 정의상으로 단어는 발음이 가능하기에 지적인 대화가 가능해진다. 05. 검색하기 쉬운 이름을 사용해라 - 이름 길이는 범위 크기에 비례해야 .. 이전 1 2 3 4 5 다음
