기록

◉ 예제 실습 ▪︎ GET 방식과의 차이점 - RequestHeader에 Content-Type 정의 // - post 방식은 반드시 보내는 데이터의 요청 헤더를 설정해야 함. httpRequest.setRequestHeader('Content-Type', 'application/json') - send 요청 시 파라미터 데이터를 포함하여 요청 // - 서버로 요청 정보 실제로 보내기 httpRequest.send(JSON.stringify(reqData)) ▪︎ index.html Ajax POST 방식 요청 name: ajax호출 여기에 이름이 옴. 여기에 나이가 옴. - ajax 처리 순서 ① ajax(XMLHttpRequest 내장객체 이용) 객체를 먼저 생성 ② ajax 객체의 현재 진행상태 및..

◉ 예제 실습 ▪︎ 이전 시간에 실습하던 HelloJSON 프로젝트에서 진행 ▪︎ 의존성 추가 ▪︎ templates 폴더에 index.html 생성 - html 파일에 css 스타일 적용 : 태그 안에 입력 Ajax GET 연습 Ajax POST 연습 Ajax GET 연습 (member 목록 요청) ▪︎ AjaxExamController.java 생성 @Controller @Slf4j public class AjaxExamController { // * http://localhost/ // 또는 http://localhost 주소에 대한 요청 처리 // - http://localhost : 기본값으로 루트 생략됨 @GetMapping("/") public String home() { return "in..

◉ AJAX란? ▪︎ AJAX - Asynchronous Javascript And XML의 약자, 비동기 방식의 javascript와 XML을 의미 - 자바스크립트처럼 특정 프로그래밍 언어를 지칭하는 것이 아니고, 제이쿼리나 리액트처럼 특정한 프레임 워크를 지칭하는 것도 아닌, 구현하는 방식을 의미 - 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나 - 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음 → 즉, Ajax를 이용하면, 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시 가능 이때 서버와는 다양한 형태의 데이터를 주고 받을 수 있음 ( JSON, XML, HTML, 텍스트 파일 등 ) ▪︎ AJAX의 장점 ① 웹 페이..

◉ Git Branch 생성 git branch 브랜치명 - “hello-world-images”라는 이름의 새로운 branch 확인 가능 현재 * master에 있음 ( * : 주 작업 브랜치를 의미 ) - "hello-world-css" 브랜치 하나 더 생성 ◉ Git checkout ◉ Emergency Branch -b 없으면 만들어라 수정된 index.html를 스테이징 환경에 올린 후, 커밋 진행 master로 옮긴 후, emergency-fix와 병합시키기 브랜치 삭제 후 git 상태 조회 -d : 지정한 브랜치 삭제

◉ 원시적인 방법 ( 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 ◉ 메서드로 노드 선택하기 ▪︎ 자바스크립트로 웹 브..

◉ Git이란? - 코드 저장소 - 이력을 관리하는 저장소 - Version Control System ( history - 날짜 등 으로 구분 가능 ) - Code를 저장 및 저장지점으로 되돌아갈 수 있도록 해주는 시스템 - 분산 버전 관리 시스템 : 여러 개발 PC와 저장소에 분산해서 저장 ◉ GitHub란? - 코드 저장소(Git)을 웹에 옮겨 놓은 원격저장소 ▪︎ 웹에 있을 때의 장점 : 공유 가능 (협업), 코드 복구 가능 ◉ 분산 버전 관리 - 버전 관리 : 파일 변화를 시간에 따라 기록했다 특정 시점의 버전으로 다시 가져올 수 있는 것 ▪︎ 장점 ① 소스 코드가 변경된 이력 쉽게 확인 가능 ② 특정 시점에 저장된 버전과 비교 가능 ③ 특정 시점으로 되돌아갈 수 있음 ④ 내가 올리려는 파일이 ..

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