프론트엔드 면접 문제은행에 대한 정리(2)

프론트엔드 면접 문제은행 제 2탄입니다.

 

• 선호하는 개발 환경에 대해 자유롭게 이야기해 주세요.
  
  • 제가 선호하는 개발 환경은 javascript 환경을 선호합니다.
  • 자유분방한 javascript를 컴파일해서 사용하는 타입스크립트도 좋아합니다.
  • 자바스크립트의 자유분방에 절제미를 더할 수 있는 상황에는 타입스크립트로 충분하다고 생각합니다.
  • DB는 설계를 자세히 해보진 않았지만 RDBMS 든 NOSQL이든 Select를 잘 해올 수 있으면 된다고 생각합니다.
  • IDE는 자바 등 컴파일 언어에서는 인텔리제이를 선호하고, 나머지 국면에서는 VSCODE를 선호합니다.
  • 그리고 SPA를 만들 수 있는 환경 PWA로 데스크탑 애플리케이션을 만들 수 있었으면 좋겠습니다.
• 버전 관리 시스템은 어떤 것들을 사용해보셨습니까?
  
  • 현재 직장에서는 SVN을 주로 사용하고 있습니다. lock, pull, push, commit, update 등 기본 기능들은 모두 사용할 수 있습니다.
  • 이전 직장에서는 주로 git을 사용하였습니다. 각각 팀원들과 협업할 때 feature를 따로 따서 작업 후에 머지하는 과정을 거쳤습니다.
  • 제가 두어번 feature를 딴 경우에는 제 코드를 머지하는 대신에 리베이스 하는 형태로 진행하였습니다.
• 당신이 웹 페이지를 만들 때의 과정을 설명해주실 수 있을까요?
  
  • 마크업을 하기 전에 우선 SB와 디자인을 모두 검토하며 기획자의 의도와 디자인의 의도가 잘 부합하는지 먼저 검토합니다.
  • 마크업 설계에 있어서는 시멘틱 코드를 통해 SEO와 웹표준을 검토하고, 프로젝트의 대상자가 어떤 대상자이며 인구통계학적 범위를 우선 생각합니다.
  • 대상자가 결정되면 그 대상자가 어떤 대상자인가에 따라 브라우저 테스트 환경과 웹 접근성 적용 여부를 결정합니다.
  • 오버엔지니어링이 되지 않도록 적정선을 지키며 작업을 시작합니다.
  • 먼저 전체적인 구조와 반복적인 부분이 있는지 검토한 뒤 모듈화 및 전체적인 레이아웃을 설계합니다.
  • 설계를 마친 뒤에 재검토한 뒤에 본격적인 작업을 시작합니다.
  • 디자인의 감성이 전체적으로 적용될만한 부분이 있는지 검토하며 레퍼런스 서칭을 하며, 공통 함수로 선언 후 적용 미적용 상태를 만들어 둡니다.
  • 마크업과 스타일링을 동시에 수행하며 백엔드 개발자가 필요한 부분을 먼저 진행합니다.
  • 그리고 UX와 UI가 많이 섞여있는 부분들은 제일 마지막에 집중해서 혼자 진행할 수 있도록 합니다.
  • 마친 뒤에 점진적으로 더 나은 UI, UX를 검토하고 시멘틱 검토를 마치고, 적절히 웹페이지에 섞여있는 요소들의 키워드들을 점검합니다.
  • Search Console을 통하여 구글 검색이 잘되도록 설정합니다. 키워드 수집이 필요한 경우 간단하게 Google GA tag등을 활용하여 연결합니다.
• 당신에게 5가지 다른 stylesheet가 있습니다. 어떤 방법으로 사이트에 제공하는 게 가장 효과적일까요?
  
  • cdn을 사용하여 제공하는 것은 물론, 해당 파일들을 minfying하는 작업을 거칩니다.
  • 가능한 외부 호출을 줄이기 위해서 하나의 파일로 miniyfying하여 제공합니다.
  • 요즘은 웹팩, 파슬 등의 이러한 도구들이 대신 이런 작업들을 해주기 때문에 간단한 요소라도 parcel을 통해서라도 최적화해서 내보내는 것이 가장 효율적이라고 생각합니다.
• 점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이를 설명하실 수 있습니까?
  
  • 점진적 향상법은 많은 테스트와 함께 점진적으로 성능을 개선시켜가며 작업하는 방법이고, 우아한 성능 저하법은 최신기기에 맞는 대로 작업을 한다음에 babel과 같은 브라우저에 맞게 만드는 컴파일러를 통해 버전을 낮춰서 맞추거나 isMobile과 같은 userAgent를 통한 코드에 대한 만족도를 높이는 것입니다. noscript와 같은 태그를 사용하여 script를 지원하지 않는 환경을 대응하기도 합니다.
• 웹사이트에서 assets/resources를 최적화하는 방법에 관해 설명해주세요.
  
  • 웹사이트에서 assets/resources는 매우 주요한 요소로, tinypng와 같은 온라인 툴이나 포토샵 툴을 사용할 수도있으며, 최근에 나온 webp와 같은 이미지 리소스를 사용하고 fallback으로 이미지 태그를 제공하는 등의 방법들이 있습니다.
• 브라우저가 한 번에 1개의 도메인에서 내려받는 자원은 몇 개인가요?
  
  • 브라우저마다 다르기는 하지만 평균 6~8개의 리소스를 동시에 받을 수 있습니다.
• 예외에는 어떤 것들이 있나요?
  
  • 프론트에서 가장 크게 다루어야 할 예외 중 하나는 image가 있을 수 있고 onerror을 통해 다룰 수 있습니다.
  • try catch 구문을 통해서 이벤트를 결정지어도 좋습니다.
  • 그리고 대다수의 이런 경우 new Error를 통해 객체를 생성하여 따로 관리하는 것이 좋습니다.
• 페이지 로드를 줄이기 위한 최적화 방법 3가지를 말해보세요
  • 앞서 언급한 바와 같이, 웹팩, 파슬 등의 빌드 도구를 사용하여 팩킹하게되면 Http 요청이 기본적으로 많이 줄어듭니다.
  • 꼭 필요한 http 요청만 있으면 될 것 같습니다.
  • 이미지는 svg든 png든 sprite 기법을 사용하는 것이 선호되어야 합니다.
  • cdn을 통한 캐싱은 기본적으로 필요할 것 같습니다.
  • 또한, 캐시 만료일을 설정하여 사용자의 컴퓨터에 저장된 리소스를 기본적으로 사용하도록 합니다.
  • 쿠키 사이즈를 줄여서 응답시간을 최소화하는 것도 중요합니다.
  • 그리고 최근의 크롬 Cross Site Domain 정책에도 부합하겠지만, 불필요한 외부 요청을 들이지 않는 것이 좋습니다.
  • dom 접근과 dom 요소를 최소화하는 마크업을 하는 것 또한 중요합니다.
  • 여러 가지의 이벤트를 전파하여야 할 때는 최대한 이벤트 위임을 통해서 사용하는 것이 좋습니다.
  • 루트 경로에있는 파비콘도 최적화하여 적은 용량으로 소화하는 것이 좋습니다. 왜냐하면 루트 경로에 있기 때문에 계속해서 호출되기 때문입니다.
  • 아이폰에서는 25k 이상의 요소들을 캐시하지 않습니다. 리소스는 최대한 그 안에서 사용하는 것이 좋습니다.
• 당신이 프로젝트에 합류했습니다. 근데 그들은 Tab을 이용하고, 당신은 Space를 사용했습니다. 어떻게 하실 건가요?
  
  • 프로젝트 규칙에 탭을 사용하는 것에 대한 이유를 충분히 들은 뒤 의견을 제시하되 최대한 기존 사용자들의 이해를 고려합니다.
• 간단한 Slideshow 페이지를 만드는 방법에 관해서 이야기해 보세요.
  • https://codepen.io/oinochoe/pen/abdrYdB

plain javascript multiple carousel

• 위와 같이 각각 필요한 변수들을 선언한 뒤
• 어떤 기능들을 넣을 지에 대한 정의를 합니다.
• 예를 들면 터치슬라이드로 넘기는 기능, Navigation 기능, indicator 관련 기능 등을 정의합니다.
• 그 후에 루핑의 여부에 따라서 적절히 아이템들을 복사하여 앞 뒤로 배치해줍니다.
• 계속 리소스를 늘려나가는 것 보다는 재사용할 수 있도록 합니다.
• 각각의 인덱스를 체크하여 아이템 하나의 너비만큼 움직여줍니다. transform을 좀 더 선호하면 좋을 것 같습니다.

이번시간에는 여기까지 하고 다음에 또 이어서 진행하도록 하겠습니다. ( __)

 

 

출처 : https://h5bp.org/Front-end-Developer-Interview-Questions/translations/korean/