[코드잇 스프린트] 중급 프로젝트 2

이언덕·2025년 5월 9일
코드잇프로젝트프론트엔드

코드잇 스프린트 프로젝트

목록 보기
6/24
post-thumbnail

2️⃣ 프로젝트 세팅

Organization을 만들었으니 그 안에 Repository를 만들자.

원격 레포지토리 생성

New repository 버튼을 눌러서 repository를 생성하자.


New repository 버튼을 누르면 만들려고 하는

  • repository의 이름
  • Readme 파일을 추가할 건지
  • repository를 공개로 사용할건지 비공개로 사용할 건지
    선택할 수 있다.
    선택한 후에 Create repository 버튼을 눌러서 repository를 생성하자.


잘 생성되었다면 위와 같이 창이 뜰 것이다.


로컬 레포지토리 생성

바탕화면에 taskify 폴더를 생성하자.
(npm (Node Package Manager)은 패키지 이름에서 엄격한 네이밍 규칙을 적용하는데, 그중 하나가:
📌 이름은 모두 소문자여야 한다.
이건 향후 패키지를 배포하거나 설치할 때 충돌을 막기 위해서이다.)

생성한 후 VS code에 들어가 Taskify 폴더를 열어주자.


잘 열렸다면 탐색기에 Taskify가 보일 것이다.


Next.js 설치

이제 Next.js을 설치할 건데 설치를 참고하는 글을 이전에 내가 정리한 블로그 글을 참고할 것이다.
Next.js 프로젝트 설치
위 설치 내용에서 달라지는 부분은 아래와 같다.



성공적으로 설치가 되었다면 위와같이 폴더구조가 만들어지고
npm run dev 명령어로 개발모드에 들어갔을 때 위와 같이 페이지가 뜬다.


Prettier 세팅

현재 내 로컬 VSCode에서는 확장 Prettier가 설치되어 있어 자동으로 적용이 된다.
하지만 다른사람들은 확장 Prettier가 설치되어있지 않을 수 있기 때문에 프로젝트에도 Prettier를 설치해두는 게 좋다.

npm install --save-dev prettier

위 명령어를 입력해서 Prettier를 설치해주자.

설치가 완료되었으면 위 터미널처럼 하나의 패키지가 추가되었습니다.라고 알려준다.

.prettierrc 생성

.prettierrc 파일을 최상위 루트에 생성해줘야한다.

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100
}

위 옵션은 필요에 따라 조정이 가능하다!

.prettierignore 생성

Git의 .gitignore와 유사하게 동작한다. 포맷 제외 경로 설정!

node_modules
.next
build
dist
coverage
package-lock.json

SCSS 설치

SCSS 개념 & 설치 방법에 대해서는 아래 사이트에 자세하게 나와있으니 반드시 읽고 넘어가야한다. (익스텐션을 반드시 설치하자!)
SCSS 개념 & 설치

Next.js에서 SCSS(Sass) 설치 및 사용 방법

npm install --save-dev sass

Next.js는 내부적으로 SCSS 지원을 포함하고 있기 때문에, sass만 설치하면 바로 .scss 또는 .sass 파일을 사용할 수 있다.


페이지 정리 & 추가

사용하지 않는 코드들을 정리하고 팀원들이 개발할 페이지들을 미리 만들어놓자.

pages 폴더

팀원들이 개발할 페이지들을 미리 만들어놓았다.

팀 개발이기 때문에 파일을 만들지 않고 폴더를 만들고 그 안에 index.tsx 파일을 생성하는 방식으로 했다.
각 index.tsx 파일에는 위와같이 페이지 컴포넌트를 미리 만들어놓았다.
해당 경로에 가면 해당 페이지 컴포넌트가 보인다.

폴더 추가

src 폴더안에 추가적으로 들어가야할 폴더들을 추가시켰다.

  • components: 공통 컴포넌트 폴더

  • hooks: 전역 커스텀 hook 폴더

  • lib: API 연동, 유틸리티 폴더

  • styles: SCSS, 전역 스타일 폴더

  • types: 타입 정의 폴더


GlobalCss & resetcss

현재 globals.css는 CSS 파일이다.
SCSS를 사용해주어야하기 때문에 파일확장자를 바꿔주고 GlobalCss 코드도 수정해주자.

reset.scss

reset.scss는 순수하게 브라우저 기본 스타일 초기화만 담당한다.
코드가 너무 길기 때문에 사진을 참고하자!

globals.scss

globals.scss는 프로젝트 전역에 폰트, 컬러, 텍스트 스타일, 인터랙션 요소의 공통 스타일을 포함해,
팀 프로젝트에서 깔끔하게 통일된 UI를 유지할 수 있도록 설계했다.

✅ globals.scss 스타일 적용 효과

요소적용된 스타일효과
htmlfont-size: 62.5%1rem = 10px으로 설정되어 rem 단위 계산이 쉬워짐
bodyfont-family, background-color, color, line-height, margin, padding기본 배경색 및 텍스트 스타일 설정, 여백 제거
*font-size, font-weight, box-sizing전체 요소에 폰트 통일 및 레이아웃 계산 안정성 확보
acolor: inherit, text-decoration: none, font-size: inherit기본 링크 스타일 제거, 텍스트 스타일과 통일
buttonall: unset, box-sizing, cursor브라우저 기본 버튼 스타일 제거, 클릭 가능 상태 유지
input, textareafont: inherit, border: none, :focus { outline: none }폼 요소 기본 스타일 제거, 일관된 폰트 적용
precolor, font-size, font-weight, font-family, white-space: pre-wrap코드 블럭의 스타일을 본문과 통일하고 줄바꿈 처리
ul, ol, lilist-style: none점 없는 리스트 형태로 초기화
spanall: unsetspan 요소 초기화하여 자유롭게 커스터마이징 가능

위 적용사항 테스트

globals.scss와 reset.scss가 잘 적용되고 있는지 테스트를 하기 위해 몇가지 체크리스트를 만들어보았다.

✅ 1. 스타일 요소가 적용된지 화면에서 직접 확인하기

export default function Home() {
  return (
    <div>
      <h1>타이틀입니다</h1>
      <p>본문 내용입니다</p>
      <a href="#">링크 테스트</a>
      <ul>
        <li>리스트 1</li>
        <li>리스트 2</li>
      </ul>
      <input placeholder="입력 테스트" />
      <button>버튼 테스트</button>
    </div>
  );
}

pages/index.tsx (렌딩페이지)에 위와 같은 코드를 작성하고 체크리스트를 확인해보자.

요소기대 결과
<a>파란색 밑줄 ❌ → 본문 스타일처럼 보이면 OK
<ul>점 없음
<button>브라우저 스타일 제거됨 (회색 배경, 테두리 없음)
<input>기본 보더 없음
전체 텍스트Pretendard 폰트, 크기 16px (1.6rem)

.

✅ 2. 브라우저 개발자 도구(DevTools)로 확인

확인 절차:
1. 크롬에서 페이지 열고, F12 또는 우클릭 → 검사 클릭
2. <body>나 <*>, <a>, <ul> 등의 요소 선택
3. 오른쪽 Styles 패널에서 다음을 확인:

CSS 속성적용 여부 설명
font-family: Pretendard...<body> 또는 <html>에 적용되어야 함
list-style: none<ul>/<li>에 적용되어야 함
text-decoration: none<a> 태그에 적용되어야 함
margin: 0 / padding: 0전체 요소 (body, h1, p 등)에 적용됨
box-sizing: border-box* 전역 선택자에 적용되어야 함

.

✅ 3. 스타일이 안 먹을 때 점검 포인트

항목확인 방법
globals.scss import 여부_app.tsx에 import "@/styles/globals.scss"; 되어 있는지 확인
@use 경로 문제@use './reset'; 등에서 경로 오타 여부 확인
Next.js 재시작 여부스타일 파일 변경 후 서버 재시작 또는 Shift+F5로 새로고침
SCSS 에러터미널에서 컴파일 에러 있는지 확인

반응형 breakpoint

SCSS에서 반응형 Breakpoint를 전역으로 관리하는 이유와 방법

✅ 왜 반응형 Breakpoint를 따로 나눠서 관리해야 할까?

반응형 웹을 개발할 때, 각 화면 크기마다 스타일을 다르게 적용하기 위해 미디어쿼리(Media Query)를 사용한다.
하지만 이를 각 SCSS 파일마다 직접 px 단위로 적는다면… 다음과 같은 문제가 생긴다
• ❌ 가독성이 떨어지고,
• ❌ breakpoint가 일관되지 않으며,
• ❌ 수정하려면 모든 파일을 일일이 찾아야 함

👉 그래서 필요한 건?

✅ 반응형 기준(Breakpoint)을 전역에서 한 번만 정의하고, 재사용할 수 있도록 관리하는 구조!

🛠️ 어떻게 전역 Breakpoint를 만들었나?


breakpoints 파일은 프로젝트 어디서든 import해서 재사용할 수 있다!

💡 어떻게 사용하는가?

✨ 사용하고 싶은 SCSS 모듈 상단에 @use만 추가하면 끝!

// 예: src/components/Card.module.scss
@use '@/styles/breakpoints' as *;
//
.card {
  padding: 2rem;
//
  @include respond(sm) {
    padding: 1rem;
  }
}

• @include respond(sm) → max-width: 768px 이하일 때 적용
• ✅ 코드가 훨씬 읽기 쉽고, 통일된 기준 사용 가능
• ✅ 반응형 기준이 변경돼도 한 곳만 수정하면 전체 적용


axios & API 인스턴스

axios 설치방법은 아래 블로그글을 참고하자
axios

공통 axios 인스턴스

axios 공통 인스턴스를 만들면 좋은 점은?
• ✅ baseURL, withCredentials, 공통 헤더 등을 한 곳에서 설정
• ✅ 반복되는 코드 제거
• ✅ 향후 백엔드 주소 변경 시 .env 파일만 수정하면 끝
• ✅ 여러 모듈(API)에서 일관성 있게 사용 가능

.env 파일

.env.local 파일에 환경변수 등록

NEXT_PUBLIC_API_URL=https://sp-taskify-api.vercel.app/{14}-{7}/

Typography

✍️ SCSS로 전역 타이포그래피 시스템 만들기 — Pretendard 기준

✅ 왜 타이포그래피를 전역으로 관리해야 할까?

디자인 시스템에서 타이포그래피는 사용자 경험을 가장 크게 좌우하는 요소 중 하나이다.
하지만 프로젝트 규모가 커질수록 각 컴포넌트마다 font-size, line-height, font-weight를 일일이 지정하면…
• ❌ 스타일이 일관되지 않고,
• ❌ 유지보수가 힘들며,
• ❌ 디자인 가이드를 따르기 어려워집니다.

그래서 Pretendard 디자인 가이드를 기반으로, SCSS 전역에서 일관된 텍스트 스타일을 관리하는 방법을 구축했다.

🛠️ Step 1: 타이포그래피 설정 파일 만들기



🛠️ Step 2: 사용하는 곳에서 불러오기

@use '@/styles/typography' as *;
//
.title {
  @include text-2xl-regular;
}
//
.label {
  @include text-sm-semibold;
}

Colors

🎨 SCSS에서 전역 색상 시스템 만들기 — 디자인 시스템 기반

✅ 왜 색상을 전역으로 관리해야 할까?

디자인 시스템에서는 텍스트, 버튼, 배경, 강조 등 다양한 요소에서 지정된 색상 팔레트를 일관되게 사용하는 것이 핵심이다.
하지만 색상을 직접 #333, #5534DA처럼 입력하다 보면…
• ❌ 코드 일관성 없음
• ❌ 색상 변경 시 유지보수 어려움
• ❌ 다크모드 확장 불가능

그래서 색상은 전역에서 변수로 선언하고, 통일된 방식으로 관리하는 것이 좋다.

🛠️ Step 1: 전역 색상 파일 만들기



🛠️ Step 2: 사용하는 컴포넌트 SCSS에서 import

@use '@/styles/colors' as *;
//
.button-primary {
  background-color: $violet-5534DA;
  color: $white-FFFFFF;
}
//
.text-muted {
  color: $gray-9FA6B2;
}

이미지

피그마에 있는 이미지 파일들을 public 폴더로 옮겨주었다.

  • 로고이미지 => svg
  • 랜딩페이지 => png
  • 아이콘 => svg
    로 정리해놓았다.

폰트

🎨 Pretendard 폰트 직접 적용하기 (Next.js 기준)

✅ 1. Pretendard 폰트 다운로드

  1. 공식 GitHub 릴리즈 페이지 접속
  2. Pretendard-1.3.9.zip 다운로드 후 압축 해제
  3. 폴더 경로:
    Pretendard-1.3.9/web/static/woff2/
  4. 필요한 .woff2 파일만 선택:
    Pretendard-Regular.woff2 // 400
    Pretendard-Medium.woff2 // 500
    Pretendard-Bold.woff2 // 700

✅ 2. public 폴더에 폰트 저장




✅ 3. SCSS에 폰트 설정
src/styles/fonts.scss 생성

@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  src: url('/fonts/pretendard/Pretendard-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  src: url('/fonts/pretendard/Pretendard-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  src: url('/fonts/pretendard/Pretendard-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  src: url('/fonts/pretendard/Pretendard-Bold.woff2') format('woff2');
  font-display: swap;
}

.


글로벌 스타일 파일 (예: globals.scss, index.scss)에 다음을 추가:

@use './fonts';



✅ 4. globals.scss에 font-family 적용


mixin

위에서 Color, Typography를 변수로 나누어서 사용하고 있었다.
근데 SCSS에서는 mixin이라는 문법을 사용해서 더 쉽고 간단하게 정리할 수 있다.

Color, Typography, breakpoint 변수로 나눠놓기

먼저 variables.scss를 생성하고 그 안에 Color, Typography, breakpoint에 대해 정리해놓았다.
따로 정리해놓으면 불러올 때 각각 따로 불러와야하기 때문에 코드의 가독성이 떨어진다.
그렇기 때문에 양이 많지 않으면 하나의 파일에 정리해놓는게 좋다.

.

Color, Typography mixin

이제 mixins.scss를 만들어놓자
이 안에는 첫번째로 Color, Typography를 한번에 사용할 수 있는 mixin 문법을 사용할 것이다.

✅ 기본 텍스트 스타일 mixin

아래와 같이 각 텍스트 크기별로 기본 스타일을 정의한다.
예를 들어, text-style-sm은 작은 텍스트를 위한 스타일이고, text-style-4xl은 큰 제목 스타일로 사용할 수 있다.

@use '@/styles/variables/variables.scss' as *;
.
@mixin text-style-sm {
  font-size: $font-size-sm;
  line-height: $line-height-sm;
}
.
@mixin text-style-4xl {
  font-size: $font-size-4xl;
  line-height: $line-height-4xl;
}

이런 식으로 xs부터 9xl까지 총 13단계의 텍스트 스타일을 미리 정의해두었다.

✅ 통합 텍스트 스타일 mixin

텍스트 크기, 줄 간격, 텍스트 굵기, 색깔 이것을 한번에 사용하는 경우가 많아 합쳐사용할 수 있다.

@use '@/styles/variables/variables.scss' as *;
.
@mixin text-style($size, $weight: 400, $color: $color-black-333236) {
  @if ($size == 'sm') {
    @include text-style-sm;
  } @else if ($size == '4xl') {
    @include text-style-4xl;
  }
.
  font-weight: $weight;
  color: $color;
}

위 통합 텍스트 mixin도 xs부터 9xl까지의 스타일을 미리 정의해두었다.

반응형 mixin

이제 반응형 mixin을 해보자.
해당 mixin 문법을 통해 쉽게 반응형 CSS를 만들 수 있다.



색깔 및 통합 텍스트를 사용할 수 있게 하는 index.scss 만들기

@use '@/styles/variables/variables.scss' as *;
@use '@/styles/mixins/mixins.scss' as *;

이런식으로 계속 부를 수 없으니 위 파일을 하나로 묶어 내보내면 된다.
index.scss를 만들어 아래와 같이 @forward로 내보내면



아래처럼 색깔을 마음대로 꺼내서 사용할 수 있고 통합 텍스트를 마음대로 꺼내서 사용할 수 있다.
반응형도 아래 코드처럼 쉽게 적용시킬 수 있다.

@use '@/styles/index.scss' as *;
/* 색깔 */
.container {
  background-color: $color-black;
  color: $color-white;
}
/* 통합 텍스트 */
.main {
  @include text-style('4xl', 700, $color-white);
}
/* 반응형 */
@include s.mq-lg {
  h1 {
     @include text-style('6xl', 700, $color-white);
  }
}

처음으로 통합 mixin문법을 사용해보았는데 처음에는 어려웠지만 나중에 적응이 되니 쉽게 사용할 수 있었고
flex, grid도 통합 mixin으로 만들 수도 있다.

profile
이언덕
이전 포스트

[코드잇 스프린트] 중급 프로젝트 1

다음 포스트

[코드잇 스프린트] 중급 프로젝트 3

0개의 댓글