하얀성의 개발 메타인지

⭐ 라이프사이클에 대해 설명해주세요.⭐ 라이프 사이클 메소드에 대해 설명해주세요. 라이프사이클에 대해 설명해주세요 소프트웨어 개발에서는 라이프사이클 관리를 통해 컴포넌트의 생명주기 동안 발생하는 여러 이벤트에 대응할 수 있습니다. 라이프사이클의 각 단계에서 적절한 작업을 수행함으로써 컴포넌트가 효율적으로 동작하고, 필요 없는 리소스를 소비하지 않도록 합니다.마운팅(Mounting): 이 단계에서는 컴포넌트가 생성되고, 초기 상태가 설정되며, 처음으로 화면에 렌더링됩니다.업데이트(Updating): 상태나 속성이 변경되어 컴포넌트가 다시 렌더링될 때 발생합니다. 업데이트 과정에서는 변화된 데이터를 반영하여 화면을 다시 그립니다.언마운팅(Unmounting): 컴포넌트가 더 이상 필요하지 않게 되어 DOM에..

핵심 내용. Cors동일 출처 정책 (Same-Origin Policy): 웹 브라우저 보안 정책으로, 웹 페이지가 자신이 로드된 도메인과 다른 도메인으로 요청을 보낼 때 이를 제한합니다. 동일 출처는 프로토콜(http/https), 호스트(도메인), 그리고 포트가 모두 동일한 경우를 말합니다.CORS 헤더: 서버가 CORS 요청을 허용하기 위해서는 응답 헤더에 Access-Control-Allow-Origin을 설정해야 합니다. 예를 들어, Access-Control-Allow-Origin: * 또는 Access-Control-Allow-Origin: http://example.com 같은 헤더를 설정하면 해당 출처에서의 요청을 허용합니다.요약:상대경로란, 상대경로에 맞춰서 내 도메인을 바꿔보낸다는 것..

-면접대답- 개발에서 px, em, rem은 모두 크기 단위이지만, 각각 다른 방식으로 크기를 측정합니다. px는 화면상의 고정된 점을 나타내며, 해상도 변화에 따라 유연성이 부족합니다. em은 상위 요소의 글꼴 크기에 기반한 상대 크기 단위로, 중첩에 따라 복잡성이 증가할 수 있습니다. 예를 들어, 상위 요소의 글꼴 크기가 16px일 때, 2em은 32px과 같습니다. 반면, rem은 요소의 글꼴 크기를 기준으로 하여, 웹 페이지 전체에서 일관된 크기 조정을 가능하게 합니다. 예를 들어, 의 글꼴 크기가 16px이면, 1rem도 16px입니다. px (픽셀) px은 픽셀을 의미하며, 스크린 상에서의 한 점을 나타냅니다. 이는 고정된 크기 단위로, 웹 페이지의 요소 크기를 명확하게 지정하는 데 사용됩니다..

질문의도: 자바스크립트의 객체지향 프로그래밍 및 상속 메커니즘에 대한 이해도를 묻습니다.프로토타입이 무엇인가는 아래 내용을 참조.https://elecch.tistory.com/652 react 질문 모음내 답안 1. 가상돔을 통해서 좀 더 빠른 렌더링이 가능하지만 dom은 모든 노드, 태그들을 한번씩 렌더링 다 해줘야 함 dom 요소는 html객체로 prototype타입이 정해져 있지만 가상돔을 사용하는 react 요elecch.tistory.com면접 대답자바스크립트의 모든 객체는 `prototype`이라는 속성을 통해 다른 객체를 참조할 수 있습니다. 객체에서 필요한 메서드나 속성이 없을 경우, 자바스크립트는 프로토타입 체인을 통해 이를 찾습니다. 이 과정을 통해 객체는 프로토타입 체인 어디에 정의..

내 답안 1. 가상돔을 통해서 좀 더 빠른 렌더링이 가능하지만 dom은 모든 노드, 태그들을 한번씩 렌더링 다 해줘야 함 dom 요소는 html객체로 prototype타입이 정해져 있지만 가상돔을 사용하는 react 요소는 prototype타입이 Object로 타입이 정해져 있다. ※ 프로토타입(prototype) 객체: 새로운 객체가 생성되기 위한 원형이 되는 객체 Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용 2. state는 바뀌는 동적 데이터를 관리해주고, props는 상속을 통해 다른 컴포넌트에 전달가능 3. useState를 사용하는 직접 변수 선언을 통해서 할 수도 있지만, 모든 데이터를 한번에 관리하고 업데이트 하기 위함 4. state 값이 변경되었을 때

질문의도: DOM 이벤트 처리 과정과 이벤트 전파 방식에 대한 지식을 확인합니다. 면접 답변 "DOM에서 이벤트 버블링은 이벤트가 발생한 요소부터 상위 요소로 전파되는 과정이고, 캡처링은 최상단부터 이벤트 대상까지 이벤트가 내려가는 과정입니다. 이 두 방식을 활용함으로써, 우리는 이벤트를 효율적으로 관리할 수 있습니다. 예를 들어, 여러 버튼의 클릭을 한 곳에서 처리할 수 있고(버블링), 불필요한 이벤트 전파를 막을 수도 있습니다(캡처링)." 아래 내용 요약 정리 "이벤트 버블링과 캡처링은 DOM 이벤트의 전파 방식을 설명하는 개념입니다. 캡처링은 이벤트가 문서의 최상단에서부터 이벤트 대상까지 전달되는 과정이며, 버블링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 과정입니다. 이 두 메커니즘..

프로미스(Promise)와 async/await의 차이점은 무엇인가요? 비동기 작업 처리 방법과 해당 개념들의 차이점을 이해하고 있는지 확인합니다. 대답내용 비동기 작업 처리에는 Promise와 async/await 두 가지 주요 방법이 있습니다. Promise는 비동기 작업의 완료를 대표하는 객체 async 함수는 Promise를 반환하고, 이를 통해 비동기 작업을 쉽게 관리할 수 있습니다. await는 async 함수 내에서 Promise의 완료를 기다리는 데 사용됩니다. 비동기 작업 처리에는 Promise와 async/await 두 가지 주요 방법이 있습니다. Promise는 비동기 작업의 완료를 대표하는 객체로, .then과 .catch 메소드를 통해 성공 또는 실패 시의 후속 처리를 할 수 있습..

초점: 다양한 변수 선언 방식과 스코프, 호이스팅에 대한 이해를 묻는 질문입니다. 대답: var는 함수 스코프를 가지며 호이스팅 시 변수 선언만 최상단으로 끌어올려집니다.선언 전에 undefined로 되어있어 접근이 가능합니다. 반면, let과 const는 블록 스코프를 가지고, 호이스팅되지만 '일시적 사각지대'에 빠져 선언 전에는 접근할 수 없습니다.  let은 변수 재할당이 가능하지만, const는 초기 할당 이후 변수의 재할당을 허용하지 않습니다. 그러나 const로 선언된 객체 내부의 속성 변경은 가능합니다. (※ 호이스팅은 함수와 변수를 코드 실행전에 메모리에 저장하는 것. )상세설명1.var은 함수 스코프이다. 함수에서의 var변수 선언은 외부에서의 사용을 제한할 수 있지만if문 같은 블록스코..

클로저(Closure)는 함수와 그 함수가 선언될 당시의 가동 범위를 의미합니다. 클로저는 내부 함수가 외부 함수의 스코프에 있는 변수에 접근할 수 있게 하며, 이러한 메커니즘을 통해 내부 함수는 외부 함수가 종료된 후에도 외부 함수의 변수를 "기억"할 수 있습니다. function createCounter() { let count = 0; return { increment: function() { count++; console.log(count); }, decrement: function() { count--; console.log(count); } }; } const counter1 = createCounter(); counter1.increment(); // 1 counter1.increment()..

쿠키 = 그냥 옮기는 시스템. 매개체 토큰 = 서버가 기억하는 매우 긴 텍스트 ID카드처럼 서버에 보여줌 JWT = 정보를 갖고 있는 토큰. DB 없이 검증 가능 세션 = DB에 유저 관련 정보 저장.(들어 올 때마다 같은 유저의 접근이여도 구분 가능) 유저 인증을 위해 JWT 혹은 세션 사용 보통 유저 수가 적은 경우 JWT를 많이 사용하고, 유저 수가 많아져 체계적 관리가 필요한 경우 세션으로 넘어간다고 함. 공된 비밀키(ACCESS_SECRET 또는 REFRESH_SECRET) 올바른 키인지는 진위여부는 저 비밀키로 판단. 순간 순간 login url을 허용할지 말지는 페이로드(비밀키, 사용자 식별정보, 만료기간 등)로 판단한다. - JWT 발행 실습- db에 유저 내용들 미리 저장해두고, modu..