반응형 웹
화면의 크기에 따라 컨텐츠의 배치를 다르게 해서 동일한 컨텐츠를 사용할 수 있도록 디자인 하는 것
CSS의 Media Query(@media ~)와 meta 태그의 viewport 속성을 직접 설정해서 구현하거나 bootstrap 같은 외부 라이브러리를 사용하여 구현
JavaScript
웹 페이지에 동적 처리를 향상시키기 위한 목적으로 탄생한 언어 - 넷스케이프에서 개발
문법적으로는 Java와 아예 관련이 없다. Java의 몇 몇 클래스를 가져와서 사용했다.
기본적으로 웹 브라우저 내에서만 동작한다.
컴파일하지 않고 웹 브라우저에 있는 JavaScript Interpreter Engine이 해석해서 실행한다.
유니코드를 사용하고 대소문자를 구분한다.
동적 바인딩(Dynamic Binding) : 실행할 때 메모리의 크기가 결정됨. 이름을 만들 때는 메모리 공간 확보를 하지 않고 실제 데이터가 대입될 때 메모리 공간을 확보한다.
객체 기반 언어: class를 만들지 않고 바로 객체를 생성해서 사용하는 것이 가능
최근에는 클래스를 만드는 문법이 추가 - ES6, TypeScript
라이브러리
JQuery
크로스 브라우징(하나의 코드로 여러 브라우저에서 수행되도록)을 지원하기 위해 등장함. 최근에 거의 안씀
express.js, node.js
Application Server를 만들기 위한 라이브러리
angular, react, vue.js
SPA(Single Page Application) 구현을 위한 라이브러리. Angular는 업데이트 중단을 선언했다.
bootstrap
반응형 웹 디자인을 쉽게 해주는 라이브러리
react-native, ionic
모바일 앱 개발을 위한 라이브러리. IOS는 무조건 맥에서만 가능하다
eletron
PC용 앱 개발
작성
- 외부에 작성해서 불러들이는 방식
script src 태그에 url을 작성한다.
javascript는 js를 주로 사용
typescript는 ts를 주로 사용
react는 jsx를 사용 - html 파일 내부에 스크립트 영역을 만들어서 사용
규칙
HTML와 JavaScript는 위에서 부터 읽어서 순차적으로 실행
HTML에 작성된 태그들은 JS 로딩 후 실행해야 한다.
태그 등장 이후 또는 load 이벤트 발생이후
JS는 줄 단위로 읽어서 번역하기 때문에(인터프리터) 한 번에 실행해야하는 코드를 한 줄에 작성해야 하는데 한 줄에 2개 이상이 올경우 이를 구분하기 위해서 ;으로 구분해야 한다.
한 줄에 하나의 명령문만 오는 경우에는 ;를 사용하지 않아도 하지만 가독성/관습 때문에 ;쓰는게 좋다.
<![CDATA[]]>에서 []안에 작성한 내용은 해석하지 않고 하나의 문자열로 판단한다.구성요소
- Keyword(예약어)
Javascript에서 의미를 부여한 단어
의미변경이 안됨
Control Charcter(제어문자): 프로그래밍 언어에서 \ 다음에 영문자 하나를 추가해서 기능을 부여한 문자
\n : 줄바꿈
\t : 탭
\' : 작은 따옴표
\" : 큰 따옴표
\\ : \
\0 : null - Identifier(식별자)
사용자가 의미를 부여한 단어
Keyword는 사용하면 안됨.
숫자로 시작하면 안되고 특수문자는 _ 와 $만 가능하고 중간 공백은 안된다. Variable : 데이터에 붙인 이름 (변수) - Data
Literal : 사용자가 직접 입력하는 데이터
숫자의 경우는 정수와 실수 형태로 작성 : 19, 28.4 -> 10진수 형태로 작성(Decimal)
문자열의 경우는 작은 따옴표나 큰 따옴표 안에 기재
JS는 문자와 문자열을 구분 X
boolean은 True / False를 보유한다. null : 가리키는 것이 없다. (데이터가 존재하지 않는 것과는 다르다) - 출력 >브라우저 화면에 출력
- Data의 분류
>Immutable Data (변경 불가능한 데이터)와 Mutable Data (변경 가능한 데이터)
>Scala Data(단일 데이터)와 Vector Data(여러 개의 데이터)
이름에는 하나의 데이터만 매핑할 수 있다.
Scala Data의 경우 이름이 데이터를 의미하지만 Vector Data의 경우 별도의 무성신가가 추가되어야 데이터를 의미한다. [Index] / .이름
>데이터의 모양에 따른 분류
정형데이터 : 모든 데이터의 모양이 일정 - class, RDBMS
비정형데이터 : 데이터의 모양이 일정하지 않은 것 - Map, NoSQL
반정형데이터 : 모양은 일정하지 않은 것 처럼 보이지만 정형으로 만들 수 있는 데이터 - xml, json 등 - var, let, const
let : 동일한 scope 안에서 동일한 이름의 let 변수 선언 불가능. 사용만
const : 선언과 초기화를 동시에 해야함
Hoisting : 변수를 어디다 선언했던간에 변수가 인식됨
(참고 : https://yceffort.kr/2020/05/var-let-const-hoisting)
document.write(출력할 내용) : 버퍼에 모아서 출력
document.writeln(출력할 내용) : 바로 바로 출력, 줄바꿈도 해줌
>대화상자에 출력
alert(내용)
>콘솔에 출력
console.log(내용)
브라우저 화면에는 보이지 않고 브라우저 / IDE 콘솔 창에만 보임
블록(Scope)가 새로 만들어지면 이름 공간이 새로 만들어진다(TDZ?)
