Quiz - 관심사, 웹 사이트 구현시 고려사항, GIT, ProgressiveEnhancement/GracefulDegradation, assets/resources 최적

1. 어제/이번주에 무엇을 공부하셨나요?

• CSS Box model에 대해 복습했습니다.

  • 문서의 레이아웃을 계산할 때 브라우저의 렌더링 엔진은 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다.

  • 하나의 박스는 네 영역인 content, padding, border, margin으로 이루어집니다.

  • CSS에는 크게 블록 박스와 인라인 박스 유형이 있습니다.

    • 블록 박스는 줄바꿈이 되고, width와 height가 적용됩니다.
    • 박스의 padding, margin, border가 다른 요소를 박스로부터 멀어지게 합니다.
    • 인라인 박스는 줄바꿈이 안 되고, width와 height가 적용되지 않습니다.
    • 박스의 위아래 padding, margin, border는 적용되지만, 좌우 padding, margin, border는 다른 인라인 요소를 박스로부터 멀어지게 하지 않습니다.

2. 코딩을 할 때 당신을 들뜨게 하거나 흥미를 끄는 것들은 무엇인가요?

• 현재 사용하는 기술과 관련된 새로운 지식을 알게 될 때 흥미가 생겨서 조사하고 알아봅니다.
  • 예를 들어, React 18 버전에 새롭게 등장한 서버 컴포넌트가 궁금해서 공식문서에 관련글을 읽고 소개 영상을 시청했습니다.
• 또한 오류가 났을 때 오류의 원인을 파악하고 해결하는데 성취감을 느낍니다.
  • 예를 들어, 현재 진행중인 프로젝트에서 새로고침 시 유저 데이터가 날아가는 오류가 발생했었습니다.
  • 디버깅한 결과 새로고침 시 Access Token을 저장해둔 상태가 초기화되었기 때문에 발생한 오류였습니다.
  • useEffect 훅 안에서 Access Token의 상태를 확인하여 Access Token이 없을 경우 Access Token를 재발급하는 훅을 구현하여 에러를 해결했습니다.
  • 그리고 유저 데이터에 대한 GET 요청을 여러 번 호출하게 하지 않기 위해, 이번에 새롭게 알게 된 AtomWithStorage를 통해 유저 데이터를 SessionStorage에 저장하여 결과 새로고침을 해도 유저 데이터가 날아가지 않도록 했습니다.

3. 최근에 당신이 경험한 기술적인 문제는 무엇이고 그것을 어떻게 해결했나요?

• 배포 환경에서는 서버에 HTTP 요청을 할 때 Access Token을 사용한 Authorization headers를 설정할 수 있지만, 개발 환경에서는 Access Token을 받을 수 없어서 배포 환경과 개발 환경에서의 API 요청이 달랐습니다.

• 그로 인해 main 브랜치에서 자동 배포를 할 수 없었고, deploy 브랜치를 만들어서 배포 환경에 맞게 API를 수정해서 수동으로 배포해서 테스트했습니다.

• 이러한 불편함을 해결하고자 여러 시도를 해봤습니다.

  • 커스텀 훅 안에서 Access Token Atom에 접근해서 사용해보려고 했지만, 훅을 중첩해서 호출하는 것이 훅의 규칙에 어긋나서 오류가 발생했습니다.
  • 개발 환경이나 배포 환경에 따라 useQuery를 다르게 호출하려고 시도했지만, useQuery를 조건적으로 호출할 수 없어서 오류가 발생했습니다.
  • API를 호출할 때 개발 환경인지 아닌지에 따라 다르게 호출하여서 이 문제를 해결했습니다.

• 이 경험을 통해 훅을 중첩되서 호출하거나 useQuery를 조건적으로 호출하는 것을 피하고, 일반 함수인 API 호출을 조건적으로 호출해야겠다는 것을 배웠습니다.

4. 웹 애플리케이션이나 사이트를 만들 때 고려해야 할 UI, Security, Performance, SEO, Maintainability에 대해서 설명해주세요.

• UI적으로 고려해야 할 점은 장애우들을 위해 웹 접근성이 지켜져야 하고, 고령자나 저시력자를 위해 색 대비가 뚜렷하여 정보 전달이 잘 되어야 한다는 것입니다.
• Security로 고려해야 할 점은 CSRF와 XSS를 막기 위해 민감한 정보에 대해 SameSite 속성을 none이 아닌 값으로 설정하고, POST 요청시 CSRF 토큰을 사용하고, HTML을 그대로 사용하지 않고 HTML sanitizer를 사용하여 안전한 HTML을 사용하는 것입니다.
• Performance를 위해 고려해야할 점은 HTML의 파싱을 막지 않기 위해 style 태그는 header 내에 script 태그는 body 최하단에 배치혹, script 태그가 여러 개일 경우 async, defer 속성을 사용하는 것입니다. 또한 미리 가져와야 하는 font나 image 파일은 link의 preload 속성을 통해 미리 가져오고, 빌드할 때 uglify, minify, grip 프로세스를 추가하여 압축하는 것입니다.
• SEO를 위해 고려해야 할 점은 HTML의 meta, title 태그, robot.txt 등을 작성하여 사용합니다.
• Maintainablity를 위해 고려해야 할 점은 코드 컨벤션을 정하고, ESLint와 Prettier로 컨벤션을 설정하여 코드를 일관성 있게 작성하고 관리하는 것입니다.

5. 선호하는 개발 환경에 대해 자유롭게 이야기해 주세요.

• 저는 React와 TypeScript를 같이 사용하는 것을 선호합니다.
  • React를 선호하는 이유는 컴포넌트 단위로 상태를 관리할 수 있고, 컴포넌트를 재사용할 수 있기 때문입니다.
  • TypeScript를 선호하는 이유는 런타임 이전에 타입 오류를 잡아주기 때문에 오류를 줄일 수 있고, 타입 시스템이 제공하는 언어 서비스로 자동 완성 기능이나 타입 미리보기를 통해 편하게 개발할 수 있기 때문입니다.
• 개발 도구로는 VSCode와 Git을 선호합니다.
  • VSCode를 선호하는 이유는 제공하는 Extension이 많고, 커뮤니티가 커서 오류 발생시 해결 사례를 빨리 찾을 수 있기 때문입니다.
  • Git을 선호하는 이유는 이전 기록을 확인하고 되돌릴 수 있으며, 협업할 때 내 코드와 다른 사람의 코드를 합치는 것이 쉽고 충돌할 경우 어떤 부분에서 충돌이 났는지 알 수 있기 때문입니다.

6. 버전 관리 시스템은 어떤 것들을 사용해보셨습니까?

• 버전 관리 시스템으로 Git을 사용해봤습니다.
• Git을 선택한 이유는 이전 기록을 확인하고 되돌릴 수 있으며, 협업할 때 내 코드와 다른 사람의 코드를 합치는 것이 쉽고 충돌할 경우 어떤 부분에서 충돌이 났는지 알 수 있기 때문입니다.

7. 당신이 웹 페이지를 만들 때의 과정을 설명해주실 수 있을까요?

• 먼저 나온 디자인 시안을 토대로 컴포넌트를 어떻게 설계할지 고려합니다. 구체적으로 컴포넌트에서 어떤 상태를 정의하고, 어떤 props를 받을 것인지 구상합니다. 그리고 API가 구현되기 전이라면 MockData를 사용하여 UI 및 로직을 구현합니다. MockData를 사용하여 로직이 잘 작동되는지 확인하고, 완성된 API로 교체하여 테스트하여 기획한대로 페이지가 동작하는지 확인합니다.

8. 당신에게 5가지 다른 stylesheet가 있습니다. 어떤 방법으로 사이트에 제공하는 게 가장 효과적일까요?

• 가능한 외부 호출을 줄이기 위해서 하나의 파일로 병합한 후 사용합니다. 빌드툴인 Webpack이나 Vite가 대신 이러한 작업을 해주기 때문에 config 파일을 잘 작성해주면 됩니다.

9. 점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이를 설명하실 수 있습니까?

• 점진적 향상법과 우아한 성능 저하법은 접근성을 위해 웹을 디자인하는 방식을 말합니다.
  • 점진적 향상법은 레이어를 하나씩 쌓아 올리면서 단순한 것부터 복잡한 것까지 동작하도록 발전시키는 방법입니다. 낮은 수준의 디바이스, 브라우저를 가진 클라이언트를 위한 애플리케이션을 지원하는 동시에 더 향상된 버전의 브라우저를 가진 클라이언트에게 기능를 강화한 애플리케이션을 지원하는 방법입니다.
    • 계층적으로 발전시키기 때문에 추가된 기능을 지원할 때 최소한 이전 계층들에 대해서 신뢰할 수 있다는 장점을 가집니다.
    • 기존의 구형 디바이스와 브라우저에 대한 문제를 방지할 수 있습니다.
    • 그러나 복잡한 인터페이스를 구현해야 하는 경우 상응하는 복잡한 기술을 사용해야 하기 때문에 점진적 향상법으로 구축하기 어려울 수 있습니다.
  • 우아한 성능 저하법은 최신 기술을 사용하여 최신 버전의 브라우저, 디바이스에 맞도록 기능을 구현한 후에 오래된 버전의 브라우저, 디바이스에서도 비슷하게 작동하도록 구현하는 방법입니다.
    • 오래된 버전의 기기와 브라우저에서도 새로운 기능이 있는 웹페이지를 제공하기 때문에 사용자는 기기와 브라우저에 상관없이 비슷하게 컨텐츠를 제공받을 수 있다는 장점이 있습니다.
    • 그러나 이미지, 비디오, 라이브 채팅 등 다양한 기능들이 많이 포함되어 있는 경우에는 브라우저마다 큰 차이를 발생할 수 있기 때문에 우아한 성능 저하법을 사용하기에 적합하지 않습니다.

10. 웹사이트에서 assets/resources를 최적화하는 방법에 관해 설명해주세요.

• CSS, JS 파일을 압축하여 파일 크기를 줄입니다.
• webp, avif 확장자의 이미지를 사용하여 이미지 용량을 줄입니다.
• gzip, brotli을 사용하여 파일을 압축해서 전송합니다.