본문 바로가기

기술면접

 (33)
34_이미지 최적화 하는 방법 리액트나 프론트엔드 개발에서 이미지 최적화는 웹 페이지의 성능을 향상시키는 중요한 부분입니다. 이미지 최적화는 웹 페이지의 로딩 속도를 개선하고 사용자 경험을 향상시키는 데 도움이 됩니다. ✅ 이미지 크기 조정: 이미지를 표시할 때 필요한 크기로만 조정합니다. 불필요하게 큰 이미지를 사용하지 않도록 합니다. 예를 들어, 웹에서는 일반적으로 2000px 이상의 너비를 가진 이미지를 사용하지 않습니다. ✅ 이미지 포맷 선택: JPEG, PNG, GIF, WebP 등의 이미지 포맷 중에서 적절한 포맷을 선택합니다. JPEG는 사진과 같은 복잡한 이미지에 적합하고, PNG는 로고나 아이콘과 같은 투명 이미지에 적합합니다. WebP는 고해상도 이미지를 압축하는 데 효과적인 포맷입니다. ✅ 이미지 압축: 이미지를 ..
33_SEO를 진행하는 방법 SEO(검색 엔진 최적화)는 웹사이트나 웹페이지를 검색 엔진의 자연 검색 결과에서 높은 순위로 노출시키는 프로세스를 말합니다. 이는 검색 엔진에서 사용자가 특정 키워드로 검색할 때 해당 웹사이트가 상위에 노출되어 사용자들이 더 많은 트래픽을 유도할 수 있도록 하는 것을 목표로 합니다. SEO를 진행하는 방법은 크게 두 가지로 나눌 수 있습니다. ✅ 내부 SEO: 내부 SEO는 웹사이트 자체의 구조, 콘텐츠 및 메타데이터를 최적화하는 것입니다. 내부 SEO의 주요 요소는 다음과 같습니다. 1️⃣ 키워드 연구: 웹사이트의 목적과 관련된 키워드를 연구하고 선택하여 해당 키워드를 콘텐츠에 자연스럽게 통합합니다. 2️⃣ 메타데이터 최적화: 각 페이지의 제목 태그, 메타 설명 및 URL을 최적화하여 검색 엔진에서 ..
32_자바스크립트 vs 타입스크립트의 차이 & 장/단점 ✅ 자바스크립트 (JavaScript) 👍장점: 유연성: 자바스크립트는 동적 타입 언어로, 변수의 타입을 선언하지 않고도 사용할 수 있습니다. 이는 개발자가 빠르게 코드를 작성하고 유연하게 변경할 수 있도록 도와줍니다. 브라우저 호환성: 모든 주요 웹 브라우저에서 지원되는 표준 스크립팅 언어로 자바스크립트는 웹 개발에 이상적입니다. 배우기 쉬움: 초기 학습자들에게 친숙한 문법과 개념을 가지고 있으며, 많은 자료와 커뮤니티가 존재하여 학습이 용이합니다. 🙄 단점: 유형의 안전성 부족: 동적 타입 언어의 한계로, 런타임 에러가 발생할 수 있고 디버깅이 어려울 수 있습니다. 큰 프로젝트의 복잡성: 큰 규모의 프로젝트에서 유지보수가 어려울 수 있으며, 코드베이스의 확장성과 구조를 유지하는 것이 어려울 수 있습니..
31_쓰로틀링(Throttling) & 디바운싱(Debouncing) ✅ 쓰로틀링(Throttling): 쓰로틀링은 이벤트의 실행 주기를 조절하여 연속적인 이벤트의 발생을 제어하는 기술입니다. 특정 이벤트(예: 스크롤, 리사이징)가 발생할 때마다 지정된 시간 동안 해당 이벤트를 처리하지 않고 대기하다가 일정 시간이 지나면 처리하는 방식으로 구현됩니다. 🙄사용 이유: 연속적으로 발생하는 이벤트를 제어하여 성능을 최적화할 수 있습니다. 과도한 이벤트 발생으로 인한 불필요한 리소스 소비를 방지합니다. ✅ 디바운싱(Debouncing): 디바운싱은 연속적으로 발생하는 이벤트 중에서 마지막 이벤트에 대해서만 처리하도록 지연하는 기술입니다. 예를 들어, 사용자가 텍스트를 입력하는 동안 연속적으로 이벤트가 발생할 수 있지만, 마지막 입력 이후 일정 시간이 경과한 후에야 해당 이벤트를 ..
30_Event bubbling & capturing Event bubbling과 capturing은 브라우저의 이벤트 전파 방식을 설명하는 용어입니다. 먼저 이벤트 전파란 브라우저에서 이벤트가 발생한 요소부터 시작하여 상위 요소로 전파되는 과정을 말합니다. ✅ Event Capturing (캡처링): 이벤트 캡처링은 이벤트가 최상위 요소에서 시작하여 실제 타겟 요소로 전파되는 과정입니다. 이벤트가 발생한 요소부터 상위 요소로 전파되면서 각 요소에서 등록된 이벤트 핸들러가 호출됩니다. 이벤트 캡처링은 이벤트를 가장 바깥쪽 요소에서부터 가장 안쪽 요소로 전파시키며, 이 과정에서 이벤트 버블링보다 먼저 발생합니다. 이벤트 캡처링 단계에서는 보통 부모 요소에서 자식 요소로 이벤트가 전파되는 것입니다. ✅ Event Bubbling (버블링): 이벤트 버블링은 이..
29_브라우저 렌더링 과정 1. HTML 파싱과 DOM 생성: 브라우저는 서버에서 받은 HTML 문서를 파싱하여 DOM 트리(Document Object Model)를 생성합니다. DOM 트리는 HTML 문서의 구조를 표현하는 트리 구조로, 각 HTML 요소와 그 속성들을 노드로 나타냅니다. 2. CSS 파싱과 스타일 계산: 브라우저는 스타일 시트(CSS)를 파싱하여 CSS 객체 모델(CSS Object Model)을 생성합니다. 이후, DOM 트리와 CSS 객체 모델을 결합하여 스타일 규칙을 계산하고 각 요소에 적용될 최종 스타일을 결정합니다. 3. 레이아웃(Layout) 구성: 브라우저는 DOM 트리와 스타일 규칙을 바탕으로 요소들의 크기와 위치를 계산하여 레이아웃을 구성합니다. 이 과정에서 요소들의 상대적인 배치와 크기가 결..
28_렌더링 방식(Server Side Rendering, Client Side Rendering, Static Site Generation)의 장단점 Server Side Rendering (SSR): 장점: 검색 엔진 최적화 (SEO): SSR은 서버에서 페이지를 완전히 렌더링하기 때문에 검색 엔진이 콘텐츠를 쉽게 색인화하고 검색 결과에 표시할 수 있습니다. 초기 로딩 속도: 사용자가 첫 번째 페이지를 요청할 때 서버에서 완전한 HTML을 반환하므로 초기 로딩 시간이 단축될 수 있습니다. 장치 호환성: SSR은 서버 측에서 작동하기 때문에 클라이언트 측 기기와 무관하게 콘텐츠가 제공될 수 있습니다. 단점: 서버 부하: 매 요청마다 서버에서 페이지를 완전히 렌더링하므로 서버 부하가 높을 수 있습니다. 빌드 복잡성: SSR은 서버 사이드와 클라이언트 사이드 렌더링을 모두 고려해야 하므로 빌드 프로세스가 복잡할 수 있습니다. 클라이언트 측 상호 작용 제한..
27_Lazy loading & Code splitting "Lazy loading"과 "Code splitting"은 둘 다 웹 개발에서 성능을 향상시키기 위해 사용되는 기술입니다. ✅ Lazy Loading: Lazy loading은 필요할 때까지 자원을 로드하지 않고, 필요한 순간에 자원을 동적으로 로드하는 기법입니다. 주로 대규모 웹 애플리케이션에서 자주 사용됩니다. 이를 통해 초기 페이지 로딩 시간을 최적화할 수 있습니다. 대표적으로 이미지나 스크립트 파일 같은 리소스들을 예로 들 수 있습니다. 사용자가 스크롤링하거나 특정 이벤트를 발생시켰을 때 해당 이미지나 스크립트 파일을 로드합니다. 이로써 초기 로딩 시간을 줄이고 페이지의 성능을 향상시킬 수 있습니다. ✅ Code Splitting: Code splitting은 애플리케이션의 코드를 여러 번으로 ..
25_라이프사이클 메소드에 대해 설명해주세요. 라이프사이클 메소드는 컴포넌트가 생성될 때나, 업데이트될 때, 혹은 제거될 때 특정한 시점에 호출되는 메소드들을 가리킵니다. 이러한 라이프사이클 메소드들은 개발자가 컴포넌트의 동작을 제어하고 상태 변화를 감지하고 반응할 수 있도록 합니다. 리액트 16.3 버전부터는 라이프사이클 메소드의 사용이 조금 바뀌었는데, 이전에는 클래스형 컴포넌트에서만 사용할 수 있었지만, 함수형 컴포넌트에서도 사용할 수 있도록 도입되었습니다. 클래스형 컴포넌트와 함수형 컴포넌트 각각에서 사용되는 라이프사이클 메소드가 다르기 때문에, 각각에 대해 간단히 설명하겠습니다. ✅클래스형 컴포넌트의 주요 라이프사이클 메소드: componentDidMount(): 컴포넌트가 화면에 렌더링된 후 호출됩니다. 주로 초기화 작업이나 외부 데이터 ..
24_라이프사이클 라이프사이클은 웹 애플리케이션 또는 웹 사이트의 개발 및 유지보수 과정을 의미합니다. 1️⃣ 요구 분석 및 기획: 프로젝트의 초기 단계로, 고객과의 상호 작용을 통해 요구 사항을 수집하고 분석합니다. 이 단계에서는 프로젝트 목표, 기능, 범위, 일정, 예산 등을 결정합니다. 2️⃣ 설계: 이 단계에서는 요구 사항에 기반하여 시스템 아키텍처, 데이터베이스 구조, 사용자 인터페이스 디자인 등을 설계합니다. 이는 전체 시스템의 구조와 기능을 결정하는 중요한 단계입니다. 3️⃣ 개발: 실제로 코드를 작성하고 프로젝트를 구현하는 단계입니다. 프로그래밍 언어와 프레임워크에 따라 다양한 기술 및 도구를 사용하여 개발을 진행합니다. 4️⃣ 테스트: 개발된 소프트웨어를 테스트하여 버그를 찾고 수정하고 기능이 예상대로 작..

티스토리툴바