NextJS 공식문서 파헤치기 (Middleware)

0️⃣ INTROMiddleware를 사용하면 요청이 완료되기 전에 코드 실행 가능그 후에 들어오는 요청에 따라 응답을 재작성, 리디렉션, 요청 또는 응답 헤더 수정 또는 직접 응답할 수 있다.Middleware는 캐시된 콘텐츠와 라우트가 일치하기 전에 실행된다.1️⃣ Use Cases일반적인 시나리오인증 및 권한 부여: 사용자 신원을 확인하고 특정 페이지나 API 라우트에 접근하기 전에 세션 쿠키 확인서버 측 리디렉션: 특정 조건에 따라 서버 수ㅜㄴ에서 사용자를 리디렉션경로 재작성: 요청 속성에 따라 경로를 동적으로 재작성하여 A/B 테스트, 기능 출시 또는 레거시 경로를 지원봇 감지: 리소스를 보호하기 위해 봇 트래픽을 감지하고 차단로깅 및 분석: 페이지나 API가 처리되기 전에 요청 데이터를 캡처하..

• format_list_bulleted FE/NextJS
• · 2024. 12. 17.
• textsms

NextJS 공식문서 파헤치기 (Error Handling)

0️⃣ INTRO에러는 예상된 에러와 예상치 못한 예외 두가지로 나눌 수 있다.예상된 에러를 반환 값으로 모델링: 서버 액션에서 예상된 에러를 try/catch 문 보다는 useActionState를 사용하여 에러를 관리하고 클라이언트에 반환하는것이 좋다.예상치 못한 에러는 에러 경계로 처리: error.tsx, global-error.tsx 파일을 사용해 에러 경계를 구현하고 에러를 처리한다.❓ useActionState ❓- React v19 에 정식 도입된 훅으로서 폼 작업의 결과에 따라 상태를 업데이트할 수 있다.- 기존의 폼 액션 함수와 초기 state를 전달받고, 폼에서 사용할 새로운 액션을 반환한다.- 최신 폼 state와 액션이 여전히 진행(Pending) 중인지 여부도 반환한다.impor..

• format_list_bulleted FE/NextJS
• · 2024. 12. 10.
• textsms

13. 모던 자바스크립트 Deep Dive(스코프)

⛅ 스코프란?스코프는 변수와 함수에 깊은 관련이 있다.모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정되는데, 이를 스코프라고 한다.스코프 => 식별자가 유효한 범위!!자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙!자바스크립트 엔진은 코드를 실행할 때 코드의 문맥을 고려함스코프라는 것이 없다면 프로그램 전체에서 동일한 변수의 이름은 하나밖에 사용하지 못하게 됨!스코프 내에서 식별자는 유일해야 하지만, 다른 스코프에는 같은 이름의 식별자 사용 가능!(스코프 == 네임스페이스)이때 var 키워드는 같은 스코프내에 중복 선언이 가능하기때문에 유의해야함! 👀// 자바스크립트 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할것인지를 결정/..

• format_list_bulleted FE/Javascript
• · 2024. 12. 8.
• textsms

12. 모던 자바스크립트 Deep Dive(함수)

⛅ 프로그래밍 언어의 함수란?일련을 과정을 문으로 구현하고 코드블록으로 감싸서 하나의 실행단위로 정의한 것용어매개변수: 함수 내부로 입력을 전달 받는 변수인수: 입력반환값: 출력함수의 실행은 함수의 정의와 함수의 호출을 통해 이루어진다.자바스크립트의 함수는 객체 타입의 값이다.⛅ 함수를 사용하는 이유함수는 코드의 재사용이라는 측면에서 매우 유용함유지보수의 편의성 증가코드의 신뢰성 증가코드의 가독성 향상⛅ 함수 리터럴함수 리터럴의 구성요소함수 이름매개변수 목록함수 몸체함수는 객체지만 일반 객체와는 다르다.(호출 가능, 고유한 프로퍼티를 가짐)⛅ 함수 정의정의 방식함수 선언문: function add(x,y){...}함수 표현식: var add = function (x,y){...}Function 생성자 함..

• format_list_bulleted FE/Javascript
• · 2024. 12. 7.
• textsms

11. 모던 자바스크립트 Deep Dive(원시 값과 객체의 비교)

⛅ 원시타입 vs 객체타입&nbsp변경 가능 유무메모리 공간에 저장되는 값변수 할당 방식원시 타입변경 불가능실제 값 저장참조 값 저장(값에 의한 전달)객체 타입변경 가능참조 값 저장참조 값 복사(참조에 의한 전달)⛅ 원시 값변경 불가능한 값 === 한번 생성된 원시 값은 읽기 전용원시 값 자체를 변경할 수 없다는 것이지 변수 값을 변경할 수 없다는 것이 아님!원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 메모리에 저장되어있던 원시값이 변경되는 것이 아닌 새로운 메모리 공간에 저장한 값을 가리키는 것 => 메모리 공간의 주소가 바뀌는 것임변수가 참조하던 메모리 공간의 주소를 변경하는 것을 불변성 이라고 함// 메모리 공간을 확보한뒤 kim이 저장되고,// name이라는 식별자는 kim이 저장된 메모..

• format_list_bulleted FE/Javascript
• · 2024. 12. 6.
• textsms

10. 모던 자바스크립트 Deep Dive (객체 리터럴)

⛅️ 객체란?객체 타입: 다양한 타입의 값(원시값, 또 다른 객체)을 하나의 단위로 구성한 것원시타입 = 변경 불가능한 값, 객체타입 = 변경 가능한 값프로퍼티는 키와 값으로 구성됨함수도 프로퍼티로 사용 가능(자바스크립트의 함수는 일급 객체 이기때문)프로퍼티와 메서드로 구성된 집합체❓일급 객체 - 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체 - 데이터(string, number, boolean, array, object) 다루 듯이 다룰 수 있다. 즉, 값으로 사용 가능하다.❓일급객체의 조건 - 변수에 할당(assignment)할 수 있다. - 다른 함수를 인자(argument)로 전달 받는다. - 다른 함수의 결과로서 리턴될 수 있다.⛅️ 객체리터럴을 통한 객체 생성 방법중..

• format_list_bulleted FE/Javascript
• · 2024. 12. 5.
• textsms