유튜브 Web Development in 2021 - A Practical Guide를 보고 2021년의 웹 개발 트렌드를 정리해 보았습니다. 제가 프론트엔드 개발을 하므로 프론트엔드 관련 툴과 프레임워크 위주로 적었습니다.

SASS

CSS 전처리기로 변수, 믹스인, 함수, 네스팅 등의 다양한 기능을 제공한다.

추가적인 기능이긴 하지만 배우면 굉장히 유용하고 사용성이 높음. 배워두는 걸 추천함.

• 추천하는 유튜브 강의
  • Sass Crash Course
  • Responsive Portfolio Website
  • Fancy Form UI From Scratch

CSS & UI Frameworks

CSS 프레임워크는 웹사이트와 UI를 빠르게 생성할 수 있다는 점에서 굉장히 중요하다. 하지만 CSS의 기초를 튼실하게 다지는 것이 굉장히 중요하다. 하나만 알면 나머지도 비슷하므로 여러개를 배우려고 하지 말고 하나를 제대로 배울 것!

• Tailwind CSS: 최근 핫함. 부트스트랩 같은 거임. 하지만 굉장히 로우레벨의 설계가 가능함. 그리고 실제 CSS를 구현할 필요가 없다고 한다.

• Bootstrap: 지금 메인이 되고 있는 CSS툴. 배우기 쉬움.

• Materialize: Material Design에 기반한 스타일링 툴

• Bulma: 모듈화 & 경량화 가능

• 추천하는 유튜브 강의
  • Bootstrap Crash Course
  • Materialize Crash Course
  • Build your first tailwind css site
  • Bulma Crash Course
• Udemy Courses
  • Bootstrap 4 From Scratch
  • Materialize CS From Scratch

UI Design

• 추천하는 유튜브 강의
  • UI Design for developers

JavaScript

프론트엔드와 풀스택 개발자에게 절대적으로 중요한 언어. 클라이언트 사이트의 언어이다.

• 기본: 변수, 배열, 함수, 루프 등
• DOM & Styling: 요소들을 선택하고 조작함
• Array Methods: forEach, map, filter, reduce, etc
• JSON: JavaScript Object Notation

• HTTP Requests: Fetch API - GET, POST, PUT, DELETE

• Udemy courses
  • Modern JS from the beginning
  • 20 Web projects with vanilla JS
  • 50 Projects in 50 days

🐈‍⬛ Basic Frontend Deployment

• static hosting: netlify, Github pages, heroku
• CPanel Hosting, Inmotion, Hostagator, Bluehost

methods of deploying

• Git: continuous deployment by pushing to a repo
• FTP & SFTP: File Transfer Protocol(Slow)

• SSH: Secure Shel(Terminal)

• Domain Names: Namecheap, Google Domains, Enom
• Email Hosting: Namecheap, Zoho Mail, CPanel
• SSL Certificates: Let’s Encrypt, Cloudflare, Namecheap

Foundational Frontend Developer

• setup a productive development environment
• Write HTML, CSS & JS
• Use Sass & CSS framework(Optional)
• Create responsive layouts
• Build websites with some dynamic functionality and work with the DOM connect to 3rd party APIs with Fetch & understand basic HTTP
• Use Git with Github or some other Git repo(Bitbucket, etc)
• Deploy & manage a website or small web app

advanced

• Sharpen your JS skills
• Learn a frontend framework(React, Vue, Angular)
• Learn a server side language & technology(Node, Python, PHP, C#, etc)

⭐️ REACT

• state management: context, Redux, MobX
• 추천하는 유튜브 강의
  • React Crash Course
  • React Project Playlist
  • Redux Crash Course
  • React Context API

⭐️ TYPESCRIPT(Optional)

JS의 수퍼셋! 다양한 프론트엔드 프레임워크와 같이 사용될 수 있다

• Brings a “strict” type system to JS
• Makes your code more robust and less prone to errors
• Object oriented programming(classes, interfaces, generics, modules)
• Great for larger projects

Server SIde Rendering

• Next.js(React)
• Nuxt.js(Vue)

Static Site Generators

• Gatsby(React based)
• Gridsome(Vue based)
• Jekyll(Ruby based)

⭐️⭐️ 수준급 프론트엔드 엔지니어가 되기 위해

• 프레임워크를 활용한 인터페이스와 앱을 만들어 볼 것
• 컴포넌트와 글로벌 스테이트를 잘 활용할 것
• 백엔드와 JSON을 이용한 연결 및 통합
• 깨끗하고 효율적인 코드 작성

부가적인 사항들

• 타입스크립트를 활용한 개발
• 서버 사이드 렌더링
• 정적 사이트 생성기 사용

Backend

database

• PostgreSQL
• MongoDB
• MySQL
• Firebase
• ElasticSearch

Deployment, Servers & DevOps

Deploy

• Hosting platforms: Heroku, Digital Ocean, AWS, Azure, Vercel
• Web servers: nginx, apache
• Containers: Docker & Kubernetes, Vagrant
• Image & Video: Cloudinary, S3
• CI & CD : Jenkins, Travis CI, Circle CI

Mobile Development

• Flutter & Dart
• React Native
• Ionic
• Xamarin
• Kotlin
• Swift

Web Assembly

코드 한 줄도 작성하지 않고 웹사이트 생성이 가능!

• buble
• airtable

Progressive Web Apps(PWA)

모바일 프로그래밍없이 웹 어플리케이션 자체를 모바일에 다운로드받아서 관련 기능을 사용하는 것.

• built for all screen sizes

• Offline content & Service workers

• HTTPS

• native experience(fast, engaging, splash screens, installabel, etc)

• 추천하는 유튜브 강의

  • PWA with Vue.js

JAM stack

JAM이란 JS, API, Markup 세 개의 줄임말이다. 서버와 백엔드 없이도 풀스택을 구현가능하게 도와준다.

• JS: Next.js, Gatsby
• API: Headless CMS
• Markup: frontend 부분

Design Patterns

자주 발생하는 문제들을 해결하기 위해 일반적으로 재사용가능한 해결법들.

• Singleton Pattern
• Facade Pattern
• Bridge & Adapter Pattern
• Strategy Pattern
• Observer Pattern