2022년 웹 개발 로드맵 총정리 (공부순서 알려드림)

풀스택 과정을 공부중입니다.

그런데 프론트엔드 언어와 백엔드 언어를 같이 배우니까 너무 헷갈립니다...

그래서 저를 위해서 정리했습니다!!! 

 

<Front-end Roadmap>

 

1.basic tools

* computer: mac OS / Windows /Linux

* text editor: VS Code/ IntelliJ/ Atom /sublime Text

* Browser : Chrome/ Edge / Safari/ Firefox

* Terminal : Powershell / Bash / zsh

 

2.Front-end

* HTML: HTML Tags / Page Structure/ Sematic Tags / SEO / Accessibility(접근성)

 

* CSS: Styling/ Layouts / Respomsive Design / Animation

          => Architecture(BEM)/ Preprocessors(Sass, Less , PostCSS)

          => CSS Framework(Bootstrap, PostCss, Tailwind CSS, Material UI, Styled-Components)

* JavaScript: ES6+ Syntax ->  basic (let,const / if, for,swirch,while function, object)

                                                 Advanced (Prototype/ Hoisting/Scope/Closure)

                   Browser APIs ->  DOM Manipulation , Events, Fetch API(Async)

  JavaScript Framework => React , Vue, Angular, Svelte

                    => typeScript (Types , OOP)

Static Site Generators(SSG) => Gatsby(React), GridSome(Vue),11ty(JS)

Server Side Rendering(SSR) => Next.js(React) / Nuxt.js(Vue) / Universal(Angular)/ Sapper(SveIte)

 

3.Tools -> Version Control System => Git(GitHub, Bitbucket, GitLab)

             -> Package Manager (npm, yarn)

             -> Module Bundler (Webpack, Rollup, Parcel )

4. Testing   [ Test Pyramid ] => Jest / Cypress / Enzyme / react-testing-library

                  [ Good Test Principles ]

                  [ CI/CD ]

 

5. Publish (Azure, Github Pages, Vercel,  AWS, Netlify, Heroku

 

입니다