프론트엔드 실무에 꼭 필요한 프레임워크와 시스템 (Tailwind CSS, JEST, CI/CD)

프론트엔드 실무에 꼭 필요한 프레임워크와 시스템 (Tailwind CSS, JEST, CI/CD)

🧑🏻‍💻: “HTML, CSS, JavaScript만 배우면 되는 거 아닌가요?”

👩🏻‍💻: “프레임워크가 뭔데 이렇게 많이 배우는 거죠?”

1. Tailwind CSS – CSS를 빠르고 일관되게 작성하는 프레임워크

Tailwind CSS란?

☑️ 유틸리티 클래스 기반의 CSS 프레임워크로, 미리 정의된 짧은 클래스명을 조합해 빠르고 일관된 UI를 구현할 수 있어요.

☑️ 별도 CSS 없이 HTML 또는 JSX 내에서 직접 스타일을 지정할 수 있어 유지보수와 협업에 효율적이에요.

 

 

1-1. Tailwind는 어떤 문제를 해결하기 위해 등장했나요?

.card {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

1-2. Tailwind의 핵심 아이디어: “디자인도 코드처럼 관리하자”

<div class="bg-white rounded-lg p-4 shadow-sm"></div>

1-3. 실무에서 왜 중요한가요?

• 빠른 UI 구현: 디자이너 없이도 스타일 작업을 신속하게 처리

• 코드 일관성 유지: 협업 시 스타일 충돌 방지

• 스타트업·토이 프로젝트에 적합: React, Next.js 등과 함께 사용하면 생산성 향상

참고: Tailwind CSS 공식 문서

2. Jest – 자바스크립트 코드를 자동으로 테스트하는 프레임워크

JEST란?

☑️ Jest는 자바스크립트 코드가 예상대로 동작하는지 자동으로 검사해주는 테스트 프레임워크예요.

☑️ 특히 React 프로젝트에서 많이 사용되며, 기능 수정 시 기존 기능이 깨지지 않도록 도와줘요. 실무에서 코드 안정성을 높이는 데 필수 도구예요.

2-1. 왜 테스트 프레임워크가 필요한가요?

2-2. Jest의 핵심 아이디어: “코드가 제대로 동작하는지 기계에게 맡기자”

function add(a, b) {
  return a + b;
}

test('두 숫자를 더한다', () => {
  expect(add(1, 2)).toBe(3);
});

2-3. 실무에서 왜 중요한가요?

• 리팩토링 시 안정성 확보: 기능 변경 후에도 기존 기능이 잘 작동하는지 확인 가능

• 협업 신뢰도 향상: 테스트 통과 여부로 코드 품질 판단

• CI/CD 도구와 연동해 배포 전 자동 검증 가능

참고: Jest 공식 문서

3. CI/CD – 테스트와 배포를 자동으로 처리하는 개발 흐름

CI/CD란?

☑️ CI/CD는 코드 테스트부터 배포까지의 과정을 자동화하는 시스템이에요.

☑️ CI는 코드 변경 시 자동 테스트를, CD는 테스트 통과 후 자동 배포를 의미해요.

☑️ 실무에서는 빠르고 안정적인 서비스 운영을 위해 필수로 사용돼요.

3-1. CI/CD는 프레임워크일까요?

• CI (Continuous Integration): 코드 변경 시 자동 테스트

• CD (Continuous Deployment): 테스트 통과 시 자동 배포

3-2. CI/CD의 핵심 아이디어: “테스트와 배포는 사람이 하지 않아도 된다”

1. 코드를 GitHub에 푸시

2. 테스트 코드 실행

3. 빌드

4. 서버에 업로드

5. 최종 확인

3-3. 실무에서 왜 중요한가요?

• 작업 속도 향상: 반복 작업 없이 바로 서비스에 반영

• 서비스 품질 향상: 테스트가 통과한 코드만 배포돼 안정성 확보

• 협업 개발에 적합: 여러 명이 동시에 작업해도 안정적인 통합 가능

참고: GitHub Actions 공식 문서

4. 프론트엔드 기본기, 2개월 만에 탄탄히 쌓는 법?

⚡️ 실무 프레임워크 학습

Tailwind, Jest 등 실무 프레임워크를 익혀 실전 웹 개발 역량을 키워요.

⚡️ 팀 프로젝트 경험

기획부터 배포까지 팀과 협업하며 실제 서비스 개발 과정을 경험해요.

⚡️ 자동화 배포 이해

CI/CD 흐름을 배우고 GitHub Actions로 테스트와 배포를 자동화해요.

현업에서 바로 사용 가능, 2주 집중 이론 학습을 진행해요

1️⃣ 실무에 활용되는 CSS 프레임워크 Tailwind CSS

 

• Tailwind는 2024년 기준으로 쇼피파이, 넷플릭스, 깃허브, 심지어 ChatGPT의 채팅창까지 많은 실무 프로젝트에서 활용되고 있는 CSS 프레임워크입니다.

• Tailwind를 활용하여 실무에 바로 활용할 수 있는 개발 역량을 기르는 걸 목표로 합니다.

 

2️⃣ 화려한 앱 동작을 만들어내는 CSS 애니메이션

 

• 웹에 애니메이션 효과를 넣는 방법을 배운 후, 화려한 웹 동작을 실제로 만들어내는 노하우를 배웁니다.

• 실무에서 많이 쓰이는 애니메이션 라이브러리(react-spring framer motion 등)를 다룹니다.

 

3️⃣ 웹 브라우저에서 데이터 저장하기

• 웹 브라우저의 다양한 저장 방식 중 가장 많이 사용하는 쿠키와 웹 스토리지에 대해 배워보고, 웹사이트의 편리한 기능을 구현해 봅니다.

 

4️⃣ Jest 테스트 프레임워크/React 컴포넌트 테스트

• 최근 많은 회사들이 테스트 프레임워크 사용 경험을 채용 우대 사항으로 제시하고 있습니다.

• 프론트엔드 개발자로 취업을 준비하는 수강생들이 소프트웨어 개발 프로세스에 자동화된 테스트를 활용하는 역량을 키울 수 있도록 돕습니다.

5️⃣ 서비스 품질 개선을 위한 CI/CD 기본기

 

• 지속적인 피드백을 통해 제품의 품질을 지속적으로 개선하기 위한 CI/CD 방법론을 배웁니다.

• 기본적인 CI/CD의 개념을 다루고, 각 단계별 구성 요소들과 수행에 적합한 도구에 대해 학습합니다.

단기 심화의 핵심, 퀄리티 높은 프로젝트를 진행해요

1️⃣ Todo 서비스 프로젝트

 

☑️ 실습 내용: 학습에 특화된 Todo 서비스입니다. 학습 목표를 세워 목표마다 Todo 형태로 학습을 관리하고, 각 목표별 학습 현황을 대시보드로 쉽게 파악할 수 있습니다. 또한 Todo와 대응되는 학습 노트를 통해 학습 내용을 정리할 수 있고, 목표별로 학습 내용을 관리할 수 있습니다.

⚒️ 기술 스택: Tailwind CSS, 상태 관리, Jest 테스트 프레임워크, CSS 애니메이션, React 컴포넌트 테스트, CI/CD, Next.js, TypeScript

 

2️⃣ 모임 매칭 플랫폼 프로젝트

☑️ 실습 내용: 오피스 스트레칭, 마인드풀니스 등 일상 속 휴식을 위한 오프라인 프로그램을 누구나 개설/참여할 수 있는 서비스입니다.

 

⚒️ 기술 스택: Tailwind CSS, 상태 관리, Jest 테스트 프레임워크, CSS 애니메이션, React 컴포넌트 테스트, CI/CD, Next.js, TypeScript