푸른영혼의별

자바스크립트 호이스팅에 대해서 설명해주세요.프론트엔드와 관련된 질문이에요.호이스팅(Hoisting) 은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언이 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징입니다. 이 때문에 코드의 선언된 위치보다 상단에서 변수에 접근할 수 있는 것처럼 보일 수 있습니다.한편, 호이스팅은 값 할당까지 끌어올리지는 않습니다. 예를 들어 var로 선언된 변수는 선언과 초기화는 끌어올려지지만 값 할당은 끌어올려지지 않기 때문에, 값 할당이 이뤄지기 전까지는 undefined로 평가됩니다. 예시는 다음과 같습니다.console.log(myVar); // undefinedvar myVar = 10;console.log(myVar); // 10반면, 함수 선언식은 함수 자체가 호..

동일성과 동등성은 객체를 비교할 때 중요한 개념입니다. 자바에서는 이 두 개념을 equals() 메서드와 == 연산자를 통해 구분할 수 있습니다.equals()와 ==의 차이는 무엇인가요?equals()는 객체의 내용을 비교하는 반면, ==는 객체의 참조(레퍼런스)를 비교합니다. 따라서 두 객체의 내용이 같더라도 서로 다른 객체라면 equals()는 true를 반환할 수 있지만, ==는 false를 반환합니다.동등성(Equality)은 뭔가요?동등성은 논리적으로 객체의 내용이 같은지를 비교하는 개념입니다. 자바에서는 equals() 메서드를 사용하여 객체의 동등성을 비교합니다. Apple 클래스를 예시로 보면, Object.equals 메서드를 오버라이딩하여 객체의 실제 데이터를 비교하도록 했습니다. 그..

브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 브라우저 렌더링 파이프라인이라고 합니다. 이 과정은 크게 6단계로 나눌 수 있습니다.첫번째로 DOM 생성입니다.브라우저가 HTML 파일을 받으면, 이 파일을 바이트(byte) 단위로 읽기 시작합니다. 브라우저의 HTML 파서(Parser)는 이 바이트들을 문자(character)로 변환하고, 이 문자들을 다시 HTML 토큰으로 변환합니다. 이 HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미하게 됩니다.HTML 토큰이 생성되면, 브라우저는 이를 기반으로 DOM 트리를 생성합니다. DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 태그가 노드(node)가 되어 부모-자식 관계를 형성합니다. 예를 들어, ..

연결 리스트(Linked List)의 구조연결 리스트는 데이터를 노드(Node)라는 단위로 저장하며, 각 노드는 데이터(Data)와 다음 노드를 가리키는 포인터(Next Pointer)를 포함하는 구조입니다. 배열(Array)과 달리 연결 리스트는 메모리상에서 데이터를 연속적으로 저장하지 않고, 동적으로 메모리를 할당받아 노드 간 연결을 유지합니다.구조노드(Node):데이터(Data): 저장하고자 하는 실제 값.포인터(Next): 다음 노드를 가리키는 참조값.헤드(Head):연결 리스트의 첫 번째 노드를 가리키는 포인터.종류:단일 연결 리스트(Singly Linked List): 각 노드가 다음 노드만 가리킴.이중 연결 리스트(Doubly Linked List): 각 노드가 다음 노드와 이전 노드를 가리..

해시맵(HashMap)해시맵은 데이터를 키(key)와 값(value)의 쌍으로 저장하며, 해시 함수를 사용하여 값을 빠르게 검색할 수 있는 자료 구조입니다.사용에 적합한 경우:빠른 데이터 검색:특정 키에 대한 데이터를 매우 빠르게 검색해야 할 때.시간 복잡도가 평균적으로 O(1)로, 대량의 데이터를 다룰 때 매우 효율적.예: 데이터베이스의 인덱싱, 캐시 시스템.키 기반 데이터 관리:키를 통해 데이터를 저장하고 관리해야 할 때.예: 사용자 ID와 사용자 정보를 관리하는 시스템.중복되지 않는 키 값 필요:고유한 식별자(예: ID, 이름)를 통해 빠르게 값을 매핑하는 경우.예: 학교 학생의 학번(ID)과 성적 데이터 매핑.순서가 중요하지 않은 경우:데이터의 순서가 필요 없고, 빠른 접근이 우선시될 때.예: 단..

배열(Array)의 특징데이터에 빠르게 접근할 때 유리 (O(1)).크기가 고정되어 있어 메모리 효율적인 경우 적합.삽입/삭제가 많지 않고, 데이터의 정렬 상태를 유지해야 하는 경우 사용.사용 사례: 정적 배열, 간단한 데이터 저장, 2D 또는 다차원 배열 활용.연결 리스트(Linked List)의 특징크기를 동적으로 조정 가능하고, 삽입/삭제가 빈번한 경우 적합.탐색이 느리지만, 순차적으로 데이터를 처리하거나 삽입/삭제가 중요할 때 유리.메모리 사용량이 상대적으로 많아질 수 있음.사용 사례: 동적 데이터 저장, 스택/큐 구현, 그래프의 인접 리스트, LRU 캐시. 정리빠른 데이터 접근이 필요하고 크기가 고정된 경우 배열(Array) 사용.크기가 가변적이고 삽입/삭제가 자주 일어나는 경우 연결 리스트(L..

CloseableHttpClient, WebClient, RestTemplate의 특징 및 비교Java에서 REST API와 같은 HTTP 통신을 수행할 때 가장 많이 사용되는 주요 도구들은 CloseableHttpClient, RestTemplate, WebClient입니다. 각각의 도구는 사용 목적, 패러다임, 특징이 다르기 때문에 적절한 도구를 선택하는 것이 중요합니다.1. CloseableHttpClientApache HTTPClient 라이브러리에서 제공하는 HTTP 클라이언트로, HttpClientBuilder를 사용해 생성합니다.특징저수준(low-level) 클라이언트:HTTP 요청/응답의 세부적인 처리를 해야 할 때 유용.쿠키 관리, 인증, 커넥션 풀, 시간 초과 설정 등의 HTTP 설정을..

.프론트엔드와 관련된 질문이에요.리액트의 렌더링 과정은 크게 두 가지 단계로 나눌 수 있습니다. render phase와 commit phase입니다.먼저 render phase는 리액트가 변화된 상태나 props에 따라 어떤 UI가 변경되어야 할지를 결정하는 단계입니다. 이 과정에서는 실제로 DOM을 업데이트하지 않고, 변경사항을 가상 DOM에서 계산하여 비교합니다. 이 단계는 순수하게 계산과정이기 때문에 성능에 영향을 주지 않도록 중단되거나 다시 실행될 수 있으며, React 18에서 도입된 Concurrent Mode를 통해 비동기적으로 처리될 수도 있습니다.다음으로 commit phase는 실제로 변화된 UI를 DOM에 반영하는 단계입니다. 이때 리액트는 가상 DOM에서 계산된 결과를 실제 DOM..

equals와 hashCode 메서드는 객체의 동등성 비교와 해시값 생성을 위해서 사용할 수 있습니다. 하지만, 함께 재정의하지 않는다면 예상치 못한 결과를 만들 수 있습니다. 가령, 해시값을 사용하는 자료구조(HashSet, HashMap..)을 사용할 때 문제가 발생할 수 있습니다.class EqualsHashCodeTest {    @Test    @DisplayName("equals만 정의하면 HashSet이 제대로 동작하지 않는다.")    void test() {        // 아래 2개는 같은 구독자        Subscribe subscribe1 = new Subscribe("team.maeilmail@gmail.com", "backend");        Subscribe subsc..

리액트에서 StrictMode는 주로 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하기 위해 사용됩니다.첫째, 오래된 라이프사이클 메서드와 비권장 API의 사용을 감지합니다. 예를 들어, componentWillMount(), componentWillReceiveProps()와 같은 메서드는 더 이상 사용이 권장되지 않는데, StrictMode는 이러한 메서드들이 코드에 포함된 경우 경고를 표시해줍니다. 이를 통해 개발자가 최신 React API를 사용하여 보다 안정적이고 효율적인 코드를 작성하도록 돕습니다.둘째, 의도치 않은 부수 효과를 방지합니다. 리액트는 컴포넌트의 렌더링이 예측 가능하고 순수하게 이루어지기를 기대합니다. StrictMode는 이를 검증하기 위해 useEffect(..