프론트엔드 면접질문(기술2)

배포 관련 질문

1. 프론트엔드 애플리케이션 배포 과정은 어떻게 진행되나요?
   • 답:
     1. 코드 작성 및 빌드: npm run build로 최적화된 파일 생성.
     2. 정적 파일을 호스팅 서비스에 업로드: 예) Netlify, Vercel, AWS S3, Firebase.
     3. CDN(Content Delivery Network) 사용: 정적 파일을 글로벌하게 제공.
     4. 배포 후 테스트: 브라우저에서 확인 및 디버깅.
     5. CI/CD 파이프라인 설정으로 자동화: 예) GitHub Actions, Jenkins.
2. CDN이란 무엇이며, 어떻게 사용하나요?
   • 답: CDN은 콘텐츠 전송 네트워크(Content Delivery Network)로, 사용자와 가까운 서버에서 정적 리소스를 제공하여 로드 시간을 단축합니다.
     예: CSS/JS 파일을 AWS CloudFront에 업로드해 전 세계적으로 빠르게 제공.
3. 번들러(Webpack, Vite 등)의 역할은 무엇인가요?
   • 답:
     • 여러 개의 자바스크립트, CSS, 이미지 파일을 하나로 묶어 효율적으로 로드.
     • 트리 셰이킹, 코드 분할, 압축 등을 통해 파일 크기를 줄이고 성능을 향상시킴.
4. 배포 후 발생할 수 있는 CORS 문제를 해결하는 방법은?
   • 답:
     • 서버에서 Access-Control-Allow-Origin 헤더 설정.
     • 프록시 서버 설정: 로컬에서 요청을 서버로 중계.
     • 클라이언트 요청에 적절한 헤더 추가.

---

상태 관리 관련 질문

1. 상태 관리 라이브러리(Redux, Zustand, Recoil 등)를 사용하는 이유는 무엇인가요?
   • 답:
     • 여러 컴포넌트에서 상태를 공유해야 할 때 prop drilling을 방지.
     • 복잡한 애플리케이션에서 상태 흐름을 명확히 관리.
     • Redux는 강력한 도구로 상태 변경을 추적 가능. Recoil은 React 기반으로 사용하기 쉬움.
2. Redux의 주요 개념(Store, Reducer, Action, Middleware)을 설명하세요.
   • 답:
     • Store: 상태가 저장되는 중앙 저장소.
     • Reducer: 상태를 업데이트하는 순수 함수.
     • Action: 상태 변경을 위한 의도를 나타내는 객체.
     • Middleware: 액션과 리듀서 사이의 비동기 작업 처리. 예: redux-thunk.
3. React에서 Context API와 Redux의 차이점은 무엇인가요?
   • 답:
     • Context API는 소규모 상태 관리에 적합.
     • Redux는 대규모 상태 관리 및 복잡한 상태 흐름에 적합.
     • Redux는 강력한 디버깅 도구(Redux DevTools)를 제공.
4. 비동기 상태 관리에서 redux-thunk와 redux-saga의 차이는?
   • 답:
     • redux-thunk: 액션 생성자가 함수를 반환. 간단하고 설정이 쉬움.
     • redux-saga: Generator를 사용해 더 복잡한 비동기 흐름 처리 가능.
5. React Query란 무엇이며, 상태 관리와 어떤 차이가 있나요?
   • 답:
     • React Query는 서버 상태 관리 라이브러리로, API 호출, 캐싱, 리트라이 로직 등을 자동화.
     • 클라이언트 상태와 달리 서버 상태는 API와 동기화가 필요하므로 React Query가 더 적합.

---

REST API 관련 질문

1. REST API란 무엇인가요?
   • 답: REST(Representational State Transfer)는 HTTP 프로토콜을 기반으로 클라이언트-서버 간 통신을 표준화한 설계 방식입니다.
     • 주요 메서드: GET(읽기), POST(생성), PUT(수정), DELETE(삭제).
     • JSON 형식으로 데이터를 주고받음.
2. REST API와 GraphQL의 차이점은?
   • 답:
     • REST: 정해진 엔드포인트에서 데이터를 가져옴. 과다 또는 과소 데이터를 받을 수 있음.
     • GraphQL: 클라이언트가 필요한 데이터만 쿼리할 수 있음. 단일 엔드포인트 사용.
3. 비동기 요청을 처리하는 방법은 무엇인가요?
   • 답:
     • Promise:
        

       fetch('https://api.example.com')
         .then(response => response.json())
         .then(data => console.log(data));

        

        
     • async/await:
        

        

       async function fetchData() {
         const response = await fetch('https://api.example.com');
         const data = await response.json();
         console.log(data);
       }
       fetchData();

        
4. CORS란 무엇인가요?
   • 답: CORS(Cross-Origin Resource Sharing)는 한 도메인에서 다른 도메인의 리소스에 요청할 때 보안을 위해 설정된 정책입니다.
     해결 방법:
     • 서버에서 Access-Control-Allow-Origin 헤더 추가.
     • 프록시 서버 설정.
5. REST API에서 HTTP 상태 코드는 무엇이며, 자주 사용되는 코드들을 설명하세요.
   • 답:
     • 200 OK: 요청 성공.
     • 201 Created: 리소스 생성 성공.
     • 400 Bad Request: 잘못된 요청.
     • 401 Unauthorized: 인증 필요.
     • 404 Not Found: 리소스 없음.
     • 500 Internal Server Error: 서버 에러.
6. REST API 호출 시 에러 핸들링 방법은?
   • 답:
     • HTTP 상태 코드를 확인하고 적절한 조치 수행.
     • try-catch를 사용해 에러를 잡음.
     • 예:
       async function fetchData() {
         try {
           const response = await fetch('https://api.example.com');
           if (!response.ok) throw new Error(`Error: ${response.status}`);
           const data = await response.json();
           console.log(data);
         } catch (error) {
           console.error(error.message);
         }
       }

---

추가 질문

1. JWT(JSON Web Token)는 무엇이며, 어떻게 사용되나요?
   • 답: JWT는 클라이언트-서버 간 인증 정보를 안전하게 전송하기 위한 토큰입니다.
     구조: Header, Payload, Signature로 구성.
     예: 로그인 시 토큰을 생성해 클라이언트가 저장하고, 이후 요청마다 인증 헤더에 추가.
2. REST API 호출 시 POST와 PUT의 차이점은?
   • 답:
     • POST: 리소스를 생성. 같은 요청을 여러 번 보내면 중복 데이터 생성 가능.
     • PUT: 리소스를 수정 또는 생성. 같은 요청을 여러 번 보내도 동일한 결과.
3. Axios와 Fetch API의 차이는?
   • 답:
     • Fetch API: 브라우저 내장. 비교적 간단.
     • Axios: 추가 라이브러리. JSON 자동 변환, 요청/응답 인터셉터, 타임아웃 설정 등이 편리.
4. API 요청 성능을 최적화하는 방법은?
   • 답:
     • 요청 캐싱: React Query 사용.
     • 병렬 요청: Promise.all().
     • 요청 최소화: 필요한 데이터만 요청.
5. OAuth란 무엇인가요?
   • 답: OAuth(Open Authorization)는 제3자 애플리케이션이 사용자의 비밀번호를 알지 않고, 사용자 리소스에 접근할 수 있도록 허용하는 프로토콜입니다.
     예: Google, Facebook 로그인을 통한 인증.