[IT] 웹개발 프론트엔드 로드맵 (by 드림코딩 Youtube)

안녕하세요.

개발직무에 관심이 많아 책과 유튜브, 검색 등을 통해 공부하고 있습니다.

개발안에서도 웹, iOS, 안드로이드 등 여러 운영체제가 있어 고민이 많습니다. 내가 어떤 개발자가 되고 싶은지 무엇을 개발하고 싶은지를 정해야 하는데 아직 감이 잡히지 않아 입문하기 쉬운 웹으로 시작해보려고 합니다.

 

비전공자로서 무엇부터 시작해야 하는지 참 어렵기도 하고, 사람마다 얘기하는 것도 달라 혼란스럽습니다.

그러던 중 유튜브에서 '드림코딩'채널의 '웹개발 로드맵 총정리 (공부순서 알려드림)'이라는 제목의 영상을 접하게 되었습니다. 입문자로서 무엇부터 시작해야 하는지부터 드림코딩님의 현업경험까지 녹여낸 영상으로 유익하게 보았습니다.

다시 한 번 '드림코딩'채널에 감사의 말씀드립니다.

 

*이 글은 '드림코딩'님의 유튜브 영상을 보며 혼자 정리하고 공부하기위한 목적으로 작성된 글입니다.

 문제될 시 삭제하겠습니다.

---

Front-end Roadmap

총 5가지 단계로 공부하면 좋다고 합니다.

1. Basic Tools : 개발을 하기 위해 기본적인 툴들은 무엇인지 어떻게 사용하면 되는지와 익숙해질 정도로 익히는 단계

2. Front-end : 프론트 엔드 개발을 위해 실질적으로 필요한 스킬들을 배워나가는 단계

3. Tools : 개발의 생산성을 높여줄 수 있는 다양한 툴들에 대해서 배우는 단계 (Front-end 단계와 병행하는게 좋음)

4. Testing : 제대로 동작하고 있는지 테스트 코드를 작성해서 배포과정과 묶어 업데이트할 때마다 배포하기전에 자동으로 테스트가 되도록 자동화하는 단계

5. Publish : 개발한 웹 어플리케이션이나 사이트가 유저들에게 어떻게 어디에 배포하면 좋은지 배우는 단계

▶ 1. Basci Tools

1-1. 당연히 컴퓨터가 있어야 하고 원하는 운영체제를 고르시면 됩니다. (MacOS, Windows, Linux 등)

1-2. 코드를 작성할 Text Editor가 필요합니다.

 - VS Code (추천!) : '드림코딩'채널에 웹 개발에 필요한 필수 Extension과 단축키에 대한 영상이 있으니 참고하세요!

 - IntelliJ : 유료

 - Atom

 - Sublime Text

1-3. 웹개발에 필수적인 Brower가 필요합니다.

 - Chrome (추천!) : 가장 많이 쓰이고 있고, 강력한 개발툴 지원도 있기때문에 추천

 - Edge

 - Safari

 - Firefox

1-4. 개발자들에게 필수적인 Terminal이 필요합니다. Windows나 MacOS에서 기본적으로 제공해주는 터미널을 사용해도 무방합니다. '드림코딩'채널에 터미널에서 많이 쓰이는 명령어를 정리한 영상이 있으니 참고하세요!

 - Powershell

 - Bash

 - zsh

▶ 2. Front-end

2-1. HTML : 아래의 모든 것들을 하나씩 꼼꼼하게 본다기 보다 전체적인 흐름을 이해하는게 중요

 - HTML Tags : 어떤 태그가 있고 어떤 걸 만들 때 이런 태그를 사용하면 되는구나에 대해 알아야 함

 - Page Structure : 페이지의 구조를 어떻게 잡아나갈 것인지?

 - Semantic Tags

 - SEO : 사용자가 특정한 키워드로 구글이나 네이버에 검색했을 때 우리 웹사이트가 나올 수 있도록 신경써서 개발

 - Accessibility : 접근성

2-2. CSS

 - Styling : 색상, 배경색, 폰트 등 어떻게 변경할 수 있는지?

 - Layouts : 아이템을 배치할 수 있는 레이아웃

 - Responsive Design : 반응형

 - Animation

CSS 심화
 - Architecture
  → BEM : CSS로만 Styling하다보면 이름충돌이 많이 발생. CSS에서 어떻게 이름을 작성하면 좋은지 방법을 규정한 아키텍쳐 (이런식으로 작성했을 때 어떤 점이 편한지 이해하는게 중요)
 - Preprocessors (전처리기) : 기존의 CSS문법을 벗어나서 생산성을 높여주는 전처리기들만의 정의한 문법입니다. 이 문법을 다시 순수 CSS문법으로 변환해주는 전처리기입니다.  순수 CSS문법은 반복적으로 작성하는 부분이 많다는 문제점이 있습니다.
  → Sass
  → Less
  → PostCSS
 - CSS Framework : 미리 만들어진 UI요소를 Class이름으로 지정하여 간편하게 사용할 수 있습니다.
  → Bootstrap
  → PostCSS
  → Tailwind CSS
  → Material UI
  → Styled-Components

2-3. JavaScript

 - ES6 + Syntax (추천!) : 문법

  → Basic = ①let, const ②if, for, switch, while ③function ④object

  → Basic = ①Prototype ②Hoisting ③Scope ④Closure

 - Browser APIs (추천!) : 함수 및 어떻게 네트워크 통신을 할 수 있는지? 어떤 API가 있는지?

  → DOM Manipulation

  → Events

  → Fetch API (Async)

JavaScript 심화
 - TypeScript (추천!) : JavaScrpit에 Type이 더해진 한단계 큰 프로그래밍 언어 (안전성 및 유지보수성이 좋다)
  → Types
  → OOP
- JavaScript Framework : 반복적으로 처리하는 로직들이 있고, 로직들을 처리해서 이 때 UI에 업데이트해야지 이런 공통적인 것을 처리해주는 것이 자바스크립트 프레임워크입니다.
  → React (추천!)
  → Vue
  → Angular
  → Svelte (점점 뜨고 있는 프레임워크)
여기까지가 SPA(Single Page Application)를 위한 프레임워크나 개발방법입니다. 이렇게만 개발하면 SEO(Search Engine Optimization)에 취약하네, 시간이 오래걸리네 등 문제가 발생합니다.  이 때 사용하면 좋은 프레임워크가 있습니다. 아래와 같이 서버에서 사이트를 미리 만들어 두는 방법이 있고,
- Static Site Generators (SSG)
  → Gatsby (React)
  → GridSome (Vue)
  → 11ty (JS)
클라이언트의 요청이 있을 때 실시간으로 서버에서 사이트를 미리 만들어주는 방법이 있습니다.
- Server Side Rendering (SSR)
  → Next.js (React) (추천!)
  → Nuxt.js (Vue)
  → Universal (Angular)
  → Sapper (Svelte)

▶ 3. Tools

3-1. Version Control System : 로컬에서 작업해나갈 때 버전 하나하나 관리할 수 있습니다.

 - Git : 로컬에 저장되어 있는 버전을 서버에 올릴 수 있는 서비스

  → GitHub

  → Bitbucket

  → GitLab

3-2. Package Manager : 외부 라이브러리를 설치하고 관리할 수 있게 해주는 서비스

 - npm

 - yarn

3-3. Module Bundler : 사용자에게 배포할 때 작성한 모든 소스를 배포하는게 아니라 일부는 제외하고 일부는 압축하여 사이즈를 작게 만드는 서비스

 - Webpack

 - Rollup

 - Parcel

▶ 4. Testing

4-1. Test Pyramid

 - Jest

 - Cypress

 - Enzyme

 - react-testing-library

4-2. Good Test Principles

4-3. CI/CD : 작성한 테스트 코드가 배포전에 항상 실행되어서 실패한 곳이 있다면 배포가 되지 않도록 해주는 서비스

▶ 5. Publish : 각 플랫폼에 어떻게 해야 배포할 수 있는지 정도로만 공부

5-1. Github Pages

5-2. AWS

5-3. Azure

5-4. Netlify

5-5. Heroku

5-6. Vercel

 

여기까지 공부를 마치면 자신이 어디가 부족한지 어느 부분을 더 공부하고 싶은지 알게 될 것입니다.