0. 출처  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 1. Directive  v- 접두사가 있는 특수한 속성. 디렉티브설명v-bind데이터와 속성이나 요소, 컴포넌트 props를 바인딩v-on이벤트 리스너를 추가v-if조건에 따라 요소를 렌더링v-elsev-if의 “else” 블록v-else-ifv-if의 “else if” 블록v-for배열을 기반으로 요소를 반복v-model양방향 데이터 바인딩v-show조건에 따라 요소의 표시 상태를 토글v-slot슬롯의 컨텐츠를 정의v-pre컴파일 과정에서 요소와 자식 요소를 무시v-cloakCSS 디스플레이를 "none"으로 설정하면서 Vue 인스턴스가 마운트되지 않은 요소를 숨김v-once요소와..

1. Template Syntax Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 가. Text Interpolation  Message: {{msg}} 가장 기본적인 데이터 바인딩 방식이다. Mustache syntax (콧수염 구문)을 사용한다. Mustache syntax tag는 상응하는 컴포넌트 인스턴스의 msg 프로퍼티의 값으로 대체된다. 또한 msg 프로퍼티의 값이 변경되면 언제든지 업데이트된다! 나. Raw HTML 텍스트 보간법 사용: {{ rawHtml }}v-html 디렉티브 사용:  Mustache syntax는 plain text로 해석된다. 만약 plain text가 아닌 HTML로 해석되기 원한다면 v-html라는 속..

1. SPA란? Single Page Application하나의 페이지로 구성된 웹 애플리케이션 웹 페이지에서 하는 일이 많아지면서 웹 페이지를 더 빠르게 로딩하기 위해 등장한 기술이다. SPA는 한 번 웹 페이지를 로드한 후, 사용자와 상호작용하면서 동적으로 페이지를 업데이트. 전체 페이지를 다시 로드하지 않고 필요한 부분만 로드한다. 서버로부터 네트워크 트래픽을 줄이고, 사용자 경험을 향상한다. 2. CSR란? Client Side Rendering클라이언트 측 렌더링CSR은 사용자의 브라우저에서 JavaScript를 사용하여 웹 페이지를 직접 렌더링 하는 방식이다.사용자가 요청하면, 서버는 HTML 파일과 JavaScript 파일을 먼저 보내고, 이후 JavaScript가 페이지를 렌더링 한다. 장..

CORS(교차 출처 리소스 공유) | 토스페이먼츠 개발자센터CORS를 번역하면 “교차 출처 리소스 공유”에요. ‘두 출처가 서로 다르다’는 뜻인데요. CORS를 설정한다는 건 ‘출처가 다른 서버 간의 리소스 공유’를 허용한다는 거죠.docs.tosspayments.com 1. Origin이란? Origin = Protocol + Host + Port 2. SOP란?  SOP(Same-Origin Policy, 동일 출처 정책)는 웹 보안의 중요한 개념 중 하나로, 특정 출처(origin)에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호작용하지 못하도록 제한하는 정책이다. SOP는 웹 브라우저가 클라이언트 측에서 악의적인 스크립트가 다른 출처의 콘텐츠에 접근하지 못하도록 하기 위해 도입되었다. 가...

1. SpringBoot란? Spring Boot spring.io Spring Boot는 제품 수준의 Spring 애플리케이션을 쉽게 만들 수 있게 도와준다. Spring 플랫폼과 다른 라이브러리를 활용하면, 복잡한 설정 없이 바로 시작할 수 있다. 대부분의 Spring Boot 애플리케이션은 간단한 Spring 설정만 필요하다. 복잡한 설정을 자동화.자주 사용되는 library들이 조합되어 있다. (starter dependency 제공)서버를 내장하고 있어서 Tomcat, Jetty와 같은 별도의 WAS 설치가 필요 없다.WAS에 배포하지 않고도 실행할 수 있다. 2. 시작하기 가. Spring initializr https://start.spring.io/ SpringBoot 프로젝트를 생성하는 ..

1. Rest란? Representational State Transfer하나의 URI는 하나의 고유한 리소스를 대표하도록 설계된다는 개념. URI + HTTP Method (GET/POST/PUT/DELETE)  HTTP URI를 통해 제어할 자원을 명시하고, 어떤 제어를 명령할지는 HTTP Method를 통해 설정하는 방식. Method설명POSTCreateGETReadPUT, PATCHUpdateDELETEDelete  서비스 유형설명기존의 서비스요청 처리 후, 가공된 데이터를 이용해 특정 플랫폼에 적합한 형태의 View로 반환Rest 서비스데이터 처리만 하거나, 처리 후 반환할 데이터가 있다면 JSON이나 XML 형식으로 반환 💡 Q. View를 반환하는 경우도 있지 않았나?HTTP URI를 통..

1. @PathVariable@GetMapping("/blog/{userid}/{articleno}")public String viewArticle(@PathVariable("userid") String userId, @PathVariable("articleno") int articleNo, Model model){ ... return "blog/view";}url에 일부분을 매개변수로 사용할 수 있다. Clean URL, Rest API에 유용하다. 2. @ResponseBody// join.jsplet isUseId = false;document.querySelector("#userid").addEventListener("keyup", function () {let userid = this..

mybatis-springGetting Started This chapter will show you in a few steps how to install and setup MyBatis-Spring and how to build a simple transactional application. Installation To use the MyBatis-Spring module, you just need to include the mybatis-spring-3.0.3.jar filemybatis.org 1. 설치 MyBatis-Spring module을 사용하기 위해서는 mybatis-spring-3.0.3.jar 파일과 그 외 dependencies를 classpath에 추가해야 한다. 단, Maven을 ..