플러스 예외 질문

HTTP 통신의 기본 개념과 특징에 대해 설명해주세요.

답변: HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간의 데이터 교환을 위한 application layer 프로토콜입니다. 주요 특징으로는:

1. Stateless: 각 요청은 독립적이며, 서버는 이전 요청의 정보를 저장하지 않습니다.
2. Client-Server 모델: 클라이언트가 요청을 보내고 서버가 응답합니다.
3. 요청 메서드: GET, POST, PUT, DELETE 등 다양한 메서드를 사용합니다.
4. 응답 상태 코드: 200(성공), 404(Not Found) 등으로 요청 처리 결과를 나타냅니다.

HTTP는 웹 브라우저와 웹 서버 간의 통신뿐만 아니라, RESTful API 등 다양한 네트워크 통신에서 널리 사용됩니다.

웹소켓의 개념과 HTTP와의 차이점을 설명해주세요.

답변: 웹소켓은 클라이언트와 서버 간의 실시간, 양방향 통신을 가능하게 하는 프로토콜입니다.

주요 특징은:
1. 양방향 통신: 클라이언트와 서버 모두 언제든 메시지를 보낼 수 있습니다.
2. 실시간 통신: 연결이 유지되므로 지연 시간이 매우 짧습니다.
3. 효율적인 통신: 한 번 연결되면 추가적인 HTTP 요청 없이 데이터를 주고받을 수 있습니다.

HTTP와의 주요 차이점:

• HTTP는 요청-응답 모델이지만, 웹소켓은 연결 후 자유롭게 통신합니다.
• HTTP는 stateless지만, 웹소켓은 연결을 유지합니다.
• 웹소켓은 실시간 애플리케이션(채팅, 게임 등)에 적합합니다.

HTML5 Canvas의 주요 특징과 사용 사례에 대해 설명해주세요.

답변: Canvas는 HTML5에서 도입된 요소로, JavaScript를 사용하여 그래픽을 그릴 수 있는 영역을 제공합니다. 주요 특징은:

1. 2D 및 3D 렌더링: 2D 컨텍스트가 기본이며, WebGL을 통해 3D 그래픽도 가능합니다.
2. 픽셀 기반 렌더링: 그려진 요소는 이미지로 변환되어 조작이 어렵습니다.
3. 고성능: 복잡한 애니메이션이나 게임에 적합합니다.

사용 사례:

• 데이터 시각화 (차트, 그래프)
• 게임 개발
• 이미지 편집 도구
• 실시간 비디오 처리

Canvas는 SVG와 달리 해상도 종속적이며, 스크립트로 모든 그리기 작업을 제어해야 합니다.

이 프로젝트에서는 사용자의 서명을 받기 위해 Canvas를 활용했습니다. react-signature-canvas 라이브러리를 사용하여 서명 기능을 구현했고, Canvas API를 통해 서명 데이터를 이미지로 변환하여 저장하는 기능을 구현했습니다. 이를 통해 사용자가 웹 브라우저에서 직접 서명을 할 수 있고, 그 서명을 이미지로 저장하여 서버로 전송할 수 있게 되었습니다.

레거시 코드의 정의와 이를 다룰 때의 접근 방식에 대해 설명해주세요.

답변: 레거시 코드는 오래되고 유지보수가 어려운 코드를 의미합니다.

주요 특징은:
1. 문서화가 부족하거나 없음
2. 현대적인 개발 방식과 맞지 않음
3. 테스트 코드가 없거나 부족함
4. 기술 부채가 높음

레거시 코드를 다룰 때의 접근 방식:

1. 점진적 리팩토링: 한 번에 전체를 바꾸기보다 점진적으로 개선합니다.
2. 테스트 추가: 가능한 한 많은 테스트를 추가하여 안전성을 확보합니다.
3. 문서화: 코드의 동작과 구조를 문서화합니다.
4. 현대적인 도구 도입: 정적 분석 도구 등을 사용하여 코드 품질을 개선합니다.

레거시 코드는 완전히 제거하기 어려운 경우가 많으므로, 점진적인 개선과 병행 운영 전략이 중요합니다.

프론트엔드 개발에서 batching의 개념과 이점에 대해 설명해주세요.

답변: Batching은 여러 작업을 그룹화하여 한 번에 처리하는 기법입니다. 프론트엔드 개발에서는 주로 성능 최적화를 위해 사용됩니다.

주요 특징과 이점:

1. 렌더링 최적화: React의 state 업데이트를 batching하여 불필요한 재렌더링을 방지합니다.
2. API 요청 최적화: 여러 API 요청을 하나로 묶어 네트워크 부하를 줄입니다.
3. 이벤트 처리 최적화: 여러 이벤트를 그룹화하여 한 번에 처리합니다.

사용 예:

• React의 setState batching
• GraphQL의 query batching
• debounce나 throttle을 이용한 이벤트 batching

Batching을 통해 애플리케이션의 반응성을 높이고, 서버 부하를 줄일 수 있습니다. 하지만 실시간성이 중요한 경우에는 신중히 사용해야 합니다.

nvm(Node Version Manager)의 주요 기능과 사용 이점에 대해 설명해주세요.

답변: nvm은 Node.js의 여러 버전을 관리하고 전환할 수 있게 해주는 도구입니다.

주요 기능과 이점은:

1. 다중 버전 설치: 여러 Node.js 버전을 한 시스템에 설치할 수 있습니다.
2. 버전 전환: 프로젝트별로 다른 Node.js 버전을 쉽게 사용할 수 있습니다.
3. 최신 버전 설치 용이: 새 Node.js 버전을 쉽게 설치하고 테스트할 수 있습니다.
4. 버전 별칭: 특정 버전에 별칭을 지정하여 관리할 수 있습니다.

사용 예:

nvm install 14.17.0  // 특정 버전 설치
nvm use 14.17.0      // 특정 버전 사용
nvm alias default 14.17.0  // 기본 버전 설정

nvm을 사용하면 여러 프로젝트의 Node.js 버전을 독립적으로 관리할 수 있어, 호환성 문제를 줄이고 개발 환경을 유연하게 관리할 수 있습니다.

효과적인 Git 브랜치 전략의 예시와 그 장점에 대해 설명해주세요.

답변: 대표적인 Git 브랜치 전략으로 Git Flow를 예로 들 수 있습니다.

Git Flow의 주요 브랜치와 특징은:

1. master: 제품 출시 버전을 관리하는 메인 브랜치
2. develop: 개발 중인 코드를 관리하는 브랜치
3. feature: 새로운 기능 개발을 위한 브랜치
4. release: 출시 준비를 위한 브랜치
5. hotfix: 긴급 버그 수정을 위한 브랜치

장점:

• 체계적인 버전 관리
• 병렬적인 개발 작업 가능
• 안정적인 제품 관리와 지속적인 개발 병행

다른 전략으로는 GitHub Flow, GitLab Flow 등이 있습니다. 프로젝트의 규모와 특성에 맞는 전략을 선택하는 것이 중요합니다.

효과적인 브랜치 전략은 코드 품질 유지, 협업 효율성 증대, 빠른 이슈 대응 등에 도움을 줍니다.

로컬스토리지, 세션스토리지, 쿠키의 차이점과 각각의 사용 사례에 대해 설명해주세요.

답변: 세 가지 모두 클라이언트 측 데이터 저장 방식이지만, 특징과 용도가 다릅니다.

1. 로컬스토리지:

   • 영구적으로 데이터 저장
   • 도메인별로 약 5MB까지 저장 가능
   • 사용 사례: 사용자 설정, 캐시 데이터 등

2. 세션스토리지:

   • 브라우저 세션 동안만 데이터 유지
   • 탭/창을 닫으면 데이터 삭제
   • 사용 사례: 임시 폼 데이터, 장바구니 등

3. 쿠키:

   • 서버와 클라이언트 간 데이터 교환에 사용
   • 용량 제한 (대략 4KB)
   • 만료 기간 설정 가능
   • 사용 사례: 세션 관리, 사용자 추적, 개인화 등

주요 차이점:

• 데이터 지속성: 로컬스토리지 > 쿠키 > 세션스토리지
• 용량: 로컬/세션스토리지 > 쿠키
• 서버 전송: 쿠키는 자동으로 서버에 전송, 로컬/세션스토리지는 클라이언트에만 저장

보안 민감한 정보는 이들 저장소에 저장하지 않는 것이 좋습니다.

SSR(Server-Side Rendering)과 CSR(Client-Side Rendering)의 주요 차이점과 각각의 장단점에 대해 설명해주세요.

답변: SSR과 CSR은 웹 페이지를 렌더링하는 두 가지 주요 방식입니다.

SSR (Server-Side Rendering):

• 서버에서 HTML을 생성하여 클라이언트에 전송
• 장점:
  1. 초기 로딩 속도가 빠름
  2. SEO에 유리
  3. 첫 컨텐츠 표시 시간(FCP)이 빠름
• 단점:
  1. 서버 부하가 높음
  2. 페이지 전환 시 새로고침 필요

CSR (Client-Side Rendering):

• 클라이언트(브라우저)에서 JavaScript로 컨텐츠를 렌더링
• 장점:
  1. 서버 부하가 낮음
  2. 빠른 페이지 전환 (SPA)
  3. 풍부한 상호작용
• 단점:
  1. 초기 로딩 시간이 길 수 있음
  2. SEO에 불리할 수 있음

최근에는 두 방식의 장점을 결합한 하이브리드 접근법(예: Next.js의 SSR+CSR)도 많이 사용됩니다. 프로젝트의 요구사항에 따라 적절한 방식을 선택하는 것이 중요합니다.

이 프로젝트는 React를 사용한 CSR 방식으로 구현되어 있습니다.

단방향 바인딩과 양방향 바인딩의 개념, 차이점, 그리고 각각의 장단점에 대해 설명해주세요.

답변: 단방향 바인딩과 양방향 바인딩은 데이터와 UI 요소를 연결하는 두 가지 방식입니다.

단방향 바인딩:

• 데이터 흐름이 한 방향으로만 이루어짐 (모델 → 뷰)
• 예: React
• 장점:
  1. 데이터 흐름이 예측 가능하고 추적하기 쉬움
  2. 디버깅이 용이함
• 단점:
  1. 양방향에 비해 더 많은 코드가 필요할 수 있음
  2. 폼 처리 시 추가적인 로직이 필요함

양방향 바인딩:

• 데이터 흐름이 양방향으로 이루어짐 (모델 ↔ 뷰)
• 예: Angular
• 장점:
  1. 코드가 간결해질 수 있음
  2. 폼 처리가 더 쉬움
• 단점:
  1. 데이터 흐름을 추적하기 어려울 수 있음
  2. 성능 이슈가 발생할 수 있음 (특히 큰 애플리케이션에서)

선택 기준:

• 단방향: 큰 규모의 애플리케이션, 데이터 흐름의 명확성이 중요한 경우
• 양방향: 작은 규모의 애플리케이션, 빠른 개발이 필요한 경우

최근 트렌드는 단방향 바인딩을 선호하는 경향이 있으나, 프로젝트의 요구사항에 따라 적절한 방식을 선택해야 합니다.

React를 사용하고 있으므로, 이 프로젝트는 단방향 데이터 바인딩을 사용합니다.

로그인 페이지를 구현할 때 고려해야 할 주요 요소들(서버, 세션, 쿠키, HTTP 헤더, JSON)에 대해 설명해주세요.

답변: 로그인 페이지 구현 시 고려해야 할 주요 요소들:

1. 서버:

   • 사용자 인증 로직 구현
   • 비밀번호 해싱 및 검증
   • 토큰 생성 및 관리 (JWT 등)

2. 세션:

   • 서버 측에서 사용자 상태 유지
   • 세션 ID를 클라이언트에 전달 (보통 쿠키를 통해)

3. 쿠키:

   • 세션 ID 또는 인증 토큰 저장
   • Secure 및 HttpOnly 플래그 사용 권장

4. HTTP 헤더:

   • Authorization 헤더: 토큰 전송에 사용
   • Set-Cookie: 서버에서 클라이언트로 쿠키 설정
   • CORS 관련 헤더 설정 (필요 시)

5. JSON:

   • 클라이언트-서버 간 데이터 교환 형식
   • 로그인 요청 및 응답 데이터 구조화

구현 순서:
1. 클라이언트에서 사용자 입력 받기
2. HTTPS를 통해 서버로 로그인 요청 전송 (JSON 형식)
3. 서버에서 인증 처리 및 세션/토큰 생성
4. 인증 성공 시 세션 ID나 토큰을 클라이언트에 전달
5. 클라이언트에서 received token이나 세션 ID 저장
6. 이후 요청 시 header에 토큰을 포함하여 인증 상태 유지

보안 고려사항:

• HTTPS 사용 필수
• 비밀번호 해싱
• 브루트 포스 공격 방지 (로그인 시도 제한)
• XSS, CSRF 대비

프론트엔드에서 네트워크 요청 시 발생할 수 있는 예외 상황들과 그 처리 방법에 대해 설명해주세요.

답변: 네트워크 요청 시 다양한 예외 상황이 발생할 수 있으며, 이에 대한 적절한 처리가 중요합니다.

주요 예외 상황 및 처리 방법:

1. 서버 에러 (500번대):

   • 사용자에게 일반적인 에러 메시지 표시
   • 상세 에러 로그 기록

2. 클라이언트 에러 (400번대):

   • 400 (Bad Request): 입력 값 검증 후 재시도
   • 401 (Unauthorized): 로그인 페이지로 리다이렉트
   • 403 (Forbidden): 권한 없음 메시지 표시
   • 404 (Not Found): 해당 리소스 없음 안내

3. 네트워크 연결 실패:

   • 네트워크 상태 확인 요청
   • 재연결 시도 옵션 제공

4. 타임아웃:

   • 재시도 옵션 제공
   • 서버 부하 상태 안내

5. CORS 에러:

   • 서버 측 CORS 설정 확인
   • 프록시 서버 사용 고려

구현 예시 (using axios):

axios.get('/api/data')
  .then(response => {
    // 성공적인 응답 처리
  })
  .catch(error => {
    if (error.response) {
      // 서버가 2xx 범위를 벗어나는 상태 코드를 반환한 경우
      switch(error.response.status) {
        case 401:
          // 인증 실패 처리
          break;
        case 404:
          // 리소스 없음 처리
          break;
        // ... 기타 상태 코드 처리
      }
    } else if (error.request) {
      // 요청은 보냈지만 응답을 받지 못한 경우
      console.log('네트워크 에러');
    } else {
      // 요청 설정 중 에러 발생
      console.log('요청 설정 에러', error.message);
    }
  });

전역 에러 핸들러를 설정하여 공통적인 에러 처리 로직을 구현하는 것도 좋은 방법입니다.

---

src/apis/index.js 파일에서 다음과 같은 네트워크 예외 처리 코드를 볼 수 있습니다:

privateAxios.interceptors.response.use(
  response => {
    return response;
  },
  async err => {
    if (err.response && err.response.status === 401) {
      // 토큰 갱신 로직
    }
    return Promise.reject(err);
  }
);

프론트엔드 애플리케이션에서 발생할 수 있는 주요 장애 상황과 그에 대한 대처 방안에 대해 설명해주세요.

답변: 프론트엔드 애플리케이션에서 발생할 수 있는 주요 장애 상황과 대처 방안:

1. 서버 다운:

   • 사용자에게 서비스 불가능 상태 알림
   • 자동 재시도 메커니즘 구현
   • 오프라인 모드 지원 (가능한 경우)

2. 느린 네트워크:

   • 로딩 인디케이터 제공
   • 데이터 지연 로딩 (lazy loading) 구현
   • 중요 컨텐츠 우선 로딩

3. 브라우저 호환성 문제:

   • 폴리필 사용
   • 프로그레시브 인핸스먼트 적용
   • 다양한 브라우저에서 테스트

4. 메모리 누수:

   • 주기적인 성능 프로파일링
   • 컴포넌트 언마운트 시 리소스 정리
   • 큰 데이터셋 처리 시 가상화 기법 사용

5. 제3자 서비스 장애:

   • 대체 서비스 준비
   • 종속성 최소화
   • 장애 복구 후 자동 재시도

6. 보안 취약점:

   • 정기적인 보안 감사
   • 입력값 검증 및 살균
   • 최신 보안 패치 적용

대처 전략:
1. 모니터링 시스템 구축: 실시간 에러 추적 및 로깅
2. 그레이스풀 디그레이데이션: 핵심 기능 유지하며 성능 저하
3. 장애 복구 계획 수립: 자동화된 복구 프로세스 구현
4. 사용자 커뮤니케이션: 장애 상황과 예상 복구 시간 안내
5. 캐싱 전략: 중요 데이터의 로컬 캐싱으로 오프라인 지원
6. 코드 스플리팅: 필요한 코드만 로드하여 초기 로딩 시간 단축

예시 코드 (서비스 워커를 이용한 오프라인 지원):

// service-worker.js
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        // 캐시에 있으면 캐시된 응답 반환
        if (response) {
          return response;
        }
        // 없으면 네트워크 요청
        return fetch(event.request);
      })
      .catch(() => {
        // 오프라인 폴백 페이지
        return caches.match('/offline.html');
      })
  );
});

장애 상황에 대한 체계적인 대비와 신속한 대응은 사용자 경험 향상과 서비스 신뢰도 제고에 중요합니다.

프론트엔드에서 서버와의 효율적인 통신 방법과 고려해야 할 주요 사항들에 대해 설명해주세요.

답변: 프론트엔드와 서버 간 효율적인 통신을 위해 고려해야 할 주요 사항들:

1. RESTful API:

   • HTTP 메소드(GET, POST, PUT, DELETE 등) 적절히 사용
   • 명확한 엔드포인트 구조 설계

2. GraphQL:

   • 필요한 데이터만 정확히 요청 가능
   • 오버페칭, 언더페칭 문제 해결

3. WebSocket:

   • 실시간 양방향 통신에 적합
   • 채팅, 실시간 업데이트 등에 사용

4. 데이터 포맷:

   • JSON 주로 사용 (가독성, 파싱 용이성)
   • Protocol Buffers 등 고려 (대용량 데이터)

5. 인증:

   • JWT, OAuth 등 보안 프로토콜 사용
   • 토큰 관리 및 갱신 전략 수립

6. 에러 핸들링:

   • 명확한 에러 코드 및 메시지 정의
   • 클라이언트단에서의 적절한 에러 처리

7. 캐싱:

   • 브라우저 캐시, 서비스 워커 활용
   • 불필요한 네트워크 요청 최소화

8. 성능 최적화:

   • 요청 병합 (request batching)
   • 지연 로딩 (lazy loading)

9. CORS 설정:

   • 보안을 위한 적절한 CORS 정책 설정

10. 버전 관리:

    • API 버전 관리로 하위 호환성 유지

예시 코드 (Axios를 사용한 통신):

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {'Authorization': `Bearer ${token}`}
});

// GET 요청
api.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching users:', error);
  });

// POST 요청
api.post('/users', { name: 'John', email: 'john@example.com' })
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error creating user:', error);
  });

---

이 프로젝트에서는 RESTful API를 사용하여 서버와 통신하고 있습니다.
예를 들어, src/apis/auth.js 파일에서:

export const postLogin = async info => {
  const res = await publicAxios.post('/v1/vendor/auth/login', info);
  return res;
};

효율적인 서버 통신을 위해서는 적절한 기술 선택, 보안 고려, 성능 최적화, 에러 처리 등을 종합적으로 고려해야 합니다. 또한, 서버 개발자와의 긴밀한 협업을 통해 일관된 인터페이스를 유지하는 것이 중요합니다.