software

나는 Web Dev를 알았지만 아무것도 만들 수 없었다 — 내가 바꾼 점

발행: (2025년 12월 14일 오전 05:30 GMT+9)
7 min read
원문: Dev.to

Source: Dev.to

만약 당신이 신입이거나 수많은 튜토리얼, 강의, 플레이리스트를 모두 따라했지만 아직 스스로 프로젝트를 만든 적이 없다면 — 이 글이 당신을 위한 것입니다.

저도 그 경험이 있습니다. 영상을 보고, 문서를 읽고, 개별적인 개념을 이해했지만, 독립적으로 뭔가를 시작할 자신감은 없었습니다. 흔히 하는 변명은 언제나 같습니다:

“아직 충분히 몰라요.”

사실, “준비가 되었다”는 느낌은 절대 오지 않을 겁니다. 당신에게 필요한 것은 필요한 만큼만 배우고, 적용하고, 앞으로 나아갈 수 있는 구조화된 방법입니다.

이 가이드는 제가 웹 개발을 다시 배우면서 정리한 내용이며, 여러분도 같은 길을 따라 첫 번째 실제 프로젝트를 만들 수 있도록 돕습니다. 비록 기본적인 수준이라도 말이죠.

Note: 이 가이드는 완벽함을 추구하는 것이 아닙니다. 작동하는 무언가를 만드는 것이 목표입니다. 한 번이라도 스스로 완성한다면, 이후에는 더 복잡한 프로젝트도 충분히 만들 수 있게 될 것입니다.

Who This Guide Is For

  • 풀스택 튜토리얼에 압도된 신입 개발자
  • 튜토리얼 지옥에 빠진 사람
  • “MERN을 안다”고 말하지만 프로젝트를 시작하지 못하는 사람
  • 명확하고 처음부터 끝까지 이어지는 로드맵을 원하는 완전 초보자

위 항목에 해당한다면, 계속 읽어보세요.

Phase 1 – Minimum HTML/CSS, Maximum JavaScript Understanding

Essentials to Learn

  • 기본 HTML 태그
  • 기본 CSS
  • Flexbox

당신이 진짜 집중해야 할 것은 JavaScript 입니다.

What Actually Matters in JavaScript

  • 코드가 실행되는 방식
  • 코드 조각의 출력 예측하기
  • async/await 와 Promise
  • 화살표 함수
  • 스코프와 클로저
  • 콜 스택과 이벤트 루프(개념적으로)

JavaScript는 단순히 읽는 것만으로는 이해되지 않습니다. 직접 다음을 할 때 비로소 감이 잡힙니다:

  • 출력 예측하기
  • 작은 코드 조각 작성하기
  • 코드를 깨뜨려 보기
  • 오해를 바로잡기

Phase 2 – Learn Backend First (This Is Where Most People Skip)

Core Backend Topics (in order)

  1. Node.js
  2. HTTP 서버
  3. Express.js
  4. Postman (API 테스트)
  5. 미들웨어
  6. 헤더 & 쿼리 파라미터
  7. 인증 (직접 인증 엔드포인트 만들기)
  8. JWT & 권한 부여
  9. MongoDB (기본 CRUD)
  10. 비밀번호 해싱
  11. Zod / 입력 검증

작동하는 수준을 목표로 하세요, 완전 정복이 아니라. 라우트를 작성하고, 인증으로 보호하고, 데이터를 저장하고, 모든 것을 Postman에서 테스트할 수 있다면 충분히 잘하고 있는 겁니다.

Phase 3 – Build a Basic Backend Project (No AI, No Shortcuts)

Project Ideas

  • Todo 앱
  • 간단한 전자상거래 백엔드
  • CRUD 기반 시스템 어느 것이든

How to Build It

  • 문서 읽기
  • 오류를 구글링하기
  • Stack Overflow 활용하기
  • 직접 디버깅하기

Design Checklist

  • 자체 데이터베이스 스키마
  • 인증 흐름
  • 컨트롤러
  • 라우트

모든 것을 Postman에서 테스트하세요. 정상 동작한다면 — 축하합니다. 이미 **백엔드 개발의 약 70 %**를 커버한 겁니다.

Phase 4 – Learn React (The Last Big Bump)

What to Learn

  • React
  • Tailwind CSS

이미 백엔드가 있으니, 이제는 다음을 알게 됩니다:

  • 어떤 데이터를 필요로 하는지
  • 달성해야 할 실제 목표

Task

당신이 만든 백엔드를 위한 프론트엔드를 구축하세요.

Using AI Wisely

  • 컴포넌트 구조나 궁금한 점을 GPT에 물어보기
  • 무작정 복사하지 말고 읽고, 이해하고, 스스로 다시 작성하기

시간이 지나면 React가 마법처럼 느껴지던 것이 논리적으로 느껴지게 됩니다.

Phase 5 – Level Up With TypeScript and Real Databases

New Skills

  • TypeScript
  • WebSockets
  • PostgreSQL
  • Prisma

Second Project Idea

기본 채팅 애플리케이션.

이전과 동일한 흐름을 따르세요:

  • 데이터베이스 모델링
  • 인증
  • 컨트롤러
  • 라우트
  • Postman 테스트

이 시점에서 **실무 웹 개발의 약 95 %**를 습득했으며, 대부분의 기업 코드베이스를 이해하고 기여할 수 있습니다.

The Remaining 5 % – What the Market Actually Wants

Productization Topics

  • Next.js
  • Monorepos / Turborepo
  • 기본 DevOps
  • CI/CD
  • Docker
  • Kubernetes (개념 수준)

이러한 스킬은 개발자를 엔지니어로 바꾸어 줍니다. 즉:

  • 구축하고
  • 배포하고
  • 유지보수하고
  • 확장할 수 있는

시장은 코드를 넘어 제품 전체 흐름을 이해하는 사람을 높이 평가합니다.

Final Thoughts

이 경로는 화려하지도, 빠르지도 않으며, 절대 완벽하지도 않습니다.

하지만 한 번이라도 스스로 완성한다면, 다시는 막히지 않을 것입니다. 새로운 프로젝트, 코드베이스, 면접을 두려워하지 않게 될 겁니다. 왜냐하면 이제는 튜토리얼을 따라 하는 것이 아니라 직접 만들 수 있기 때문이죠.

Back to Blog

관련 글

더 보기 »