하루 하나씩 작성하는 TIL #70
16. 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요.
클라이언트 사이드 렌더링(CSR):
CSR은 웹 애플리케이션에서 초기 HTML은 정적으로 제공되고, JavaScript를 사용하여 클라이언트에서 동적으로 컨텐츠를 렌더링하는 방식입니다. 초기 페이지 로드 후에 추가적인 데이터를 받아와서 동적으로 렌더링합니다.
장점:
초기 페이지 로드 시 필요한 최소한의 HTML, CSS, JavaScript만 전달되므로 초기 로딩이 빠릅니다.
페이지가 로드된 이후에도 JavaScript를 사용하여 데이터를 비동기적으로 가져와 동적으로 업데이트할 수 있습니다.
단점:
초기 HTML에 동적으로 렌더링되는 컨텐츠가 포함되지 않기 때문에 검색 엔진 최적화(SEO)에 어려움이 있을 수 있습니다.
초기 로드 이후에 추가적인 데이터를 받아오기 때문에, 초기 로딩 이후의 지연이 발생할 수 있습니다.
서버 사이드 렌더링(SSR):
SSR은 서버에서 완전한 HTML을 생성하여 클라이언트에게 전송하는 방식입니다. 서버에서 렌더링된 HTML을 받아와서 화면에 표시합니다.
장점:
검색 엔진은 서버에서 렌더링된 완전한 HTML을 수용하기 때문에 SEO에 유리합니다.
사용자가 페이지를 요청할 때 서버에서 이미 렌더링이 완료된 HTML을 제공하므로 초기 로딩이 빠릅니다.
단점:
매 요청마다 서버에서 새로운 HTML을 생성해야 하므로, 전체적인 성능 면에서 클라이언트 사이드 렌더링보다 느릴 수 있습니다.
많은 사용자가 동시에 서버에 접속하는 경우 서버 부하가 증가할 수 있습니다.
17.TCP/UDP에 대해서 설명해주세요.
TCP (Transmission Control Protocol):
TCP는 연결 지향 프로토콜로, 통신을 시작하기 전에 연결을 설정하고, 통신이 끝나면 연결을 해제합니다. 이를 통해 안정적이고 신뢰성 있는 데이터 전송이 가능합니다. 수신 측에서 전송 측으로부터 수신 확인 응답을 받고, 만약 데이터가 손상되었다면 재전송을 요청합니다. 파일 전송, 이메일 전송, 웹 브라우징 등 신뢰성이 중요한 응용 프로그램에서 주로 사용됩니다.
UDP (User Datagram Protocol):
UDP는 비연결 지향 프로토콜로, 연결을 설정하지 않고 데이터를 즉시 보냅니다. 간단하고 빠른 통신이 가능하지만, 데이터의 손실이나 순서의 불일치가 발생할 수 있습니다. 수신 측에서는 데이터의 유효성을 확인하지 않으며, 오류 발생 시 복구나 재전송을 하지 않습니다. 동영상 스트리밍, 음성 통화, 온라인 게임 등에서 실시간 통신이 필요한 응용 프로그램에서 주로 사용됩니다.
18. HTTP와 HTTPS의 차이점에 대해 설명해주세요.
HTTP (HyperText Transfer Protocol):
HTTP는 데이터를 평문으로 전송합니다. 따라서 데이터가 네트워크를 통해 전송되는 동안 암호화되지 않습니다. 암호화하지 않기 때문에 중간에서 데이터를 가로채거나 수정하는 공격이 쉽게 발생할 수 있습니다. 일반적인 웹 페이지 로딩, 정보 검색 등에서 사용됩니다.
HTTPS (HyperText Transfer Protocol Secure):
HTTPS는 보안 소켓 계층(SSL 또는 TLS)을 사용하여 데이터를 암호화합니다. 이는 중간에서 데이터를 가로채도 읽을 수 없게 합니다. 통신하는 양쪽 간의 데이터를 암호화하여 도청이나 데이터의 변조를 방지합니다. 웹 서버의 신원을 확인하고, 클라이언트와 서버 간의 안전한 통신을 보장하는데 사용되는 인증서를 필요로 합니다. 민감한 정보 전송, 로그인 페이지, 결제 정보 입력 등과 같이 보안이 필요한 상황에서 사용됩니다.
19. 라이프사이클이 의미하는 바에 대해서 설명해주세요.
라이프사이클은 어떤 시스템, 객체, 또는 소프트웨어 컴포넌트가 생성되고 동작하며 소멸하는 과정을 나타내는 개념입니다. 라이프사이클은 일반적으로 여러 단계로 나뉘어져 있으며, 각 단계에서는 특정한 작업이 수행됩니다.
20. 라이프사이클 메소드에 대해 설명해주세요.
React 컴포넌트의 라이프사이클은 컴포넌트가 생성, 업데이트, 제거되는 과정에서 일어나는 메서드들을 나타냅니다.
생성 단계:
constructor: 컴포넌트가 생성될 때 실행되는 메소드로, 초기 상태 설정 등을 수행합니다.
componentDidMount: 컴포넌트가 DOM에 마운트된 후 실행되는 메소드로, 필요한 데이터 로딩 등을 수행합니다.
업데이트 단계:
shouldComponentUpdate: 상태나 속성 변경 시 리렌더링 여부를 결정하는 메소드입니다.
componentDidUpdate: 업데이트가 이루어진 후 실행되는 메소드로, 업데이트 후 필요한 작업을 수행합니다.
소멸 단계:
componentWillUnmount: 컴포넌트가 DOM에서 제거되기 직전에 실행되는 메소드로, 리소스 해제 등의 정리 작업을 수행합니다.
21. 쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해주세요.
쓰로틀링 (Throttling):
쓰로틀링은 어떤 함수를 일정 시간 간격으로 실행되도록 제한하는 기술입니다. 특정 시간 동안 함수가 여러 번 호출되더라도 한 번만 실행되게 하여, 과도한 함수 호출을 방지합니다. 주로 스크롤 이벤트나 리사이즈 이벤트에서 사용됩니다.
디바운싱 (Debouncing):
디바운싱은 연속된 이벤트 호출 중 마지막 호출만 처리되도록 하는 기술입니다. 이벤트가 발생한 후 일정 시간이 지나기 전에 다시 이벤트가 발생하면 이전의 대기 시간을 초기화합니다. 주로 입력 필드에서 사용자 입력 완료 후에만 이벤트를 처리하고자 할 때 사용됩니다.
22. 자바스크립트와 타입스크립트의 차이, 장/단점에 대해 설명해주세요.
자바스크립트 (JavaScript):
자바스크립트는 동적 타이핑을 사용하는 스크립트 언어로, 웹 브라우저에서 동작하는 주요 언어입니다.
장점:
배우기 쉽고, 유연한 문법.
많은 라이브러리와 프레임워크 제공.
모든 최신 브라우저에서 기본적으로 지원.
단점:
런타임 오류 발생 가능성.
대형 프로젝트에서 코드 유지보수가 어려움.
타입스크립트 (TypeScript):
타입스크립트는 자바스크립트의 상위 집합으로, 정적 타입을 지원하는 언어입니다.
장점:
정적 타입 검사로 인해 코드의 안정성과 가독성이 높아짐.
대형 프로젝트에서 코드 유지보수가 용이.
최신 JavaScript 기능 지원 및 향후 버전과의 호환성.
단점:
초기 설정과 컴파일 단계 필요.
자바스크립트보다 배우기 어려울 수 있음.
일부 라이브러리에서 타입 정의가 부족할 수 있음.
23. SEO란 무엇이고 SEO를 진행하는 방법에 대해 설명해주세요.
SEO (Search Engine Optimization):
SEO는 검색 엔진 최적화로, 웹사이트가 검색 엔진 결과 페이지에서 높은 순위를 차지하도록 하는 작업입니다.
진행 방법:
키워드 리서치: 사용자들이 검색할 키워드를 찾아서 콘텐츠에 반영.
콘텐츠 최적화: 키워드를 포함한 유용하고 질 높은 콘텐츠 작성.
메타 태그: 제목, 설명, 키워드 메타 태그 최적화.
모바일 최적화: 모바일 사용자 경험을 개선.
사이트 속도 개선: 페이지 로딩 속도 최적화.
백링크 구축: 신뢰할 수 있는 다른 사이트로부터 링크 획득.
구조화 데이터: 검색 엔진이 콘텐츠를 더 잘 이해할 수 있도록 구조화된 데이터 사용.
24. 이미지 최적화에 대해 설명해주시고 방법에 대해 설명해주세요.
이미지 최적화:
이미지 최적화는 웹사이트 성능을 향상시키기 위해 이미지 파일의 크기를 줄이고 로딩 시간을 개선하는 과정입니다.
방법:
적절한 포맷 선택: JPEG, PNG, GIF, WebP 등 적절한 이미지 포맷 선택.
이미지 압축: 품질을 유지하면서 파일 크기를 줄이는 압축 기술 사용.
이미지 크기 조정: 필요 없는 큰 이미지 사용을 피하고, 적절한 크기로 조정.
지연 로딩 (Lazy Loading): 사용자가 스크롤할 때 이미지 로드.
CDN 사용: 콘텐츠 전달 네트워크(CDN)를 통해 이미지 로딩 속도 개선.
반응형 이미지: 다양한 해상도와 장치에 맞게 이미지를 조정.
25. 프론트엔드 개발 시 개발자 도구를 활용한 경험이 있다면 설명해주세요.
개발자 도구는 브라우저에서 제공하는 도구로, 디버깅, 성능 분석, DOM 탐색, 네트워크 요청 모니터링 등 다양한 기능을 제공합니다.
경험:
디버깅: 콘솔을 사용하여 오류 메시지 확인 및 디버깅.
DOM 탐색: 요소 검사기로 HTML 구조와 CSS 스타일 확인 및 수정.
네트워크 모니터링: 네트워크 탭을 사용하여 API 요청 및 응답 확인.
성능 분석: 성능 탭을 사용하여 페이지 로딩 시간 분석 및 최적화.
26. 프론트엔드 성능 최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한 경험이 있다면 설명해주세요.
성능 최적화 방법:
코드 스플리팅: 큰 자바스크립트 번들을 여러 작은 번들로 나누어 필요한 시점에만 로드.
이미지 최적화: 압축 및 적절한 크기로 조정.
캐싱: 정적 자산을 브라우저에 캐싱하여 로딩 속도 향상.
지연 로딩 (Lazy Loading): 필요한 시점에만 리소스 로드.
CSS 및 JavaScript 축소: 불필요한 공백과 주석을 제거하여 파일 크기 축소.
프로젝트 경험:
코드 스플리팅을 통해 페이지 로딩 시간을 단축하고, 이미지 최적화를 통해 페이지 크기를 줄였으며, 지연 로딩을 사용하여 사용자 경험을 향상시켰습니다.
27. Javascript event loop에 대해서 설명해주세요.
자바스크립트 이벤트 루프는 비동기 코드가 실행되는 방식을 관리합니다. 자바스크립트는 단일 스레드로 동작하며, 이벤트 루프는 콜 스택과 태스크 큐를 통해 비동기 작업을 처리합니다.
콜 스택: 현재 실행 중인 함수들이 쌓이는 곳.
태스크 큐: 비동기 함수들이 실행 대기 상태로 대기하는 곳.
이벤트 루프: 콜 스택이 비어있을 때 태스크 큐에서 대기 중인 함수를 콜 스택으로 이동시켜 실행.
28. Array, LinkedList에 대해 설명해주시고 각각 어떻게 사용하는지 말씀해주세요.
Array:
배열은 연속된 메모리 공간에 저장되는 데이터 구조로, 인덱스를 통해 접근합니다. 크기가 고정되어 있으며, 삽입/삭제가 비효율적입니다.
사용 예: 데이터가 자주 변경되지 않는 경우, 인덱스를 통해 빠르게 접근해야 하는 경우.
LinkedList:
연결 리스트는 각 요소가 포인터를 통해 다음 요소와 연결되는 데이터 구조로, 크기가 동적입니다. 삽입/삭제가 효율적이지만, 인덱스를 통한 접근은 비효율적입니다.
사용 예: 데이터가 자주 변경되는 경우, 삽입/삭제가 빈번한 경우.
29. AWS S3를 사용하는 이유와 사용 경험에 대해서 답변해주세요.
사용 이유:
AWS S3는 확장성이 뛰어나고, 내구성이 높으며, 안전한 객체 스토리지 서비스입니다. 대용량 데이터를 저렴한 비용으로 저장할 수 있으며, 다양한 접근 제어와 통합 옵션을 제공합니다.
사용 경험:
프로젝트에서 사용자 업로드 파일을 저장하고, 정적 웹사이트 호스팅을 위해 AWS S3를 사용했습니다. S3 버킷 정책과 IAM을 통해 접근 제어를 설정하고, CloudFront를 통해 콘텐츠 배포를 최적화했습니다.
