Coding Note

this 접근 유형 call - 첫 번째 오는 변수를 thisfh 지정할 수 있음 apply - 배열로 데이터를 받음 Hoisting(호이스팅) 함수, 변수명을 제일 먼저 읽어 드리는 것 var, let, const 모두 호이스팅 됨 즉, 코드가 실행되기 전에 처리되고 해당 스코프가 상단으로 올라간다. var 정의되기 전에 접근 가능, undefined 값을 가지게 된다. let 변수가 선언될 때까지 일시적으로 TDZ(비활성 구역)에 있게 된다. 선언되기 전에 사용 시 error 발생 TDZ(Temporal Dead Zone) 비활성 구역 let, const => 에러 방지 화살표 함수(=>) ES6에서 나온 함수 화살표 함수_매개변수 0개 빈 괄호 반드시 표기해야 함. // () => {} 1개 () ..

JS JavaScript, 객체 기반의 스크립트 언어 .js - JavaScript 기반 - 비동기 통신(Ajax) - 순서 제어, 시간 제어 등 ex) 실시간 검색어 기능에 사용됨 BOM(Browser Object Model) 브라우저 객체 모델 웹 페이지의 내용을 제외한 브라우저 창에 포함된 모든 객체 요소들을 의미함. DOM(Document Object Model) 문서 객체 구조 클라이언트가 볼 수 있는 화면 단 브라우저들은 사용자가 띄운 웹 문서를 그 구성과 내용에 맞게 객체화하여 각 요소 별로 구조화한다. 즉, html과 javascript의 인터페이스 역할 Bom VS Dom Bom은 브라우저 속성에 속하여 문서가 아닌 윈도우를 제어한다. DOM은 문서, 클라우저에 웹문서에 대한 제어와 변경..

Flexbox flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능 태그에 적용하는 flexbox 기능 - display : flex; or inline-flex; - flex-direction : 방향 설정 - flex basis: auto; 부모 영역을 기준으로 잡아 아이템 공간을 차지한다. - flex-wrap : 항목이 여러 줄에 나열되도록 - flex flow(flex-direction + flex-wrap) (ex. flex-flow: row wrap;) - justify-content 행(가로)을 정렬하는 방식 - align content flex 컨테이너에 지정하는 속성이며, 교차축을 따라 flex 항목 열(세로)을 정렬하는 방식을 지정한다. 태그에 적용하는 flexbox..

시맨틱 태그 웹 페이지를 부분 별로 공간을 나눈 태그! - header : 웹 페이지 상단 - nav : 많이 사용하는 메뉴, 목차 - section : 본문, 내부에 제목 태그 h1 ~h6 사용 권장 - article : 정보전달성 내용 (ex. 기사) - aside : 광고, 본문과 상관없는 영역 - footer : 웹 페이지 하단 Q. , 차이점은? 세션은 부위 별로 영역을 나눌때 사용한다. 메인태그는 웹 페이지 영역을 포괄한다. 요즘 추세는 spa로 하기 때문에 굳이 비교하지말고 Section 태그 사용하자! HTML 기본 코드 정리 태그는 마감 태그를 필수로 작성해야 하며 자식 태그를 가진다. 태그, 문자 인코딩 및 문서 키워드, 요약 정보문서 정보 등! 태그, 외부 문서 연결, css, 폰트 ..

REST란? Q1. REST란? - "Representational State Transfer"의 약자로 해당 자원의 상태, 정보를 주고받는 것을 의미함. - REST는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 활용할 수 있는 아키텍처 스타일임 - 네트워크 상에서 Client와 Server 사이의 통신 방식 중 하나임. 즉, HTTP URI(Uniform Resource Identified)를 통해 자원을 명시하고, HTTP Method(POST/GET/PUT/DELETE)를 통해 해당 자원에 대한 CRUD를 적용하는 것! REST에서 CRUD는 아래와 같다. 1. 생성 - POST(Create) 2. 쓰기 - GET(Read) 3. 수정 - PUT(Update..

JSON 예제 01 - JSON(Javascript Object Notation)로 회원 정보 출력하기 구현 코드 회원정보 출력하기 1. for...in 문 - 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복함. - 코드 분석 ) - for(var i in jsonInfo.name) - 단축된 for문 사용 for...in - JavaScript | MDN for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.) developer.mozilla.org

Ajax 예제 풀이하기! 예제02 - 도서 정보 출력하기 구현 코드 - ajax02.html HTML 삽입 미리보기할 수 없는 소스 - ajaxServlet.java HTML 삽입 미리보기할 수 없는 소스 1. .${}. append() - 선택된 요소의 마지막에 새로운 HTML 요소, 콘텐츠를 추가한다. - Insert content, specified by the parameter, to the end of each element in the set of matched elements. 2. CDATA - - CDATA 태그 안에 데이터는 전부 문자열로 처리한다. - mybatis에서 부등호 연산은 오류가 나, CDATA로 처리한다.

1. Ajax 정의 - Asynchronus Javascript(비동기 자바스크립트) + XML의 의미 - 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 XML이나 JSON 데이터를 주고받는 기술 기존 웹페이지와 Ajax 웹페이지 동작 과정 요청 페이지 기존 웹 페이지 동작 Ajax 웹 페이지 동작 웹 서버 요청받음 요청 처리 HTML 생성 ⬇ 웹 서버 요청 받음 요청 처리 XML or JSON 생성 ⬇ 결과 페이지 ⬆ XML HTTP Request JQuery Ajax 사용 형식 $.ajax({ type : "post" or "get", async : "true" or "false" 동기식으로 처리) url : "요청할 URL", data : {서버로 전송할 데이터}, HTML 삽입 미..