본문 바로가기

전체 글

(69)
DFS/BFS 너비 우선 탐색(BFS, Breadth-First Search) 루트 노드(혹은 다른 임의의 노드)에서 시작해서 인접한 노드를 먼저 탐색하는 방법 시작 정점으로부터 가까운 정점을 먼저 방문하고 멀리 떨어져 있는 정점을 나중에 방문하는 순회 방법이다. 즉, 깊게(deep) 탐색하기 전에 넓게(wide) 탐색하는 것이다. 사용하는 경우: 두 노드 사이의 최단 경로 혹은 임의의 경로를 찾고 싶을 때 이 방법을 선택한다. 지구상에 존재하는 모든 친구 관계를 그래프로 표현한 후 Ash와 Vanessa 사이에 존재하는 경로를 찾는 경우 깊이 우선 탐색의 경우 - 모든 친구 관계를 다 살펴봐야 할지도 모른다. 너비 우선 탐색의 경우 - Ash와 가까운 관계부터 탐색 너비 우선 탐색(BFS)이 깊이 우선 탐색(DFS)..
React 라이프 사이클(life cycle) 리액트 생명주기(LifeCycle)는 컴포넌트의 생성부터 대체, 업데이트, 해제 과정을 설명한 것입니다. 이를 이해하면 컴포넌트의 동작 방식을 더 잘 이해하고, 효율적인 코드를 작성할 수 있게 됩니다. 리액트의 생명주기는 크게 3가지 단계로 나눌 수 있습니다. 마운트(Mounting): 컴포넌트가 DOM에 추가되는 단계 constructor: 컴포넌트의 생성자 메서드로, 컴포넌트의 초기화 작업을 수행 static getDerivedStateFromProps: props로 받은 값을 state에 동기화하는 작업을 처리 render: 컴포넌트를 렌더링합니다. componentDidMount: 컴포넌트가 마운트된 후에 호출되는 메서드로, 비동기 데이터 요청이나 이벤트 리스너 등록 등의 작업을 수행 업데이트(U..
실행 컨텍스트 실행 컨텍스트(Execution Context)란, 코드가 실행되고 있는 동안 필요한 정보를 모아둔 추상적인 개념입니다. 실행 컨텍스트는 함수가 호출되거나 전역 코드를 실행할 때와 같이 코드가 실행될 때마다 생성됩니다. 코드 실행이 시작되면 전역 실행 컨텍스트가 생성되어 콜 스택에 푸시되고, 함수 호출 및 블록 스코프 등이 실행될 때마다 새로운 실행 컨텍스트가 생성되어 콜 스택에 추가됩니다. 실행이 완료되면 해당 실행 컨텍스트는 스택에서 제거됩니다. 이 과정은 코드의 전체 실행 과정 동안 계속 반복됩니다. 실행 컨텍스트 주요 구성 요소 변수 환경(Variable Environment): 실행 컨텍스트 내에서 선언된 변수와 함수 선언을 저장하고 있는 환경 레코드입니다. 이 변수 환경은 렉시컬 환경의 일부입..
stack / queue 스택(stack)과 큐(queue)는 프론트엔드 개발에서 자주 활용되는 두 가지 자료구조입니다. 이들 자료구조는 데이터의 저장 및 접근 방식에 따라 구분되며, 각각 특성과 용도가 다릅니다. 스택(Stack): 스택은 데이터의 저장 순서에 따라 FILO(First In Last Out) 방식으로 작동하는 자료구조입니다. 즉, 가장 먼저 들어간 데이터가 가장 나중에 나오고, 가장 나중에 들어간 데이터가 가장 먼저 나오게 됩니다. 자바스크립트에서 스택을 구현하려면 배열(Array)을 활용할 수 있으며, push()와 pop() 메소드를 사용하여 스택에 데이터를 추가하거나 제거할 수 있습니다. 스택 활용 예시 - 웹 브라우저 방문 기록 ( 뒤로가기 ) : 가장 나중에 열린 페이지부터 다시 보여줌 - 역순 문자열..
HTML 의 inline 요소와 block 요소의 차이점을 설명해주세요. 예시도 들어주세요 블럭요소(block element)와 인라인요소(inline element)란? - 블럭요소 : 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들입니다. - 인라인요소 : 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들입니다. 행 안의 일부분이라고 보시면 됩니다. 텍스트레벨요소라고도 합니다. 블럭요소(block element)와 인라인요소(inline element)의 종류 - 블럭요소 : ,,~,,,,,,,,,,등 - 인라인요소 : ,, ,,,,, 인라인(Inline) 요소: 인라인 요소는 문장이나 단락의 일부분을 나타냅니다. 인라인 요소는 콘텐츠 흐름을 방해하지 않고 가로 방향으로 배치됩니다. 너비와..
Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요 Redux란? javascrpit의 상태관리 라이브러리 Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있으며, Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다. Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체입니다. 해당 Action 객체가 어떤 동작을 하는지 명시해주는 type 속성을 가집니다. Dispatch는 Reducer로 Action을 전달해주는 함수입니다. Dispatch의 전달인자로 Action 객체가 전달되며. Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출합니다. Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따..
Semantic HTML의 필요성을 예시를 들어 설명해주세요. Semantic HTML은 웹 콘텐츠의 구조와 의미를 명확하게 표현하기 위해 사용하는 것으로, 웹 콘텐츠의 구조와 의미를 명확하게 표현하기 위해 사용하는 HTML 코드입니다. 의미론적 요소를 사용하여 웹 페이지의 구조화를 개선하고 가독성 및 웹 접근성을 높이는 것이 주 목적입니다. 웹 접근성 향상: 시각 장애인이 스크린 리더를 사용하여 웹사이트 정보를 이해할 수 있도록 돕습니다. 예를 들어, 예시 웹사이트 홈 소개 서비스 문의하기 서비스 소개 여기에서 서비스에 대한 소개를 확인할 수 있습니다. 저작권 ⓒ 예시 웹사이트. 질문: 와 의 용도와 차이점은 무엇인가요? 답변: 는 웹페이지 상단에 위치하며, 웹사이트의 로고, 제목, 메뉴 등 주요 정보를 담고 있습니다. 는 웹페이지 하단에 위치하며, 저작권 정보,..
<li>요소는 왜 <ul>요소의 자식 요소여야만 하나요? 의미론적 구조: HTML에서는 의미론적(semantic) 구조를 사용하여 웹 문서의 내용을 조직화합니다. (unordered list) 요소는 목록을 나타내며, (list item) 요소는 개별 목록 항목을 나타냅니다. 이 구조를 따르므로써 웹 브라우저와 검색 엔진, 스크린 리더 등의 다양한 도구가 웹 문서의 내용을 제대로 이해하고 처리할 수 있습니다. 기본 스타일 처리: 웹 브라우저는 과 요소의 기본 스타일을 처리합니다. 이를 통해 사용자들은 눈에 띄게 구분되는 목록과 항목의 스타일을 볼 수 있습니다. 요소가 아래에 있지 않으면 기본 스타일 처리가 제대로 되지 않습니다. 코드의 일관성: 요소를 이나 (ordered list) 요소의 자식 요소로 사용함으로써 HTML 코드의 일관성과 가독성을 유지할 수 ..