웹앱 프로그래밍 어떻게 배울 것인가?
-
핵심 도구 : HTML, CSS, JS
-
학습 방법 : 일단 우당탕, 정리된 순서대로 학습 진행, 하이브리드
빠르게 배워야할 것
- 쉬운 것 부터...? 트렌디한 기술
나중에 배워야할 것
- 서버 네트워크 운영체제
반복해 배워야할 것
- js, 변화의 속도가 느린 것들
변하지 않는 것
- 네트워크 운영체제 보안 알고리즘 자료구조
느리게 변하는 기술
- 언어, 패러다임, 자료구조, 보안, 알고리즘
빠르게 변하는 기술
- 프레임워크 라이브러리 ui ux 디자인패턴
- 유행타나? 시간의 흐름에 따라 도태 ...변환
- 새로운 것이 계속 나온다(특히 프론트엔드)
4가지 프로그래밍 역량
- 일관성
- 유연성
- 확장성
- 독립성
익스텐션 : 확장 프로그램, 플러그인
javascript 변천사
- 넷스케이프라는 브라우저에 1995년에 탑재 (liveScript)
- 웹 기술이 인터넷 보급과 함께 발전
- explorer 에도 탑재 (Jscript)
- ecma에서 공식적으로 개발
- 인터넷 비즈니스가 발전
- 개속 새로운 버전을 발표/ flash player을 통한 웹 개발이 유행
- 2007 애플 아이폰 no flash player 선언
- 모던 javascript 에 대한 논의가 많았었다
- 연도 표기법 2015년부터 es2015 //다양한 브라우저
- ecmaScript 5.0
- 변환기 트랜스 파일러 //5.0버전으로 변환해서 웹 브라우저에서 동작
javascript를 다 알고 typescript의 추가적인 기능을 가지고 개발
웹 어플리케이션의 구성 요소
필수 불가결 : HTML, CSS, Javascript
html :ui
css :비주얼
- 정적/페이지/문서 : html + css
- 앱 : 사용자와 상호작용을 주고 받을 수 있다.
- 가장 일반적인 설명: 웹앱을 실행하기 위해서는 사용자가 브라우저를 실행 -> 주소 입력 -> 웹사이트에 접속 -> 파일이 물리적으로 전송 브라우저가 파일을 해석해서 실행
- 브라우저 : 웹앱을 실행시키는 역할, 런타임환경을 제공하는 환경
- 런타입: 실행시간
브라우저만이 런타임환경을 제공했지만 10년 전부터 node.js 등
다양한 환경이 개발되어 존재하게 되었다.
js를 이용해서도 html을 조작할 수 있으며, ui를 만들기 위해서는 html 형태가 만들어져 있어야하기에 어디에서 언제 만드느냐가 중요!
웹서버가 html 파일을 브라우저에 전송하고 브라우저가 웹앱을 실행한 후에도 ui가 조작된다(js)
- 클라이언트 사이드 렌더링: 브라우저에서 실행되는 js로 html를 주도적으로 만들어서 ui를 표현하는 방법
- 서버 사이드 렌더링 : 서버에서 주도적으로 html를 만들고 브라우저에 전송
- 앱의 성격에 따라서 더 효과적인 방법이 있을 수 있음
js 캔버스 : 그래픽 시스템 (html ,css로 표현 가능) => 차트 애니메이션 표현 (미디어 파일,웹 워커,웹 어셈즐리)
개발환경
vs code -> node.js -> parcel -> typescript
- npm install -g parcel-bundler //parcel 설치
- npm install -g typescript //typescript 설치
화이팅~