기록

◉ 리액트 프로젝트 생성 시 폴더와 파일 구조 살펴보기 • public : create-react-app으로 개발할 React 프로젝트의 static 파일들(index.html)이 저장된 폴더 - public/index.html : 개발한 React 프로젝트가 표시될 파일 • src : 실제 React를 사용하여 개발을 할 때 사용하는 폴더 - src/index.js : 우리가 개발한 React 프로젝트를 index.html 파일에 표시하기 위한 파일 - src/App.js : 기본적으로 제공되는 React 컴포넌트 예제 - src/App.css : App 컴포넌트에서 사용하는 CSS 파일 - src/App.test.js : App 컴포넌트를 테스트하기 위한 파일 - src/reportWebVitals...

◉ JSX(JavaScript XML) ▪︎ Javascript에 XML을 추가한 확장한 문법 ▪︎ JSX : 리액트로 프로젝트를 개발할 때 사용 → 공식적인 자바스크립트 문법은 아님 ▪︎ 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨 ▪︎ ( 참고 ) https://goddaehee.tistory.com/296 ◉ 리액트 ▪︎ 컴포넌트 방식으로 화면을 구성함 ▪︎ 무조건 하나 이상의 컴포넌트가 있어야 함 따로 생성하지 않을 경우, App.js가 생성됨 ▪︎ 컴포넌트란? - 화면에 보여지는 요소(부분)을 의미 - 다른 곳에서는 위젯 또는 컨트롤이라고 함 ◉ App.js 실습 1. App 컴포넌트에서 사용할 라이브러리 불러오기. ▪︎ ES6부터 라이브러리를 불러올 때, ..

◉ 리액트 컴포넌트를 만드는 방법 ▪︎ 리액트 - UI를 위한 자바스크립트 라이브러리 - 독립적이고 재사용 가능한 컴포넌트를 기반으로 작동함 - 데이터 흐름 : 상위 컴포넌트 → 하위 컴포넌트 - UI를 선택적으로 렌더링해서 효율을 높이기 위해 VDOM(Virtual Document Object Model)을 이용함 ▪︎ VDOM - 경량화된 DOM - 실제 DOM을 처리할 때보다 훨씬 빠르게 조작 가능 ▪︎ 리액트 컴포넌트 - 두 가지 방식으로 정의 가능 ① 자바스크립트 함수 이용 function App(){ return Hello World; ] ② ES6 클래스 이용 class App extends React.Component { render(){ return Hello World; } } - re..

◉ Node.js 설치 ▪︎ Node.js : 자바스크립트 기반의 오픈소스 서버 측 환경 ▪︎ 구글에 Node.js 검색 후, 사용 중인 운영체제에 맞는 LTS(Long Term Support) 버전 선택 ▪︎ 다운로드 받은 파일 풀고 클릭하면, 아래와 같이 화면 보임 - '계속' 클릭 - 설치 완료 ▪︎ 터미널 창에서 설치 확인하기 node --version npm --version ◎ npm : 자바스크립트용 패키지 관리자로, Node.js 설치하면 함께 설치됨 ◉ VS Cod 설치 - 코딩을 시작하도록 도와주는 코드 편집기 ▪︎ https://code.visualstudio.com/에서 다운로드 받기 ( 이미 설치한 상태이므로, 다운로드 과정 생략 ) ◉ VS Code 확장 1. React js c..

◉ 타임리프와 바닐라(순수) 자바스크립트를 활용한 Ajax 구현 ▪︎ AjaxExamController.java - 세 번째 'member 목록 요청' 클릭 시, 요청 처리 메서드 작성 // * /index.html에서 member 목록 요청 누를 경우 @GetMapping("ajax/member/all") public String getMemberList() { log.info("{}", "ajax/member/all 요청 중"); return "ajax/member/list"; } ▪︎ templates/member 에 list.html 생성 ① 타임리프 네임스페이스 선언 ② body 태그 안에 Ajax 호출 버튼 및 호출 후 받아온 데이터를 이용해 테이블을 그려 줄 memberTable 작성 - 태..

◉ 예제 실습 ▪︎ 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의 장점 ① 웹 페이..

◉ 원시적인 방법 ( 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..