TIL #68 React 기술 면접 준비 - CSS, NEXT, CS, Performance Optimization, SEO and Accessibility

DO YEON KIM·2024년 7월 28일

TIL 내일배움캠프 부트캠프 스파르타코딩클럽

부트캠프

목록 보기

68/72

하루 하나씩 작성하는 TIL #68

#CSS

1. CSS의 단위 중 `px`, `em`, `rem` 의 차이점에 대해 설명해주세요.

💙 의도: CSS의 기본적인 단위에 대해 알고 있는지 확인하는 질문

💙 모범 답안:

각각 나누어 설명드리겠습니다. px는 우리에게 친숙한 그 픽셀입니다. 그러나 유저 디바이스 환경에 따라 크기 변화가 있을 수 있기 때문에 em이나 rem을 주로 쓰는 편입니다.

em은 상대적인 단위로서 현재 속해있는 요소의 폰트 크기를 기준으로 계산합니다. 현재 속해 있는 요소의 폰트 크기가 크다면 em값도 커지게 됩니다. px과 반대로 반응형 디자인에 좋습니다. 그러나 현재 속해 있는 요소의 기본 크기가 어느 정도인지에따라 바뀌기 때문에 조심해야 합니다.

그리고 rem은 em하고 모두 같지만 하나 다른 점은 바로 기준이 되는 폰트 크기입니다. rem의 r은 root를 말하는 만큼 최상단 루트의 기본 크기를 바탕으로 적용이 됩니다. 그래서 루트에 정의된 폰트 크기를 바꾸지 않는 한 항상 같은 값을 지니고 있어 저는 이 속성을 가장 많이 씁니다.

💙 한 줄 요약 : px`는 픽셀,` em`은 상대적인 단위로서 현재 속해있는 요소의 폰트 크기를 기준으로 계산. rem은 em하고 모두 같지만 하나 다른 점은 바로 기준이 되는 폰트 크기.

2. reset.css 또는 normal.css가 필요한 이유를 설명할 수 있습니다.

💙 의도: 지원자가 reset.css와 normalize.css의 필요성과 역할을 이해하고 있는지 평가.

💙 팁:

reset.css와 normalize.css의 개념을 설명하세요.
각 파일이 필요한 이유를 설명하세요.
reset.css와 normalize.css의 차이점을 설명하세요.

💙 모범답안:

reset.css는 브라우저 기본 스타일을 모두 제거하여 모든 요소가 동일한 기본 스타일을 가지도록 합니다.
normalize.css는 브라우저 간의 스타일 차이를 최소화하여 일관된 스타일을 유지합니다.
reset.css는 모든 스타일을 제거하므로 스타일링을 처음부터 정의해야 하고, normalize.css는 기본 스타일을 유지하면서 브라우저 차이를 최소화합니다.
```
      
```

💙 한 줄 요약 : reset.css는 브라우저 기본 스타일을 모두 제거하여 모든 요소가 동일한 기본 스타일을 가짐. reset.css는 모든 스타일을 제거하므로 스타일링을 처음부터 정의.

JWT
JWT 한계

3. Tailwind CSS의 장점과 주요 개념을 설명해주세요.

💙 의도: 지원자가 Tailwind CSS의 장점과 주요 개념을 이해하고 있는지 평가.

💙 팁:

Tailwind CSS의 개념과 철학을 설명하세요.
Tailwind CSS의 주요 장점을 설명하세요.
Tailwind CSS를 사용하는 예제를 떠올려 보세요.

💙 모범답안:

Tailwind CSS는 유틸리티 퍼스트(utility-first) CSS 프레임워크로, 미리 정의된 클래스들을 사용하여 빠르게 스타일링할 수 있습니다.
Tailwind CSS의 주요 장점은 높은 생산성, 일관된 디자인, 사용하기 쉬운 커스터마이징입니다.
Tailwind CSS는 불필요한 스타일 충돌을 방지하고, 필요한 스타일만 포함하여 최적화된 CSS를 제공합니다.

💙 한 줄 요약 : 미리 정의된 클래스들을 사용하여 빠르게 스타일링. 높은 생산성, 일관된 디자인, 사용하기 쉬운 커스터마이징

Next.js

1. 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주세요.

💙 의도: 웹 렌더링 방식에 관한 이해를 확인하기 위한 질문. 각각 방식에 장단점을 이해하고 있고 경우에 따라서 어떤 방식을 적용시키는 것이 좋을 지에 대해 충분히 알고 있는지 확인하기 위한 질문.

💙 팁: 각 렌더링마다 비유를 들어 설명해도 좋습니다.

💙 모범 답안:

둘의 큰 차이점은 어디에서 렌더링이 일어나는가에 따라 달라집니다. 우선 클라이언트 사이드 렌더링의 경우에는 우리가 사용하는 기본 리액트의 렌더링 기법입니다. 브라우저는 서버로부터 HTML과 자바스크립트 파일을 받고 난 후에 클라이언트, 즉 유저가 직접 렌더링하는 방식입니다. 장점이라면 페이지 이동 속도가 빠르고 서버의 부담을 줄일 수 있다는 것입니다.

비유하자면 밀키트라고 보시면 됩니다. 고객이 재료를 모두 집으로 가져와서 요리해서 먹어야 합니다. 미리 조리되기 까지 기다리지 않고 집으로 바로 가져올 수 있다는 장점과, 요리사가 따로 일하지 않아도 된다는 장점이 있습니다.

반면에 서버 사이드 렌더링은 말 그대로 서버에서 미리 렌더링을 한 뒤에 완성된 페이지를 클라이언트에게 전송하는 기법입니다. 리액트 기반 프레임워크인 Next.js의 가장 큰 장점이기도 합니다. 서버 사이드 렌더링의 장점은 클라이언트 사이드 렌더링에서 지원하기 어려웠던 SEO에 유리하다는 점입니다. 이러한 특징은 배달 음식에 비유할 수가 있습니다. 고객은 이미 완성된 음식을 받아서 바로 먹을 수 있습니다. 그러면 요리를 못 하는 사람은 음식을 조리할 필요 없이 그 자리에서 먹으면 됩니다.

이어서 서버 사이드 렌더링이 SEO에 유리한 이유는 바로 검색 엔진의 크롤링 기술에 있습니다. 클라이언트 사이드 렌더링은 브라우저 개발자 도구의 네트워크 탭에 가보시면 초기에 브라우저에게 내려주는 화면이 전혀 없습니다. '자바스크립트가 필요합니다' 같은 문구만이 나와있을 뿐입니다. 왜냐하면 클라이언트가 필요한 파일을 다운 받아 직접 렌더링하기 때문입니다. 그러나 크롤링 도구는 이러한 파일을 모두 다운 받을 수는 있어도 직접 렌더링하지는 못 합니다. 반면에 서버 사이드 렌더링의 경우에는 개발자 도구의 네트워크 탭에 가보면 완성된 페이지를 다운 받아오기 때문에 검색 엔진 크롤링 도구는 이러한 완성된 페이지를 받아 크롤링을 실행해 SEO에 좀 더 유리하게 됩니다.

💙 한 줄 요약 :

클라이언트 사이드 렌더링 - 기본 리액트의 렌더링 기법. 브라우저는 서버로부터 HTML과 자바스크립트 파일을 받고 난 후에 클라이언트, 즉 유저가 직접 렌더링하는 방식

서버 사이드 렌더링 - 서버에서 미리 렌더링을 한 뒤에 완성된 페이지를 클라이언트에게 전송하는 기법. Next.js의 가장 큰 장점

2. create-next-app을 이용하여 Next.js 프로젝트를 만들 수 있습니다.

💙 의도: 지원자가 create-next-app을 사용하여 Next.js 프로젝트를 설정하고 시작할 수 있는지 평가.

💙 팁:

create-next-app의 역할을 설명하세요.
Next.js 프로젝트를 생성하는 명령어를 설명하세요.
프로젝트 생성 후 기본 폴더 구조를 설명하세요.

💙 모범답안:

create-next-app은 Next.js 프로젝트를 빠르게 설정하고 시작할 수 있게 해주는 CLI 도구입니다.
npx create-next-app@latest 명령어를 사용하여 프로젝트를 생성할 수 있습니다.
생성된 프로젝트는 pages, public, styles 등의 기본 폴더 구조를 포함합니다.

💙 한 줄 요약 : npx create-next-app@latest

3. 페이지를 만들고 next/router / next/navigation를 이용하여 이동할 수 있습니다.

💙 의도: 지원자가 Next.js에서 페이지를 생성하고 next/router 또는 next/navigation을 사용하여 페이지 간 이동을 구현할 수 있는지 평가.

💙 팁:

Next.js에서 페이지를 생성하는 방법을 설명하세요.
next/router와 next/navigation의 차이점을 설명하세요.
페이지 이동을 구현하는 방법을 설명하세요.

💙 모범답안:

Next.js에서는 pages 폴더에 파일을 생성하여 페이지를 만들 수 있습니다.
next/router는 클라이언트 사이드 라우팅을 제공하며, useRouter 훅을 사용하여 페이지 간 이동을 구현할 수 있습니다.
next/navigation은 최신 Next.js 버전에서 제공하는 API로, 동적 탐색을 쉽게 할 수 있게 합니다.

💙 한 줄 요약 : 위와 같음.

4. next/Image 컴포넌트를 이용하여 이미지 최적화를 할 수 있습니다.

💙 의도: 지원자가 next/Image 컴포넌트를 사용하여 이미지 최적화를 구현할 수 있는지 평가.

💙 팁:

next/Image 컴포넌트의 주요 기능을 설명하세요.
이미지 최적화의 이점을 설명하세요.
next/Image를 사용하는 방법을 설명하세요.

💙 모범답안:

next/Image 컴포넌트는 자동으로 이미지 최적화, 크기 조정, 포맷 변경 등을 처리해주는 컴포넌트입니다.
이미지 최적화를 통해 페이지 로딩 속도를 향상시키고 사용자 경험을 개선할 수 있습니다.
next/Image를 사용하여 이미지의 src, width, height를 지정하면 최적화된 이미지를 렌더링할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

5. 완성된 웹 사이트를 Vercel로 배포할 수 있습니다.

💙 의도: 지원자가 Next.js 프로젝트를 Vercel에 배포하는 방법을 이해하고 있는지 평가.

💙 팁:

Vercel의 역할과 기능을 설명하세요.
Vercel에 프로젝트를 배포하는 방법을 설명하세요.
Vercel의 주요 기능(자동 배포, 커스텀 도메인 설정 등)을 설명하세요.

💙 모범답안:

Vercel은 Next.js의 공식 배포 플랫폼으로, 빠르고 간편하게 웹 사이트를 배포할 수 있습니다.
Vercel에 프로젝트를 배포하려면 GitHub, GitLab, Bitbucket과 연동하여 배포할 수 있습니다.
Vercel은 자동 배포, 커스텀 도메인 설정, 서버리스 함수 등의 기능을 제공합니다.

💙 한 줄 요약 :

6. 서버사이드 렌더링에 대해서 설명할 수 있습니다.

💙 의도:
- 지원자가 서버사이드 렌더링(SSR)의 개념과 필요성을 이해하고 있는지 평가.
💙 팁:
- 서버사이드 렌더링의 정의를 설명하세요.
- SSR의 주요 장점을 설명하세요.
- SSR을 사용하는 예를 떠올려 보세요.
💙 모범답안:
- 서버사이드 렌더링은 페이지 요청 시 서버에서 HTML을 렌더링하여 클라이언트에 전송하는 방식입니다.
- SSR은 초기 로딩 속도가 빠르고, SEO에 유리하며, 서버에서 데이터를 미리 렌더링할 수 있습니다.
- Next.js에서는 getServerSideProps 함수를 사용하여 SSR을 구현할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

7. Next.js의 4가지 렌더링방식 (SSG, ISR, SSR, CSR)을 각각 설명할 수 있다.

💙 의도: 지원자가 Next.js의 다양한 렌더링 방식을 이해하고 있는지 평가.

💙 팁:

각 렌더링 방식(SSG, ISR, SSR, CSR)의 정의와 특징을 설명하세요.
각 방식의 사용 사례를 설명하세요.
각 렌더링 방식을 구현하는 방법을 설명하세요.

💙 모범답안:

SSG(Static Site Generation)는 빌드 타임에 정적 페이지를 생성하며, getStaticProps를 사용합니다.
ISR(Incremental Static Regeneration)은 정적 페이지를 일정 주기로 재생성하며, getStaticProps와 revalidate 옵션을 사용합니다.
SSR(Server-Side Rendering)은 요청 시마다 서버에서 페이지를 렌더링하며, getServerSideProps를 사용합니다.
CSR(Client-Side Rendering)은 클라이언트에서 JavaScript로 페이지를 렌더링하며, useEffect 훅 등을 사용합니다.

💙 한 줄 요약 : 위와 같음.

8. Intercepting Routes를 사용하여 접근 방법에 따른 다른 라우팅을 구현할 수 있습니다.

💙 의도: 지원자가 Intercepting Routes를 사용하여 라우팅을 제어하는 방법을 이해하고 있는지 평가.

💙 팁:

Intercepting Routes의 개념을 설명하세요.
접근 방법에 따라 다른 라우팅을 구현하는 방법을 설명하세요.
Intercepting Routes를 사용하는 예를 떠올려 보세요.

💙 모범답안:

Intercepting Routes는 사용자의 접근 방법에 따라 라우팅을 제어할 수 있는 기능입니다.
이를 통해 인증, 권한 부여, A/B 테스트 등을 구현할 수 있습니다.
Next.js에서는 middleware를 사용하여 Intercepting Routes를 구현할 수 있습니다.

💙 한 줄 요약 : 사용자의 접근 방법에 따라 라우팅을 제어할 수 있는 기능. Next.js에서는 middleware를 사용하여 Intercepting Routes를 구현

9. Next.js의 파일 컨벤션에 대한 이해도가 충분합니다.

💙 의도: 지원자가 Next.js의 파일 및 디렉토리 구조를 이해하고 있는지 평가.

💙 팁:

Next.js의 기본 파일 및 디렉토리 구조를 설명하세요.
각 폴더와 파일의 역할을 설명하세요.
파일 컨벤션을 따르는 이유를 설명하세요.

💙 모범답안:

pages 폴더는 라우팅을 정의하며, 파일 이름이 URL 경로가 됩니다.
public 폴더는 정적 파일을 저장하며, 프로젝트 루트에서 접근 가능합니다.
styles 폴더는 CSS 파일을 저장하며, 전역 스타일과 모듈 스타일을 관리합니다.
파일 컨벤션을 따름으로써 코드의 가독성과 유지보수성을 높일 수 있습니다.

💙 한 줄 요약 : 위와 같음.

10. Route Handler를 통한 api 요청을 구현할 수 있습니다.

💙 의도: 지원자가 Next.js에서 Route Handler를 사용하여 API 요청을 구현할 수 있는지 평가.

💙 팁:

Route Handler의 개념을 설명하세요.
API 요청을 처리하는 방법을 설명하세요.
Route Handler를 사용하는 예를 떠올려 보세요.

💙 모범답안:

Route Handler는 Next.js에서 API 요청을 처리하기 위한 파일입니다.
pages/api 폴더에 파일을 생성하여 API 엔드포인트를 정의할 수 있습니다.
Route Handler는 클라이언트 요청을 받아 필요한 데이터를 처리하고 응답합니다.

💙 한 줄 요약 : 위와 같음.

11. 서버 컴포넌트와 클라이언트 컴포넌트를 적재적소에 맞게 사용할 수 있습니다.

💙 의도: 지원자가 서버 컴포넌트와 클라이언트 컴포넌트를 이해하고 적절하게 사용할 수 있는지 평가.

💙 팁:

서버 컴포넌트와 클라이언트 컴포넌트의 차이점을 설명하세요.
각각의 장단점을 설명하세요.
서버 컴포넌트와 클라이언트 컴포넌트를 사용하는 예를 떠올려 보세요.

💙 모범답안:

서버 컴포넌트는 서버에서 렌더링되며, 초기 로딩 속도가 빠르고 SEO에 유리합니다.
클라이언트 컴포넌트는 클라이언트에서 렌더링되며, 상호작용이 많은 UI에 적합합니다.
서버 컴포넌트는 getServerSideProps를 사용하여 데이터를 가져오고 렌더링하며, 클라이언트 컴포넌트는 useEffect를 사용하여 데이터를 가져옵니다.

💙 한 줄 요약 :

서버 컴포넌트는 서버에서 렌더링되며, 초기 로딩 속도가 빠르고 SEO에 유리

클라이언트 컴포넌트는 클라이언트에서 렌더링되며, 상호작용이 많은 UI에 적합

12. 서버 요청 시 캐싱 기능을 이용해 데이터의 불필요한 재렌더링을 줄일 수 있습니다.

💙 의도: 지원자가 서버 요청 시 캐싱 기능을 이해하고 이를 활용하여 데이터의 불필요한 재렌더링을 줄일 수 있는지 평가.

💙 팁:

캐싱의 개념과 이점을 설명하세요.
서버 요청에서 캐싱을 구현하는 방법을 설명하세요.
캐싱을 사용하는 예를 떠올려 보세요.

💙 모범답안:

캐싱은 자주 사용되는 데이터를 임시로 저장하여 빠르게 접근할 수 있게 하는 방법입니다.
캐싱을 통해 서버 요청을 줄이고 데이터의 불필요한 재렌더링을 줄일 수 있습니다.
Next.js에서는 getStaticProps의 revalidate 옵션을 사용하여 캐싱을 구현할 수 있습니다.

💙 한 줄 요약 : 캐싱은 자주 사용되는 데이터를 임시로 저장하여 빠르게 접근할 수 있게 하는 방법. 서버 요청을 줄이고 데이터의 불필요한 재렌더링을 줄일 수 있음.

13. Next.js의 App Router와 Page Router의 차이점에 대해 설명할 수 있습니다.

💙 의도: 지원자가 Next.js의 App Router와 Page Router의 차이점을 이해하고 있는지 평가.

💙 팁:

App Router와 Page Router의 정의와 역할을 설명하세요.
두 라우터의 차이점을 설명하세요.
App Router와 Page Router를 사용하는 예를 떠올려 보세요.

💙 모범답안:

App Router는 애플리케이션 레벨에서 라우팅을 관리하며, 전체 애플리케이션의 상태와 URL 동기화를 담당합니다.
Page Router는 각 페이지별로 라우팅을 관리하며, 페이지 전환과 URL 매핑을 담당합니다.
App Router는 글로벌 상태 관리를 위해 사용되며, Page Router는 페이지별 상태 관리를 위해 사용됩니다.

💙 한 줄 요약 : 위와 같음.

14. Next.js의 라우팅 시스템에 대해 설명할 수 있습니다.

💙 의도: 지원자가 Next.js의 라우팅 시스템을 이해하고 있는지 평가.

💙 팁:

Next.js 라우팅 시스템의 개념을 설명하세요.
동적 라우팅과 정적 라우팅의 차이점을 설명하세요.
라우팅 시스템을 사용하는 예를 떠올려 보세요.

💙 모범답안:

Next.js 라우팅 시스템은 파일 기반 라우팅을 제공하며, pages 폴더의 파일 구조에 따라 자동으로 라우트를 생성합니다.
정적 라우팅은 정해진 경로에 대해 미리 정의된 페이지를 제공하며, 동적 라우팅은 URL 매개변수를 사용하여 다양한 경로를 처리합니다.
동적 라우팅은 [id].js와 같은 파일 이름으로 구현할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

15. Nextjs의 Static Site Generation 기능에 대해서 설명할 수 있습니다.

💙 의도: 지원자가 Next.js의 Static Site Generation(SSG) 기능을 이해하고 있는지 평가.

💙 팁:

Static Site Generation의 개념을 설명하세요.
SSG의 주요 장점을 설명하세요.
SSG를 사용하는 예를 떠올려 보세요.

💙 모범답안:

Static Site Generation은 빌드 타임에 정적 페이지를 생성하여, 요청 시 미리 생성된 HTML 파일을 제공하는 방식입니다.
SSG는 빠른 로딩 속도, 높은 성능, SEO에 유리한 특징을 가집니다.
Next.js에서 getStaticProps를 사용하여 SSG를 구현할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

16. Next.js 파트에 middleware를 사용한 인가처리를 할 수 있습니다.

💙 의도: 지원자가 Next.js에서 middleware를 사용하여 인가 처리를 구현할 수 있는지 평가.

💙 팁:

middleware의 개념과 역할을 설명하세요.
middleware를 사용하여 인가 처리를 구현하는 방법을 설명하세요.
middleware를 사용하는 예를 떠올려 보세요.

💙 모범답안:

middleware는 요청과 응답 사이에 실행되는 코드로, 요청을 가로채어 처리할 수 있습니다.
middleware를 사용하여 인증, 권한 부여, 로깅 등을 구현할 수 있습니다.
Next.js에서는 middleware 함수를 정의하여 특정 경로에 대한 인가 처리를 할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

17. SEO와 SEO를 높이는 방법에 대해 설명할 수 있습니다.

💙 의도: 지원자가 SEO(검색 엔진 최적화)의 개념과 이를 개선하는 방법을 이해하고 있는지 평가.

💙 팁:

SEO의 정의와 중요성을 설명하세요.
SEO를 개선하는 방법(메타 태그, 정적 사이트 생성, 페이지 로딩 속도 등)을 설명하세요.

💙 모범답안:

SEO는 검색 엔진에서 웹 사이트의 가시성과 순위를 높이는 작업입니다.
메타 태그 설정, 정적 사이트 생성, 빠른 페이지 로딩 속도, 키워드 최적화 등을 통해 SEO를 개선할 수 있습니다.
Google Search Console, Lighthouse, Yoast SEO 등의 도구를 사용하여 SEO를 분석하고 최적화할 수 있습니다.

💙 한 줄 요약 : SEO는 검색 엔진에서 웹 사이트의 가시성과 순위를 높이는 작업. 메타 태그 설정, 정적 사이트 생성, 빠른 페이지 로딩 속도, 키워드 최적화 등을 통해 SEO를 개선.

18. Hydration에 대해 설명할 수 있습니다.

💙 의도: 지원자가 Hydration의 개념과 중요성을 이해하고 있는지 평가.

💙 팁:

Hydration의 개념을 설명하세요.
Hydration이 필요한 이유를 설명하세요.
Hydration의 동작 방식을 설명하세요.

💙 모범답안:

Hydration은 서버에서 렌더링된 HTML을 클라이언트 측에서 다시 렌더링하여 인터랙티브하게 만드는 과정입니다.
초기 로딩 속도를 빠르게 하고, SEO에 유리하게 하기 위해 서버사이드 렌더링을 사용한 후, 클라이언트 측에서 Hydration을 통해 동적 기능을 추가합니다.
React와 같은 프레임워크에서는 서버사이드 렌더링된 콘텐츠를 클라이언트에서 초기화하여 이벤트 리스너 등을 추가합니다.

💙 한 줄 요약 : ydration은 서버에서 렌더링된 HTML을 클라이언트 측에서 다시 렌더링하여 인터랙티브하게 만드는 과정. SEO에 유리하게 하기 위해 서버사이드 렌더링

Computer Science

1. 프로세스와 스레드에 대해 설명해주세요.

💙 의도: 기본적인 컴퓨터 공학, 운영체제 지식을 가지고 있는지 확인하는 질문. 사실상 비전공자를 거르는 질문입니다. 다만 프론트엔드는 컴퓨터 공학 의존성이 낮기 때문에 일반적인 면접에서 나올 확률은 적습니다.

💙 모범 답안:

네, 프로세스와 스레드는 컴퓨터 운영체제에서 작업을 실행하는 기본 단위입니다. 둘의 차이점은 작업을 실행하는 환경에 있습니다. 우선 프로세스는 현재 실행 중인 프로그램의 실행 단위입니다. 각 프로그램마다 독립적으로 움직이죠? 그래서 프로세스는 다른 프로세스와 메모리를 공유하지 않습니다.

그리고 스레드는 프로세스 내 작업의 실행 단위입니다. 하나의 프로세스는 여러 스레드를 가질 수 있고, 서로 메모리를 공유합니다. 하지만 독립적인 실행 컨텍스트를 가지고 있기도 합니다. 멀티 태스킹이라는 게 바로 이런 프로세스나 스레드를 동시에 병렬로 실행하는 것을 뜻하는 것입니다.

💙 한 줄 요약 : 프로세스와 스레드는 컴퓨터 운영체제에서 작업을 실행하는 기본 단위. 스레드는 프로세스 내 작업의 실행 단위

2. 혹시 웹 보안에서 XSS 공격이나 CSRF 공격에 대해서 알고 계신가요?

💙 의도: 보안에 대한 기본 지식이나 관심이 있는지 막는 방법을 알고 있는지 확인하는 질문

💙 팁: 영어 약자의 풀 네임을 말해주셔도 좋습니다.

💙 모범 답안:

Cross Site Scripting, 즉 XSS는 해커가 특정 스크립트를 웹 페이지에 삽입하여 해당 페이지에 접속하는 유저에게 특정 스크립트를 실행하도록 하는 공격입니다. 이를 방지하기 위해서는 html-sanitizer 같은 기술을 활용해 유저의 입력을 필터링하는 방법이 있습니다.

Cross Site Request Forgery, 즉 CSRF는 유저가 모르는 사이에 특정 행동을 실행하게 만드는 공격입니다. 예를 든다면 해커가 정상 유저에게 악성 이메일을 보내고, 유저가 링크를 클릭한다면 쿠키나 세션 정보를 가지고 비밀 번호 변경이나 송금 등 특정 동작을 실행하게 하는 방식으로 해킹합니다. 이를 방지하기 위해서는 CSRF 토큰이나 동일 출처 정책(Same-Origin-Policy)을 활용하는 방법이 있습니다.

💙 한 줄 요약 : XSS는 해커가 특정 스크립트를 웹 페이지에 삽입하여 해당 페이지에 접속하는 유저에게 특정 스크립트를 실행하도록 하는 공격. CSRF는 유저가 모르는 사이에 특정 행동을 실행하게 만드는 공격

Network and HTTP

1. HTTP 메서드 중 GET, POST 방식의 차이점에 대해서 설명해주세요.

💙 의도: 기본적인 네트워크 지식을 함양하고 있는지 확인하는 질문.

💙 팁: 각 메서드의 예시를 들어도 좋습니다.

💙 모범 답안:

CRUD에 비유해본다면 GET은 READ, POST는 CREATE에 해당하는 게 큰 차이점입니다. GET 메서드는 주로 데이터를 불러올 때 사용되며 캐싱이 가능하고 URL을 통해 요청 정보가 공개됩니다. 개발자 도구를 열어보면 GET 요청에 대한 내용을 쉽게 찾아볼 수가 있습니다.

반면에 POST는 주로 데이터를 서버로 보낼 때 사용합니다. CREATE라고 해서 굳이 생성에만 사용하지는 않습니다. 데이터를 보낼 때 body에 데이터를 포함할 수 있으며 데이터 길이에 제한이 없습니다. 또한 요청 정보가 비공개되어 보안상으로도 이점이 있습니다. 예를 들어 게시글 생성에도 POST를 사용하기도 하지만 로그인처럼 뭔가를 생성하지는 않아도 보안상 이점이 필요한 경우에 사용하기도 합니다.

💙 한 줄 요약 : ET 메서드는 주로 데이터를 불러올 때 사용되며 캐싱이 가능하고 URL을 통해 요청 정보가 공개. POST는 주로 데이터를 서버로 보낼 때 사용

2. TCP와 UDP를 비교해서 설명해주세요.

💙 의도: 네트워크 기초와 http 프로토콜에 대한 이해도를 확인하는 질문

💙 팁: 사용 예시를 말하면 좋습니다.

💙 모범 답안:

네 TCP와 UDP 모두 네트워크 프로토콜이지만, 둘의 특징은 정반대입니다.

TCP는 데이터의 손실이 없는 완전한 전송을 보장합니다. 대신 그만큼 속도가 느립니다. 그래서 신뢰도가 높아야 하는 애플리케이션에 적합합니다. 대표적으로 웹이 있습니다. 자바스크립트 파일이 전송되다가 중간에 데이터가 손실되면 화면이 깨지는 등 대형 사고가 날 것입니다.

반대로 UDP는 데이터가 좀 손실될 수 있더라도 빠른 속도를 보장합니다. 그래서 데이터 손실이 있어도 상관 없고 속도가 중요한 곳에 적합합니다. 예를 들어 실시간 스트리밍이 있습니다. 1초에 약 30프레임인데 중간에 몇 프레임 잃어도 상관이 없기도 하고, 영상을 보내야 하니 속도가 중요하게 됩니다. 이렇게 각자 이해하기 쉬운 차이점을 가지고 있습니다.

💙 한 줄 요약 : TCP는 데이터의 손실이 없는 완전한 전송을 보장. UDP는 데이터가 좀 손실될 수 있더라도 빠른 속도를 보장

Performance Optimization

1. 프론트엔드 성능 최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한 경험이 있다면 설명해주세요.

💙 의도: 성능 최적화에 관심이 있는지, 그렇다면 적용 경험도 있는지 확인하는 질문입니다.

💙 팁: 정 없다면 간단한 이미지 최적화 등을 말씀해도 좋습니다. 경험에 대한 답변에는 마지막에
깨달은 점을 추가해도 좋습니다.

💙 모범 답안:

저의 경우에는 폰트에 대한 최적화 경험을 말씀드릴 수 있겠습니다. 최근에 디자인이 예쁜 프로젝트를 진행할 일이 있었습니다. 그래서 메인 페이지의 히어로 섹션에 독특한 폰트를 적용할 일이 있었습니다. 그런데 폰트의 크기가 생각보다 커서 메인 텍스트가 화면에 처음 나타났을 때 폰트가 적용되지 않은 모습이 먼저 나타나게 되었습니다. 이러한 모습이 유저에게 부정적인 경험을 제공할 것이라고 생각하여 처음에는 swap 속성을 통해 폰트가 전부 로딩된 뒤에 해당 텍스트를 보여주도록 했습니다.

그러나 이 방법을 사용하니 화면에 메인 텍스트가 나타나기 까지 시간이 오래 걸려서 텅 빈 히어로 섹션을 유저들이 경험해야만 했습니다. 이후 곰곰히 생각해본 결과, 해당 폰트는 해당 영역에서만 사용되는 것임을 깨닫게 되었습니다. 그래서 폰트를 다운 받아 보여주는 방법 보다는 차라리 svg 파일을 뿌려주는 게 빠르지 않을까? 라는 결론에 다다르게 되었습니다.

그 결과 약 10메가바이트가 넘는 폰트를 다운 받는 대신 수십 키로바이트밖에 안 되는 svg 파일을 화면에 보여주게 되어 빠른 초기 로딩과 유저의 데이터 절약까지 장점을 모두 잡게 되었습니다. 이를 통해 굳이 내가 가진 기술로만 한계를 정해서 해결하려고 하지 않아도 프로젝트에 더 최적화된 방법을 찾아나서는 게 나을 때도 있다는 것을 깨닫게 되었습니다.

💙 한 줄 요약 : 위와 같음.

2. 데이터 10,000개를 가지고 무한 스크롤 구현 시에 가장 중요하게 고려해야 할 점은 무엇이라고 생각하시나요?

💙 의도: 대규모 데이터 처리시의 성능 최적화 해결 방안 제시할 수 있는지 확인하는 질문. 또는 현실 세계의 요구 사항 구현 시에 어떤 것을 우선으로 생각하는지 확인하기 위한 질문.

💙 모범 답안:

우선 대규모 데이터를 다뤄야 하기에 성능 최적화를 가장 중요하게 고려해야 한다고 생각합니다. 무한 스크롤 덕분에 초기에는 화면에 렌더링할 데이터가 적지만, 시간이 지남에 따라 화면에 데이터는 쌓이고 쌓여 결국에는 성능에 부하를 줄 정도가 될 수도 있습니다. 이럴 때는 react-virtualized 같은 라이브러리를 활용해 가상 렌더링 기술을 활용할 수 있습니다. 사용자에게 보이는 부분만 렌더링하고, 나머지는 제거함으로써 브라우저가 대규모 데이터를 렌더링하느라 생기는 부담을 제거할 수 있습니다.

💙 한 줄 요약 : 성능 최적화를 가장 중요하게 고려해야 한다고 생각. react-virtualized` 같은 라이브러리를 활용해 가상 렌더링 기술을 활용할 수 있습니다. 사용자에게 보이는 부분만 렌더링하고, 나머지는 제거함으로써 브라우저가 대규모 데이터를 렌더링하느라 생기는 부담을 제거

3. 폰트 파일처럼 미리 로드해야 하는 작업은 어디에서 로드를 시작하는 게 좋을까요?

💙 의도: 미리 로드해야 하는 리소스에 대해 성능 최적화를 할 수 있는지 확인하는 질문

💙 팁: 폰트 외에도 어떤 것을 미리 로드하면 좋은지 제시해도 좋습니다.

💙 모범 답안:

네, 미리 로드하기 위해서 html의 head 태그에 데이터를 가져오는 방법이 있을 수 있습니다. 대표적으로 css 파일이 그러한 방법을 이미 사용하고 있습니다. 또한 link 태그를 사용한다면 preload 속성을 주는 방법도 있습니다.

Next.js에서는 Images 태그를 사용할 때 priority 속성을 줘서 미리 로드할 수 있도록 우선권을 주는 경우도 있습니다. 다만 네트워크 대역폭은 정해져 있으므로 미리 로드하는 작업이 많아질 경우 정해진 자원을 많이 나누게 되어 모두의 로딩 시간이 길어지는 단점을 초래할 수 있으니 신중하게 사용해야 합니다.

💙 한 줄 요약 : Next.js에서는 `Images` 태그를 사용할 때 `priority` 속성을 줘서 미리 로드할 수 있도록 우선권을 주는 경우도 있습니다.

4. 이미지를 최적화하는 방법에 대해 아는대로 말씀해주세요.

💙 의도: 본인만의 성능 최적화 팁이 있는지 확인하는 질문

💙 팁: 구체적인 최적화 팁을 제시하면 좋습니다.

💙 모범 답안:

네, 저의 경우는 우선 이미지의 확장자를 확인하는 편입니다. 보통 jpg, png 확장자를 많이 사용할 텐데 최근에 나온 webp, 나아가서는 avif와 같은 이미지들은 더 개선된 압축 알고리즘을 사용하고 있어서 같은 이미지라도 퀄리티를 유지하면서 크기를 크게 개선할 수 있습니다.

저는 주로 구글에서 개발한 squoosh.app이라는 서비스를 이용하여 이미지 확장자를 변경하여 최적화를 실현하고 있습니다. 또한 Next.js의 Image 컴포넌트를 사용해 자동으로 최적화 해주는 방법도 사용하고 있으며, sharp 같은 이미지 라이브러리를 사용하여 로딩 중 썸네일을 만드는 등 UX적인 해결책도 사용하는 편입니다.

💙 한 줄 요약 : 최근에 나온 webp, 나아가서는 avif와 같은 이미지들은 더 개선된 압축 알고리즘을 사용하고 있어서 같은 이미지라도 퀄리티를 유지하면서 크기를 크게 개선

SEO and Accessibility

1. SEO가 무엇인가요?

💙 의도: 실제 프로젝트 배포를 위해 SEO를 고려해본 경험이 있는지 확인하는 질문

💙 모범 답안:

SEO는 Search Engine Optimization의 약자로 검색 엔진 최적화라는 뜻입니다. SEO가 잘 구성되어 있다면 구글이나 네이버 같은 검색 엔진에서 상위 노출을 차지 할 수 있기에 정말 중요한 역할을 합니다.

실제로 최근에 해외 어떤 유명 서비스는 신입의 실수로 SEO 데이터가 날아간 적이 있었는데, 그 사건 때문에 유저의 유입 수가 70% 가까이 급감했다고 합니다. 그만큼 개발자가 아닌 일반인들은 검색 엔진의 의존도가 높고, 많은 서비스들이 상위 노출되기 위해 검색 엔진에 기꺼이 마케팅 비용을 쓰기도 하니 SEO의 중요성은 정말로 큽니다. 그래서 다들 SEO를 위해 메타데이터도 작성하고, 시맨틱 웹이나 웹 표준 등을 지키는 것이기도 합니다.

Next.js에서는 서버 컴포넌트에서 메타데이터를 작성하는 것으로 SEO를 쉽게 구현할 수 있는데요. 예를 들어 타이틀, 설명, 오픈 그래프 이미지 등 검색 엔진에 필요한 것 뿐만 아니라 서비스의 홍보나 공유에 필요한 데이터를 작성할 수 있게 도와줍니다.

💙 한 줄 요약 : 색 엔진 최적화라는 뜻입니다. SEO가 잘 구성되어 있다면 구글이나 네이버 같은 검색 엔진에서 상위 노출을 차지 할 수 있기에 정말 중요한 역할을 합니다.

2. robots.txt가 무엇인가요?

💙 의도: 검색 엔진에 웹 서비스를 직접 등록해본 경험이 있는지 확인하는 질문

💙 팁: SEO와 연관지으면 좋습니다.

💙 모범 답안:

robots.txt는 이름의 로봇이라는 단어처럼 검색 엔진의 크롤러봇에게 명령을 내리는 역할을 합니다. 어떤 크롤링 봇은 어디까지 접근해서 크롤링할 수 있는지 규칙을 작성하는 파일입니다. 예를 들어 굳이 검색 엔진에 드러나지 않아도 되는 페이지는 robots.txt에 페이지 주소를 적어 크롤러봇의 접근을 막을 수 있습니다. 이 robots.txt를 잘 사용해야 SEO에 도움이 되기에 중요한 부분이기도 합니다.

💙 한 줄 요약 : 로봇이라는 단어처럼 검색 엔진의 크롤러봇에게 명령을 내리는 역할을 합니다.

3. sitemap.xml은 무엇인가요?

💙 의도: 검색 엔진에 웹 서비스를 등록하고 SEO를 개선하려고 한 경험이 있는지 확인하는 질문

💙 모범 답안:

네 일명 사이트맵은 웹사이트의 중요한 페이지를 나열한 xml 파일입니다. 검색 엔진은 크롤러 봇으로 웹사이트에 접근하기 전, 이 사이트맵을 통해 사이트의 구조를 이해하고 중요한 페이지에 우선적으로 접근할 수 있습니다. 또한 마지막 수정 날짜 등 각 페이지의 정보 또한 넣어줄 수 있어 크롤러봇에게 추가 데이터를 제공할 수 있습니다.

사이트맵을 생성하는 걸 Next.js에서 내장 기능으로 지원하기는 하지만, 저는 개인적으로 next-sitemap이라는 라이브러리를 애용하는 편입니다. 해당 라이브러리를 사용해 사이트맵을 자주 업데이트 및 제출하여 SEO를 향상 시키려 노력하고 있습니다.

💙 한 줄 요약 : 웹사이트의 중요한 페이지를 나열한 xml 파일

4. 시맨틱 태그에 대해 알고 계신가요?

💙 의도: HTML에 대해 자세히 알고 있는지 확인하는 질문. 프론트엔드 개발자들은 HTML에 대해 소홀하기 쉽습니다. 기본기를 확실히 했는지 확인하는 질문입니다.

💙 모범 답안:

네, 시맨틱 태그는 페이지에 쓰이는 태그가 의미를 가지게 하는 방법입니다. 시맨틱 태그를 잘 구현한다면 개발자도 어떤 역할을 하는 태그인지 쉽게 알 수가 있고 SEO 향상에도 도움이 됩니다. 예를 들어 header 태그는 헤더를 나타내고, footer는 푸터를 의미하듯 우리 생각보다 굉장히 많은 시맨틱 태그들이 있어 저는 적극적으로 도입하여 사용하고 있는 편입니다.

💙 한 줄 요약 : 페이지에 쓰이는 태그가 의미를 가지게 하는 방법

5. 웹 접근성을 향상시킬 수 있는 방법에는 무엇이 있을까요?

💙 의도: 웹 접근성이라는 개념에 대해 알고 있는지 확인하는 질문

💙 모범 답안:

웹 접근성은 몸이 불편한 유저도 쉽게 이용할 수 있도록 도와주는 개념입니다. 이러한 웹 접근성을 높이기 위해서는 다양한 방법을 사용할 수 있습니다. 제가 아는대로 설명을 드리자면 우선 이미지 태그에서 alt 속성을 이용해 대체 텍스트를 넣을 수 있습니다.

그리고 색약자 모드를 추가하거나 대비가 적절한 색을 사용하여 시인성을 높이는 방법도 있습니다. 또한 ARIA 속성을 이용해 웹 요소에 텍스트를 달아 스크린 리더기가 읽을 수 있게 도와주는 방법 등이 있습니다.

💙 한 줄 요약 : 웹 접근성은 몸이 불편한 유저도 쉽게 이용할 수 있도록 도와주는 개념. 이미지 태그에서 `alt` 속성을 이용해 대체 텍스트를 넣을 수 있습니다.

DO YEON KIM

프론트엔드 개발자를 향해서

이전 포스트

TIL #67 React 기술 면접 준비 -2

다음 포스트

TIL #68 React 기술 면접 준비 - CSS, NEXT, CS, Performance Optimization, SEO and Accessibility

부트캠프

#CSS

1. CSS의 단위 중 px, em, rem 의 차이점에 대해 설명해주세요.

💙 한 줄 요약 : px는 픽셀, em`은 상대적인 단위로서 현재 속해있는 요소의 폰트 크기를 기준으로 계산. rem은 em하고 모두 같지만 하나 다른 점은 바로 기준이 되는 폰트 크기.

2. reset.css 또는 normal.css가 필요한 이유를 설명할 수 있습니다.

💙 한 줄 요약 : reset.css는 브라우저 기본 스타일을 모두 제거하여 모든 요소가 동일한 기본 스타일을 가짐. reset.css는 모든 스타일을 제거하므로 스타일링을 처음부터 정의.

3. Tailwind CSS의 장점과 주요 개념을 설명해주세요.

💙 한 줄 요약 : 미리 정의된 클래스들을 사용하여 빠르게 스타일링. 높은 생산성, 일관된 디자인, 사용하기 쉬운 커스터마이징

Next.js

1. 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주세요.

💙 한 줄 요약 :

클라이언트 사이드 렌더링 - 기본 리액트의 렌더링 기법. 브라우저는 서버로부터 HTML과 자바스크립트 파일을 받고 난 후에 클라이언트, 즉 유저가 직접 렌더링하는 방식

서버 사이드 렌더링 - 서버에서 미리 렌더링을 한 뒤에 완성된 페이지를 클라이언트에게 전송하는 기법. Next.js의 가장 큰 장점

2. create-next-app을 이용하여 Next.js 프로젝트를 만들 수 있습니다.

💙 한 줄 요약 : npx create-next-app@latest

3. 페이지를 만들고 next/router / next/navigation를 이용하여 이동할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

4. next/Image 컴포넌트를 이용하여 이미지 최적화를 할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

5. 완성된 웹 사이트를 Vercel로 배포할 수 있습니다.

💙 한 줄 요약 :

6. 서버사이드 렌더링에 대해서 설명할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

7. Next.js의 4가지 렌더링방식 (SSG, ISR, SSR, CSR)을 각각 설명할 수 있다.

💙 한 줄 요약 : 위와 같음.

8. Intercepting Routes를 사용하여 접근 방법에 따른 다른 라우팅을 구현할 수 있습니다.

💙 한 줄 요약 : 사용자의 접근 방법에 따라 라우팅을 제어할 수 있는 기능. Next.js에서는 middleware를 사용하여 Intercepting Routes를 구현

9. Next.js의 파일 컨벤션에 대한 이해도가 충분합니다.

💙 한 줄 요약 : 위와 같음.

10. Route Handler를 통한 api 요청을 구현할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

11. 서버 컴포넌트와 클라이언트 컴포넌트를 적재적소에 맞게 사용할 수 있습니다.

💙 한 줄 요약 :

서버 컴포넌트는 서버에서 렌더링되며, 초기 로딩 속도가 빠르고 SEO에 유리

클라이언트 컴포넌트는 클라이언트에서 렌더링되며, 상호작용이 많은 UI에 적합

12. 서버 요청 시 캐싱 기능을 이용해 데이터의 불필요한 재렌더링을 줄일 수 있습니다.

💙 한 줄 요약 : 캐싱은 자주 사용되는 데이터를 임시로 저장하여 빠르게 접근할 수 있게 하는 방법. 서버 요청을 줄이고 데이터의 불필요한 재렌더링을 줄일 수 있음.

13. Next.js의 App Router와 Page Router의 차이점에 대해 설명할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

14. Next.js의 라우팅 시스템에 대해 설명할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

15. Nextjs의 Static Site Generation 기능에 대해서 설명할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

16. Next.js 파트에 middleware를 사용한 인가처리를 할 수 있습니다.

💙 한 줄 요약 : 위와 같음.

17. SEO와 SEO를 높이는 방법에 대해 설명할 수 있습니다.

💙 한 줄 요약 : SEO는 검색 엔진에서 웹 사이트의 가시성과 순위를 높이는 작업. 메타 태그 설정, 정적 사이트 생성, 빠른 페이지 로딩 속도, 키워드 최적화 등을 통해 SEO를 개선.

18. Hydration에 대해 설명할 수 있습니다.

💙 한 줄 요약 : ydration은 서버에서 렌더링된 HTML을 클라이언트 측에서 다시 렌더링하여 인터랙티브하게 만드는 과정. SEO에 유리하게 하기 위해 서버사이드 렌더링

Computer Science

1. 프로세스와 스레드에 대해 설명해주세요.

💙 한 줄 요약 : 프로세스와 스레드는 컴퓨터 운영체제에서 작업을 실행하는 기본 단위. 스레드는 프로세스 내 작업의 실행 단위

2. 혹시 웹 보안에서 XSS 공격이나 CSRF 공격에 대해서 알고 계신가요?

💙 한 줄 요약 : XSS는 해커가 특정 스크립트를 웹 페이지에 삽입하여 해당 페이지에 접속하는 유저에게 특정 스크립트를 실행하도록 하는 공격. CSRF는 유저가 모르는 사이에 특정 행동을 실행하게 만드는 공격

Network and HTTP

1. HTTP 메서드 중 GET, POST 방식의 차이점에 대해서 설명해주세요.

💙 한 줄 요약 : ET 메서드는 주로 데이터를 불러올 때 사용되며 캐싱이 가능하고 URL을 통해 요청 정보가 공개. POST는 주로 데이터를 서버로 보낼 때 사용

2. TCP와 UDP를 비교해서 설명해주세요.

💙 한 줄 요약 : TCP는 데이터의 손실이 없는 완전한 전송을 보장. UDP는 데이터가 좀 손실될 수 있더라도 빠른 속도를 보장

Performance Optimization

1. 프론트엔드 성능 최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한 경험이 있다면 설명해주세요.

💙 한 줄 요약 : 위와 같음.

2. 데이터 10,000개를 가지고 무한 스크롤 구현 시에 가장 중요하게 고려해야 할 점은 무엇이라고 생각하시나요?

3. 폰트 파일처럼 미리 로드해야 하는 작업은 어디에서 로드를 시작하는 게 좋을까요?

💙 한 줄 요약 : Next.js에서는 Images 태그를 사용할 때 priority 속성을 줘서 미리 로드할 수 있도록 우선권을 주는 경우도 있습니다.

4. 이미지를 최적화하는 방법에 대해 아는대로 말씀해주세요.

💙 한 줄 요약 : 최근에 나온 webp, 나아가서는 avif와 같은 이미지들은 더 개선된 압축 알고리즘을 사용하고 있어서 같은 이미지라도 퀄리티를 유지하면서 크기를 크게 개선

SEO and Accessibility

1. SEO가 무엇인가요?

💙 한 줄 요약 : 색 엔진 최적화라는 뜻입니다. SEO가 잘 구성되어 있다면 구글이나 네이버 같은 검색 엔진에서 상위 노출을 차지 할 수 있기에 정말 중요한 역할을 합니다.

2. robots.txt가 무엇인가요?

💙 한 줄 요약 : 로봇이라는 단어처럼 검색 엔진의 크롤러봇에게 명령을 내리는 역할을 합니다.

3. sitemap.xml은 무엇인가요?

💙 한 줄 요약 : 웹사이트의 중요한 페이지를 나열한 xml 파일

4. 시맨틱 태그에 대해 알고 계신가요?

💙 한 줄 요약 : 페이지에 쓰이는 태그가 의미를 가지게 하는 방법

5. 웹 접근성을 향상시킬 수 있는 방법에는 무엇이 있을까요?

💙 한 줄 요약 : 웹 접근성은 몸이 불편한 유저도 쉽게 이용할 수 있도록 도와주는 개념. 이미지 태그에서 alt 속성을 이용해 대체 텍스트를 넣을 수 있습니다.

TIL #67 React 기술 면접 준비 -2

1. CSS의 단위 중 `px`, `em`, `rem` 의 차이점에 대해 설명해주세요.

💙 한 줄 요약 : px`는 픽셀,` em`은 상대적인 단위로서 현재 속해있는 요소의 폰트 크기를 기준으로 계산. rem은 em하고 모두 같지만 하나 다른 점은 바로 기준이 되는 폰트 크기.

💙 한 줄 요약 : Next.js에서는 `Images` 태그를 사용할 때 `priority` 속성을 줘서 미리 로드할 수 있도록 우선권을 주는 경우도 있습니다.

💙 한 줄 요약 : 웹 접근성은 몸이 불편한 유저도 쉽게 이용할 수 있도록 도와주는 개념. 이미지 태그에서 `alt` 속성을 이용해 대체 텍스트를 넣을 수 있습니다.