기록

◉ 원시적인 방법 ( JSON 문자열 만들기 ) ▪︎ JsonRestController.java - 오타의 위험도 있고, 복잡한 편이라 실수할 확률이 큼 - Java 17 버전 이후, 템플릿 문자열 기능으로 많이 개선된 편이지만 권장하지 않음 @RestController // * 어노테이션은 클래스의 메타 데이터로서 내부적으로 클래스에 해당. // -> 클래스 이름은 어노테이션 이름과 동일하게 작성할 수 없음 // * @RestController : 뷰-템플릿 필요없음 -> 응답 결과 : String (JSON or text) public class JsonRestController { @GetMapping("/info") // * /info 주소 요청 시, projectInfo() 메서드 호출 publ..

◉ JSON.stringify() - JSON의 일반적인 사용 용도 : 웹 서버와 데이터 교환 - 웹 서버에 데이터를 보낼 때, 데이터는 문자열 형태여야 함 - JSON.stringify() : 자바스크립트 객체 데이터 → 문자열로 변환 1. JS 객체를 JSON 데이터로 변경하기 - [ originData ]에 자바스크립트 객체를 담고, alert()를 이용해 데이터와 타입 확인하기 : 오브젝트 객체로 출력됨 - [ changeData ]에는 객체를 JSON 데이터로 담고, 데이터와 타입 확인하기 → JSON.stringify() 이용 : 데이터는 문자열이라 값 자체가 반환되고, 타입은 string으로 출력됨 ∴ JSON 데이터는 문자열이다! 2. JS 배열을 JSON 데이터로 변경하기 - [ orig..

◉ DOM ▪︎ 웹 브라우저는 문서 객체 모델(DOM)을 생성할 수 있음 - 생성한 문서 객체 모델을 통해 HTML 문서의 구성 요소를 객체로 인식할 수 있음 - 자바스크립트가 웹 브라우저의 문서 객체 모델을 조작해 웹 브라우저에 표시되는 HTML 문서 구조를 변경하거나, 새로운 구성 요소를 추가하는 등의 작업을 할 수 있음 ▪︎ DOM이 생성되는 방식 - 웹 브라우저가 HTML 문서를 해석 → 해석한 HTML 문서 구조를 객체로 변환하는 방식으로 생성됨 - 다음 그림과 같이 DOM 트리 형태로 문서 구조를 변환함 - document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등이 트리 형태로 구성 → 각각을 노드(node)fkrh gka ◉ 메서드로 노드 선택하기 ▪︎ 자바스크립트로 웹 브..

◉ HTTP 프로토콜로 전송할 때 3가지 방법 1. CSV - Comma Separated Values의 약자로 각 항목을 쉼표로 구분해서 데이터를 표현하는 방법 - 문법 values1, values2, values3, … // 값을 나열해서 사용하면 됨 • 용량이 적고, 간단해 보임 단, 각 데이터가 무엇을 의미하는지 알기 어려움 → 이 단점을 보완하기 위해 XML 등장 - 엑셀에서도 CSV 형식으로 내보낼 수 있어서 편리하게 사용 가능 - 엑셀에서 데이터 입력 후, 다른 이름으로 저장 시 [ csv ] 형식으로 변경 → 메모장으로 열어보면 데이터가 위와 같이 쭉 나열되어 있음 2. XML - eXtensible Markup Language의 약자로 HTML 형식처럼 태그로 데이터를 표현하는 방식 - ..

◉ 브라우저 객체 모델 ▪︎ 브라우저 객체 모델(BOM, Browser Object Model) : 웹 브라우저에서 제공하는 객체로, 브라우저를 제어할 수 있는 여러 가지 기능이 포함되어 있음 ▪︎ 브라우저 객체 모델의 계층도 ▪︎ 브라우저 객체 모델의 종류 종류 설명 window 웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체 document 웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체 location 웹 브라우저에 현재 표시되는 페이지에 대한 URL 정보가 포함된 객체 history 웹 브라우저에 저장된 방문 기록이 포함된 객체 navigator 웹 브라우저 정보가 포함된 객체 screen 웹 브라우저의 화면 정보가 포함된 객체 1. window 객체의 속성과 메서드 ▪︎ windo..

◉ 자바스크립트 객체 다루기 ▪︎ 객체란? - 자료형의 관점에서 보면, 객체는 키와 값으로 구성된 속성의 집합을 의미 ▪︎ 객체 생성 - 리터럴 방식으로 객체 생성 : {}을 이용 - 다양한 데이터를 값으로 가질 수 있음 const person = { name: ["구름", "하늘"]; age: 10, isAdult: true }; - 또한, 객체 안에 또 다른 객체나 함수도 가능 const person = { name: { firstName: "Hong", lastName: "Gildong" }, age: 10, isAdult: true, printInfo: function(){ console.log('printInfo'); } }; - 키에 공백이 들어갈 경우, 따옴표를 꼭 사용해야 함 const p..

◉ 함수란 ▪︎ 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문 ◉ 함수 정의하는 방법 ▪︎ 자바스크립트에서는 함수 선언문, 함수 표현식, 화살표 함수 등을 사용해 정의함 1. 함수 선언문으로 함수 정의하기 ▪︎ function 키워드로 함수를 정의하는 방법 - 식별자 = 함수명 function 식별자(){ // 함수 호출 시, 실행할 코드 } function gugudan(){ for(let i = 1; i { console.log(num1, num2); }; sum(10, 20); - 단, 화살표 함수는 매개변수가 1개일 경우, 괄호() 생략 가능 const sum = num1 => { console.log(num1); }; sum(10); 2. return 문 ▪︎ 함수 외부로 데이터를 반환할 때..

◉ if문과 switch문 ▪︎ 두 조건문의 결정적 차이 : 조건의 형태 ▪︎ if문의 조건에는 식을 사용 switch문의 조건에는 값을 사용 ▪︎ 조건이 값이 아닌 범위일 경우, switch문보다 if문이 더 적합함 ◉ for ... in 반복문 ▪︎ ES6에서 객체 리터럴이나 배열에 반복 접근할 수 있는 반복문 추가되었는데, 그 중 하나가 for in 반복문 for( 가변수 in 배열/객체 리터럴 ){ // 블록문 } - for문의 소괄호 안에 in 키워드를 기준으로 오른쪽 : 탐색의 대상이 되는 배열 또는 객체 리터럴 왼 쪽 : 배열 또는 객체 리터럴을 탐색해서 키를 저장할 가변수(임시변수) 1. 객체 리터럴을 반복할 경우 let obj = { name : "구름", age : "10" }; for..

◉ HTML 파일과 자바스트립트 연결하기 - 연결하는 방법은 내부 스크립트와 외부 스트립트 2가지가 있음 1. 내부 스크립트 방법 ▪︎ HTML 파일의 script 태그의콘텐츠 영역에 자바스크립트 코드를 작성하는 방법 ▪︎ 실행 결과 3. script 태그 사용 위치 ▪︎ 항상 body 태그의 종료 태그 바로 전에 사용함 ( 내부 스크립트와 외부 스트립트 방법 모두 동일 ) → 웹 브라우저에 화면이 표시되는 것에 영향을 미치지 않도록 하기 위해서! ▪︎ 실무에서는 주로 외부 스트립트 방법을 사용함 → 유지 보수가 편하기 때문 ◉ 프로그래밍 시작 전 알아두기 1. 주석 // 한 줄 주석은 슬래시 2개로 표시 /* 자바스크립트는 여러 줄 주석도 간단하게 처리할 수 있음 */ 2. 자바스크립트 오류 확인 방법..

▪︎ 이클립스에서 JavaScript 연결 • templates폴더 • webapp/WEB-INF/view : 동적 자료들의 루트 경로 → JSP 파일 • webapp/WEB-INF/view/static : 정적 자료들의 루트 경로 webapp/WEB-INF/view/static/js webapp/WEB-INF/view/static/css webapp/WEB-INF/view/static/images ▪︎ 이클립스의 경우, 전체적인 url주소가 아닌 경우 Ctrl 지원 안됨 → 수동으로 폴더 및 파일 생성해야 함 - static에 js폴더 생성 - new - javascript 파일 생성 ▪︎ Javascript 작업의 경우, VSC에서 해당 폴더 열어서 작업하기 VSC의 경우, JSTL 및 EL 구문 인..