2021 웹 개발 테크트리 총정리

출처 

www.youtube.com/watch?v=kjSZ7JKVdbQ

 

Java & Spring을 사용하는 제가 사용할 기술 정리

devjun.tistory.com/116?category=957424

Java & Spring Developer RoadMap in 2021

 

모든 것을 다 공부할 필요는 없습니다.

웹 개발자로서 공통적으로 필요하다고 생각하는 것은

HTML, HTTP, DNS, 도메인, 호스팅 등의 기본기

사용하는 언어에 대한 이해 및 자료구조와 알고리즘

Javascript, RESTful API, Git, GIthub등등

 

FE라면 더 깊은 Javascript의 이해, css, SASS, TypeScript등 | 브라우저 측면의 고려가 필요

BE라면 css 프레임워크(개인 프로젝트시), Database, ORM, | 서버 측면에서 서버의 부하나 데이터베이스를 고려가 필요하다고 생각합니다.

 

물론 취업하는 도메인에 대한 지식

ex) 금융, 의학, 컨텐츠, 메일, 문서, 쇼핑몰, 자체 솔루션... else

의 이해도 필요합니다.

---

이미지 PDF File

 

code-scalper.github.io/web-2021-roadmap/web-2021.pdf

 

---

기본기

기초 상식 - 호스팅, 도메인, DNS, HTTP
개발환경 - Mac, Win
텍스트에디터 - Intellij or Eclipse or VS Code
터미널 - Git Bash or powershell, Zsh(mac)
디자인 - Adobe XD, Figma

HTML - 페이지 구조, 문맥에 맞는 태그, 용도에 맞는 태그 (Sementic Web)
CSS - 기본 스타일, 포지션, 정렬(Flex, Grid)
Javascript - 변수, 데이터타입, 오브젝트, 배열(ES6), 함수, 반복문, DOM(Document Object Model)

---

프론트엔드 (Front-end)

 

• HTML - 웹표준, 접근성, 호환성
• CSS (optional) - Flex box, Transition Animation, 반응형(Media query)(이건 알아두시는 편이 좋음)
• CSS Framework - Bootstrap5(저는 이거 쓸것), Materialize, Tailwind(Customizing 자유도 높음)

Javascript

• DOM
• Array Method
• JSON
• HTTP
• Fetch API

Javascript에서 더 알아야 할 것

• Scope
• Closer
• EventLoop
• etc...

프론트엔드 프레임워크 (SPA)
형태관리 이유

한 화면안에 여러가지 component  => 또다른 component로 나눠지면 복잡해짐  =>

상태공유를 손쉽게 도와줌(Global State Management)

 

• React(인기, 취업보편) - 형태관리 ex) Context API, Redux
• Vue(React보다 조금 쉽다고함 React와 마찬가지로 대중적, composition API) 형태관리 ex) Vuex
• Angluar(완성도 높음, 난이도 높음, EnterPrise급 대규모 프로젝트) - 형태관리 ex) Shared Service, NgRx
• Svelte

프론트엔드 프레임워크 툴

 

• git : git-scm

SSR (Server Side Rendering) 
서버에서 각각의 화면을 보여줌
이를 사용하는 가장 큰 이유 (SEO)(Search Engine Optimization)= 검색엔진 최적화
spa의 js파일을 web Crawler가 읽을 수 없어서 seo에 단점이 있음, 이를 보완하기 위해서 ssr사용

유튜브 드림코딩 엘리 spa ssr등 정리 link :

www.youtube.com/watch?v=iZ9csAfU5Os

SSR Framework

• Next.js
• Nuxt.js
• Angluar Universal

SSG (Static Site Generator) (나온지는 꽤 됐지만 발전으로 인기) 
SSG 란? 

html을 정적 사이트 생성기를 통해 static html 생성 - JAMstack의 개념과 함께 다룸
JAMstack (Javascript APIs Markup stack)개념과 함께 사용

 

JAMstack이란?

어떤 언어나 프레임워크가 아닌 사이트를 구성하는 공식 개념
Client는 javascript가 처리 API를 통해 비지니스 로직을 제공 Markup으로 결과물 제공

Headless CMS, Serverless, netlify or aws등의 provider로 서비스를 호스팅 할 수 있음

 

SSG

• Gatsby
• Gridsome
• 11ty
• CMS

TypeScript (자바스크립트의 Superset)
javascript를 숙지하면 배우기 쉬움
한번도 안해본 사람은 있어도 한번만 쓰는 사람은 없다고 함

 

백엔드 (Back-end)

언어

• Node.js - Express (javascript)
• Deno - Oak, * (node.js 단점 보완을 위한 serverside 기술)(나온지 얼마 안됨)
• Python - Django, Flask (여러분야 두루두루 쓰임)
• PHP - Laravel (Small Business)(라라벨은 뛰어난 프레임워크)
• Java - Springboot (Spring & Springboot 한국은 자바공화국)
• C# - ASP.NET
• Ruby - Ruby on Rails

데이터 베이스

• Relational database
  
  • PostgresSQL
  • MySQL
  • MS SQL
• Document database (특징 : NoSQL, 스키마 프리(Schema-Free), 비 관계형 데이터베이스)
  • MongoDB
• Cloud기반
  
  • Firebase (큰 프로젝트 무리, 작은 비지니스 굳)
• 검색엔진 기반 DB
  
  • Elasticsearch

ORM (Object Relational Mapper)
개념

객체의 관계에 의한 맵핑이 이루어진 기술
SQL쿼리를 직접 작성하는 것이 아니라 객체 관계에 따라서 쿼리를 대신 날려주는 Mapper
특징 : 생산성 + 환경 변화에 대처하기 쉬움

 

• Python : Mongoose, Sequelize SQLAlchemy
• PHP : Doctrine, Eloquent
• Spring : JPA

RESTful API
개념

프론트 엔드와 통신 - 특정 요청에 대한 DB를 조회하고 요청 값을 날려줌
특정 영역이나 특정 EndPoint(주소)로 응답을 요청받고 응답을 해줌

RESTful API 대체위한 기술

 

Graph QL (Facebook에서 개발)

API를 위한 queryLanguage로 사용
single endpoint를 가지고 있고 필요한 데이터만 가져올 수 있다.
쿼리를 요청하는 방식은 JSON과 흡사한 형태로 요청하고
넘겨받은 데이터는 JSON으로 넘겨받음
Javascript, JSON알면 쉽다고 하고, REACT등의 프론트엔드 프레임워크에 적용이 쉬움
얄팍한 코딩사전 graph ql 개념 링크

www.youtube.com/watch?v=EkWI6Ru8lFQ

 

 

인증

• OAuth 2.0
• JWT(JSON Web Token)

배포 - Server

호스팅 : 국외(AWS), 국내(Cafe24, 가비아, 네이버Cloud 등등)
국내 호스팅 시장 점유율

ko.hostadvice.com/marketshare/kr/

대한민국의 웹 호스팅 시장 점유율 2021 | HostAdvice

 

웹서버

• Nginx
• Apache
• IIS

컨테이너

• Docker
• kubernetes

이미지  

• Cloudinary
• S3(AWS)

 

---

기타 확장

모바일 앱 
Native한 언어 : 
Ionic(Javascript), Xamarin(C# .NET), Kotilin & Java, Swift & Objective-C
Flutter(Dart) Android & IOS 둘다 돌림
React Native(React 써봤으면 쉬움)

PWA (Progressive Web App)
개념 : 웹이지만 앱처럼 사용할 수 있는 웹앱
Service Workers : Service Workers를 통해 오프라인에서도 사용
앱처럼 실행 : 아이콘을 통해 앱처럼 실행
HTTPS : HTTPS를 통해 통신해야하기에 보안도 뛰어남
네이티브 : Flash화면이나 빠른속도 Install등의 네이티브 기능 사용

웹 어셈블리 (Web Assembly)
Low level ByteCode
브라우저딴에서 담당해주는 역할을 개발할때 사용
게임 (자바스크립트 곤란)
비디오, 이미지 수정 (자바스크립트 곤란)
C++, Rust compile -> Web Assembly로 컴파일
Javascript 개발자일 경우 - Assembly Script

데스크탑 앱
Electron (Javascript) - VSC, VS Code, Skype, Postman등이 일렉트론으로 제작됨
NW (Javascript) - 일렉트론 대체제
Tkinter (Python)

AI / 머신러닝

• Python
• TensorFlow.js
• Brain.js

음성 인식

• Google Speech To Text
• HTML5 Web Speech API