기술 스택

✅ 선택에 대한 이유가 있으면 좋겠습니다. 지금은 없더라도 프로젝트 진행하는 과정에서 고민해 보며 하나씩 추가해가요!

✅ 프로젝트 진행 도중 필요한 기술이 생긴다면 하나씩 추가해가요!

• 토스 프론트 기술 스택 모음 (참고하면 좋을 것 같아서 넣어놨습니다 🙂)

✅ 프레임워크

Next.js

• 버전 14

• 이유

  • [혜빈]
    • SSR(서버사이드렌더링)을 지원해서 SEO에 최적화되어 있으며, CSR이 가지는 첫 페이지 로딩 속도 저하, 검색 노출 어려움의 단점을 보완할 수 있다.
    • CSR 기반의 프로젝트 경험에서 발생했던 검색 노출 어려움의 문제를 해결하고, 학습 차원에서 선택했다.
  • [예지]
    • 기존에는 개발자가 직접 라우팅, 상태 관리, API 호출 등을 구현해야 하지만, next.js는 서버 측 렌더링, 라우팅, 상태 관리, API 호출 등 다양한 기능을 기본으로 제공하여 개발자의 부담을 줄여 줍니다.
  • [재환]
    • SSR 을 적절하게 사용하여, 정적 데이터는 서버측에서 미리 렌더링하여 브라우저로 보내기때문에 효과적이다.

• App Router / Pages Router

  • App Router

  • SEO, 페이지 로딩 속도, 개발자 경험 등을 중요시하는 경우

  • 동적 라우팅, 레이아웃 설정 등 고급 기능이 필요한 경우

  • Pages Router

  • 매우 단순한 웹 앱 개발

  • 클라이언트 측 렌더링 적합

  • 기능

  • 렌더링 방식

  • 구현 위치

  • 지원 경로

  • 기능

  App Router

  서버 측 렌더링

  _app.js 파일

  동적 경로, 정적 경로

  동적 라우팅, 레이아웃 설정 및 고급 기능 지원

  Pages Router

  클라이언트 측 렌더링

  각 페이지 컴포넌트

  정적 경로만

  기본적인 라우팅 기능만 제공

❗️ CSS - 보류

Scss

• tailwind 는 가독성이 안 좋다.

• 기본 글자 사이즈는 어떻게 할까요?

  • [재환]

    기본적인 텍스트 및 글꼴 스타일링 - Web 개발 학습하기 | MDN

    웹 폰트와 사이즈는 어떻게 결정해야할까?

    • px 보다 rem 을 사용하자.

    • rem 은 html 요소에서 설정된 글꼴 크기를 기준으로 비율이 들어간다.

      html {
        font-size: 16px;
      
        @media (min-width: 768px) {
          font-size: 14px;
        }
      }
      
      body {
      	/* html 이 16px 이기 떄문에 body 는 16px */
        font-size: 1rem;
      }
      
      p {
      	/* html 이 16px 이기 떄문에 p 는 14px */
        font-size: 0.875rem;
      }
      

    💡✅ UI/UX 가 나와봐야알겠지만, html 의 사이즈만 px 로 하고 나머지는 rem 어떨까요?

• 기본 폰트는 어떻게 할까요?

  • [재환]
    • ✅ 이것도 UI/UX 가 나와야겠죠??

• 레이아웃 Flex Grid

  • [재환]

    이번에야말로 CSS Flex를 익혀보자

    이번에야말로 CSS Grid를 익혀보자

  • ✅ Flex 로 결정

스타일링 ( CSS 라이브러리 )