반응형

목차

1. Java 프로젝트에 롬복 적용

2. Spring Boot 프로젝트에 롬복 적용

3. Stable 기능

3-1. val

3-2. var

4. Experimental 기능


1. Java 프로젝트에 롬복 적용

1) 롬복 라이브러리 파일 설치

프로젝트에서 롬복을 사용하려면 라이브러리 파일이 필요합니다.

https://projectlombok.org/download

 

Download

 

projectlombok.org

 

2) 프로젝트에 라이브러리 적용

File -> Project Structure(Ctrl + Alt + Shift + S)

Libraries 에 설치한 lombok.jar 지정

External Libraries 에 lombok 라이브러리 추가 확인

 

3) Lombok Plugins 설치

4) Enable annotation processing 체크


2. Spring Boot 프로젝트에 롬복 적용

1) Dependency 설정

https://mvnrepository.com/artifact/org.projectlombok/lombok

gradle dependency

// https://mvnrepository.com/artifact/org.projectlombok/lombok
compileOnly group: 'org.projectlombok', name: 'lombok', version: '1.18.12'
compileOnly 'org.projectlombok:lombok'
annotationProcessor 'org.projectlombok:lombok'

 

2) Lombok Plugins 설치

3) Enable annotation processing 체크


3. Stable 기능

1) val

val 은 변수의 type 을 선언하는 것 대신 사용할 수 있습니다.

val 은 local 변수와 foreach 식에서 사용할 수 있습니다.

자동적으로 type 을 유추하여 final 로 선언합니다. 

val 을 사용하려면 lombok.val 패키지를 import 해야 합니다.

 

이 기능은 NetBeans 에서 동작하지 않습니다.

 

package lombokTest;

import lombok.val;

import java.util.ArrayList;
import java.util.HashMap;

public class ValExample {
    public static void main(String[] args) {
        System.out.println(exampleMethod());
        exampleMethodTwo();
    }

    public static String exampleMethod() {
        val valList = new ArrayList<String>();
        valList.add("HELLO WORLD");
        val valVariable = valList.get(0);
        return valVariable.toLowerCase();
    }

    public static void exampleMethodTwo() {
        val map = new HashMap<Integer, String>();
        map.put(0, "Zero");
        map.put(5, "Five");
        for (val entry : map.entrySet()) {
            System.out.println(entry.getKey() + " : " + entry.getValue());
        }
    }
}

 

2) var

var 은 지역 변수에 final 키워드를 넣지 않는 것 빼고는 val 과 동일합니다.

package lombokTest;

import java.util.ArrayList;
import java.util.HashMap;

public class VarExample {
    public static void main(String[] args) {
        System.out.println(exampleMethod());
        exampleMethodTwo();
    }

    public static String exampleMethod() {
        var valList = new ArrayList<String>();
        valList.add("HELLO WORLD");
        var valVariable = valList.get(0);
        valVariable = "ABC";
        return valVariable.toLowerCase();
    }

    public static void exampleMethodTwo() {
        var map = new HashMap<Integer, String>();
        map.put(0, "Zero");
        map.put(5, "Five");
        map.put(5, "Seven");
        for (var entry : map.entrySet()) {
            System.out.println(entry.getKey() + " : " + entry.getValue());
        }
    }
}

 

 


4. Experimental 기능

 

반응형
반응형

목차

Lombok Dependency 설정
PostgreSQL Dependency 설정

MyBatis Dependency 설정

SpringBoot 서버 포트 변경

SpringBoot URL Prefix 변경

 


Lombok Dependency 설정

1. Lombok Plugins 설치

2. Dependency 설정

https://mvnrepository.com/artifact/org.projectlombok/lombok

gradle dependency

// https://mvnrepository.com/artifact/org.projectlombok/lombok
compileOnly group: 'org.projectlombok', name: 'lombok', version: '1.18.12'
compileOnly 'org.projectlombok:lombok'
annotationProcessor 'org.projectlombok:lombok'

 

3. Enable annotation processing 체크


PostgreSQL Dependency 설정

1. Dependency 설정

https://mvnrepository.com/artifact/org.postgresql/postgresql

gradle dependency

// https://mvnrepository.com/artifact/org.postgresql/postgresql
implementation group: 'org.postgresql', name: 'postgresql', version: '42.4.3'

 

2. application 설정 파일 수정

 

application.properties 설정

#Datasource Configuration
spring.datasource.hikari.maximum-pool-size=4
spring.datasource.url=jdbc:postgresql://localhost:5432/cherrymall
spring.datasource.username=cherrymall
spring.datasource.password=cherrymall1234

 

application.yml 설정

spring:
  datasource:
    url: jdbc:postgresql://localhost:5432/cherrymall
    username: cherrymall
    password: cherrymall1234
    hikari:
      maximum-pool-size: 4

MyBatis Dependency 설정

1. Dependency 설정

https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter

gradle dependency

// https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter
implementation group: 'org.mybatis.spring.boot', name: 'mybatis-spring-boot-starter', version: '2.2.2'

 

2. application 설정 파일 수정

 

application.properties 설정

#Mapper
mybatis.mapper-locations=classpath:mapper/**/**.xml

 

VO camel case 설정

mybatis.configuration.map-underscore-to-camel-case=true

 

application.yml 설정

mybatis:
  mapper-locations: classpath:mapper/**/**.xml
  configuration:
    map-underscore-to-camel-case: true

 

3. mapper 생성

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="">

</mapper>

 

주의사항

Mybatis 버전이 너무 낮은 경우에 가끔 @Mapper 어노테이션으로 등록한 빈을 찾지 못해서 에러가 발생하는 경우가 있음.
이 때는 Mybatis 버전을 업그레이드할 것.


SpringBoot 서버 포트 변경

스프링 부트의 설정 파일인 application.properties 혹은 application.yml 파일에 다음 설정을 추가하면 됩니다.

 

application.properties

server.port = 7000

 

application.yml

server:
  port: 7000

SpringBoot URL Prefix 변경

스프링 부트의 설정 파일인 application.properties 혹은 application.yml 파일에 다음 설정을 추가하면 됩니다.

 

application.properties

server.servlet.context-path = /api

 

application.yml

server:
  servlet:
    context-path: /api

 


오늘도 행복한 하루 보내세요.

감사합니다.

반응형
반응형

목차

1. 접속

2. 종료

3. 사용자 조회

4. 사용자 생성

5. 사용자 변경

6. 사용자 삭제

7. 데이터베이스 목록 조회

8. 데이터베이스 생성

9. 데이터베이스 삭제


1. 접속

명령어 : psql

옵션 :

-U 접속 할 계정

-d 접속 할 DB


2. 종료

명령어 : \quit, \q


3. 사용자 조회

명령어 : \du


4. 사용자 생성

명령어 : CREATE USER 사용자명;


5. 사용자 변경

명령어 : ALTER USER 사용자명;


6. 사용자 삭제

명령어 : DROP USER 사용자명;


7. 데이터베이스 목록 조회

명령어 : 

일반 조회  \list, \l

상세 조회  \list+, \l+


8. 데이터베이스 생성

명령어 : CREATE DATABASE 데이터베이스명;


9. 데이터베이스 삭제

명령어 : DROP DATABASE 데이터베이스명;


 

 

 

 

본문에 정리된 psql 명령어에는 더 다양한 옵션이 있습니다.

해당 본문은 단순 참고용으로 사용하세요.

 

오늘도 행복한 하루 보내세요.

감사합니다.

반응형
반응형


1. Toss 

Toss 개발자 센터 : https://developers.tosspayments.com/

 

토스페이먼츠 개발자센터

따로 연동할 필요 없이 한 번에! 연동에 드는 시간, 이제 제품에 집중하세요.

developers.tosspayments.com

 

 

토스 회원 가입 후 내 개발 정보 센터에 있는 API 키를 Application 에 사용할 예정입니다.

 

브랜드페이 탭이 최초 회원가입 시에는 비활성화 상태이지만, 토스 측 안내에 따라 메일을 보내면 활성화 상태가 됩니다.

브랜드페이 개발도 진행할 것이기 때문에 미리 활성화 상태로 만들어야 합니다.

전 업무 시간에 진행해서인지 메일을 보낸 후 한 시간도 되지 않아 활성화 되었습니다.


2. Nuxt 프로젝트 생성

다음과 같이 생성하시면 됩니다.

저는 인텔리제이에서 생성했는데, 어떻게 준비하셔도 상관은 없습니다.

저는 어떠한 라이브러리도 없는 상태로 앱을 생성했습니다.

 

 

해당 프로젝트 경로에서 npm run dev 명령어를 사용해 Nuxt App을 기동합니다.

기본 포트인 3000번 포트에 접속해서 정상 기동을 확인합니다.


 

오늘 하루도 고생하셨습니다.

감사합니다.

반응형
반응형

 

1. JSON (JavaScript Object Notation)

JSON 은 속성-값 쌍(Attribute-Value pairs), 배열 자료형 또는 기타 시리얼화 가능한 값,

또는 키-값 쌍으로 이루어진 데이터 객체를 전달하기 위한 개방형 표준 포맷입니다.

 

 


2. 내장객체 (Built-in Object)

브라우저의 자바스크립트 엔진에 내장된 객체를 말합니다.

 

 


3. JSON 내장객체

JSON 객체는 JSON 을 분석하거나 값을 JSON 으로 변환하는 메소드를 가지고 있습니다.

JSON 을 직접 호출하거나 인스턴스를 생성할 수 없으며, 두 개의 메소드를 제외하면 특별한 기능은 없습니다.

두 개의 메소드는 다음과 같습니다.

 

1) JSON.stringify();

2) JSON.parse();

 

 


4. JSON.stringify & JSON.parse 함수

글 자체의 핵심은 간단하게 아래의 코드와 그 결과로 정리할 수 있습니다.

JSON.stringfy 함수는 자바스크립트의 값을 JSON 문자열로 변환합니다.

JSON.parse 함수는 JSON 데이터를 자바스크립트의 값으로 변환합니다.

  <script>
    const stringArr = {name: 'park', age: '15', city: 'seoul', country: 'korea'};
    const jsonData = JSON.stringify(stringArr);
    const parseData = JSON.parse(jsonData);

    console.log(stringArr);
    console.log(jsonData);
    console.log(parseData);
  </script>

 

 


대단한게 있을 것 같지만 사실 단순한 함수 두 개입니다.

알고나면 참 쉬운 함수지만, 모르면 활용 자체가 불가능하기 때문에 인지만 하고 계시면 될 것 같습니다.

오늘도 고생하셨습니다.

감사합니다.

반응형
반응형

 


1. Nuxt.js 호스트 및 포트 특징

호스트는 기본적으로 호스트 머신에서만 접근 가능한 localhost 로 설정되어 있습니다.

외부 장치에서 접근하기 위해서는 호스트를 수정해야 합니다.

호스트를 '0.0.0' 이나 '0' 으로 설정 시 로컬 IP 주소가 Nuxt App 호스트에 할당되어 외부에서도 접근할 수 있게 됩니다.

 

포트는 기본적으로 3000번이 할당되지만,

Nuxt App 기동 이전에 이미 3000번 포트가 점유되어 있다면 점유되지 않은 포트 번호를 할당 받습니다.

포트에 문자열 값 '0' 이 할당되면 Nuxt App 에 임의의 포트 번호가 할당됩니다.

 

 

2. Nuxt.js 호스트 및 포트 수정

호스트와 포트 번호를 설정하는 방법에는 세 가지 방법이 있습니다.

각각 방식을 설명 드리겠습니다.

 

1) nuxt.config.js 설정

  // Server setup
  server: {
    host: '0',
    port: '0'
  }

 

다음은 실행 화면입니다.

IP Local IP 주소가 할당되고, 임의의 포트 번호가 할당된 것을 확인할 수 있습니다.

Local IP 주소는 가려놓은 점 양해 부탁드립니다.

 

nuxt.config.js 파일에서 수정할 수 있지만 사이트를 호스팅할 때 문제가 발생할 수 있습니다.

따라서 파일을 직접 수정하는 것은 권장되지 않습니다.

대신 명령어를 통해 호스트와 포트를 직접 설정하는 방식을 대안으로 사용할 수 있습니다.

 

2) 명령어 설정

서버를 기동할 때 명령어를 통해 호스트와 포트 정보를 직접 설정합니다.

HOST=0 PORT=8000 npm run dev

 

3) package.json 설정

매 번 명령어에 호스트와 포트 정보를 입력하는 것도 일입니다.

package.json 에 있는 명령어 설정 자체를 수정할 수 있습니다.

  "scripts": {
    "dev": "nuxt --hostname '0' --port 8000",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

 


본 문서는 Nuxt 공식 문서를 참고하여 작성되었습니다.

https://nuxtjs.org/docs/features/configuration/#edit-host-and-port

 

Configuration

By default, Nuxt is configured to cover most use cases. This default configuration can be overwritten with the nuxt.config.js file.

nuxtjs.org

 

오늘도 행복한 하루 보내세요.

감사합니다.

반응형
반응형

캡틴판교 장기효 님의 Nuxt.js 시작하기 강의를 듣던 중

처음 Vue.js 와 Nuxt3 를 독학하면서 데이터를 받아오기 위해 Spring Boot 로 API 를 구성하면서,

배보다 큰 배꼽을 만들기 위해 사투를 벌이던 제가 생각이 났습니다.

그래서 저와 같은 상황에 놓여있는 개발자 분들을 위해 이 정리글을 작성했습니다.

이런 API 서버를 구성해주시고, 쉽게 Nuxt 를 설명해주시는 장사장님께 감사 드립니다.....

 


1. 이 글이 필요한 사람

프론트엔드 학습 중 데이터를 만지작거리며 실습하고 싶지만,

API 서버를 구성하기에는 상황이 여의치 않으신 분들입니다.

 


2. API 서버 구성

1) git clone

아래의 git 에서 프로젝트를 clone 합니다.

 

https://github.com/joshua1988/learn-nuxt

 

GitHub - joshua1988/learn-nuxt

Contribute to joshua1988/learn-nuxt development by creating an account on GitHub.

github.com

 

2) backend 디렉토리 복사 및 붙여넣기

cmd 를 실행하고, 다음 명령어를 입력합니다.

1. 클론 할 디렉토리를 생성합니다.
mkdir forApi

2. 생성한 디렉토리로 이동합니다.
cd forApi

3. 클론을 진행합니다. git clone (클론 주소) .(현재 디렉토리를 의미하는 .)
git clone https://github.com/joshua1988/learn-nuxt.git .

4. 복사할 backend 디렉토리를 편하게 확인할 수 있게 현재 디렉토리 창을 띄웁니다.
open .

 

backend 디렉토리를 복사합니다.

 

편하게 관리하기 위해 front 프로젝트에 붙여넣기 합니다.

 

3) 백엔드 API 서버 기동 확인

다음 명령어를 수행하며 backend 서버를 기동합니다.

1. cmd 에서 backend 디렉토리로 이동 후 모듈을 설치합니다.
npm install

2. 서버를 기동합니다. 서버 포트는 3000번 입니다.
npm run dev

 

브라우저를 통해 API 페이지로 접근합니다.

 


3. API 서버 사용안내

다양한 데이터 접근 방법이 있겠지만, 다음 예시는 그 중 가장 보편적인 axios 데이터 접근 예입니다.

GET 요청으로 API 서버에서 받아온 데이터를 console 에 찍어보겠습니다.

<script>
import axios from 'axios';

export default {
  async created() {
    const response = await axios.get('http://localhost:3000/products')
    console.log(response)
  },
}
</script>

<style scoped>

</style>

 

아래와 같이 GET 요청으로 받아온 데이터들을 확인할 수 있습니다.

 

더미 데이터들로 프론트엔드 기술들을 테스트할 수 있습니다.

 


 

보다 정교한 테스트용 API 서버 주소

https://github.com/typicode/json-server

 

GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

Get a full fake REST API with zero coding in less than 30 seconds (seriously) - GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

github.com

 

 

 

오늘도 행복한 하루 보내세요.

감사합니다.

반응형
반응형


1. 에러 상황

Nuxt.js App 수정 중 다음 에러 발생했습니다.

TypeError: this.libOptions.parse is not a function
    at ESLint8Plugin.<anonymous> (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:139:64)
    at step (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:44:23)
    at Object.next (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:25:53)
    at /Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:19:71
    at new Promise (<anonymous>)
    at __awaiter (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:15:12)
    at ESLint8Plugin.invokeESLint (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:133:16)
    at ESLint8Plugin.<anonymous> (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:120:44)
    at step (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:44:23)
    at Object.next (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:25:53)
Process finished with exit code -1

2. 에러 원인

ESLint 의 버전 8.23 에서 도입된 변경 사항으로 해당 에러가 발생합니다.


3. 에러 해결책

ESLint 의 버전을 8.22.0 이하의 버전으로 다운그레이드를 진행합니다.

cmd 에서 해당 Nuxt App 경로로 이동 후 다음 명령어를 실행합니다.

npm install eslint@8.22.0 --save-exact

 

package.json 에서 변경 된 ESLint 의 버전을 확인합니다.

  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@nuxtjs/eslint-config": "^11.0.0",
    "@nuxtjs/eslint-module": "^3.1.0",
    "eslint": "8.22.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.5.1",
    "prettier": "^2.7.1"
  }

 

 

 

에러 해결은 다음 페이지를 참고하여 진행했습니다.

https://youtrack.jetbrains.com/issue/WEB-57089/ESLint823-TypeError-thislibOptionsparse-is-not-a-function

 

ESLint@8.23: TypeError: this.libOptions.parse is not a function : WEB-57089

Workaround: Use eslint 8.22 or earlier. For example, run: "npm install eslint@8.22.0 --save-exact" What steps will reproduce the issue? 1. Updated ESLint to 8.23.0 2. Upon lint a file, ESLint failed with the following error: "this.libOptions.parse is not a

youtrack.jetbrains.com

 

 

 

행복한 하루 보내세요.

감사합니다.

반응형

+ Recent posts