[JS] 주요 문법

모듈은 스크립트 간 의존도를 파악할 수 있고 실행순서를 쉽게 제어할 수 있다.

모듈의 특징

1. 항상 use strict로 실행된다.

2. 모듈 레벨 스코프가 있다.

3. 단 한 번만 평가 된다. ( 실행이 두번되어도 한번만 실행)

4. 지연 실행된다.

 

유니코드 : 전 세계 문자를 컴퓨터에서 다룰 수 있도록 만든 표준 시스템을 

 

정규표현식 : 패턴을 이용하여 문사 검색, 대체, 추출을 할수있다.

성능은 느리지만 매우 편하다.

정규표현식 확인

https://rubular.com/

 

정규 표현식 실습

https://regexone.com/

RegexOne - Learn Regular Expressions - Lesson 1: An Introduction, and the ABCs

 

js 정규표현식

js는 RegExp 객체로 정규표현식 기능을 제공한다.

Array, Object 처럼 Literal로 생성 가능하다.

regExp.test() : 정규표현식 객체의 test함수는 입력받은 문자열에 찾는 패턴이 있는지 찾은 후  있다면 true를 반환하고 없으면 false를 반환한다.

regExp.exec() : 입력받은 문자열에 찾는 패턴이 있는지 찾은 후 일치한 패턴 정보를 반환하고 없으면 null을 반환한다.(문자 추출)

regExp.match() : 정규표현식 객체를 파라미터로 받아 패턴이 있는지 찾은후 일치한 패턴 정보를 반환하고 없으면 null을 반환한다. matchall도 있음

regExp.replace() : string 객체의 replace함수는 정규표현식 객체를 파라미터로 받아 패턴이 있는지 찾은 후 일치한 패턴 정보를 원하는 문자열로 바꿀 수 있다. (문자 대체)

regExp.search() : String 객체의 search 함수는 정규표현식 객체를 파라미터로 받아 패턴이 있는지 찾은 후 일치한 패턴 정보의 위치를 반환한다. ( 문자 검색)

capture : 캡처가 적용된 정규 표현식을 이용하면 match 반환값의 1번 인덱스부터 순차적으로 캡처 결과가 들어간다.

Run-length encoding : 매우 간단한 비손실 압축방법

 

쿠키와 세션, 웹 스토리지

http 통신 : http request 는 기본적으로 상태가 존재하지 않는다. ( 이때 헤더에 쿠키를 담으면 서버가 쿠키를 읽어 어디서 온것인지 알 수 있다.

 

쿠키 : 

- 클라이언트에서 저장, 관리하는 데이터들. 브라우저를 닫아도 데이터를 유지할 수 있다.

- 서버에서 set-cookie를 응답헤더로 내려주면 클라이언트는 받아서 저장한다.

취약점

- xss (cross-site script)공격을 당할 수 있다. -> https로 보완

 

session

- http session id를 식별자로 사용자를 구분한다.

- 클라이언트는 http session id 를 쿠키 형태로 저장한다.

- 서버 자체적으로 기록하고 관리한다.

문제점

- 세션은 서버에 파일로 저장된다. 사용자가 많아지면 관리 힘듬

 

그래서 쿠키 세션등의 문제들을 해결하기 위해 

이제 서버와 클라이언트간 인증은 별도 토큰( JWT) 을 사용하고

쿠키는 클라이언트 자체적인 지속적인 데이터 관리 용도로 많이 사용된다.

 

웹스토리지

- 클라이언트에 데이터를 저장하기 위한 새로운 방법

- html5부터 등장했다.

- 쿠키에서 하기 힘든 것들은 지원하기 위해 등장

- 로컬 스토리지와 세션 스토리지가 있다.

 

- 로컬 스토리지

 - 로컬 스토리지에 데이터를 저장하면 반영구적으로 데이터가 저장된다.

- 세션 스토리지

  - 새 창을 생성할 떄마다 개별적으로 저장되는 데이터를 관리한다.

 

Html과 css

markup : 스타일과 역할을 지정해주는 방법이었음

hyper link : 웹문서가 연결된고 이동가능한 방법이었음

 

css : cascading style sheets (cascade : 폭포)

 

html : 문서 구조와 의미를 담당

css : 문서표현

브라우저마다 기본 css가 다름(주의) ex) 버튼

css 사이트

https://codepen.io/

CodePen

 

 

css에서 id와 class의 차이점

class : 중복사용 가능, 이름 불러오는 방식(.), 한요소에 여러개 클래스명 적용

id : 중복사용 안됨, 이름 불러오는 방식(#), 아이디는 한요소에 한개만

 

DOM : (document object model ) model : 현실에 있는 것을 특정관점으로 바라보아 추상, 객체화 한것

Dom 조작 실습 : 간단한 에디터만들기