Quiz - Agile, devDependencies, Package.json, XSS/CSRF, 인증/인가, SEO, 성능 최적화

1. Agile에 대해 설명해주세요.

• 애자일은 프로젝트의 생명 주기 동안 반복적인 개발을 하는 개방 방법론입니다. 애자일은 일정한 주기를 가지고 끊임없이 프로토 타입을 만들어내며 그때마다 필요한 요구 사항에 맞게 수정하여 개발해나가는 적응형 스타일이라고 할 수 있습니다.
• 애자일의 장점은 지속적으로 배포하므로 변경되는 요구사항에 따른 배포를 빠르게 할 수 있다는 것입니다.

1.1 Agile 개발 경험이 있다면 설명해주세요.

• 저는 애자일 개발 방법론 중 스크럼을 사용하여 팀 프로젝트를 한 경험이 있습니다. 매주 월요일마다 전체 팀원들과 주간 계획을 세우고, 매일 프론트엔드 팀원과 프로젝트 진행 상황에 대해 공유했습니다. 그리고 매주 금요일마다 전체 팀원들과 프로젝트의 개별 진행 상황을 공유하고 회고했습니다.
  • 스크럼을 통해서 프로젝트의 진행 상황을 바로 공유하고, 진행 상황에 따라 프로젝트의 속도를 유동적으로 조절할 수 있다는 점이 좋았습니다.

1.2 본인이 생각하는 Agile의 장단점에 대해 설명해주세요.

• 제가 생각하는 애자일 개발 방법론의 장점은 변화하는 요구사항에 수용하기 쉽다는 것입니다.
• 단점은 애자일은 매우 유연하기 때문에 고객의 요구사항에 따라 반복 수정하다 보면 초기 예상과 다른 최종 결과물을 제공할 수 있다는 것입니다.

2. dependencies와 devDependencies 차이에 대해 설명해주세요.

• dependencies는 개발 환경과 배포 환경 모두에서 사용되는 패키지를 담은 배열이고, devDependencies는 개발 환경에서만 사용되는 패키지를 담은 배열입니다.

3. XSS와 CSRF에 대해 설명해주세요.

• XSS는 Cross-Site Scripting의 약어로 공격자가 웹 사이트에 악성 스크립트를 삽입할 수 있는 보안 취약점을 말합니다. XSS 공격에 당하면 사용자이 브라우저는 악성 스크립트를 신회할 수 없음을 감지할 수 없기 때문에, 쿠키, 세션 토큰 등 민감한 정보에 대한 접근 권한을 부여하거나, 악성 스크립트가 HTML 컨텐츠를 수정할 수 있도록 허용합니다.

• CSRF는 Cross-Site Request Forgery의 약어로 공격자가 사용자의 브라우저에게 사용자의 동의 없이 웹사이트에 백엔드에 요청을 수행하도록 하는 공격를 말합니다. CSRF 공격에 의해 의도치 않은 클라이언드 또는 서버 데이터 유출, 세션 상태 변경, 사용자 계정 변경 등이 일어날 수 있습니다.

XSS와 CSRF의 예방책에 대해 설명해주세요.

• XSS의 예방책으로는 HTML sanitization을 통해 HTML을 검사하고 안전한 태그들로 구성하여 생성된 HTML을 사용하는 방법과 쿠키의 SameSite 속성값으로 Strict나 Lax를 설정하여 교차 출처 요청에 대한 쿠키 전송을 제한하는 방법이 있습니다.
• CSRF의 예방책으로는 세션 고유의 CSRF 토큰을 제공하여 GET이 아닌 요청에 대해서 CSRF 토큰의 일치 여부를 확인하는 방법과 HTTP referer나 origin 헤더를 통해 인증받은 도메인으로부터 온 요청인지 확인하는 방법, 그리고 쿠키의 SameSite 속성값으로 Strict나 Lax를 설정하여 교차 출처 요청에 대한 쿠키 전송을 제한하는 방법이 있습니다.

4. 인증과 인가에 대해 설명해주세요.

• 인증은 사용자의 신원을 확인하는 프로세스, 인가는 사용자에게 리소스에 대한 접근권한을 부여하는 프로세스입니다.
• 인증 방식으로는 토큰 인증 방식과 세션 인증 방식이 있습니다.
• 저는 토큰 인증 방식을 사용한 경험이 있습니다.
  1. 클라이언트가 서버에 접속하면 서버에서 해당 클라이언트에게 인증되었다는 의미로 고유한 토큰을 부여합니다.
  2. 토큰을 발급받은 클라이언트는 또 다시 서버에 요청을 보낼 때 요청 헤더에 토큰을 함께 보냅니다.
  3. 서버에서 클라이언트로부터 받은 토큰과 서버에서 있는 토큰의 일치 여부를 확인하여 인증과정을 처리합니다.

5. package.json에서 private에 대해 설명해주세요.

• package.json에서 private을 true로 설정하면, npm이 해당 프로젝트를 배포하는 것을 거부합니다. 이렇게 하면 private repository에서 실수로 배포하는 것을 막을 수 있습니다.

6. 프로젝트에서 npm을 배포하려면 어떤 설정이 필요할까요?

• 프로젝트를 배포하려면, package.jon에서 name과 version 필드를 설정해주어야 합니다.
  • name은 214 이하의 글자수여야 하고, 스코프가 지정된 패키지의 경우 스코프가 포함됩니다.
    • 스코프는 관련 있는 패키지를 그룹화하는 방법으로 스코프 앞에 @ 기호가 오고 뒤에 / 기호가 옵니다.
  • version은 node-semver에 의해 해석될 수 있어야 합니다.

7. SEO는 어떤 식으로 신경쓰셨나요?

• SEO를 신경써보지 않았지만, SEO 최적화를 위해 다양한 방법이 있다는 것을 조사했습니다.
  • 전반적인 방법과 세부적인 방법으로 나뉩니다.
  • 전반적인 방법
    • CSR을 사용할 경우, 첫 페이지에서 핵심 키워드들이 보이도록 서버에서 정적 HTML을 렌더링해줍니다.
    • SSR을 사용해도 된다면 Next.js 프레임워크에서 지원해주는 SEO 관련 기능들을 설정합니다.
  • 세부적인 방법
    • 고유한 title 태그와 핵심 키워드가 포함된 description meta 태그를 사용해야 합니다.
    • image 태그에 alt 속성을 설정합니다.
    • Open Graph 태그를 통해 웹 페이지를 SNS로 공유할 때 보이는 미리보기를 설정합니다.
    • canonical URL을 사용하여 정식 URL을 지정합니다.
    • 보안을 위해 SSL 설정을 합니다.

8. 어플리케이션의 성능은 어떤식으로 측정하셨나요?

• Lighthouse를 사용하여 성능 지표인 FCP, FMP, TTI 등을 측정할 수 있습니다.
• 크롬 개발자 도구의 퍼포먼스 탭에서 직접 원하는 구간을 녹화함으로써 네트워크, 렌더링, 메모리 전반에 대해 확인할 수 있습니다.
• 크롬 개발자 도구의 메모리 탭에서 현재 메모리의 사용률을 확인할 수 있습니다.
• 크롬 개발자 도구의 네트워크에서 에셋을 불러오거나 네트워크 요청이 처리되는데 얼마나 시간이 걸리는지 확인할 수 있습니다.
• react development tools의 프로파일러를 이용해 컴포넌트별 렌더링 시간을 파악하고, 사용자의 인터렉션에 대한 변화를 추적할 수 있습니다.

9. LightHouse 결과가 좋지 않을 때, 프로젝트에서 병목 현상을 어떻게 해결할 수 있을까요?

• 어떤 시간이 가장 오래 걸리는지에 따라서 해결 방법이 다릅니다.
  • TTFB(Time to First Byte)가 오래걸린다면, HTML 페이지를 가능한 빠르게 전달하기 위해 CDN을 사용합니다.
  • 리소스의 로딩이 지연된다면, 불필요한 로딩 지연 시간을 중이기 위해 요소의 rel 속성갑을 'preload'로 설정하여 사전로딩하거나 가능한 같은 출처에서 리소스를 제공하여 네트워크 지연을 줄입니다.
  • 리소스가 로딩하는 시간이 오래 걸린다면, 리소스의 크기를 줄이기 위해서 이미지 크키 최적화나 캐시를 사용합니다.
  • 요소가 렌더링되는데 걸리는 시간이 오래 걸린다면, 트리쉐이킹이나 Dynamic Import를 사용하여 JS 파일 로딩 시간을 줄이거나 SSR/SSG를 통해 서버에서 렌더링하여 빠르게 보여줄 수 있게 합니다.

10. 주소창에 주소를 입력했을 때의 흐름을 설명해주세요.

• 브라우저의 주소창에 URL 주소를 입력했을 때, 브라우저는 캐시에서 해당 URL에 대한 IP 주소 정보가 있는지 DNS 기록을 확인합니다.
• 캐시에 URL 기록이 없다면, ISP의 DNS 서버에서 DNS 쿼리를 사용하여 해당 URL의 IP 주소를 찾습니다.
• IP 주소를 찾았다면, 찾은 IP 주소에 해당되는 서버와 TCP 연결을 합니다.
• TCP 연결이 되면, 브라우저는 서버에 HTTP 요청을 합니다.
• 서버가 HTTP 응답을 하면, 브라우저는 HTTP 응답의 body에 있는 HTML을 화면에 보여줍니다.

참고

• Blog - Quiz 인증/인가, XSS/CSRF, CORS
• NPM Docs - package.json
• Blog - 프론트엔드 성능 측정
• Blog - 코어 웹 바이탈 LCP 개선을 통한 검색 엔진 최적화(SEO) Part 1: Google Search Console, Next.js