2021 웹 개발 테크트리 총정리

2021 웹 개발 테크트리 총정리

728x90

출처

www.youtube.com/watch?v=kjSZ7JKVdbQ

정리

기본기

기초 상식 - 호스팅, 도메인, 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

repository github bizbucket (협업)

패키지 매니저 (모듈 관리) NPM Yarn

모듈 번들러 (번들링을통해 html, css, javascript로 바꿔주는것을 도와줌?) Webpack Parcel

브라우저 개발툴 Redux Vuex network (console brower 개발툴)

확장프로그램 lint(깔끔 정확 오류없는 코드로 만들어줌) live-server(개발 편리, 코드 변경시 바로 뜸) snippets(생산성 단축 명령어, boiler plate만들어줌)

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/

웹서버

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

from http://devjun.tistory.com/115 by ccl(A) rewrite - 2021-03-10 17:00:32