1. 자바스크립트의 개요
(1) 자바스크립트의 발전
- 자바 스크립트(Java Script) : 웹 브라우저에서 사용하는 프로그래밍 언어
- 웹을 정적인 영역에서 동적인 요소로 바뀌게 한 언어, 메모장에서 PPT로
- 서버쪽에 Node.js가 사용이 가능해지면서, 자바의 활용성이 늘어남
- Node.js 빠른 속도로 구매 비용과 유지 비용이 1/10 수준, 데이터 처리와 예외 처리 들이 조금 복잡함
- 비동기 = 콜백 함수, 순차적 방식이 아님
- Node.js 모든 모듈이 처음부터 비동기 기반의 프로그램을 만들 수 있도록 설계되어 초보자도 쉽게 프로그램을 만들 수 있음
- 스레드(Thread) : 효율적인 비동기 방식으로 장보기르 프로그래밍 언어로 구현하는 방식
(2) 자바스크립트의 특징
- 모든 웹 브라우저에서 작동함 (Safari, Explorer, Chorme ...)
- 웹 브라우저에서 실행 결과를 즉시 확인할 수 있음
- 풀스택(프론트엔드, 백엔드) 웹 개발 뿐만 아니라 다양한 용도로 프로그램을 만들 수 있음
- 다양한 자바 스크립트 공개 API를 사용할 수 있음
- 다양한 라이브러리와 프레임워크를 사용할 수 있음
- 프레임워크 사용은 기본으로 제공하는 소스를 수정하거나 추가하는 방법으로 웹 프로그램을 만들 수 있게 미리 준비되어있는 환경에서 사용할 수 있음
- Front End : React, Vue, jquery, ajax / Back End : Node.js 사용
- 자바와 자바 스크립트는 다른 언어
- ECMA Script : 자바 스크립트를 기반으로 표준화된 스크립트 언어, 자바 스크립트는 ECMA Script를 따르는 가장 유명한 언어
(3) ES6에 대하여
- 1990년대 중반부터 자바스크립트가 많은 곳에서 사용되자 유럽 컴퓨터 제조 협회(ECMA)는 자바 스크립트를 ECMA Script라는 이름으로 표준화
- 2015년도 ECMA Scirpt를 ES6라고 통칭
(4) 자바스크립트로 할 수 있는 일
- 웹 클라이언트 어플리케이션 개발 : 웹(HTML) + 자바 스크립트, 자바 스크립트
- 웹 서버 어플리케이션 개발 : 클라이언트 컴퓨터에서 서버(C#, Java, 루비, 파이썬, php 등)으로 보냄
- 페이스북의 Reate Native : 자바 스크립트로 네이티브 어플리케이션을 개발
- 데스크톱 어플리케이션 개발 : 일렉트론 모듈
- 데이터베이스 관리 : NoSQL, Oracle, MSSQL ...
2. 웹 개발
(1) 클라이언트와 서버
- 프론트 엔드 개발에서 자바 스크립트 종류 : React, Vue.js, Angular ....
- 백 엔트 개발에서는 C, C#, Java...
(2) 웹의 개념
- 웹 플랫폼 = 서버 프로그램
- 웹의 구성 : MVC 모델 = Model, View, Controller의 약자임
- 클라이언트와 서버 사이의 작업을 Controller라고 지칭하며, 이는 URL로 보내짐
- View는 클라이언트 컴퓨터의 UX UI를 이용하여 시각화 작업을 진행하는 것을 의미
- Model은 서버가 클라이언트에 받은 내용을 서버에 보내고, 원하는 결과값을 받는 작업을 의미
- HTML(MarkUp Language) : 구조적인 의미를 나타냄, 큰 영역으로 <html></html>, <head></head> 열고 닫고가 확실히 있어야 함, 마크업 언어로 웹의 기본을 담당
- 관련 정보 정리 사이트 : http://www.w3schools.com/html
- CSS(Cascading Style Sheet) : 종속형 시트, 꾸미기 기능을 가진 악세서리
(3) 웹 프로그래밍 언어와 종류
- Node.js : 네트워크 어플리케이션에 강한 서버 사이드 개발에 사용되는 개발 플랫폼, Non-blocking I/O와 단일 스레드 이벤트 루프를 이용한 높은 처리 속도가 특징, V8 엔진에서 동작
- Node.js URL : http://nodejs.ord/ko
- Vue.js : 프론트엔드(사용자 인터페이스 개발)을 위한 프레임워크
- Vue.js URL : http://v3-docs.vuejs-korea.org
- React : Facebook에서 제공해주는 프론트엔드 라이브러리, 싱글 페이지 어플리케이션이나 모바일 어플리케이션 개발 시 토대로 사용될 수 있음, 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있어 많이 사용됨, 데이터 프름이 한방향으로 흐르는 단방향 데이터 흐름, Props와 State를 사용함 JSX라는 자바스크립트를 확장한 문법을 사용함
- React URL : http://ko.legacy.reactjs.org
- Angular : Google에서 만든 SPA(Single Page Application) 방식의 프론트엔드 개발을 위한 자바 스크립트 프레임워크, 프론트엔드 개발에 필요한 대부분의 기능을 갖추고 있음, 사용언어는 TypeScript/ES6
- Angular URL : http://angular.kr
(4) 콘솔창에서 자바 스크립트 사용
- 웹 브라우저에는 자바 스크립트 소스를 실행할 수 있는 자바 스크립트 엔진이 포함되어 있음
- 웹 브라우저의 콘솔 창을 통해 간단한 자바 스크립트 소스를 실행해 볼 수 있음
- 웹 개발자 도구 창에서 [콘솔] 선택 = (윈도우) ctrl+shift+j = (맥) option+command+j = (크롬) F12
- 가장 쉽게는 이렇게 확인할 수 있음
3. 개발 환경 구축
- vs.code 사용
- 설치된 Node.js 버전 확인 : Window+R >> cmd >> Enter >> node - v 입력
4. 기본 실습
(1) 단축키, 기본 셋팅, VS 삭제 및 초기화하기
- ctrl+P : 파일이나 기호를 탐색
- ctrl+shift+tap : 마지막으로 연 파일 접근
- ctrl+shift+P : 편집기 명령으로 바로 이동
- ctrl+shift+O : 파일의 특성 기호로 이동
- ctrl+G : 파일의 특정 행으로 이동
- ctrl+P >> ? : 명령창에서 행할 수 있는 목록창이 나옴
- ctrl+shift+M : 상태표시줄 에디터 하단에 현재 상태를 표시
- ctrl+S : 키보드에 Shortcut 열람
- ctrl+, : 기본 설정(VS Code의 모든 설정은 파일>기본설정>설정 에 저장)
- ctrl+shift+X : 확장 프로그램(확장 기능 마켓 플레이스에서 다운로드해서 사용)
- ctrl+B : 사이드바 전환
- ctrl+K, Z : 젠모드
- ctrl+alt+up, ctrl+alt+down : 행복사
- ctrl+\ : 나란히 편집(에디터를 둘 또는 셋으로 나란히 놓고 사용할 수 있음)
- ctrl+shift+[, ctrl+shift+] : 코드 접기, 펴기
- ctrl+shift+V : 마크 다운 미리 보기
- ctrl+P 파일 Find 및 Command를 입력할 수 있는 창이 생김, 바로 Command를 입력하고 싶은 경우 F1
- F1 > Theme 입력 후 테마 변경 가능
- IDE 세팅 설정 변경 : ctrl+P 입력 후 setting.json 키워드 입력 > 기본 설정 : 사용자 설정 열기 > 좌측 : 변경 가능한 세팅 목록이 나옴, 우측 : 커스터마이지할 세팅을 json 형태로 입력
- setting.json : 자동 완성 기능 제공, ctrl+space를 누르면 option을 선택 가능
- vs Code 삭제 및 초기화 하기 : User 자신의 사용자 이름안에 .vscode 폴더 삭제 > AppData에서 Code라는 폴더 안의 모든 내용 삭제 (예 : C:\User\[사용자]\Roaming\Code) > VS Code 프로그램 삭제 후 재설치 진행하여 초기화 완료
(2) 유용한 기능, 글꼴, 익스텐션 설치
- Peak : F12(워프), alt+F12(같이 보기)
- Refactoring : ctrl+shift+R
- Rename Symbol : ctrl+H, 우클릭(Rename Symbol)-F2
- Snippets : React Snippets
- Muti-cursor : alt+click
- Emmet : Emmet 명령어+tab
- 하이라이트 : ctrl+L
- 코드 한줄 내리기 : alt+방향키
- 워치 워프 : ctrl+방향키
- 다른 파일 이동 : ctrl+P
- 터미널 : ctrl+'(백틱)
- 한글까지 지원하는 D2Coding 글꼴 추천
- D2Coding URL : http://github.com/naver/d2codingfront