[개발일기] 2022 웹개발 로드맵 총정리

내용 출처 : https://www.youtube.com/watch?v=TTLHd3IyErM 

• front-end 개발자가 되기 위해선 총 다섯가지를 학습해야한다
  • basic tools : 개발을 하기 위한 기본적인 툴
    • Computer
      • MacOS
      • Windows
      • Linux
    • Text Editor
      • VS Code : 강력한 extend와 무료 라이센스가 큰 장점
      • IntelliJ : 강력한 리팩토링 기능까지 지원하나 라이센스를 별도로 구입해야 함
      • Atom
      • Sublime Text
    • Browser
      • Chrome
      • Edge
      • Safari
      • Firefox
    • Terminal
      • Powershell
      • Bash
      • zsh
  • front-end : 프론트엔드 스킬
    • HTML
      • HTML은 웹의 Structure이다.
      • Tags
      • Page Structure
      • Semantic Tags : 이름 자체만으로 브라우저나 길 잃은 사람들, 지구 상의 원주민, 개발자, 수정자들에게 의미를 전달할 수 있는 태그
      • SEO : 검색엔진 최적화
      • Accessibility : 접근성
    • ★★★JavaScript
      • JS는 웹의 Behavior이다.
      • ES6 + Syntax
        • Basic
          • let, const
          • if, for, switch, while
          • function
          • object
        • Advanced
          • Prototype
          • Hoisting
          • Scope
          • Closure
      • Browser APIs
        • DOM Manipulation : 돔 요소를 어떻게 조작해야 할 지
        • Events : 어떻게 이벤트를 사용할 수 있는 지
        • Fetch API(Async) : fetch api를 통해 어떻게 서버에 있는 데이터를 가지고 올 수 있는 지
      • TypeScript : Type이 감싸고 있는 자바스크립트 프로그래밍 언어. 자바스크립트에비해 안전성이 추가됐으며 유지보수성이 높음. 규모가 큰 프로젝트에서는 무조건 사용
        • Types
        • OOP

      

      
      
      • JavascriptFramework
        • React
        • Vue
        • Angular
        • Svelte : 점점 성장하고 있는 프레임워크. React에서 Svelte의 장점을 반영시키려는 움직임이 있다고 함.
      • Static Site Generators (SSG) : 정적 사이트 생성기. 말 그대로 정적 페이지 기반 웹사이트를 만들어주는 도구이다. 컨텐츠 및 파일을 읽어 이를 html으로 변환시키는 기술을 제공한다. 이는 주로 회사 소개 글 또는 블로그 글처럼 내용이 변하지 않는, 즉 동적인 사이트가 아닌 웹페이지를 만들 때 사용한다.Gatsby의 구성도
        • Gatsby(React)
        • GridSome(Vue)
        • Ilty(JS)

      

      
      
      • Server Side Rendering(SSR) : 클라이언트에 요청이 있을 때 실시간으로 서버에서 페이지를 만들어주는 도구이다.
        • Next.js(React)
        • Nuxt.js(Vue)
        • Universal(Angular)
        • Sapper(Svelte)
    • CSS
      • CSS는 웹의 Presentation이다.
      • Styling
      • Layouts
      • Responsive Design : 반응형 디자인
      • Animation
      • Architecture
        • BEM : css로만 스타일을 정의할 경우 이름 등 여러가지 속성이 겹치며 충돌이 나는 경우가 있는데 이를 방지하기 위해 css에서 어떻게 클래스를 정의하면 좋을 지 정의한 아키텍쳐.
      • Preprocessors : CSS 전처리기. 반복적으로 정의하는 css를 방지하기 위해 등장. 변수처리가 가능함. 부모 자식 선택자가 있기 때문에 부모 > 자식으로 반복되는 css가 여러개 생성되는 것을 막을 수 있음. 모듈, 믹싱, 함수 또한 제공하고 있음.
        • Sass
        • Less
        • PostCSS
      • CSS Framework : 이미 만들어진 UI가 존재함
        • Bootstrap
        • PostCSS
        • Tailwind CSS
        • Material UI
        • Styled-Components : JS에 스타일을 정리하면 동적으로 스타일을 변경할 수 있어서 좋지만, 성능면에서 비교적 안 좋으며 비즈니스모델이 들어있는 JS에 style이 들어가기 때문에 유지보수가 까다롭고 보기에도 안 좋은 단점도 있다.
        • Bootstrap, Tailwind CSS, Material UI는 미리 만들어져있어서 제공되는 컴포넌트를 가져다 쓰는 프레임워크이며 PostCSS, Styled-Components는 직접 CSS를 커스터마이징해서 사용하는 프레임워크이다.
  • tools : 더 다양한 툴 (front-end와 병행해서 공부)
    • Version Control System
      • Git
        • GitHub
        • Bitbucket
        • GitLab
    • Package Manager : npm과 yarn은 상호 호환이 가능함
      • npm
      • yarn
    • Module Bundler : 소스를 배포할 때 압축, 배제, 용량 감축 등 배포시 보여줄 파일들을 정리하는 도구. JS Framework에서 자동으로 해줌.
      • Webpack
      • Rollup
      • Parcel
  • testing : 배포하기 전 테스트(더 나아가 자동화까지 할 것)
    • Test Pyramid
      • Jest
      • Cypress
      • Enzyme
      • react-testing-library
    • Good Test Principles
    • CI / CD
  • publish : 배포
    • Azure
    • Github Pages
    • Vercel
    • AWS
    • Netlify
    • Heroku