윤개발

이번 포스트에서는 백엔드 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..

email 성함 비밀번호 비밀번호 확인 직책 팀 이름 회원가입 1. View @ 는 v-on 과 같은 표현식이다. 폼 내부에서 버튼을 누르면 submit 이벤트가 form 으로 전송되고 v-on:submit이 실행된다. 이때 페이지가 새로고침되므로 .prevent를 통해 새로고침을 막고 methods의 함수롤 호출하게 한다. 2. Methods 이때 페이지가 새로고침되므로 .prevent를 통해 새로고침을 막고 methods의 함수롤 호출하게 한다. 함수를 구현하여 backend로 Axios 호출을 보내는 부분을 작성하면 된다.

1. vue.config.js 파일에 아래와 같은 내용을 추가한다. const path = require('path'); module.exports = { configureWebpack: { resolve: { alias: { '@': path.join(__dirname, 'src/'), }, }, }, }; 2.webpack.config.js 파일을 생성하고 아래내용을 추가한다. const path = require('path'); module.exports = { resolve: { alias: { '@': path.resolve(__dirname, 'src/'), }, }, }; 3. preferences > webpack 검색후 webpack.config.js 파일을 경로로 잡아준다. 3. 아래와..

중첩 클래스 중첩 클래스란 다른 클래스 안에 정의된 클래스를 말한다. 중첩 클래스는 자신을 감싼 바깥 클래스에서만 쓰여야 하며, 그외의 쓰임새가 있다면 톱레벨 클래스로 만들어야 한다. 아래 4가지 클래스는 중첩클래스의 종류들 이다. class A { int a = 10; public void run() { System.out.println("Run A"); B.run(); C c = new C(); c.run(); } // 정적 멤버 클래스 public static class B { public static void run() { System.out.println("Run B"); } } // 비정적 멤버 클래스 public class C { public void run() { // 정규화된 this를 ..

아래 코드는 두 가지 이상의 의미를 표현할 수 있으며 현재 표현하려는 의미를 태그값으로 알려주는 클래스이다. class Figure { enum Shape { RECTANGLE, CIRCLE }; final Shape shape; // 태그 필드 - 현재 모양을 나타낸다. // 다음 필드들은 모양이 사각형(RECTANGLE)일 때만 쓰인다. double length; double width; // 다음 필드느 모양이 원(CIRCLE)일 때만 쓰인다. double radius; // 원용 생성자 Figure(double radius) { shape = Shape.CIRCLE; this.radius = radius; } // 사각형용 생성자 Figure(double length, double width) {..

class Point{ public double x; public double y; } 이처럼 인스턴스 필드들을 모아둔 목적없는 퇴보한 클래스를 작성하려 할 때가 있다. 이러한 클래스는 직접 접근이 가능하여 캡슐화의 이점을 제공하지 못하고, 불변을 보장할 수 없다. 객체지향에서는 이런 클래스를 상당히 싫어해서 필드를 모두 private로 바꾸고 public 접근자 getter를 추가한다. 하지만 package-private(패키지에서만 접근할 수 있도록) 클래스 혹은 private 중첩 클래스(클래스 안에 클래스)라면 데이터 필드를 노출한다 해도 하등의 문제가 없다. 정리 public 클래스는 절대 가변 필드를 직접 노출해서는 안된다. 하지만 pacakge-private 클래스나 private 중첩 클래..

재정의를 하지 않는다. equals 메서드는 재정의하기 쉬워보이지만 곳곳에 함정이 있어 큰 문제가 될 수 있다. 가장 쉬운 길은 아예 재정의를 하지 않는 것이다. 아래 상황에 해당한다면 재정의 하지 않는것이 최선이다. 각 인스턴스가 본질적으로 고유하다. 값을 표현하는게 아니라 개체를 표현하는 클래스가 해당된다. 인스턴스의 논리적 동치성을 검사할 일이 없다. 상위 클래스에서 재정의한 equals가 하위 클래스에도 딱 들어맞는다. 클래스가 private 여서 equals를 호출할 일이 없다. 실수로라도 호출되는 걸 막고싶다면 예외처리로 throw new AssertionError()를 발생시키자.. 재정의 하는 상황 논리적 동치성을 비교해야할 때 재정의하면 좋다. 객체가 아니라 값이 같은지를 알고싶을때 Ma..

자바 라이브러리에는 close 메서드를 호출해 직접 닫아줘야 하는 자원이 많다. 상당수가 안전망으로 finalizer를 이용하지만 믿을만 하지 못하다.(item8) 전통적으로 자원을 닫힘을 보장하는 수단으로서 아래와 같이 try-finally가 쓰였다. try { OutputStream out = new FileOutputStream("filePath"); // do something } finally { out.close(); } 하지만 2개의 자원을 닫아야 하는 구간에서는 예외가 무시될 수 있으며 코드의 가독성도 떨어진다. public void copy(String src, String dst) throws IOException { InputStream in = new FileInputStream(s..

자바는 두 가지 객체 소멸자인 finalizer와 cleaner를 제공한다. finalizer는 예측할 수 없고, 상황에 따라 위험하여 쓰지 말아야한다. 또한 cleaner도 여전히 예측할 수 없고 느리며 불필요하다. 사용을 피해야 하는 이유 언제 실행될 지 알 수 없다. 성능 저하가 발생한다. finalize에서 발생한 예외는 무시되어 알 수 없다. finalizer와 cleaner 를 쓰는 곳 자원 반납에 쓸 close 메소드를 클라이언트가 호출하지 않았다면 사용할 만 하다. finalizer나 Cleaner가 호출될지 안될지 언제 호출될지도 모른지만 안하는 것 보다는 나으니 사용할 만 하다. 자바에서 제공하는 FileInputStream, FileOutputStream, ThreadPoolExecu..

가비지 컬렉션 언어에서는 메모리 누수를 찾기가 아주 까다롭다. 때문에 해당 참조를 다 사용한 후 null 처리하면 된다. Stack에서 메모리를 직접 관리하는 예제 public class Stack { private Object[] elements; ... public Object pop() { if (size == 0) throw new EmptyStackException(); return elements[--size]; // 문제점 } ... } 위 코드는 pop() 메소드에서 size를 감소시키지만 해당 값은 그대로 있어 메모리 누수가 발생하는 것을 볼 수 있다. 스택에서 pop을 할 경우 null 처리를 해준 코드 Object result = elements[--size]; elements[siz..

NPM 은 Node Package Manager 이다. node 에서 사용하는 라이브러리들을 관리해준다. NPM의 장점 라이브러리 관리 측면에서 html에 직접 코드를 삽입하는 것 보다는 package.json을 통해서 관리하는 것이 보기 편하다. 라이브러리 설치 측면에서 웹에서 찾아서 넣는 것 보다 install을 통해 바로 받아오는 것이 편하다. visual studio code 또는 편집기에서 터미널을 실행한다. 설치가 잘 되어있는지 확인하기 위해 명령어를 입력한다. node -v //노드의 버전 npm -v //노드 패키지 매니저 버전 NPM 초기화 명령어 npm init 명령어를 입력하게 되면 프로젝트의 내용을 하나하나 설정할 수 있다. 모두 입력하게 되면 package.json 이 생성된다. ..