profile
자기에게 매일 주어진 의무와 책임을 직시하고 실천하는 것이 자유이다.
post-thumbnail

Spring - 웹 개발 기초

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

2일 전
·
0개의 댓글

Spring - View환경설정

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

2일 전
·
0개의 댓글
post-thumbnail

Spring - 라이브러리 살펴보기

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

2일 전
·
0개의 댓글
post-thumbnail

Spring - 프로젝트 생성

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

2일 전
·
0개의 댓글

Vue.js - NPM 이란?

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

2일 전
·
0개의 댓글

Vue.js - ES6란?

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

2일 전
·
0개의 댓글

Vue.js - 웹팩(webpack)이란?

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

2일 전
·
0개의 댓글

Vue.js - 서버 사이드 렌더링과 클라이언트 사이드 렌더링

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

2일 전
·
0개의 댓글

Vue.js - 뷰엑스(Vuex), 뷰의 반응성(Vue Reactivity)

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

3일 전
·
0개의 댓글
post-thumbnail

Vue.js로 todolist 만들기 - 뷰 애니메이션, 뷰 모달

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

3일 전
·
0개의 댓글

Vue.js로 todolist 만들기 - 문제점 및 해결 방법

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

3일 전
·
0개의 댓글
post-thumbnail

Vue.js로 todolist 만들기 - 할일 목록 표시, 제거 기능

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

3일 전
·
0개의 댓글
post-thumbnail

Vue.js로 todolist 만들기 - 로컬 스토리지

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

4일 전
·
0개의 댓글
post-thumbnail

Vue.js - 프로젝트 구성 방법, 뷰 CLI 명령어

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

5일 전
·
0개의 댓글

Vue.js - 뷰 템플릿(vue template)

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

5일 전
·
0개의 댓글

Vue.js - HTTP 통신, axios 라이브러리

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

5일 전
·
0개의 댓글

Vue.js - 뷰 라우터, 네스티드 라우터, 네임드 뷰

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

5일 전
·
0개의 댓글

Vue.js - 컴포넌트(component), 컴포넌트 간 유효범위

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

5일 전
·
0개의 댓글

Vue.js - 뷰 인스턴스, 라이프 사이클

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

5일 전
·
0개의 댓글
post-thumbnail

Vue.js - Vue.js란 무엇인가?

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

5일 전
·
0개의 댓글