🍴오늘 할 일
- 면접스터디
- 알고리즘 2~3문제
기술면접
Semantic HTML의 필요성을 예시를 들어 설명해주세요.
Semantic HTML은 HTML 요소가 어떤 역할을 하는지 명확하게 설명하기 위해서 의미와 용도를 구분해서 작성하는 것입니다. 이는 웹사이트의 접근성, 검색엔진 최적화(SEO), 유지보수성, 확장성 등 다양한 측면에서 매우 중요합니다.
-
검색엔진 최적화(SEO): 검색엔진은 HTML 문서를 분석하여 웹 페이지의 내용을 이해하기 대문에 Semantic HTML을 사용하면 페이지 구조와 내용을 명확하게 표현할 수 있고 검색엔진이 해당 페이지를 쉽게 인식하고 색인화 할 수 있습니다.
-
웹접근성: 시각장애인 등 장애를 가진 사용자는 스크린 리더를 사용하여 웹 페이지를 탐색합니다. 이때, Semantic HTML을 사용하면 스크린 리더가 웹 페이지의 구조와 내용을 정확하게 이해하고 사용자에게 전달할 수 있습니다.
-
유지보수성 및 확장성: Semantic HTML을 사용하면 코드의 가독성과 유지보수성이 향상됩니다. 또한, 새로운 기능을 추가하거나 디자인을 변경할 때도 코드를 수정하기 쉬워지며, 확장성이 좋아집니다.
-
코드 가독성: Semantic HTML을 사용하면 코드가 의미 있는 블록으로 구분되므로 가독성이 향상됩니다. 또한, 다른 개발자들이 코드를 쉽게 이해하고 수정할 수 있도록 도와줍니다.
-
시멘틱 마크업의 예시: Semantic HTML 요소의 예로는
<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>등이 있습니다. 이러한 요소는 HTML 문서의 구조와 내용을 명확하게 표현할 수 있습니다.
Semantic Tag
<article>
문서에서의 독립된 콘텐츠 영역
<aside>
사이드 영역, 광고 등
<footer>
푸터, 웹페이지의 꼬리말
<header>
헤더, 웹페이지의 머리말
<main>
주요 콘텐츠 영역, 한 페이지에 하나만 사용!
<nav>
네비게이션, 웹사이트 탐색 영역
<section>
섹션, 계층 나누기. 여러 콘텐츠가 들어갈 수 있음
Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요
Redux는 React 애플리케이션의 상태 관리를 위한 도구로 스토어(Store), 액션(Action), 리듀서(Reducer)가 있습니다. Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다.
-
액션(Action): 상태를 변경하기 위한 객체로, type 필드와 필요한 추가 데이터를 가지고 있습니다. 액션은 스토어에 전달되어 상태 변경을 발생시킵니다.
-
디스패치(Dispatch): 액션을 전달하는 함수로서, 액션 객체를 생성하고 스토어에 전달하여 상태를 업데이트합니다.
-
리듀서(Reducer): 액션에 따라 상태를 변경하는 함수입니다. 리듀서는 현재 상태와 액션을 받아서 새로운 상태를 반환합니다. 리듀서는 순수 함수로 작성되어야 하며, 상태 변경 이외의 부작용을 일으키지 않아야 합니다.
-
스토어(Store): Redux에서는 상태(State)를 하나의 객체로 관리합니다. 이 객체를 스토어라고 부릅니다. 스토어는 애플리케이션의 전역 상태를 담고 있으며, 상태 변경을 감지하고 관리합니다.
MobX와 같은 라이브러리는 React와 함께 사용될 때 Redux보다 훨씬 덜 복잡합니다. MobX는 React 컴포넌트 내부에서 관리되는 상태를 자동으로 추적하고, 이를 업데이트할 때마다 자동으로 리렌더링합니다. 따라서 개발자가 직접 상태 변경 로직을 작성할 필요가 없습니다.
Vue.js의 Vuex는 Redux와 유사한 개념을 사용합니다. Vuex에서는 Store, Action, Mutation, Dispatch와 같은 개념이 사용됩니다. 그러나 Vuex는 Vue.js 프레임워크에서만 사용할 수 있습니다.
typescript 에 관해 - 써봤다면 장점은 뭔지
TypeScript는 Microsoft에서 개발한 오픈소스 프로그래밍 언어로, JavaScript에 타입 시스템을 추가한 언어입니다. TypeScript를 사용하면 다음과 같은 장점이 있습니다.
-
정적 타입 검사: TypeScript는 변수와 함수 매개변수 등의 타입을 사전에 지정하여 컴파일 시점에서 타입 에러를 검출할 수 있습니다. 이를 통해 런타임 오류를 사전에 방지하고 디버깅 시간을 줄일 수 있습니다.
-
강력한 IDE 지원: TypeScript는 Visual Studio Code와 같은 IDE에서 강력한 지원을 받을 수 있습니다. IDE에서 코드 자동 완성, 문법 검사, 실시간 에러 표시 등의 기능을 지원하여 개발 생산성을 높일 수 있습니다.
-
클래스 기반 객체 지향 프로그래밍: TypeScript는 JavaScript보다 더욱 강력한 객체 지향 프로그래밍 기능을 제공합니다. 클래스, 인터페이스, 상속 등의 기능을 지원하여 코드의 가독성과 재사용성을 높일 수 있습니다.
-
JavaScript와의 호환성: TypeScript는 JavaScript와 거의 동일하며, JavaScript로 작성된 코드를 TypeScript로 쉽게 이전할 수 있습니다. 또한, TypeScript 코드를 JavaScript로 컴파일하여 모든 브라우저와 호환성을 유지할 수 있습니다.
-
대규모 프로젝트에 적합: TypeScript는 대규모 프로젝트에서 사용하기 적합합니다. 정적 타입 검사와 클래스 기반 객체 지향 프로그래밍 기능을 지원하여 코드의 유지 보수성과 확장성을 높일 수 있습니다.
-
문서화: TypeScript는 JSDoc과 같은 문서화 도구를 지원하여 코드의 문서화를 용이하게 할 수 있습니다.
-
오픈소스: TypeScript는 Microsoft에서 개발하고 있으며, 오픈소스로 공개되어 있습니다. 따라서 개발자들은 TypeScript 코드를 자유롭게 사용하고 기여할 수 있습니다.
redux, recoil mobx 각 상태들을 어떤 기준으로 나누고 관리하는게 좋을까요
Redux, Recoil, MobX는 모두 상태 관리 라이브러리 중에서 대표적인 것들입니다. 이들은 모두 상태를 관리하기 위한 다양한 패턴과 방법을 제공합니다.
Redux는 기본적으로 애플리케이션의 상태를 하나의 객체(Store)에 담고, 액션(Action)을 통해 상태를 변경합니다. 액션을 처리하기 위해 리듀서(Reducer) 함수를 작성하고, 리듀서 함수는 이전 상태와 액션 객체를 인자로 받아 새로운 상태를 반환합니다. Redux는 이러한 패턴을 통해 불변성(Immutability)을 지키며 상태를 관리합니다.
Recoil은 페이스북에서 개발한 상태 관리 라이브러리로, 상태를 원자적 단위(Atom)로 나누어 관리합니다. 각 Atom은 상태와 상태를 업데이트하는 함수를 가지고 있으며, 이러한 원자들은 서로 연결되어 하나의 상태 그래프를 이루게 됩니다. Recoil은 이러한 상태 그래프를 이용해 선언적으로 상태를 관리할 수 있습니다.
MobX는 함수형 반응성(Reactive) 프로그래밍 라이브러리로, 객체의 상태를 자동으로 관찰하고 변경될 때마다 업데이트합니다. 이를 위해 MobX는 객체를 데코레이터(Decorator)를 이용해 감싸고, 해당 객체의 프로퍼티를 감시합니다. 이렇게 상태가 변경될 때마다 MobX는 자동으로 리액션(Reaction)을 실행하며, 이를 통해 컴포넌트가 상태 변경을 감지하고 업데이트합니다.
각 라이브러리의 상태 관리 방법과 기능은 다르지만, 대체로 애플리케이션 상태를 어떻게 구성할 것인가에 대한 기준은 비슷합니다. 일반적으로 상태를 구성할 때는 다음과 같은 기준을 고려합니다.
단일 책임 원칙(Single Responsibility Principle)을 적용합니다. 즉, 상태 객체는 애플리케이션 전반에서 공유되며, 한 가지 목적을 위해 사용됩니다.
불변성을 유지합니다. 불변성을 유지하면 상태 변경 시 발생하는 부작용을 최소화할 수 있습니다.
필요한 경우 상태를 분할합니다. 상태를 세분화하면, 불필요한 리렌더링을 방지할 수 있습니다. 이를 위해 Recoil은 상태를 Atom 단위로
