윤개발

이번 포스트에서는 백엔드 API의 구조를 알아보도록 하겠습니다. 간단한 게시판 만들기이지만 실제 사용하는 백엔드 API 구조를 설계하였습니다. 먼저 객체 정보를 알아보겠습니다. 각각은 모두 클래스 들이며 아래와 같이 사용할 예정입니다. 번호 이름 설명 1 Json 프론트와 백엔드 api는 JSON 형식으로 통신합니다. 2 Spring Security JWT 인증을 적용하여 인증 & 권한을 확인합니다. 3 DTO(Data Transfer Object) JSON으로 입력된 데이터를 JAVA 객체로 변경하고 유효성 체크를 합니다. 4 Controller 요청이 들어온 API 에서 어떤 동작을 할지 결정하고 리턴합니다. 5 Service 컨트롤러에서 받은 요청을 처리합니다. (비지니스 로직) 6 Domain J..

이번 포스팅에서는 프로젝트시 사용할 Intelij 설정을 적용해보겠습니다. 1. 플러그인 설치 Intelij 메뉴에서 File > Setting > Plugins로 들어가면 아래와 같은 화면이 나오게됩니다. 상단에 Marketplace에서 플러그인을 검색하고 설치할 수 있습니다. Vue.js, Prettier, Lombok 3개를 검색하고 설치해줍니다. 이상으로 3개의 플러그인을 설치하였습니다. 2. webpack.config 파일 생성 & 적용 다음으로는 webpack.config.js 파일을 만들고 적용시켜보도록 하겠습니다. 프로젝트 root > front 위치에 webpack.config.js 파일을 생성합니다. 생성 후 아래 코드를 복사 & 붙여넣기 합니다. const path = require(..

이번 포스팅에는 Front Vue 를 생성해보겠습니다. 프론트 생성을 위해 터미널을 열어 프로젝트의 루트 폴더(pom.xml이 위치한 폴더)로 이동해주세요. 다음 vue 프로젝트 생성을 위해 아래 명령어를 입력해주세요. vue create front 그러면 다음과 같은 창이 나오게되는데 Manually select feature(사용할 기능을 직접 선택)를 선택해주세요. 그리고 다음과 같은 항목을 선택해주세요. Babel : ES6를 ES5로 변환해줍니다. (낮은 버전의 브라우저에서 Javascript를 지원할 수 있도록 도와줍니다.) Router : vue 에서 지원하는 라우팅입니다. url 분기를 위해 선택해줍니다.. Vuex : token 등 전역 정보를 저장하기위해 선택합니다. Linter / F..

이번 포스팅에는 Backend 프로젝트를 생성해보겠습니다. Intellij Ultimate에서 기본적으로 제공하는 Spring Initializer를 사용해도 되지만 Community 버전을 고려하여 spring io에서 생성해보겠습니다. 아래 링크를 눌러주세요 https://start.spring.io/ 링크를 누르면 아래와 같은 화면이 나오게 됩니다. Project 항목은 Maven과 Gradle을 선택할 수가 있습니다. (Maven과 Gradle은 프로젝트의 의존성을 관리해줍니다.) 저는 Maven으로 선택하고 언어는 Java, Boot 버전은 2.2.9를 사용하겠습니다. 또한 그룹명등은 임의로 해주시면 되며 java 8을 사용하겠습니다. 이제 오른쪽에 보시면 Dependencies가 있습니다. 프..

최근 회사에서 Vue.js + Spring boot + MySQL + JPA 를 사용하여 3번의 프로젝트를 진행하였습니다. 프로젝트를 진행하며 사용한 방법들과 환경셋팅, 간단한 코드를 통해 게시판을 만드려고 합니다. 첫 포스팅에는 개발환경을 셋팅해보도록 하겠습니다. 저는 Intellij 좋아하여 Front와 Backend 모두 Intellij Ultimate를 사용하여 개발하였습니다. 처음으로 Intelij를 설치해주세요. https://www.jetbrains.com/ko-kr/idea/download 다운로드 IntelliJ IDEA: JetBrains가 만든 전문 개발자용 Java IDE 최신 버전 다운로드: IntelliJ IDEA (Windows, macOS, Linux) www.jetbrain..

필자의 경우 Axios를 이용해 서버에서 데이터를 변수에 넣고 그 데이터를 테이블로 보여주는 경우였다. # 이름 직책 팀 응답상태 {{ question }} 응답날짜 수정날짜 응답 수정 메일 전송 {{ index + 1 }} {{ line.name }} {{ line.position }} {{ line.teamName }} Loading... {{ text }} {{ line.responseDate != null ? line.responseDate.split('T').join(' ') : '' }} {{ line.modifiedDate != null ? line.modifiedDate.split('T').join(' ') : '' }} Edit 수정 요청 재전송

1. 하나의 클래스를 boolean 으로 적용하기 ... data() { return { previewFlag: false }; }, previewFlag가 true 값일때 hide 클래스가 적용된다. 2. 두개 이상의 클래스를 boolean으로 적용하기 previewFlag에 따라 어떤 클래스가 적용될지 다음과 같이 할 수 있다.

사용자가 email을 입력하는 input에서 벗어나면 자동으로 이메일 중복체크를 하도록 구현할 것이다. 1. View Email 이미 사용중인 이메일입니다. 이메일 형식이 다릅니다. @blur="함수명" 을 사용 : 포커스를 벗어나면(사용자가 input을 이탈하면) 자동으로 method가 실행된다. 2.Method async checkDuplicate() { //일단은 사용가능한 이메일로 true로 초기화 한다. this.availableEmail = true; //이메일 유효성을 검사한다. if (!validateEmail(this.email)) { //유효성이 틀리다면 data 값을 false로 한다. this.availableEmailForm = false; return; } else { this...

문제 현진 치킨에서 판매하는 치킨은 양념 치킨, 후라이드 치킨, 반반 치킨으로 총 세 종류이다. 반반 치킨은 절반은 양념 치킨, 절반은 후라이드 치킨으로 이루어져있다. 양념 치킨 한 마리의 가격은 A원, 후라이드 치킨 한 마리의 가격은 B원, 반반 치킨 한 마리의 가격은 C원이다. 상도는 오늘 파티를 위해 양념 치킨 최소 X마리, 후라이드 치킨 최소 Y마리를 구매하려고 한다. 반반 치킨을 두 마리 구입해 양념 치킨 하나와 후라이드 치킨 하나를 만드는 방법도 가능하다. 상도가 치킨을 구매하는 금액의 최솟값을 구해보자. 입력 첫째 줄에 다섯 정수 A, B, C, X, Y가 주어진다. 출력 양념 치킨 최소 X마리, 후라이드 치킨 최소 Y마리를 구매하는 비용의 최솟값을 출력한다. 제한 1 ≤ A, B, C ≤ ..

1.Axois 설치 백엔드의 api 호출을 위해 axios호출을 사용한다. npm i axios 2. API 폴더 & index.js 생성 api 구조화를 위해 methods에서 작성하지 않고 src 폴더 밑에 api 폴더를 만들고 index.js 에서 api 호출을 하게한다. index.js를 export 하는 구조로 사용하도록 한다. import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:8080', }); function registerUser(userData) { return instance.post('signup', userData); } export { registerUser }; axios ur..