최신 글

• Nextjs의 Hydration 클라이언트 컴포넌트는 CSR로 이루어지지 않는다.next.js 에서 컴포넌트가 client component로 작동한다고 해도, 첫 렌더링은 서버에서 이루어진다. (SSR이 아닌 CSR로 작동하는 것이 아님)컴포넌트 최상단에 'use client'를 작성하면 해당 컴포넌트에서는 hydration이 일어난다. CSR방식은 리액트를 사용해봤다면 흔히 알 듯이, 초기 페이지를 로드할 때 하나의 빈 html파일과 js번들 파일을 서버로부터 전달받아index.html파일의 body태그 내부에는 root 역할을 하는 div 태그만이 존재하며, 이후 페이지에 포함되어야 할 컴포넌트들은 Critical rendering path 과정에서 js파일의 해석과 함께 실제 렌더 트리에 추가된다. React 프로젝트 내에 사용.. 2025.04.06
• 선언문, 지시어 선언문과 지시어는 프로그래밍에서 서로 다른 역할을 수행합니다.선언문 (Declaration)선언문은 변수, 함수, 클래스 등을 정의하는 문(statement)으로, 자바스크립트에서 var, let, const를 사용하여 변수를 선언하거나, function 키워드를 사용해 함수를 정의한다.선언문 자체는 실행되지 않으며, 메모리에 공간을 확보하고 이름을 등록한다.지시어 (Directive)지시어는 컴파일러나 인터프리터에게 특정 행동을 지시하는 코드로, 예를 들어 "use strict";는 엄격 모드를 활성화하는 지시어이다.일반적으로 프로그램의 동작 방식을 제어하며, 선언문과 달리 실행 시 영향을 미친다.(예: "use strict";는 변수 선언 없이 사용된 값을 에러로 처리하도록 강제함)차이점역할변수, 함.. 2025.04.06
• TS - 유틸리티 타입 Partial: 타입의 필수 값들을 모두 옵셔널 값으로 변경해준다. ⇒ 전부 옵셔널이 되기 때문에 비추=> type P = { [Key in keyof T]?: T[Key]}interface Profile { name: string age: number married: boolean}const ha0: Profile = { name: 'ha0', age: 30, married: false}// 개인정보보호 등으로 일부만 사용할 경우const protectedHa0: Partial = { name: 'ha0', age: 30}Pick, Omit: 특정 타입에서 사용할 옵션들만 가지고 옴=> type P = { [Key in S]: T[Key]}=> type O = Pick>interface Profile .. 2025.02.17
• String(value) vs value.toString() String(value) 와 value.toString() 은 둘다 문자열로 변환하지만 차이점이 있다. String(value)String()은 값을 문자열로 변환하는 전역함수로, 모든 값에 대해 동작한다. console.log(String(123)); // "123"console.log(String(true)); // "true"console.log(String(null)); // "null"console.log(String(undefined)); // "undefined" value.toString()toString()은 객체나 값에서 호출할 수 있는 메서드로, 해당 값을 문자열로 반환하며, 객체가 가지고 있는 메서드이므로, 객체나 기본 데이터 타입에 대해 호출 할.. 2025.02.11
• 타입 좁히기 (타입가드, 커스텀 타입가드) 타입 좁히기 (타입가드)function numberOrStr(a: number | string) { if (typeof a === 'string') { a.split(',') } else { // 여기 타입이 string인 것 정도는 자동으로 파악해 줌 a.toFixed(1) }}function numberOrStr(a: number | string) { (a as number).toFixed(1); // 이렇게 형변환하면 타입에러가 안난다. // 하지만 타입스크립트만 안심시켰을 뿐, 자바스크립트에서는 사라지기 때문에 에러가 발생할 수 있다.}⇒ unknown이나 남이 만들어 놓은 타입이 틀렸을 경우를 제외하고는 as는 사용하지 말 것을 추천⇒ 타입가드를 사용해야 함클래스클래스는 타입이 될 수 있지만.. 2025.02.09
• 타입스크립트의 enum, const enum ⭐️⭐️⭐️ enum변수들을 하나의 그룹으로 묶고 싶을 때 사용 (주로 문자열 상수를 생성하는 데 사용됨) 위에서부터 순서대로 0, 1, 2, 3 … 이라는 값이 부여된다. 값을 사용할 수도 있고, 직접 타입으로도 쓸 수 있다.const enum EDirection { Up, Down, Left, Right,}const a = EDirection.Up; // 0const a = EDirection.Left; // 2const a = EDirection[3]; // Rightconst enum EDirection { Up = 3, Down, Left, Right,}const a = EDirection.Up; // 3const a = EDirection.Left; // 5enum vs object// js의.. 2025.02.09
• 리액트 쿼리와 리액트 라우터 리액트쿼리, 리액트 라우터 함께 사용하여 데이터 가져오기import { useLoaderData } from 'react-router-dom';function HomePage () { const navigate = useNavigation(); const params = useParams(); //const data = useLoaderData(); // ⭐️ 위 loader() 함수에서 반환된 값을 사용하지 않고 useQuery를 계속 사용한다. // fetchQuery를 사용하면 react-query가 해당 요청을 보내고 응답 데이터를 캐시에 저장하게 되므로, useQuery에서는 캐시된 데이터를 사용하게 된다. // 다른 화면으로 나갔다가 다시.. 2024.11.13
• react query로 데이터 전송하기- mutation, 쿼리 무효화 const { mutate, isPending, isError, error } = useMutation({ // mutationKey: 전송은 응답 데이터를 캐시 처리하지 않기 때문에 필수로 필요한 것은 아님 mutationFn: createNewEvent,})// 여기서 받아오는 mutate함수로 이 함수를 언제 실행할지 지정할 수 있다.Mutation을 사용하여 Post요청하기useQuery는 데이터를 가져올 때 사용useMutation는 데이터를 전송할 때 사용useMutation 사용법useMutation 사용const { mutate, isPending, isError, error } = useMutation({ // mutationKey: 전송은 응답 데이터를 캐시 처리하지 않기 때문에.. 2024.11.13
• react query로 Get요청하기 - 캐시처리, 동적쿼리, 요청 취소, 비활성화 🧐 Tanstack Query란?http 요청을 전송하고 프론트엔드 UI를 백엔드 데이터와 동기화된 상태로 유지하는데 이용하는 라이브러리 Tanstack Query가 반드시 필요한건 아니고, useEffect와 fetch로 충분히 구현할 수 있다.하지만 Tanstack Query를 사용하면 훨씬 깔끔하고 수월하게 개발할 수 있다.또한, 캐싱처리나 refetch트리거 등 고급 기능을 이용할 수 있다.🔧 설치, 사용법, 이점설치npm install @tanstack/react-query사용법- tanstack query는 HTTP요청을 전송하는 로직이 내장되어 있지 않고, 요청을 관리하는 로직을 제공: 요청 데이터와 발생 가능한 오류를 추적하는 역할 등 - 모든 get요청에서 query key를 이용해 .. 2024.11.13
• React + JS 뒤로가기 방지 구현 모든 작성화면에서 뒤로가기를 눌렀을 때, 이를 한번 더 확인하는 컨펌을 띄우자는 요구사항이 들어왔다. MDN을 살펴보면 뒤로가기 수행 시 popstate 이벤트 가 발생한다고 한다. popstate - Web API | MDNWindow 인터페이스의 popstate 이벤트는 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생합니다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서developer.mozilla.org 해당 이벤트에 대한 처리는 모든 작성화면에서 공통적으로 사용되므로 커스텀훅을 만들어 필요한 곳에서 사용해주었다. 🚫 뒤로가기 막기history.pushState() 메서드는 브라우저의 세션 기록 스택에.. 2024.11.05