1\. 정적 컨텐츠파일을 그대로 웹 브라우저에게 보여주는 것 2\. MVC 와 템플릿 엔진jsp도 템플릿 엔진, html을 그냥 주는 게 아니라 서버에서 프로그래밍 해서 html을 동적으로 바꿔서 주는.. 그것을 하기 위해 컨트롤러를 사용한다. 요즘에는 이런 것을 통해

스프링 부트는 스프링 생태계 자체를 감싸서 굉장히 편리하게 사용하도록 한다. 스프링은 어마어마하기 때문에 필요한 것을 찾는 개념으로 익히는 게 좋다 7.1.6. Welcome PageSpring Boot supports both static and templated w

Gradle은 의존관계가 있는 라이브러리를 함께 다운로드 한다 스프링 부트 라이브러리spring-boot-starter-web spring-boot-starter-tomcat: 톰캣 (웹서버) spring-webmvc: 스프링 웹 MVC spring-boot-star

https://start.spring.io/필요한 라이브러리를 가져오고 빌드하는 라이프 사이클을 관리해주는 툴이다. 과거에는 maven을 많이 사용했는데 요즘 추세는 gradle로 넘어오는 상황이다. spring boot 에서 snapshot은 아직 만드는 중

NPM 이란?뷰 CLI로 프로젝트를 구성하고 실행할 때 npmm install, npm run dev와 같은 명령어를 사용했다. NPM(node package manager)는 전 세계 자바스크립트 라이브러리가 존재하는 공개 저장소이다. 자바스크립트의 활용 범위가 넓어

ES6란?ES6는 최신 자바스크립트 문법이자 스펙이다. 개발자가 더 쉽게 코드를 작성할 수 있도록 문법을 단수화하고, 유효범위를 제한하는 등의 기능을 추가했다. const과 letconst과 let는 변수를 선언할 때 사용하는 예약어이다. ES5에서는 변수를 선언할 때

웹팩이란? 모듈 번들러이다. 서로 연관이 있는 모듈 간의 관계를 해석하여 정적인 자원으로 변환해 주는 변환 도구이다. (= 파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해 주는 변환 도구)기본적인 취지: 애플리케이션 동자고가 관련된 여러개의 파일(ht

브라우저는 웹 페이지를 화면에 나타내는 역할을 한다. 완벽하게 그려진 html 페이지를 나타내는 것일부만 그려져 있어 추가로 더 그려야 할 것이 남아있는 html이 두가지는 차이가 있다. 클라이언트 사이드 렌더링 💚다 그려져 있지 않은 HTML 페이지를 브라우저에서

Vuex뷰엑스는 상태관리를 돕는 라이브러리. 상태(state)란? 특정 데이터를 여러 컴포넌트가 공유하고 있을 때 그 데이터를 상태(state)라고 한다. 컴포넌트가 너무 많을 때 props로 데이터를 전달한다고 하면 모든 컴포넌트에 props를 설정해줘야 한다. 이때

뷰 애니메이션뷰 프레임워크 자체에서 지원하는 애니메이션 기능으로, 데이터 추가, 변경, 삭제에 대해서 fade in, fade out 등의 여러 가지 애니메이션 효과를 지원한다. ❗:key 속성은 v-for 디렉티브를 사용할 때 지정하는 게 좋다. 뷰 모달input b

현재 애플리케이션 구조의 문제점할 일을 입력했을 때 바로 목록에 반영 X할 일을 모두 삭제했을 때 할 일 목록에 바로 반영 X문제 해결을 위한 애플리케이션 구조 개선같은 데이터 속성을 사용하기 위해 최상위(루트) 컴포넌트 App 컴포넌트에 items라는 데이터를 정의하

저장된 할 일 목록을 표시직접 텍스트를 입력하는 대신 로컬 스토리지의 데이터 개수만큼 목록에 추가하여 표시해보자. 로컬 스토리지 데이터를 뷰 데이터에 저장뷰 데이터의 아이템 개수만큼 리스트 아이템 표시 push()는 배열의 끝 요소에 배열 아이템을 하나씩 추가하는 자바

todolist 살펴보기간단하면서도 반드시 알아야 할 컴포넌트 구조화와 컴포넌트 통신을 구현해볼 수 있음. 추가된 할일 텍스트 데이터는 브라우저 저장소인 로컬 스토리지에 저장된다. 브라우저 저장소를 사용하면 서버와 db를 별도로 구성하지 않고도 간단하게 js 한줄로 d

html 파일에서 뷰 코드 작성 시의 한계점 코드 복잡해지고..가독성 떨어짐\-> 싱글 파일 컴포넌트 체계 : .vue 파일로 프로젝트 구조를 구성하는 방식을 말한다. 확장자.vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다. 뷰 CLI싱글 파일

뷰 템플릿이란?뷰의 템플릿은 html, css등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 html로 변환해주는 속성이다. 데이터 바인딩html 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다

웹 앱의 HTTP 통신 방법웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 한다. 과거의 웹 사이트가 정적인 텍스트나 간단한 이미지를 나타내는 데 그쳤다면 .. 이제는 사용자와의 상호작용에 따라 데

라우팅이란?라우터를 이해하기 위해서는 먼저 라우팅이 무엇인지 알아야 함 😁라우팅이란 웹 페이지 간의 이동방법으로 싱글 페이지 애플리케이션에서 많이 사용한다 (싱글 페이지 패턴 : 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을

컴포넌트란? 컴포넌트란 조합하여 화면을 구성할 수 잇는 블록을 의미함. 컴포넌트 등록하기1\. 지역 컴포넌트 : 특정 인터페이스에서만 유효한 범위를 갖음2\. 전역 컴포넌트 : 여러 인스턴스에서 공통적으로 사용전역 컴포넌트 등록 전역 컴포넌트에서 모든 인스턴에 등록하려

뷰 인스턴스 생성자new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 생성자 : 객체를 새로 생성할 때 자주 사용하는 옵션과 기능을 미리 특정 객체에 저장해 놓고, 새로운 객체를 생성할 때

리액트와 앵귤러를 잠깐씩만 건들여보았던 나는 vue.js도 궁금해졌다. 그래서 공부해보기로 함 😶Vue.js란 무엇인가?웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크Vue.js의 역사 뷰의 창시자 에반은 앵귤러의 데이터 바인딩 방식과 돔에 접근하지 않고도 데이