하루 하나씩 작성하는 TIL #59
8. 크로스 브라우징이 무엇인가요?
🟡 의도: 웹 브라우저 간 예외 처리가 필요하다는 점을 알고 있는지 확인하는 질문.
🟡 팁: 간단한 에피소드를 소개해도 좋습니다.
🟡 모범 답안:
크로스 브라우징에서 앞에 크로스는 보통 개발 업계에서 무언가의 '사이'를 뜻하곤 합니다.
그래서 크로스 브라우징을 지원한다는 말은 여러 브라우저 사이에 오류 없이 같은 경험을 제공한다는 의미와 같습니다.
한 때 개발하다가 이러한 일이 있었는데요. 저는 갤럭시 유저이기 때문에 크롬으로만 웹을 테스트해서 문제가 없었습니다. 그래서 자신만만하게 PR을 올렸는데, 동료 분이 오셔서 화면 레이아웃이 깨진다는 겁니다. 그럴 리가 없는데?! 하면서 확인해보니 동료 분은 아이폰의 사파리 브라우저를 사용하고 있었고, 특정 CSS 속성이 크롬과 사파리 브라우저에서 다르게 작동하고 있어서 생긴 문제였습니다.
그래서 이후로는 크로스 브라우징에 대해 관심을 좀 더 가지게 되었고, 나중에는 cypress 같은 E2E 테스트 도구를 사용해 각 브라우저 환경에서 테스트를 진행해보고 싶은 마음도 가지고 있습니다!
🟡 한 줄 요약 : 여러 브라우저 사이에 오류 없이 같은 경험을 제공한다는 의미
9. lazy-loading에 대해서 알고 계신가요?
🟡 의도: 성능 최적화 능력을 가지고 있는지 확인하는 질문
🟡 팁: 사용 사례를 언급하세요.
🟡 모범 답안:
네, lazy load는 이름에서 알 수 있듯이 게으른 로딩입니다. 그렇다고 해서 막 일을 하지 않는다는 얘기가 아니라, 쉬게 두었다가 필요할 때만 쓰는 개념입니다.
예시로 설명 드리는 게 빠를 거 같은데요. 한 페이지에 이미지 카드가 길게 나열되어 있습니다. 심지어는 보이지 않는 부분까지 이미지가 있습니다. 이렇게 되면 화면의 모든 이미지를 다운 받아와서 보여주느라 성능이 저하될 것입니다.
이럴 때 화면에 보이는 부분만 이미지를 먼저 로딩할 수 있게 해주는 게 바로 lazy loading 입니다.
저 같은 경우에는 이 예시를 구현하기 위해 html의 data- 속성과 Intersection Observer API를 사용했습니다. 처음에는 이미지를 로드하지 않고 있다가 Intersection Observer API를 통해 해당 태그가 화면에 보여졌을 경우에 data- 속성에 넣어두었던 이미지의 src를 활성화 시키는 것으로 lazy loading을 활용했던 경험이 있습니다.
🟡 한 줄 요약 : 화면의 모든 이미지를 다운 받아와서 보여주느라 성능이 저하될 가능성이 있을 때 화면에 보이는 부분만 이미지를 먼저 로딩할 수 있게 해주는 것.
10. CORS 오류가 나는 이유에 대해 알고 계신가요?
🟡 의도: CORS를 이해하고, 해결 방법 또한 알고 있는지 확인하는 질문
🟡 팁: 기술 용어에 유의하세요.
🟡 모범 답안:
네, CORS는 모든 프론트엔드 개발자가 한 번쯤은 겪어볼 정도로 흔한 문제라고 생각합니다.
우선 CORS의 뜻이 Cross-origin resource sharing인 만큼 서로 다른 출처 사이의 리소스 공유 정책이라고 볼 수 있는데요. 자세히 설명하자면 서로 다른 도메인 간에 데이터를 주고 받을 때 발생하는 오류입니다.
서로 다른 도메인이라는 말이 나왔을 때부터 브라우저의 Same Origin Policy, 동일 출처 정책을 설명해야 하는데요. 이 정책에 따르면 동일한 출처끼리만 데이터를 주고 받을 수 있다는 뜻입니다. 그러면 결국 CORS는 이 동일 출처 정책 때문에 나타나는 오류라는 것입니다.
그러나 서로 다른 출처에서 데이터를 주고 받을 일이 생겼기 때문에 CORS 에러를 마주한 거겠죠? 여기에는 이미 해결 방법이 있습니다. 바로 일종의 화이트 리스트인 Access-Control-Allow-Origin 헤더를 설정하여 미리 일러둔 출처끼리는 데이터의 공유를 할 수 있도록 허가해주는 것입니다.
저도 웹 서버를 구축할 때 비슷한 오류를 겪어본 적이 있었기에 다음에는 이런 오류를 겪지 말자라는 차원에서 스스로 공부하고 정리했던 경험이 있어 그때 공부했던 내용을 바탕으로 답변드렸습니다.
🟡 한 줄 요약 : 다른 도메인 간에 데이터를 주고 받을 때 발생하는 오류로, 출처 정책 때문에 나타나는 오류
11. favicon이 무엇인지 알고 계신가요?
🟡 의도: favicon은 실제로 배포하고, 운영해본 서비스가 있다면 알 수 밖에 없는 디테일한 개념, 이러한 경험이 있는지 간접적으로 확인해보는 질문
🟡 팁: Yes or No 여부가 중요하기 때문에 사용해본 경험과 설명을 짧게 해주시면 됩니다.
🟡 모범 답안:
네, 파비콘에 대해 알고 있고 사용해본 경험도 있습니다. 우리가 사용하는 웹 브라우저의 탭을 보시면 타이틀이 있고, 그 앞에 조그마한 아이콘이 있는데 그게 바로 파비콘입니다.
해당 웹 사이트를 요약하여 나타내는 브랜드 이미지이기 때문에 중요한 역할을 하고, 저 또한 파비콘 제너레이터 같은 서비스를 이용해 파비콘을 만들어 설정해본 경험이 있습니다. 그리고 요즘은 Next.js의 app router에서 이런 메타데이터 설정을 쉽게 할 수 있게 도와주기 때문에 app 폴더의 루트에 favicon.ico 파일을 넣어주기만 하면 되어서 손쉽게 설정해볼 수 있었습니다.
🟡 한 줄 요약 : 브라우저 탭 타이틀 왼쪽 아이콘
12. babel과 같은 트랜스파일러의 역할을 설명해주세요.
🟡 의도: 프론트엔드 개발 환경을 구축하는 방법에 대해 알고 있는지, CRA나 Vite 같은 스캐폴딩 도구의 도움 없이 맨땅에서부터 직접 구현한 경험이 있는지 확인하는 질문.
🟡 팁: 비슷한 개념인 폴리필에 대해서도 대답하면 좋습니다.
🟡 모범 답안:
바벨 같은 트랜스파일러의 역할은 최신 자바스크립트 코드를 이전 버전의 브라우저에서도 실행될 수 있도록 코드를 변환하는 것입니다.
최근에는 시간이 지남에 따라 ECMAScript의 표준이 빠르게 발전하고 있으며, 덕분에 자바스크립트도 여러 기능들이 지속해서 추가되고 있습니다. 그런데 만약 유저의 브라우저가 이러한 자바스크립트의 신규 기능을 지원하지 않는다면 어떻게 될까요?
이러한 상황을 보조하기 위해 트랜스파일러를 사용합니다. 개발자는 최신 신규 기능으로 코드를 작성하지만, 바벨 같은 트랜스파일러가 와서 보편적인 브라우저에서도 실행할 수 있는 코드로 다운그레이드하여 변환해주는 겁니다. 또 비슷하게는 폴리필이 있을 수 있는데요.
이전에는 인터넷 익스플로러 브라우저를 지원해야 하는 경우가 있어서 폴리필을 이용해 익스플로러 브라우저 호환성을 지켜내기도 했었습니다. 제가 알기로는 ECMAScript에 새 기능을 추가하려면 이러한 폴리필 코드 또한 제공해야 한다고 알고 있습니다.
🟡 한 줄 요약 : 최신 자바스크립트 코드를 이전 버전의 브라우저에서도 실행될 수 있도록 코드를 변환
13. eslint같은 linter가 중요한 이유를 설명해주세요.
🟡 의도: 협업을 위한 프론트엔드 개발 환경을 구축할 수 있는지 확인하는 질문
🟡 팁: 협업 시의 중요점을 어필하면 좋습니다.
🟡 모범 답안:
linter는 코드 품질을 향상 시키고, 일관된 스타일을 유지하게 해주는 도구입니다.
linter를 사용하면 여러 안티 패턴에 대해 경고를 보내 개발자가 좋은 품질의 코드를 작성할 수 있도록 돕고, 미리 정의해둔 코드 스타일을 따를 수 있게 도와줍니다.
특히 협업할 때 유용한데, 개발자마다 서로 다른 코드 스타일을 가지고 있을 수 있기에 코드의 일관성을 위해 linter를 도입하면 향후 유지 보수에 도움이 됩니다. 따라서 linter는 매우 중요합니다.
특히 저의 경우에는 vscode에서 eslint 플러그인을 설치하고 나니 linter 규칙이 에디터에 보이게 되어, 그동안 알아채지 못했던 여러 안티 패턴을 고치고 어긋난 스타일을 수정할 수 있었습니다.
🟡 한 줄 요약 : 협업할 때 유용한데, 개발자마다 서로 다른 코드 스타일을 가지고 있을 수 있기에 코드의 일관성을 위해 linter를 도입하면 향후 유지 보수에 도움
14. 웹팩 같은 bundler에 대해 알고 계신가요?
🟡 의도: 프론트엔드 개발 환경에서 번들러의 역할을 알고 있는지 확인하는 질문
🟡 팁: 번들러가 사용되는 예시를 제시하세요.
🟡 모범 답안:
네, 번들러는 묶음이라는 단어 뜻 그대로 여러 자바스크립트 모듈과 파일들을 하나로 합쳐주는 도구입니다.
자바스크립트로 애플리케이션을 개발하다보면 유지 보수나 가독성 등의 이유로 코드를 모듈이나 파일 단위로 나누게 되는데, 번들러는 이런 파일들을 하나로 묶어주면서 최적화를 통해 코드를 압축해주는 작업을 합니다.
아직까지도 웹팩이 대세이기는 하나 최근에는 turbopack 등 성능이 빠른 도구도 많이 사용하기 시작하는 추세입니다. Next.js나 Vite의 빌드가 빠른 이유도 이런 빠른 번들러를 사용해서라고 생각합니다.
🟡 한 줄 요약 : 여러 자바스크립트 모듈과 파일들을 하나로 합쳐주는 도구
