24/1/23 기술면접(6)

1. 쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해주세요.
   
   • 답변 
     쓰로틀링과 디바운싱은 이벤트 핸들링에 이용되는 기술입니다. 과도한 이벤트 발생을 처리하기위해
     도입되었습니다.
   쓰로틀링
   일정주기 마다 이벤트가 발생하도록하는 기술입니다. 마우스스크롤과 같은 연속적인 이벤트는
   지나치게 반복적으로 발생하기 때문에 발생하는 주기마다 한번씩 이벤트를 실행하도록 하여
   성능저하를 방지합니다.
   
   디바운싱
   연이어 발생하는 이벤트중 마지막 이벤트만 실행시키는 방식입니다. 연속적으로 발생하는 이벤트중
   마지막 이벤트만 실행시켜도 충분할경우에 사용합니다. 예를 들어 실시간 검색의 경우 검색창에 
   검색내용을 작성할때 마지막 타이핑 이후 이벤트가 실행하도록 하여서 서버부하를 줄여서
   성능개선을 합니다.
   
   
2. react 클래스형과 함수형의 차이를 설명해주세요. 어떤 방식을 주로 사용하였고 그 이유가 뭔지 답변해주세요.
   • 답변
     컴포넌트의 형식의 차이라고 보여집니다 클래스형 컴포넌트와 함수형 컴포넌트로 나뉘어 집니다.
     
     클래스형 컴포넌트
     state를 사용합니다. state로 컴포넌트의 상태를 관리합니다.
     라이프사이클 매서드 (componentDidMount, componentDidUpdate, componentWillUnmount 등)을 
     이용하여 생애주기에 따른 작업을 수행합니다.
     인스턴스 매서드를 사용할수 있습니다.
     this 키워드를 사용하여 인스턴트에 접근할수 있습니다.
     
     함수형컴포넌트
     클래스형보다 코드가 간결하여 가독성이 좋습니다.
     함수형 컴포넌트는 React hook을 사용하여 라이프사이클 동안 상태관리를 합니다.
     컴포넌트가 함수자체 이므로 재사용성이 좋습니다
     함수형컴포넌트와 hooks 사용이 성능면에서 좋습니다.
3. 자바스크립트와 타입스크립트의 차이, 장/단점에 대해 설명해주세요.
   • 답변
     자바스크립트
     동적 타입 언어입니다.문법이 간단합니다. 브라우저와 서버 모두에서 사용가능합니다.
     유연한 타입의 언어입니다. 변수의 타입이 런타임때 결정됩니다.
     단점은 런타임에 오류의 발생을 알수 있어서 예측할수 없는 오류로 디버깅이 어렵습니다.
     
     타입스크립트
     자바스크립트를 기반으로 만들어진 정적타입의 언어입니다. 컴파일 시점에 타입체크를
     하기때문에 런타임 오류를 줄입니다.코드의 안정성을 높일수 있습니다.
     단점은 타입까지 코딩해야되기때문에  코드량이 많아지고 자바스크립트에 비해 많은 학습량이 필요합니다.
     
     
4. SEO란 무엇이고 SEO를 진행하는 방법에 대해 설명해주세요.
   • 답변
     SEO는 검색엔진최적화로 웹페이지가 검색엔진에 노출이 쉬워지면 유저들의 페이지 
     이용량이 많아지고 쉽게 찾을수 있습니다.
     
     SEO최적회 방법
     유저들이 많이 사용할만한 좋은 키워드를 사용합니다.
     양질의 정보를 가진 유용한 콘텐츠를 제작합니다.
     제목태그 메타태그의 최적화로 검색노출을 늘립니다.
     웹사이트의 로딩속도가 빠를수록 검색엔진 최적화에 유리합니다.
     모바일친화적일수록 유저경험 UX가 증가합니다.
     
     
5. 이미지 최적화에 대해 설명해주시고 방법에 대해 설명해주세요.
   • 답변
     이미지 최적화는 웹 페이지의 성능 향상을 위해 이미지 파일의 크기를 줄이는 과정입니다.
     작은 크기의 이미지는 더 빨리 로드되고 로딩속도를 개선합니다.
     
     이미지 최적화방법
     이미지 포맷방식의 적절한 선택으로 이미지의 최선의 크기를 정할수 있습니다.
     쓸데없이 높은 해상도는 이미지 최적화에 불리하므로 낲은 해상도의 이미지로 충분할경우
     낮은 해상도를 사용합니다.
     이미지를 압축기술로 파일크기를 축소합니다.
     하나의 스프라이트 이미지가 여러개의 작은 이미지보다 HTTP요청수가 적어서
     이미지 최적화에 적합니다.
     첫랜더링시 뷰포트에 보이는 이미지만 로드하고 나머지는 필요할때 로드되는 
     방식을 채용하면 로딩속도가 빨라집니다.
     이미지캐싱을 통해 재방문시 불필요한 송수신을 줄입니다.
6. 프론트엔드 개발 시 개발자 도구를 활용한 경험이 있다면 설명해주세요.
   • 답변
     개발자도구의 유용한 기능
     
     
   • 요소검사
     웹페이지의 CSS스타일 HTML구조등을 검새하고 수정하는데 이용합니다.
   • 콘솔
     자바스크립트 코드를 실행할수 있고 간단한 테스트를 진행할수 있습니다.
     디버깅에 많이 이용됩니다.
   • 네트워크탭
     웹페이지의 네트워크 요청과 응답을 확인할수 있습니다.
   • 성능분석
     로딩시간 CPU사용량 메모리 사용량등을 확인할수 있습니다.
   • 으용프로그램탭
     쿠키 로컬스토리지 세션스토리지등의 데이터를 확인할수 있습니다.
     확인 수정이 가능합니다.
     
     
   • 소스탭
     웹페이지의 소스코드를 디버깅하고 편집할수 있습니다.
   • 디바이스 에뮬레이션
     다양한 디바이스 상태일때의 레이아웃 디자인등을 확인할수 있습니다.
     반응형 웹디자인을 할때 디바이스에 따른 확인이 가능합니다.