방법1 : lombok 설정 후 mapstruct 설정 (순서 중요) dependencies { annotationProcessor 'org.projectlombok:lombok:1.18.20' annotationProcessor 'org.projectl

useEffect, useState는 함수 형태로 제공: 이 함수들은 모듈에서 export된 값( named export )이기 때문에, import 시에 {} 안에 담아서 불러와야 한다: <-> React (default export)로 내보낸 값은 {} 없이

인자로 콜백함수를 받는다렌더링 될때 마다 실행화면에 첫 렌더링 될때 실행화면에 첫 렌더링 될때 실행value 값이 바뀔때 실행

Promise를 처리할 때 해당 Promise가 처리될 때까지 실행 흐름을 일시 중지하고, Promise가 처리된 이후에 반환된 값을 반환실행 흐름fetch 함수가 반환하는 Promise를 처리json() 함수가 반환하는 Promise를 처리하기 위해 두 번째 awai

useParams() : URL 매개 변수를 추출하는 React Router 훅

ES6의 Promise 기반 APIHTTP 응답 상태코드: ok -> response 객체로 반환JSON 객체가 아니므로 response.json() 을 호출하여 데이터를 추출기본 브라우저 API로 라이브러리 설치 불필요Promise 기반 APIHTTP 응답 상태 코드

npm install react-router-dom

변경함수를 써야한다let 글제목, 글제목변경 = useState('맛집 추천!', '신발 추천!', '옷 추천!'); 글제목변경 ();state 원본은 건들지 않고 deep copy해서 수정사항 변경한다var newArray = ...글제목;newArray0 = '맛있

JSX 문법

node.js 설치 npm 툴 이용 가능 create-react-app 라이브러리 이용 가능VScode 설치 코드짤 폴더 생성 - git/ React class터미널 열고 프로젝트명 입력: success 확인npx create-react-app blogact-app

HTML 로 디자인해두기UI현재 상태를 데이터로 저장해둠data(){ return { 모달창열렸니 : false, // 1(닫힘),0(열림) 등 v-if="모달창열렸니 == true" 신고수 : 0,0,0, 메뉴들 : ... 상품 :

JPA(Java Persistence API)에서 사용되는 어노테이션 중 하나로, 해당 필드가 데이터베이스에 영속적으로 저장되지 않아야 함을 명시하는 역할해당 필드를 데이터베이스의 테이블 칼럼으로 매핑하지 않고, 오직 자바 객체 내부에서만 사용하고 싶을 때 @Trans

Spring MVC 프레임워크에서 사용되는 애노테이션 중 하나로, HTTP 요청 파라미터를 해당 메소드의 매개변수로 바인딩할 때 사용@ModelAttribute를 사용하면 해당 메소드가 실행되기 전에, 요청 파라미터들을 자동으로 해당 메소드의 매개변수와 매핑클라이언트가

코드가 실행되는 환경으로 실행되는 코드에 대한 정보와 함께 변수, 함수 및 객체에 대한 액세스 권한을 제공변수, 함수 및 객체의 범위(scope)변수 및 함수에 대한 액세스 권한this 키워드가 참조하는 객체실행 순서context는 call stack(호출 스택)이라는

@RequestBody HTTP body안에 JSON을 JAVA 객체(VO)에 맵핑하는 스프링 어노테이션 @RequestBody가 붙은 파라미터가 있으면 HTTP 요청의 미디어 타입과 파라미터의 타입을 먼저 확인 해당 미디어 타입과 파라미터 타입을 처리할 수 있다

상수 : 변하고 싶지 않은 값들을 만들떄 쓰임전역변수와 지역변수의 개념이 확실하지 않다함수만 지역변수로 호이스팅이되고 나머지는 다 전역변수로 올린다(= 함수만 제외하고)let도 호이스팅이 가능하나 'a'의 선언문(초기화)이 나오기 전까지는 'a'에 접근 할수 없다 :

웹이 실행되면 public > index.html 파일 로드 main.js 로드 App.vue router > index.js path : 렌더링 되는 페이지 component : 각각의 vue파일 이름 작성 Login.vue 실행

결과결과v-for="(메뉴,i) in 3"v-for="(메뉴,i) in 메뉴": 반복횟수 대신 array/ object 집어 넣기 가능: 메뉴에 들어있는 데이터의 개수만큼 반복함:key="i" : 반복문 돌린 요소를 컴퓨터가 구분하기 위해 씀, 필수 기입: i ? 반복

데이터 보관함 필요 : data(){ return {}}데이터는 object자료로 저장 : {자료이름 : 자료내용}script에있는 data를 HTML에 데이터 넣기 : {{데이터이름}}HTML에 하드코딩해놓으면 나중에 변경 어려움Vue의 실시간 자동 렌더링 쓰려면 해

1. node.js 설치 프로젝트를 내려받거나 할 때는 버전 확인 필수 2. Vscode 설치 3. npm install -g @vue/cli 설치 4. Vscode - Vetur 설치 5. Vscode - HTML CSS Support 설치