웹 개발 테크트리 정리
준비
기초상식
- 호스팅
- 도메인
- DNS
- HTTP
개발환경
- OS : Mac, Win
- 텍스트 에디터 : VS Code, Intellij
- 브라우저 : Chrome, Firefox
- 터미널 : Git Bash, Zsh(맥), 기본
- 디자인 : Adobe XD, Figma
기본언어
HTML
- 페이지 구조
- 문맥에 맞는 태그
- 용도에 맞는 태그
CSS
- 기본 스타일
- 포지션
- 정렬 (Flex, Grid)
Javascript
- 변수
- 데이터타입
- 오브젝트
- 배열
- 함수
- 반복문
- DOM
특성선택
프론트엔드 FE
HTML
- 웹표준
- 접근성
- 호환성
CSS
- Flex box
- Grid
- 트랜지션 애니메이션
- 반응형 - Media query ★
(선택) SASS (CSS보다 생산성 높음)
- 변수
- Mixin
- 함수
- Nested
(선택) CSS Framework
- 부트스트랩 : Breakpoint 사용해서 기준으로써 반응형 레이아웃을 아주 손쉽게 구축 가능.
- Materialize
- Tailwind : 커스터마이즈 자유도가 상당히 높음
Javascript
- DOM : 만든 element를 object로 만들어서 각 property에 접근해서 수정가능
- Array Method : foreach, map, filter, reduce 등
- JSON : 데이터 받아올때 응답값을 JSON으로 받아오는 방법 등
- HTTP
- Fetch API : 서버와 통신해서 데이터 받아오는 방법
- 스코프
- 클로져
- 이벤트루프 etc
프론트엔드 프레임워크
프레임워크는 한 화면안에 여러 컴퍼넌트를 가지기 때문에
컴퍼넌트 끼리의 상태관리가 필요함. = Global State Management
- React
Context API
Redux - Vue
Vuex - Angluar : 앤터프라이즈 급 규모의 프로젝트에 적합
Shared Service
NgRx
Svelte : 컴파일러? 최근 인기 상승
Tool
- git : 협업
- repository : github, bizbucket
- 패키지 매니저 : NPM, Yarn~ 프론트앤트 프레임워크에서는 프로젝트에 사용할 모듈을 관리할때 사용
- 모듈 번들러 : Webpack, Parcel ~ 우리가 만든 js.view 같은 파일들을 번들링이 되면서 HTML,CSS,JS파일로 변환되어 나오게 되는데 이런걸 도와주는 것
- 브라우저 개발툴 : Redux, Vuex, network
- 확장프로그램 : lint(코드 깔끔, 정확, 오류없도록), live-server(개발 편리함 상승), snippets(단축 명령어)
SSR (Server Side Rendering)
SPA 같이 하나의 페이지 안에 모든 내용 담기고 바뀌면서 보여주는 게 아니라
서버에서 각각의 화면을 보여주는 방식
- SSR 사용하는 가장 큰 이유 : SEO (Search Engine optimization) 라고 불리는 검색 앤진 최적화 때문.
웹 크롤러가 JS 파일 읽을 수 없다는 단점을 극복하기 위해 있음.
React : Next.js
Vue : Nuxt.js
Angular : Angular Univeral
SSG (Static Site Generator)
JAMstack (JS APIs Markup)
클라이언트는 JS가 API를 통해서 비즈니스 로직 제공, 마크업으로 결과물 제공
해들리스 CMS나 서버리스 기술 함께 사용 가능
netlify, aws로 서비스 호스팅 가능
TypeScript
JS의 슈퍼셋. TypeScript 로 작성한 코드를 JS로 변환해서 사용하는 방식
js를 알고있다면 손쉽게 배울 수 있음
백엔드 BE
언어선택
- Node.js + Express
- Deno (Node.js 단점 극복하고자 나옴) + Oak, *
- Python : Django, Flask
- PHP : Laravel
- Java : Springboot
- C# : ASP.NET
- Ruby : Ruby on Rails
데이터베이스 - ORM (Object Relational Mapper)
- PostgresSQL - Mongoose
- MongoDB - Sequelize
- MySQL - SQLAlchemy
- MS SQL - Doctrine
- Firebse - Eloquent
- Elasticserach - JPA
RESTful API
데이터베이스를 통해 구축하게 되는데 프론트앤드와 통신하게 됨
특정 요청 받아서 특정 요청에 대한 데이터베이스 조회해서 응답해줌
GraphQL
페이스북에서 개발. API를 위한 쿼리 랭귀지로 사용됨.
싱글 endpoint가지고 있고, 필요한 데이터만 가지고 올 수 있다는 장점있음
쿼리 요청하는 방식은 JSON과 유사한 방식으로 요청하고, JSON으로 응답받음.
인증
- OAuth 2.0
- JWT
배포-Server
- 호스팅 : 국외, 국내
- 웹서버 : Nginx, Apache, IIS
- 컨테이너 : Docker, Kubernetes
- 이미지 : Cloudinary, S3
기타확장
모바일 앱
- Flutter : 구글에서 개발. 안드로이드, ios 두개의 플랫폼에 돌아가는 app 만들 수 있음.
- React Native : React 학습했다면 모바일앱 만들 수 있음. 아주 네이티브한 부분은 JS로 해야함.
- Ionic : JS 모바일
- Xamarin
- Kotilin, Java
- Swift, Objective-C
PWA (Progressive Web App)
- 웹이지만 앱처럼 사용할 수 있음.
- Service Workers 를 통해 오프라인으로도 사용 가능
- HTTPS 를 통해 통신해야함. 보안뛰어남.
- 네이티브 (플래쉬 화면, 빠른속도, 인스톨) 등의 빠른기능 사용 가능.
웹 어셈블리 Web Assembly
- Low level 바이트 코드 ~ 브라우저 단에서 담당해주는 역할 개발할때 사용
- 게임, 비디오, 이미지 수정 같은 JS가 처리하기 곤란한 것 개발할때 사용
- C++, Rust compile 와 같은 언어로 개발하면 웹 어셈블리로 컴파일 할 수 있게됨.
- Assembly Script 는 JS개발자의 경우 이걸로 개발하면 위와 같음.
데스크탑 앱
- 데스크탑에서 사용하는 응용프로그램 개발가능
- Electron : JS
- NW : Electron의 대체재 JS
- Tkinter : 파이썬
AI / 머신러닝
- Python
- TensorFlow.js
- Brain.js
음성인식
- Google Speech To Text
- HTML5 Web Speech API
'프론트엔드 개발 > 테크트리' 카테고리의 다른 글
| HTMl/CSS/JS 커리큘럼 (0) | 2021.09.09 |
|---|