웹 프론트 JS

 

1. 인사

• 자바스크립트 런타임 : 자바스크립트 엔진을 포함하는 실행 환경
• 자바스크립트 엔진 : 자바스크립트 코드를 실행하는 프로그램

2. 디버깅

• console.log();
• chrome 개발자 도구
• debugger;

3. DOM 다루기

• Window 객체
• Document 객체
• 특정 요소 찾기
•       getElementById
•       getElementsByTagName
• 인접 노드 접근
•       children
•       parentElement
• 노드 생성
•       createElement
• Node.style
• Node.innerHTML

4. 브라우저 객체

• Navigator
• location
•       location.href
• History

5. 이벤트

• Click. Mouseover, keydown, focus…
• 이벤트 핸들러
• addEventListener

6. 에러 핸들링

• try -catch : try { 실행하려는 코드 } catch (error) { // 에러 객체 에러 발생 시 실행할 코드 } finally { 언제나 실행할 코드 }
• error 객체 : Error { name : 에러 이름, message : 에러의 상세 내용, stack : 호출 스택, }

7. 비동기

• 콜백함수 : function A (callback) { // 수행해야 할 코드 callback(a); } function B (a) { // 데이터 a를 이용한 코드 } A(B);
• 프라미스 : const promise = new Promise(function(resolve, reject) { // 코드 구현 resolve(value); // 성공 시 resolve 호출 reject(error); // 실패 시 reject 호출 } promise.then((result) => { // 성공 시 넘어오는 값 result로 코드 구현 }).catch((error) => { // 실패 시 넘어오는 에러 error로 코드 구현 });
• Async -await : const A = async () => { // 코드 return a; }; const B = (a) => {}; const a = await A(); B(a);

8. 네트워크 요청

• fetch : fetch(ʻURLʼ, { method: ʻPOSTʼ, headers: { Cookie: ʻʼ, }, body: { name: ʻʼ, } });
• CORS : 다른 도메인의 사이트에 요청을 보낼 때, 미리 허용된 호스트가 아니라면 요청을 거부하는 정책

9. 브라우저 기능(쿠키)

• 쿠키 구성 : name(키), value(값), domain(사용하는 도메인), path(접근 경로), expires/ max-age(쿠키 만료일),  HttpOnly(HTTP외의 통신 허용 여부), secure(보안 설정)
• 쿠키 디버깅 
• 쿠키 쓰기 : 클라이언트 코드에서 document.cookie = “name=heeeun; path=/; max-age=3600" / 서버 코드에서 response.header { Set-Cookie: “name=heeeun; path=/; max-age=3600; httpOnly” }
• 쿠키 접근 : document.cookie
• 쿠키 삭제 : document.cookie = “같은 정보… max-age=0"
• 쿠키 서버로 보내기 : fetch(URL, { credentials: ‘include’ });

10. 브라우저 기능(웹 스토리)

• 쿠키와의 차이 : 요청 헤더에 포함되지 않음 / 클라이언트에서만 조정 가능 / 해당 URL에서만 접근 가능
• 로컬 스토리지, 세션 스토리지 차이 : 로컬 스토리지 : 브라우저 종료 시에도 유지되는 데이터 / 세션 스토리지 : 새로 고침 시에도 유지되는 데이터 (같은 탭 내에서만)
• 웹 스토리지 쓰기 : 로컬 스토리지 localStorage.setItem(ʻkeyʼ, value); localStorage.key = value; / 세션 스토리지 sessionStorage.setItem(ʻkeyʼ, value); sessionStorage.key= value;
• 웹 스토리지 접근 : 로컬 스토리지 localStorage.getItem(ʻkeyʼ); localStorage.key / 세션 스토리지 sessionStorage.getItem(ʻkeyʼ); sessionStorage[key]
• 웹 스토리지 삭제 : 로컬 스토리지 localStorage.removeItem(ʻkeyʼ); localStorage.clear(); / 세션 스토리지 sessionStorage.removeItem(ʻkeyʼ); sessionStorage.clear();