[React 까보기] 1. 리액트 패키지의 구성 요소들 & 용어 정의

1️⃣ 구성 요소react 코어컴포넌트 정의다른 패키지에 의존성 X, 다양한 플랫폼(브라우저, 모바일)에 올려서 사용 가능rendererreact-dom, react-native-renderer 호스트(브라우저 or 모바일) 렌더링 환경에 의존호스트와 react를 연결 → 즉, 웹에서는 DOM 조작reconciler 와 lagacy-events 패키지 에 의존event(legacy-event)(아래 레퍼런스 react 공식문서 링크 참고)SyntheticEvent 라는 이름의 내부적으로 개발된 이벤트 시스템기존 웹에서의 event를 wrapping 하여 추가적인 기능을 수행할 수 있게 함scheduler리액트는 Task를 비동기로 실행. 이 Task 를 실행하는 타이밍을 알고 있는 패키지ex) state..

• format_list_bulleted FE/React
• · 2025. 4. 14.
• textsms

실행 컨텍스트에 대해서 설명해주세요.

실행 컨텍스트에 대해서 설명해주세요.실행 컨텍스트란 코드가 실행되는 환경입니다. 자바스크립트 엔진이 코드를 실행할 때, 그 코드가 실행될 때의 환경을 정의하고 관리하기위해 존재합니다.실행 컨텍스트는 전역 실행 컨텍스트, 함수 실행 컨텍스트로 나뉩니다.전역 실행 컨텍스트는 자바스크립트가 처음 실행될때 생성되는 컨텍스트입니다. 이는 프로그램이 종료될 때까지 유지되며 전역에 선언된 변수나 함수가 모두 포함됩니다. 전역 컨텍스트에서 선언된 변수와 함수는 프로그램 내 어디서든 접근 가능합니다.자바스크립트는 싱글 스레드 이기 때문에 전역 실행 컨텍스트는 1개만 존재합니다.함수 실행 컨텍스트는 함수가 호출될 때 마다 생성되는 컨텍스트입니다. 각 함수는 자신만의 실행 컨텍스트를 가지며 이 컨텍스트 내에서 선언된 변수와..

• format_list_bulleted FE/면접 준비
• · 2025. 4. 2.
• textsms

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