비공개 개발 블로그

Response 글로벌 메시지 설정 각 operation마다 response를 따로(컨트롤러에) 작성해주는 것은 귀찮기도 하고, 보기에 깔끔하지 않을 수 있다. 스웨거를 이용해 공통적으로 응답 메시지를 작성해줄 수 있다. 기본적으로 스웨거에서 response 메시지를 제공해주는데 해당 설정 useDefaultResponseMessages를 false 하고 response 설정을 해주면 된다. 위와 같이 설정해주면 이렇게 뜬다. 만약 이러한 방식을 이용하지 않고 컨트롤러에 설정하려면 귀찮고..보기에도 영.. Reload 설정 회사에서 vue를 쓰다보니 hot reload에 익숙해져서 todo 플젝에도 적용해보려고 한다. 아주 간단하다. devtools를 이용하면 되기 때문 https://barbera.ti..

https://whats-this-i-dont-know.tistory.com/45?category=1112076 swagger (개인 플젝) 2022.09.30 Todo Project 1. swagger ui 세팅 2. SNS 로그인 3. 지도 open api 설정 https://sharplee7.tistory.com/48 Swagger UI 사용법 정의 Swagger UI란 Swagger 제품군 중 API Documentation과 관련된 기능.. whats-this-i-dont-know.tistory.com Swagger UI를 사용하면 개발 팀이든 엔드 유저든 누구나 구현 로직 없이도 API 리소스를 시각화하고 상호 작용할 수 있도록 도와준다.(OAS(Open Api Specification)으로 ..

이전까지는 GET을 통해 모든 투두 데이터를 가져오는 것까지 해봤다. 이제 추가하는 기능을 구현해보겠다. Spring Boot(Backend) 백엔드 개발 방법에는 Test-Driven Development라고 요즘 많이 쓰는 TDD 방식이 있다. TDD란 클래스와 메소드의 껍데기를 정의하고, Unit Tests를 작성해 테스트를 먼저 하고 그에 따라 클래스와 메소드 내부를 구현하는 방식이다. 나는 아직 이 방식에 익숙치 않아서 다음번에 기회가 된다면 해보겠다. ToDoItemService public ToDoItem update(final ToDoItem toDoItem){ if(toDoItem == null){ throw new NullPointerException("To Do Item can not..

bootstrap-vue bootstrap-vue는 Bootstrap을 Vue.js에서 사용할 수 있도록 만든 패키지이다. 나는 vue3를 쓰기 때문에 bootstrap-vue-3를 이용해보겠다. https://www.npmjs.com/package/bootstrap-vue-3 bootstrap-vue-3 패키지 설치 to-do-frontend 프로젝트 디렉토리로 들어가서 설치한다. npm i bootstrap-vue-3 bootstrap --save 뷰 프로젝트 재실행한다. 이제 main.js에 임포트해준다. main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import Boot..

현재 프론트엔드 프로젝트 구조 assets : .css나 .png 같은 UI 관련 리소스들이 들어간다. components : 여기에 바로 화면 내부에 들어갈 html 템플릿과 vue.js 함수들이 들어간다. router : vue.js의 라우팅 정보가 들어간다. main.js : 이 Vue 앱을 초기화 시키는 자바스크립트이다. App.vue : 이 앱의 기본(디폴트) 템플릿이라고 생각하면 된다. index.js : vue-router를 이용해 경로를 설정하는 자바스크립트이다. Todo.vue : ToDoItem 관련 로직을 넣을 컴포넌트이다. 컴포넌트는 Vue.js에서 재사용 할 수 있는 단위이다. html 페이지 하나를 컴포넌트 하나라고 생각하면 쉽다. Todo.vue 오늘 해야 할 일 {{toDoI..

Node.js와 Vue.js를 이용해 프론트엔드 웹 서버를 만들어 보려고 한다. Node.js 설치 https://nodejs.org/en/download/ Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Mac LTS 버전으로 다운받았다. Vue Project 생성 원하는 위치에 Vue 프로젝트 폴더를 생성해준다. 해당 폴더에 뷰 프로젝트를 생성하겠다. vs code ide를 실행시키고 뷰 폴더를 선택해서 연다. 그리고 터미널을 실행해 프로젝트를 생성해보겠다. vue cli(command line interface) 콘솔 창(터미널 창)에서 명령어 한 줄로 vue 프로..

DB 선택 기준 데이터베이스를 연결하기 전에 이전에 면접 본 게 생각나서 db 선택 기준을 알아보았다. 면접에서 왜 이 디비를 선택했나? 이랬는데 솔직히 대답을 제대로 못했다...그냥 안써봐서 써보려구요 이게 내 대답이었다. 그래서 한 번 알아보았다. 데이터베이스는 저장되는 데이터의 액세스 특성과 패턴으로 봐야 한다. 데이터는 SQL 스키마와 같은 정형 데이터 또는 각각 형태가 다를 수 있는 JSON 객체와 같은 반정형 데이터일 수 있다. 파일 이름과 파일 콘텐츠 관계처럼 크게 다르지 않은 기-값 페어 또는 전체 텍스트 검색을 위한 텍스트 데이터와 같이 정의된 구조가 없을 수도 있다. 관계형 데이터베이스 관계형 데이터베이스는 널리 사용되고 있다. 관계형 데이터베이스는 스스로 정의하는 데이터베이스이다. 개..

RESTful API(Respresentational State Transfer) HTTP 리퀘스트를 이용해 데이터를 GET, POST, PUT, DELETE 할 수 있도록 하는 API Request HTTP Method GET : 데이터를 가져온다. POST : 데이터를 생성하거나 업데이트한다. PUT : 데이터를 업데이트한다. DELETE : 데이터를 삭제한다. 이 글에서는 GET API 구현에 중점을 둔다. http://localhost:8080/todo/{id}라는 URL로 들어가면 JSON 오브젝트를 리턴하도록 만들 것이다. { "data": {"id":null,"title":"Add an id validation","done":false}, "errors":[] } 웹 어플리케이션 디자인 어플..

의존성 추가하기 spring boot 의존성과, lombok, test code를 위한 의존성을 추가해준다. 자 여기서 implementation, compileOnly 등이 나오는데 이것이 뭔지 알아보았다. Classpath 클래스나 jar 파일이 존재하는 위치 Compile-time classpath 에러없이 컴파일을 하기 위해 필요한 클래스와 jar들의 위치 Run-time classpath 애플리케이션이 정상적으로 실행하기 위해 필요한 클래스들과 jar들의 경로 위 두 path에 있는 jar들이 있어야 제대로 컴파일과 실행이 될 것이다. 위처럼 디펜던시가 나온다. dependency configurations compile -> implementation, api testCompile -> tes..

가장 기본이 되는 투두 앱을 만들어보며, 전반적으로 백엔드와 프론트 서버를 만들어보고, 개발을 해보려고 한다. 뭐든지 만들다보면 실력이 늘지 않을까..싶은 나의 마음..ㅠㅠ 스프링 부트 프로젝트 생성 위 스펙으로 intiilj에서 프로젝트를 만들었다. 프로젝트 하다보니 Todo로 이름 변경했다. git ignore 파일 생성 java, gradle, jetbrains 선택(이외에 추가로 제외할 파일이 있다면 직접 입력해주면 된다.) 더보기 git ignore 적용 안될 때 git rm -r --cached . git add . git commit -m "fixed untracked files" git push