FrontJin

Next.js + React Hook Form 기반으로 콘텐츠 생성/수정 페이지를 구현하면서, footer 버튼에서 form의 현재 상태를 필요로 하는 요구가 생겼다.초기 접근처음에는 useForm() 내부에서 watch()를 사용해 전체 form 데이터를 실시간으로 추적하고, 해당 값을 ContentFooter 컴포넌트에 prop으로 전달하는 방식으로 구현했다. 문제 발생하지만 watch()는 form의 모든 필드가 변경될 때마다 리렌더링을 유발한다. 특히 이미지나 파일 업로드 등 상태가 큰 컴포넌트가 포함된 경우 watch()의 호출 비용이 커져 성능 저하로 이어졌다.실시간 렌더링이 잦아지고버튼과 무관한 필드 변경에도 전체 리렌더가 발생함원인 분석watch()는 전체 상태를 추적하기 때문에, 모든 입..

로그인 기능을 구현하다가 예상치 못한 문제가 하나 생겼다.로그인은 정상적으로 성공했고, 상태도 잘 저장되었지만 router.push()가 작동하지 않았다. 상태 저장도 되고, 콘솔에도 데이터가 잘 찍히는데 페이지 이동이 일어나지 않았다.문제 상황- 로그인 API 요청을 보낸 뒤, 응답으로 받은 사용자 정보를 Zustand에 저장하고 그 직후 router.push()를 호출했는데 페이지가 이동하지 않았다.- 아무런 에러도 없고, 상태도 잘 저장되었는데 라우팅만 반응이 없었다.재현 조건- 상태 저장 없이 router.push()만 실행하면 잘 작동했다.-상태 저장을 한 다음 줄에 라우팅 코드를 넣으면 작동하지 않았다. >> 상태 저장과 라우팅이 한 번에 일어날 때 문제가 발생했다.검색1. router.pus..

JWT란 무엇인가? JWT는 RFC 7519 표준을 따르는 오픈 표준이다.JSON 형태로 데이터를 주고받으며, 보안성이 높은 방식으로 정보를 교환할 수 있다.Compact(짧고 간결)하고, Self-contained(자체적으로 정보 포함)하는 특징이 있다.> 즉, JWT는 서버와 클라이언트가 인증 정보를 주고받을 때 사용하는 디지털 신분증같은 역할을 한다.JWT의 구조JWT는 3가지 주요 요소로 구성된다.Header (헤더)어떤 알고리즘을 사용했는지 나타낸다.일반적으로 HMAC SHA256 또는 RSA 알고리즘을 사용한다.예시:  { "alg": "HS256", "typ": "JWT"}   2. Payload (페이로드, 내용)JWT가 포함하는 실제 데이터 (예: 유저 정보, 권한 등)예시:{ "s..

1.5 이벤트 루프와 비동기 통신동기와 비동기동기 : 직렬(순차적)방식으로 작업을 처리하는 것비동기 : 병렬 방식으로 작업을 처리싱글스레드 : 프로세스를 실행하는 단위인 프로세스보다 더 작은 실행 단위하나의 프로세스에는 여러 개의 스레드를 만들 수 있다.스레드끼리는 메모리 공유와 여러 작업을 동시 수행할 수 있다.이벤트 루프의 정의자바스크립트 런타임 외부에서 JS의 비동기 실행을 돕기 위해 만들어진 장치호출 스택 : 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택호출 스택과 이벤트 루프이벤트 루프 : 호출 스택이 비어있는지 여부를 확인하는 것 + 태스크 큐에 대기 중인 함수가 있는지 확인태스크 큐 : 실행해야 할 태스크의 집합(비동기의 콜백함수, 이벤트 핸들러 등)setTimeout,..

1.3 클래스특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것클래스의 특징constructor : 중복으로 정의할 수 없고, 별다르게 수행할 작업이 없으면 생략 가능프로퍼티 : 클래스로 인스턴스 생성 시 내부에 정의할 수 있는 속성값TS 사용하면 private, protected, public(기본값) 사용 가능getter & settergetter : 속성값을 확인하고 싶을 때 사용 (get name () {return this.name})setter : 속성값을 변경하고 싶을 때 사용(set name (newName) { [this.name](http://this.name>) = newName})정적 메서드 & 인스턴스 메서드정적 메서드 : 클래스 자체에서 사용할 수 있는 속성으로 인스턴스에서..

1.1 자바스크립트의 동등 비교자바스크립트의 데이터 타입원시 타입boolean, null, undefined, number, string, symbol, bigint객체 외 모든 타입으로, 메서드를 갖지 않는다.undefined와 null의 차이undefined 는 선언됐지만 할당되지 않은 값이고, null 은 명시적으로 비어있음을 나타내는 값.falsy 값false, 0, NaN, “”(빈 문자열), null, undefinedString 은 한번 생성 시 그 문자열을 변경할 수 없다.Symbol 은 중복되지 않는 어떠한 고유한 값이며 생성 시 반드시 Symbol()을 사용객체 타입(참조 타입)object (배열, 함수, 정규식, 클래스 등)원시타입과 객체 타입의 가장 큰 차이점원시 타입은 불변 형태의..

클래스클래스와 인스턴스의 개념클래스는 어떤 사물의 공통 속성을 모아 정의한 추상적인 개념인스턴스 클래스의 속성을 지니는 구체적인 사례프로토타입 메서드와 스태틱 메서드의 개념프로토타입 메서드는 prototype 내부에 정의된 메서드이며 인스턴스가 자신의 것처럼 호출할 수 있음스태틱 메서드는 클래스에 직접 정의한 메서드이며 인스턴스에서 직접 접근 할수 없고 클래스에 의해서만 호출할 수 있음클래스가 구체적인 데이터를 지니지 않게 하는 방법만들고 나서 프로퍼티들을 일일이 지우고 더는 새로운 프로퍼티를 추가할 수 없게 하는 것빈함수를 활용하는 방법Object.create 를 활용constructor 복구하기앞의 세 방법에서 SubClass.prototype.constructor = Subclass 를 추가해 원래..

프로토타입객체 지향 언어: 클래스 기반 vs. 프로토타입 기반프로토타입의 개념(prototype, __proto__ , constructor등)어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스가 생성된다.이때 instance에는 __proto__라는 프로퍼티가 자동으로 부여되는데,이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 그대로 참조한다.가급적 __proto__를 사용하지 않기를 권장, 대신 Object.getPrototypeOf()/ Object.create()등을 이용.__proto__는 생략가능하기 때문에, 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스에서도..