Fast & Furious

💡 개요실행 컨텍스트(Execution Context)는 자바스크립트 코드가 평가되고 실행되는 환경(또는 범위)을 의미합니다.브라우저나 Node.js에서 코드를 실행할 때, 변수와 함수 선언, this, scope, 그리고 실행 흐름이 어떻게 결정되는지를 관리하는 핵심 개념입니다.실행 컨텍스트 종류자바스크립트에는 크게 두 가지 실행 컨텍스트가 있습니다.전역 실행 컨텍스트(Global Execution Context)함수 실행 컨텍스트(Function Execution Context)각 컨텍스트는 코드 실행 시점과 환경에 따라 생성됩니다. 전역 실행 컨텍스트(Global Execution Context)자바스크립트 코드가 처음 로드될 때, 가장 먼저 생성되는 컨텍스트입니다.전역 객체(window 또는 ..

💡 개요Reflow와 Repaint는 웹 브라우저가 페이지를 렌더링할 때 발생하는 중요한 작업입니다.Reflow는 레이아웃을 다시 계산하는 과정이고, Repaint는 그 계산 결과를 화면에 다시 그리는 과정입니다.두 작업을 잘 이해하고 관리하면 웹 페이지 성능 최적화에 큰 도움이 됩니다. Reflow란?Reflow는 브라우저가 DOM 요소의 위치, 크기, 레이아웃을 다시 계산하는 과정입니다.DOM 구조 변경, CSS에서 width, height, margin, padding, border, font-size 등과 같이 레이아웃에 영향을 미치는 스타일이 변경될 때 발생합니다.레이아웃 계산은 해당 요소뿐 아니라 관련된 부모, 자식 요소까지 영향을 미치며, 브라우저는 레이아웃 트리와 렌더 트리를 다시 생성합..

💡 개요React 컴포넌트는 생성, 업데이트, 그리고 소멸의 단계를 거치며, 각 단계에서 특정한 라이프사이클 메서드/훅이 호출됩니다.컴포넌트가 탄생(마운트), 변화(업데이트), 제거(언마운트)되는 흐름을 이해하면, 효과적으로 side effect를 제어하고 리소스 정리를 할 수 있습니다. React 생명주기 단계와 주요 메서드1. 마운팅(Mounting)컴포넌트가 DOM에 삽입되는 시점에 호출되는 주요 메서드:constructor: state와 이벤트 바인딩 등 초기화 작업.static getDerivedStateFromProps: props 변화를 state에 반영할 때 사용.render: UI 렌더링 담당. 함수 컴포넌트에선 함수 자체.componentDidMount: 마운트(삽입) 직후 호출. 데..

💡 개요Vue.js에서 컴포넌트는 생성부터 소멸까지 다양한 단계를 거치는 “생명 주기”를 갖고 있습니다.개발자는 각 단계에서 “라이프사이클 훅(lifecycle hook)”을 활용하여 원하는 동작을 추가할 수 있습니다.본 글에서는 Vue 생명 주기의 전체 흐름, 각 라이프사이클 훅의 역할, 대표적인 활용 예제를 마크다운 형식으로 정리합니다.Vue 컴포넌트 생명 주기란?생명 주기(lifecycle)란 Vue 인스턴스 또는 컴포넌트가 생성되고, DOM에 마운트되고, 업데이트되며, 최종적으로 소멸되는 과정을 의미합니다.각 단계에서 개발자가 코드를 삽입할 수 있는 “라이프사이클 훅”이 존재합니다. 전체 생명 주기 단계 및 주요 훅1. 생성(Creation) 단계beforeCreate: 인스턴스가 초기화되기 전..

JavaScript에서 변수를 선언할 때 사용하는 var, let, const는 각각 다른 특징과 동작 방식을 가지고 있습니다.이 글에서는 세 가지 선언 방식의 차이점과 특징을 예제와 함께 정리합니다.올바른 변수 선언 방법을 익혀 코드의 안정성과 가독성을 높여보세요.변수의 값 할당var, let: 재할당 가능var와 let으로 선언한 변수는 값을 여러 번 바꿀 수 있습니다.var a = 1;a = 2; // 가능let b = 3;b = 4; // 가능 const: 재할당 불가const로 선언한 변수는 선언과 동시에 반드시 값을 할당해야 하며, 이후 재할당이 불가능합니다.const c = 5;c = 6; // ❌ 에러 발생 const 변수에 객체(Object)나 배열(Array)을 담으면 내부 데이터는 변..

`react-native-biometrics` 라이브러리를 사용하여, 생체인증 (Android: 지문인식 / iOS: TouchID, FaceID)를 적용하는 방법에 대해서 정리하였다.  라이브러리 설치npm install --save react-native-biometrics 권한 설정앱이 기기의 하드웨어(지문 센서, Face ID 등)와 소프트웨어 API에 접근할 수 있도록 허용하는 과정Android 권한 설정`app/src/main/AndroidManifest.xml` 파일에 아래와 같이 권한에 대한 선언이 필요하다. iOS 권한 설정`Info.plist` 파일에 아래 항목을 추가한다.NSFaceIDUsageDescription앱에서 Face ID를 사용하여 인증합니다. 생체인증 구현생체인증 가능 ..

Before[Spring Boot] Spring Security JWT 로그인 구현 (1) [Spring Boot] Spring Security JWT 로그인 구현 (1)JWT 로그인 구현하기 Spring Boot 3.0 부터 Spring Security 6.0.0 이상의 버전이 적용되면서, Spring Boot 3.1.2 와 Spring Security 6.1.2를 사용하여 JWT 로그인을 구현하고 그 과정을 정리 하였다. [변경사항] WebSecuritbright-forward.tistory.com JWT 발급하기 로그인 진행시 AccessToken과 RefreshToken을 발급 받고,AccessToken이 만료되면 RefreshToken을 통해 AccessToken을 재발급 받을 수 있도록 구현하..