웹 어플리케이션
-
스프링 부트(Spring Boot) + 몽고디비(Mongo DB) 도커(Docker)에 올리기웹 어플리케이션 2019. 3. 5. 15:44
이번 포스트에서는 docker-compose.yml을 이용해 스프링부트와 몽고디비를 도커에 올려보도록 하겠다. 이번 포스트는 이전 포스트에 많이 의존하므로 스프링 부트에 도커 올리기부터 따라 오는 것을 추천한다. 이제 드디어 임베디드 몽고디비에서 벗어나, docker compose를 이용해 실제 몽고디비를 도커에 올리고, 스프링 부트가 이 몽고디비를 이용하도록 설정 해 보도록 한다.예상 독자도커를 설치했다. ( 도커(Docker) 설치하기 )스프링 부트에 도커를 올렸봤다. ( 스프링 부트에 도커 올리기(Dockerizing Spring Boot) )To Do App을 따라서 잘 만들어왔다. - 꼭 필요한건 아니지만 이 포스트가 To Do App을 이용해 실습하기 때문에 따라하기 더 쉽다.목표docker-..
-
[To-Do 앱]스프링 부트(Spring Boot) RESTful API - PUT & Vue.js/Node.js Update 기능 구현웹 어플리케이션 2019. 3. 4. 15:06
지난번 포스트까지 해서 우리는 Spring Boot로 RESTful API를 만들고, Node.js와 Vue.js로 Frontend 서버를 만들어 보았다. 이전 포스트까지 전부 진행했다면 이제부터는 혼자 원하는 기능을 만들어가도 된다. 이번 포스트에서는 RESTful API의 메서드 중 하나인 PUT을 만들고 서비스 레벨부터 UI레벨까지 full stack으로 개발을 진행 해 보도록 하겠다.예상독자IntelliJ, Webstorm, Atom 등 자바스크립트 IDE중 하나를 설치했다.자바스크립트를 좀 안다.백엔드는 알아서 구현할 수 있거나 아래의 튜토리얼들을 마쳤다.[To-Do 앱]스프링부트(SpringBoot) 웹 어플리케이션)[To-Do 앱] 스프링 부트(Spring Boot) RESTful API -..
-
[To-Do 앱]Vue.js/Node.js To Do Item 추가 기능 만들기웹 어플리케이션 2019. 2. 28. 15:11
이번 포스트에서는 RESTful API중 POST 메서드를 이용해 To Do Item을 '추가'하는 기능을 만들도록 한다.예상독자IntelliJ, Webstorm, Atom 등 자바스크립트 IDE중 하나를 설치했다.자바스크립트를 좀 안다.백엔드는 알아서 구현할 수 있거나 아래의 튜토리얼들을 마쳤다.[To-Do 앱]스프링부트(SpringBoot) 웹 어플리케이션)[To-Do 앱] 스프링 부트(Spring Boot) RESTful API - GET[To-Do 앱] 스프링 부트(Spring Boot) RESTful API - POST [To-Do 앱]vue.js와 node.js를 이용해 웹 앱 만들기[To-Do 앱]Vue.js/Node.js 앱 에서 API Call 하기 (Axios) [To-Do 앱]Vue...
-
[To-Do 앱]Vue.js/Node.js Bootstrap-vue를 이용한 UI 구현웹 어플리케이션 2019. 2. 27. 15:23
이번 포스트에서는 Bootstrap-vue를 이용해 UI를 구현 해 보도록 하겠다. 예상독자IntelliJ, Webstorm, Atom 등 자바스크립트 IDE중 하나를 설치했다.자바스크립트를 좀 안다.백엔드는 알아서 구현할 수 있거나 아래의 튜토리얼들을 마쳤다.[To-Do 앱]스프링부트(SpringBoot) 웹 어플리케이션)[To-Do 앱] 스프링 부트(Spring Boot) RESTful API - GET[To-Do 앱] 스프링 부트(Spring Boot) RESTful API - POST [To-Do 앱]vue.js와 node.js를 이용해 웹 앱 만들기[To-Do 앱]Vue.js/Node.js 앱 에서 API Call 하기 (Axios)도커에 스프링 앱을 올리고 싶다면: 스프링 부트 도커에 올리기 ..
-
[To-Do 앱]Vue.js/Node.js 앱 에서 API Call 하기 (Axios)웹 어플리케이션 2019. 2. 26. 17:16
이전 포스트에서 Vue.js와 Node.js를 이용해 프론트엔드 웹 서버의 뼈대를 구현 해 보았다. 이번 포스트에서는 진짜로 To Do 리스트를 만들기 위해 Vue.js/Node.js 프론트엔드 서버에서 Spring Boot RESTful API서버로 API콜을 해 보도록 하겠다. 들어가기에 앞서 vue.js는 우리가 추가한 eslint패키지 때문에 들여쓰기(indention)에 매우 민감하다. 따라서 들여쓰기에 주의를 하거나 package.json에서 "lint": "eslint --ext .js,.vue src" 이 부분을 지우고 다시 실행시켜야 할 것이다. 일단 실습을 위해 프로젝트를 실행시켜라. npm run dev예상독자IntelliJ, Webstorm, Atom 등 자바스크립트 IDE중 하나를..
-
스프링 부트 도커에 올리기(Dockerizing Spring Boot App)웹 어플리케이션 2019. 2. 25. 13:36
이전 포스트 도커(Docker) 설치하기에서 도커가 무엇인지 간략하게 알아보고 도커를 설치했다. 이번 포스트에서는 실제 프로젝트를 이용해 도커 이미지를 만들고 도커 위에 컨테이너를 실행시켜 보도록 한다. 도커 이미지를 만들 프로젝트는 스프링부트 웹 어플리케이션 프로젝트이다.목차DockerfileDocker buildDocker runDockerfile첫번째로 도커가 이해 할 수 있는 Dockerfile이라는 것을 만들어 줘야 한다. 이 파일에 필요한 디펜던시 예를들어 우리와 같은 경우 어떤 자바를 사용 할 것인지, 어떤 어플리케이션(.jar)를 사용 할 것인지, 어떤 명령어로 이 도커 컨테이너를 실행시켜야 되는지에 대해 명시해야 한다.일단 프로젝트 root 디렉토리에 Dockerfile을 만들자. Doc..
-
[To-Do 앱]Vue.js 와 Node.js를 이용해 웹 앱 만들기웹 어플리케이션 2019. 2. 25. 11:42
이 포스트에서는 Node.js와 Vue.js를 이용해 프론트엔드 웹 서버를 만들어 본다. 예상독자IntelliJ, Webstorm, Atom 등 자바스크립트 IDE중 하나를 설치했다.자바스크립트를 좀 안다.백엔드는 알아서 구현할 수 있거나 아래의 튜토리얼들을 마쳤다.[To-Do 앱]스프링부트(SpringBoot) 웹 어플리케이션)[To-Do 앱] 스프링 부트(Spring Boot) RESTful API - GET[To-Do 앱] 스프링 부트(Spring Boot) RESTful API - POST 목표Node.js 설치Vue.js 설치Vue.js 앱 실행Node.js 설치Node.js는 오픈소스 자바스크립트 런타임 엔진(컴파일러+인터프리터+여러가지 다른 기능들)이다. Node.js를 사용하면 브라우저가 ..
-
[To-Do 앱] 스프링 부트(Spring Boot) RESTful API - POST웹 어플리케이션 2019. 2. 24. 11:44
지난 포스트에서는 스프링 자바 RESTful API를 설계하고 관련 패키지와 클래스를 만들었다. 그 후 가장 간단한 API인 GET을 테스트 해 보았다. 이 포스트에서는 임베디드 몽고디비를 이용해서 실제로 데이터를 생성하는 POST API를 만들어 보도록 한다. 들어가기 앞서, 이전 포스트에 있는 에러와 버그를 수정했으니 전 포스트와 조금 달라도 당황하지 말고 이 포스트를 따라 수정하면 된다.예상 독자자바와 이클립스 또는 IntelliJ가 설치되어있다.Gradle이 설치되어 있다. (Gradle 설치)자바를 좀 안다.Lombok을 사용 할 줄 안다. (포스트 : Lombok을 이용해 Getter/Setter/Builder에서 벗어나는 법)[To-Do 앱]스프링부트(SpringBoot) 웹 어플리케이션) ..