start.spring.io에서 프로젝트 생성 build tool (의존 관계 관리), 최근에는 Gradle을 사용하는 추세 SNAPTHOT : 아직 만들고 있는 버전 M~ : 아직 정식 릴리즈 되지 않은 버전 정식 릴리즈 된 버전에서 가장 최신 버전 선택 *SpringBoot 3.0부터는 JAVA 17이상만을 지원 !! Artifact : 산출물 이름 GENERATE (다운로드) Gradle은 의존 관계가 있는 라이브러리들을 함께 다운로드 함 ✅ spring-boot-starter : 스프링부트 + 스프링코어 + 로깅(logback, slf4j) ✅ spring-boot-starter-web : spring-boot-starter-tomcat(톰캣/웹서버), spring-webmvc(스프링 웹 mvc)..

HTTP 통신은 stateless -> 상태를 기억하기 위해 쿠키, 세션, 토큰을 사용 Cookie 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로, key=value 형식의 문자열 데이터 묶음 브라우저에 저장됨 (클라이언트가 조작할 수 있고, 서버는 쿠키에 담긴 정보를 바탕으로 클라이언트 식별, 광고 추천 등 세션 관리, 개인화, 트래킹에 사용 Cookie 인증 방식 브라우저(클라이언트)가 서버에 요청(접속)을 보냄 서버는 클라이언트의 요청에 대한 응답을 작성할 때, 저장하고 싶은 정보를 응답 헤더의 Set-Cookie에 담음 이후 클라이언트가 재요청 할 때마다 저장된 쿠키를 요청 헤더의 Cookie에 담아 요청을 보냄 Cookie 단점 보안에 취약. 요청 시 쿠키의 값을 그대로 보내기 때..

axios vue에서 권장하는 HTTP 통신 라이브러리 브라우저와 Node.js에서 실행되는 Promise기반의 HTTP 통신 라이브러리 Ajax 요청을 보내고 응답을 받는 것 뿐만 아니라 요청 및 응답을 변환, 중단 등 다양한 기능 제공 axios vs fetch axios - HTTP 요청과 응답을 자동으로 JSON 데이터로 변환 - Interceptors 제공 (요청과 응답을 변환하거나 중단 가능) - 설치 후 사용 fetch - 기본적으로 문자열로 반환하며, 이를 수동으로 JSON으로 변환 - Interceptors 제공 x - 설치할 필요 없음 (브라우저에서 기본 제공) axios 설치 CDN 방식 NPM 방식 npm install axios axios API 다음 API에 맞추어 비동기 통신을..

vue-router라우팅 : 웹 페이지 간의 이동 방법Vue.js의 공식 라우터라우터는 컴포넌트와 매핑Vue를 이용한 SPA(Single Page Application)을 제작할 때 유용URL에 따라 컴포넌트를 연결하고 설정된 컴포넌트를 보여줌https://v3.router.vuejs.org/Vue Routerv3.router.vuejs.org vue-router 설치CDN 방식 NPM 방식npm install vue-router vue-router 연결routes 옵션과 함께 router instance 생성 Router 실습r 메인 자유게시판 질문게시판 사진게시판 vue-router 이동 및 렌더링네비게이션을 위해 router-link 컴포넌트를 사용속성은 to prop을 사용기본적으로 router-..

Nodejs 설치 Node.js를 설치하면 자동으로 npm이 설치되고, 이를 이용해서 @vue/cli를 설치 LTS 버전 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org # 설치 확인 node -v npm -v npm(Node Package Manager) - Node.js의 기본 패키지 관리자 - npm을 사용하여 다른 개발자가 작성한 패키지를 설치하고, 자신이 작성한 패키지를 배포 가능 - package.json 파일을 통해 패키지 정보 및 의존성 관리 npm 명령어 npm init : 새로운 프로젝트나 패키지를 만들 때 사용 (package..

Component Vue의 가장 강력한 기능 중 하나 HTML Element를 확장하여 재사용 가능한 코드를 캡슐화 Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용 Life Cycle Hook 사용 가능 중복 코드를 제거하고 유지보수가 쉬운 코드를 작성할 수 있으며, 애플리케이션 규모가 큰 경우에도 쉽게 확장 가능 전역 component Vue.component(tagName, options)로 등록 권장하는 컴포넌트 이름 : 케밥 표기법 (전부 소문자, -) 지역 component 컴포넌트를 components 인스턴스 옵션으로 등록 특정 인스턴스 내에서만 사용 가능한 컴포넌트 component template Vue.js에서 컴포넌트를 정의할 때, data ..

v-on DOM 이벤트를 듣고 해당 이벤트가 발생되면, 지정된 메소드를 호출 클릭 위 버튼을 클릭한 횟수는 {{counter}} 번 입니다. v-on:click = @click method Event Handler 이벤트 발생시 처리 로직을 v-on에 모두 넣기는 힘듦 v-on에서는 이벤트 발생시 처리해야 하는 method의 이름을 받아 처리 Greet Inline Event Handler 메소드 이름을 직접 바인딩 하는 대신 인라인 JavaScript 구문에 메소드를 사용할 수도 있음 원본 DOM 이벤트에 엑세스 해야 하는 경우 특별한 $event 변수를 사용해 메소드에 전달할 수도 있음 Greet Greet Event Modifier (이벤트 수식어) method는 DOM의 이벤트를 처리하는 것 보다..

Vue method Vue Instance는 생성과 관련된 data 및 method의 정의 가능 method 안에서 data를 this.데이터이름 으로 접근 가능 data : {{message}} method kor : {{helloKor()}} method eng : {{helloEng()}} Vue filter 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능 filter를 이용하여 표현식에 새로운 결과 형식을 적용 중괄호 보간법 {{}} 또는 v-bind 속성에서 사용 가능 여러 개 사용 가능 {{msg | capitalize}} 천 단위마다 ',' 찍기 / 전화번호에 '- ' 넣기 금액 : 전화번호 : {{ msg1 | price }} {{ msg2 | mobile }} Vue computed..

Vue.js 사용자 인터페이스를 만들기 위한 동적 JavaScript 프레임워크 컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인 됨 MVVM Pattern Model : 순수 자바스크립트 객체 View : 웹페이지의 DOM ViewModel : Vue의 역할 * 기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 library 이용 * Vue는 view와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함 Vue Instance el Vue가 적용될 요소 지정 CSS Selector or HTML Element data Vue에서 사용되는 정보 저장 객체 또는 함수 형태 template ..

JSON (JavaScript Object Notation) JSON data : name-value 형태의 쌍으로 collection 타입 data는 , 로 나열 객체는 {} 로 표현 배열은 [] 로 표현 XML 사용시 파싱과 같은 복잡한 문제를 해결 XML에 비해 상대적으로 구문이 짧음 단, JSON은 전달받은 데이터의 무결성을 직접 검증 (XML은 스키마 이용) 텍스트 기반이므로 어떠한 프로그래밍언어와 플랫폼에서도 사용 가능 JSON 자료형 수 (Number) 문자열 String) : 끈따옴표로 구분 참/거짓 (Boolean) 배열 (Array) 객체 (Object) null (비어 있는 값) { "name": "신짱구", "age": 7, "married": false, "family": { "f..

Event 웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트가 발생 JavaScript를 사용해 DOM에서 발생하는 이벤트를 감지하여 대응하는 여러 작업 수행 가능 이벤트는 일반적으로 함수와 연결이 되고,이벤트 발생 전에는 실행되지 않다가 이벤트가 발생할 경우 실행 Event Handler (Listener) 이벤트 발생시 실행해야 하는 함수 Event 종류 마우스 이벤트 이벤트 설명 onclick 마우스로 Element를 클릭 했을 때 발생 ondblclick 마우스로 Element를 더블 클릭 했을 때 발생 onmouseup Element에 마우스 버튼을 올렸을 때 발생 onmousedown Element에서 마우스 버튼을 눌렀을 때 발생 onmouseover 마우스를 움직여서 Element..

Swagger 간단한 설정으로 프로젝트의 API 목록을 웹에서 확인 및 테스트 할 수 있게 해주는 Library Swagger를 사용하면 Controller에 정의되어 있는 모든 URL을 바로 확인할 수 있음 API 추가 또는 변경 시 문서에 적용해야하는 불편함 해결 💡 FrontEnd 개발자는 화면과 로직에 집중하고, BackEnd 개발자가 만든 문서 API를 보며 데이터 처리! Swagger 적용 1. dependency 추가, 설정 pom.xml io.springfox springfox-boot-starter 3.0.0 io.springfox springfox-swagger2 3.0.0 io.springfox springfox-swagger-ui 3.0.0 root-context.xml 2. Swa..

Ajax (Asynchronous JavaScript and XML) 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법 (화면의 일부만 갱신 가능) 화면 갱신이 없으므로 사용자는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡 언어나 프레임워크가 아닌 구현하는 방식을 의미 CORS error가 발생할 수 있음 💡 일반 요청에 대한 응답 - data를 입력 후 event 발생 - Ajax를 적용하지 않은 요청은 서버에서 data를 이용하여 logic 처리 - logic 처리에 대한 결과에 따라 응답 page를 생성하고 client에 전송 (화면 전환 발생) 💡 Ajax 요청에 대한 응답 - data를 입력 후 event 발생 - Ajax를 적용하면 event 발생시 서버에서 ..

DOM ( Document Object Model ) HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공 DOM 객체 가져오기 태그 이름(tag name)을 이용한 선택 💡 getElementsByTagName(tagname) : 태그이름이 tagname과 일치하는 element 배열 얻기 var selectedItem = document.getElementsByTagName("li"); // 모든 요소를 선택 for (var i = 0; i < selectedItem.length; i++) { selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변..

Spring Boot 스프링(Spring)을 더 쉽게 이용하기 위한 도구 * Spring의 경우 Application을 개발하려면 사전에 많은 작업을 해야했음 ( library 추가, dependency 설정, SpringFramework가 처리해야 하는 여러 가지 구성 및 설정파일 등 ) Spring Boot의 장점 project에 따라 자주 사용되는 library들이 미리 조합되어 있음 복잡한 설정을 자동으로 처리 내장 서버를 포함해서 tomcat과 같은 WAS를 추가로 설치하지 않아도 개발 가능 WAS에 배포하지 않고도 실행할 수 있는 JAR 파일로 Web Application을 개발 가능 Project 생성 Project 구조 src/main/java : java source directory H..