0%

작성일: 2020-05-05(수)

기타: 휴일, 날씨 맑음

MotorLatte 화면 단 개발을 위한 Next.js 프로젝트를 생성하자.

그냥 react cra로 만들어도 될거 같지만, 인프런에서 Next.js 공부하는 김에 Next.js 로 개발해 보기로 했다.

화면을 담당할 프로젝트 명은 bonneville 이다.

사용할 도구들은 아마 아래와 같을 것이다.

  • WebStorm
  • git
  • github
  • windows terminal
  • node
  • npm

일단 프로젝트 폴더를 아래처럼 만들었다.

motorlatte\ml-bonneville\front

그리고 해당 위치에 windows terminal로 진입해서 npm init 을 하였다.

20210505-2-1.png

생성한 폴더를 webstorm으로 열고 필요한 라이브러리를 설치한다.

1
npm i react react-dom next@9 prop-types

2021-05-05 현재 Next.js는 10 버전이지만, 보고 있는 인프런 강좌가 9버전이라 9버전으로 진행하였다.

20210505-2-2.png

의존성 설치가 완료가 되면, front 폴더 내부에 pages 폴더를 생성하고 그 아래 index.js 파일을 생성한다.

next.js에서 pages 폴더는 중요하다. 절대 다른 이름으로 만들면 안된다.

next.js에서 pages 폴더를 인식하고 그 내부의 react 컴포넌트 파일들은 인식해서, 라우팅의 대상으로 관리하기 때문이다.

index.js 파일은 아래의 내용으로 채운다.

1
2
3
4
5
6
7
8
9
10
11
import React from 'react';

const Home = () =>{
return (
<div>
MotorLatte 개발중
</div>
)
}

export default Home;

20210505-2-3.png

그리고 package.json 을 조금 수정하자. scripts 부분을 아래로 수정하자.

1
2
3
4
"scripts": {
"dev" : "next",
"build": "next build"
}

20210505-2-4.png

terminal에서 npm run dev 명령으로 next.js가 동작하는지 확인해보자.

아 물론 front 폴더 내부에서 실행 해야 한다.

아래처럼 동작 하는 것을 확인 할 수 있다.

20210505-2-5.png

작성일: 2020-05-05(수)

기타: 휴일, 날씨 맑음

이 글은 토이프로젝트를 개발하면서 작성하는 일지이다.

가능한한 모든 과정을 기록할 생각이다.

하지만 일지, 일종의 로그이다 보니 잘못된 지식, 정리되지 않은 내용이라 읽기 어려울 것이다.

중간중간 따로 중요한 개발방법, 지식, 팁, 오류사항등은 따로 글로 작성할 예정이다.

원래 작년 10월 부터 생각하던, 토이프로젝트를 5월이 되서야 하는 나란 놈이란…

아 만들어볼 MotorLatte 토이 프로젝트는 오토바이 검색 포털 사이트이다.

완성은 할수 있으련지.

nextjs+typescript+storybook 프로젝트 생성하기

들어가기

  • 실습환경
    • windows10
    • wsl2
    • vscode

실습시작

nextjs + typescript 설정

프로젝트 폴더를 생성한다. 나는 nextstorybook 이라는 폴더를 생성했다.

아래 명령어를 wsl 터미널에서 순차적으로 진행한다.

1
2
3
4
mkdir nextstorybook
cd nextstorybook
yarn init -yes
yarn add next react react-dom

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled.png

pages 폴더를 생성한다.

1
mkdir pages

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%201.png

pages 폴더 내부의 index.tsx 파일과 프로젝트 루트폴더에 tsconfig.json 파일을 생성한다.

1
2
touch ./pages/index.tsx
touch tsconfig.json

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%202.png

json 파일을 수정해야 하므로 편한 vscode 를 열어서 수정해보자.

package.json 파일에 아래 scripts 부분을 추가하자.

1
2
3
4
5
6
7
"scripts": {
"dev": "next",
"start": "next start",
"build": "next build",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
}

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%203.png

타입스크립트 관련 라이브러리를 추가하자.

1
yarn add --dev typescript @types/react @types/node

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%204.png

앞서 생성한 pages/index.tsx 파일을 아래 코드로 채워주자.

1
2
const Index = ()=>( <h1>Here i am</h1> );
export default Index;

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%205.png

이제 nextjs에 typescript 셋팅까지는 끝냈다. 아래 명령으로 nextjs가 정상동작하는지 확인하자.

1
yarn run dev

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%206.png

생각보다 구동에 시간이 걸린다. 위 이미지 처럼 complied successfully 가 나올때까지 기다려주자.

아래처럼 동작을 확인 할 수 있다.

내 경우 wsl 내부에서 nextjs를 구동했으므로 아래와 같은 ip로 구동이 되었다.

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%207.png

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%208.png

nextjs+storybook 적용

이제 storybook을 적용해보자.

아래 명령어로 storybook을 설치하자.

1
npx sb init

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%209.png

위 이미지는 vscode의 터미널인데 주의할것은 wsl 터미널이다.

아래 명령어로 storybook을 실행하자.

1
yarn storybook

이 작업도 좀 오래 걸린다.

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%2010.png

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%2011.png

위처럼 storybook이 실행되었다고 나오면 브라우저에서 확인해보자.

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%2012.png

실습 끝!!!

참고자료

https://dev.to/wonder2210/next-js-storybook-typescript-2021-guide-2ab4

Windows10 wsl2에 nvm과 node 설치

들어가기

windows10에 Ubuntu wsl2에 nvm가 node를 설치해보려 한다.

실습

nvm 최신 버전을 확인하기 위해서 https://github.com/nvm-sh/nvm 로 이동한다.

windows10_wsl2_nvm_node%203ac96c14b15d4c2da7848ce0f136357e/Untitled.png

아래로 스크롤링을 하다보면 아래처럼 설치 스크립트가 보인다.

windows10_wsl2_nvm_node%203ac96c14b15d4c2da7848ce0f136357e/Untitled%201.png

1
2
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
source ~/.profile

위 두줄의 명령어를 wsl 터미널로 실행하면 nvm이 간단하게 설치된다.

아래 명령어로 설치 가능한 node 버전을 검색하자.

1
nvm ls-remote

windows10_wsl2_nvm_node%203ac96c14b15d4c2da7848ce0f136357e/Untitled%202.png

현재 14.16.1 버전이 LTS 이므로 해당 버전을 설치하자.

1
nvm install 14.16.1

windows10_wsl2_nvm_node%203ac96c14b15d4c2da7848ce0f136357e/Untitled%203.png

최초 노드가 설치되었으므로 자동으로 nvm 에서 해당 버전을 디폴트로 잡아준다.

실습 끝!!!

들어가기

개발프로젝트에 따라서 Node의 버전을 여러개 설치하고, 번갈아 가면서 사용해야 할 경우가 있다.

이럴때는 NVM(Node Version Manager)를 이용해서 한 개발환경에 어려개의 Node 버전을 설치해서, 원하는 Node 버전을 골라서 사용 할 수 있다.

일단 기존에 Node가 설치되어 있다면 Node를 제거하자.

NVM 설치

아래 경로로 이동해서 Windows용 nvm설치 파일을 다운로드 한다. nvm-setup.zip 파일을 다운로드 한다.

https://github.com/coreybutler/nvm-windows/releases

Windows10-nvm-install%20424344dc17ab48128597652eee74f8b6/Untitled.png

압축을 풀면 폴더 내부에 nvm-setup.exe 파일이 나온다. 해당 파일을 실행시키면 nvm이 설치가 된다.

Windows10-nvm-install%20424344dc17ab48128597652eee74f8b6/Untitled%201.png

윈도우 터미널에서 아래 명령어를 입력하면 설치된 NVM의 버전을 확인 할 수 있다.

1
nvm version

Windows10-nvm-install%20424344dc17ab48128597652eee74f8b6/Untitled%202.png

NVM을 통해 Node를 설치하고, 설치한 Node를 활성화 하기

아래 명령을 입력하면 nvm에 설치된 node의 리스트를 확인 할 수 있다.

1
nvm ls

Windows10-nvm-install%20424344dc17ab48128597652eee74f8b6/Untitled%203.png

지금은 NVM을 막 설치한 상태라서 Node 리스트가 보이지 않는다.

일단 현재 설치 할 수 있는 Node버전 리스트를 확인해보자. 아래 링크로 이동해보자.

https://nodejs.org/ko/download/releases/

Windows10-nvm-install%20424344dc17ab48128597652eee74f8b6/Untitled%204.png

위처럼 Node 버전들을 확인 할 수 있다.

아래처럼 nvm install v노드버전 형식으로 입력하면 해당 Node 버전을 다운로드 한다.

1
nvm install v15.11.0

Windows10-nvm-install%20424344dc17ab48128597652eee74f8b6/Untitled%205.png

nvm에서 특정 Node 버전 활성화 하기

1
nvm use 15.11.0

Windows10-nvm-install%20424344dc17ab48128597652eee74f8b6/Untitled%206.png

이렇게 nvm으로 node 버전을 설치하고 활성화 작업을 완료했다.

끝!!!

참고자료

[https://seunghyun90.tistory.com/52](

들어가기

React의 CRA를 사용해서 프로젝트를 생성하고, ant 디자인을 적용하고, dark 테마를 적용하는 예제를 진행하겠다.

주요한 내용은 아래 블로그 글을 참고했으며, 자세한 내용은 아래 링크를 참고하길 바란다.

https://jfelix.info/blog/dynamic-themes-in-ant-design-how-to-change-between-light-and-dark-theme

본인은 less 및 gulp에 대한 이해가 없다.

이 글의 목적은 대략적 맥락(ant 디자인의 동적 테마 변경에 관련)과 빠른 프로젝트 구축을 위한 글이다.

주의사항

node 버전 14이상에서 예제를 진행해야 한다.

본인은 webstorm 개발툴을 사용했다.(vscode를 사용해도 전혀 문제 없을 것이다.)

리액트 프로젝트 생성 및 Ant 디자인 적용

아래 명령으로 리액트 프로젝트를 생성한다.

1
npx create-react-app antd-swith-theme

react-cra-antd-darktheme%20efa153b7e9b7443c9b838c30ff14e9e1/Untitled.png

아래 명령으로 ant디자인과 ant디자인에 사용하는 icon 을 설치한다.

1
2
npm i atnd
npm install --save @ant-design/icons

react-cra-antd-darktheme%20efa153b7e9b7443c9b838c30ff14e9e1/Untitled%201.png

위 처럼 설치된 내용을 확인 할 수 있다.

ant 디자인을 사용하기 위한 준비는 완료 되었다.

Ant 디자인의 light, dark테마 switch 기능 추가하기

프로젝트의 src 폴더 아래 themes 폴더를 생성하고 그 아래 dark-theme.less, light-thmes.less 파일을 생성한다.

react-cra-antd-darktheme%20efa153b7e9b7443c9b838c30ff14e9e1/Untitled%202.png

dark-theme.less 파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@import "~antd/lib/style/color/colorPalette.less";
@import "~antd/dist/antd.less";
@import "~antd/lib/style/themes/dark.less";

// These are shared variables that can be extracted to their own file
@primary-color: #00adb5;
@border-radius-base: 4px;

@component-background: #303030;
@body-background: #303030;
@popover-background: #303030;
@border-color-base: #6f6c6c;
@border-color-split: #424242;
@table-header-sort-active-bg: #424242;
@card-skeleton-bg: #424242;
@skeleton-color: #424242;
@table-header-sort-active-bg: #424242;

light-theme.less파일

1
2
3
4
5
6
7
@import "~antd/lib/style/color/colorPalette.less";
@import "~antd/dist/antd.less";
@import "~antd/lib/style/themes/default.less";

// These are shared variables that can be extracted to their own file
@primary-color: #00adb5;
@border-radius-base: 4px;

여기서 잠깐 위 두 파일을 기준으로 ant 디자인의 테마 변경을 위한 맥락을 설명하겠다.

당연히 dark-theme.less 파일은 dark 모드를 사용할 때 적용할 스타일 정보를 저장한다.

light-theme.less 파일은 light 모드를 사용할 때 적용할 스타일을 저장한다.

프로젝트 root 경로에 gulpfile.js 파일을 생성하자.

gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const gulp = require('gulp')
const gulpless = require('gulp-less')
const postcss = require('gulp-postcss')
const debug = require('gulp-debug')
var csso = require('gulp-csso')
const autoprefixer = require('autoprefixer')
const NpmImportPlugin = require('less-plugin-npm-import')

gulp.task('less', function () {
const plugins = [autoprefixer()]

return gulp
.src('src/themes/*-theme.less')
.pipe(debug({title: 'Less files:'}))
.pipe(
gulpless({
javascriptEnabled: true,
plugins: [new NpmImportPlugin({prefix: '~'})],
}),
)
.pipe(postcss(plugins))
.pipe(
csso({
debug: true,
}),
)
.pipe(gulp.dest('./public'))
})

gulp라는 프론트엔드 task runner를 이용해서 gulpfile.js 를 실행시킨다.

gulpfile.js는 dark-theme.less, light-theme.less파일을 로드해서 css파일로 변환해서, public 폴더에 저장한다.

그리고 react-css-theme-switcher 라는 것을 사용해서 react에서 dark-theme.css와 light-theme.css 파일을 선택적으로 로드해서 사용한다.

glup 관련 의존성을 추가한다.

1
yarn add -D gulp gulp-less gulp-postcss gulp-debug gulp-csso autoprefixer less-plugin-npm-import

그리고 아래 postcss 도 추가한다.(내가 참고한 블로그에는 없지만, 본인의 경우 아래 의존성이 추가적으로 필요했다.)

1
npm i -D postcss

아래 명령으로 gulp를 이용해서 gulpfile.js 파일을 실행시킨다.

1
npx gulp less

public 폴더에 dark-theme.css, light-theme.css 파일이 gulp를 통해서 생성이 되었다.

만약 dark-theme.less, light-theme.less 파일을 본인의 입맛에 맞게 수정했다면, 위 npx gulp less 파일을 실행시켜, 새롭게 dark-theme.css, light-theme.css 파일을 재 생성 해 주어야 한다.

react-cra-antd-darktheme%20efa153b7e9b7443c9b838c30ff14e9e1/Untitled%203.png

다음은 react 에서 동적으로 css 파일을 변경해서 테마를 변경시켜주는 react-css-theme-switcher 를 설치하자.

1
yarn add react-css-theme-switcher

react에서 react-css-theme-switcher를 사옹해서 테마 변경하는 코드 작성

아래 코드에서는 react-css-theme-switcher 관련 코드와 toggleTheme 메소드만 주의 깊게 보면 된다.

index.css, app.css는 사실 신경쓰지 않아도 된다. 그냥 좀 화면을 예쁘게 만들어 주는 것 뿐이다.

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// index.js
import React from "react";

import ReactDOM from "react-dom";

import "./index.css";
import App from "./App";
import { ThemeSwitcherProvider } from "react-css-theme-switcher";

const themes = {
dark: `${process.env.PUBLIC_URL}/dark-theme.css`,
light: `${process.env.PUBLIC_URL}/light-theme.css`,
};

ReactDOM.render(
<React.StrictMode>
<ThemeSwitcherProvider themeMap={themes} defaultTheme="light">
<App />
</ThemeSwitcherProvider>
</React.StrictMode>,
document.getElementById("root")
);

index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

min-height: 100vh;
}

.fade-in {
animation: fadeIn;
animation-duration: 0.6s;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React from "react";
import "./App.css";
import { useThemeSwitcher } from "react-css-theme-switcher";
import { Switch, Input } from "antd";

export default function App() {
const [isDarkMode, setIsDarkMode] = React.useState();
const { switcher, currentTheme, status, themes } = useThemeSwitcher();

const toggleTheme = (isChecked) => {
setIsDarkMode(isChecked);
switcher({ theme: isChecked ? themes.dark : themes.light });
};

// Avoid theme change flicker
if (status === "loading") {
return null;
}

return (
<div className="main fade-in">
<h1>The current theme is: {currentTheme}</h1>
<Switch checked={isDarkMode} onChange={toggleTheme} />

<Input
style={{ width: 300, marginTop: 30 }}
placeholder="I will change with the theme!"
/>
</div>
);
}

app.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

min-height: 100vh;
}

.fade-in {
animation: fadeIn;
animation-duration: 0.6s;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

마지막 결과 확인

1
npm run start

react-cra-antd-darktheme%20efa153b7e9b7443c9b838c30ff14e9e1/antd-darktheme.gif

예제 github 경로

https://github.com/blog-examples/react-antd-darktheme.git

참고자료

antd 디자인 dark테마 적용

https://jfelix.info/blog/dynamic-themes-in-ant-design-how-to-change-between-light-and-dark-theme

antd 디자인 적용

[https://jeonghwan-kim.github.io/2018/10/13/ant-design-101.html](

테스트 환경

  • 인텔리J 얼티메이트
  • java8
  • springboot
  • gradle
  • junit4

오류시나리오

스프링부트 웹 프로젝트를 생성후 간단한 컨트롤러 테스트시 아래와 같은 오류 발생

문제점1. 한글로 만든 테스트 메소드명이 콘솔에서 깨져서 나온다.

문제점2. 테스트 코드 실행 시, 테스트 메소드를 인식하지 못한다.

Intellij%20springboot%20gradle%20test%E1%84%89%E1%85%B5%20No%20tests%20found%20f%20bb190dfb754c4433a1a58dcf176f8d7d/Untitled.png

해결방법

인텔리J에서 settings - Build, Execution, Deployment - Build Tools - Gradle 로 들어간다.

Intellij%20springboot%20gradle%20test%E1%84%89%E1%85%B5%20No%20tests%20found%20f%20bb190dfb754c4433a1a58dcf176f8d7d/Untitled%201.png

인텔리J에서 gradle로 프로젝트 생성시 디폴트로 아래처럼 설정 되어있다.

Build and run using: Gradle

Run tests using: Gradle

아래처럼 Gradle을 IntelliJ IDEA 로 변경해준다.

Intellij%20springboot%20gradle%20test%E1%84%89%E1%85%B5%20No%20tests%20found%20f%20bb190dfb754c4433a1a58dcf176f8d7d/Untitled%202.png

다시 테스트를 해보면 아래처럼 정상동작을 한다.

Intellij%20springboot%20gradle%20test%E1%84%89%E1%85%B5%20No%20tests%20found%20f%20bb190dfb754c4433a1a58dcf176f8d7d/Untitled%203.png

실습환경

  • java8
  • gradle
  • intellij
  • springboot
  • lombok

들어가기

인텔리J에서 gradle기반 springboot프로젝트에 lombok 셋팅을 해보자.

프로젝트 생성과정은 생략한다.

lombok 라이브러리 추가하기

build.gradle 파일에 아래 lombok 라이브러리를 추가한다.

1
implementation 'org.projectlombok:lombok'

gradle을 새로고침해서 lombok라이브러리를 받아준다.

아래처럼 lombok이 추가된 것을 확인 할 수 있다.

그리고 settigs - Plugins에 들어가서 Lombok 라이브러리를 설치하자.

난 이미 설치가 되어 있는 상태이다.

아마 최초 설치 시 설치가 왼료되면, intelliJ를 재시작 하게 될 것이다.

Lombok 플러그인을 설치하고, intelliJ를 재시작 한 뒤 Settings - Build, Execution, Deployment - Compiler - Annotation Processors 에 들어가서 Enable annotation processing 항목을 체크하고 저장하자.

이렇게 intelliJ에서 롬복 설정을 완료했다.

주의점

lombok 설정은 프로젝트 마다 설정해 줘야 한다.

플러그인 설치는 인텔리J에 설치되는 것이니 한번만 해도 되지만, 만약 새로운 프로젝트를 생성했다면 build.gradle에 추가한 lombok라이브러리 추가와 Enable annotation processing을 체크를 다시 해줘야 한다.

들어가기

windows10에서 cmd에서 mvn -v를 입력하면 maven의 버전이 나와야 하지만, 설치가 안된 상태에서는 아래처럼 나오게 된다.

windows10%E1%84%8B%E1%85%A6%20maven%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5%20%E1%84%86%E1%85%B5%E1%86%BE%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC%20d866af6b66984e5b9de1e491282be900/Untitled.png

Maven 압축파일 다운받기

아래 사이트로 이동하자.

https://maven.apache.org/download.cgi#

windows10%E1%84%8B%E1%85%A6%20maven%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5%20%E1%84%86%E1%85%B5%E1%86%BE%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC%20d866af6b66984e5b9de1e491282be900/Untitled%201.png

접속한 페이지에서 Download에 들어가서 아래로 좀 내려보면 Files를 확인 할 수 있다.

windows10%E1%84%8B%E1%85%A6%20maven%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5%20%E1%84%86%E1%85%B5%E1%86%BE%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC%20d866af6b66984e5b9de1e491282be900/Untitled%202.png

현재 2020-10-17 기준으로 3.6.3 버전을 제공하고 있다.

해당 압축 파일을 다운로드 하자.

아래와 같이 zip 파일이 다운로드가 될 것이다. 원하는 경로에 압축을 풀어주면 된다.

windows10%E1%84%8B%E1%85%A6%20maven%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5%20%E1%84%86%E1%85%B5%E1%86%BE%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC%20d866af6b66984e5b9de1e491282be900/Untitled%203.png

내 경우 C드라이브 아래 maven이라는 폴더를 생성해서 아래처럼 압축을 풀어 놓았다.

windows10%E1%84%8B%E1%85%A6%20maven%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5%20%E1%84%86%E1%85%B5%E1%86%BE%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC%20d866af6b66984e5b9de1e491282be900/Untitled%204.png

Windows10에서 Maven 환경변수 설정

windows10에서 maven의 환경변수를 설정해주자.

제어판 → 시스템 → 환경변수로 이동하자.

windows10%E1%84%8B%E1%85%A6%20maven%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5%20%E1%84%86%E1%85%B5%E1%86%BE%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC%20d866af6b66984e5b9de1e491282be900/Untitled%205.png

아래처럼 입력해주자.

windows10%E1%84%8B%E1%85%A6%20maven%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5%20%E1%84%86%E1%85%B5%E1%86%BE%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC%20d866af6b66984e5b9de1e491282be900/Untitled%206.png

그 다음으로 시스템 변수에서 Path를 찾아 Maven의 bin 경로를 추가해주자.

windows10%E1%84%8B%E1%85%A6%20maven%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5%20%E1%84%86%E1%85%B5%E1%86%BE%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC%20d866af6b66984e5b9de1e491282be900/Untitled%207.png

새로만들기를 눌러서 %MAVEN_HOME%\bin 을 입력해주자.

windows10%E1%84%8B%E1%85%A6%20maven%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5%20%E1%84%86%E1%85%B5%E1%86%BE%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC%20d866af6b66984e5b9de1e491282be900/Untitled%208.png

Maven의 설정이 완료 되었다.

새로운 cmd 창을 열어서 mvn -v 명령어를 입력해 보면, maven이 정상동작 하는 것을 확인 할 수 있다.

windows10%E1%84%8B%E1%85%A6%20maven%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5%20%E1%84%86%E1%85%B5%E1%86%BE%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC%20d866af6b66984e5b9de1e491282be900/Untitled%209.png

들어가기

ubuntu 18.04가 설치된 virtual box에 elasticsearch7을 설치해보자.

아직 공부가 부족해서, 자세한 내용을 모른체 연습용 elasticsearch를 설치하는 내용이다.

클러스터, 샤드등 설정에 대한 내용은 포함하고 있지 않다.

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled.png

실습

jdk 설치

먼저 elasticsearch를 설치하기 위해서는 jdk 설치를 해야 한다.

1
javac -version

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%201.png

먼저 jdk가 설치 되어있는지 확인해보자. 난 위처럼 설치가 안되어 있다.

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%202.png

1
sudo apt install openjdk-11-jdk

난 위처럼 open jdk 11로 설치를 진행했다.

아래처럼 jdk 가 설치 되었다.

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%203.png

Elasticsearch를 설치하자

https://iruwl.github.io/catetan/install-elasticsearch-7.0.0-on-ubuntu-18.04/

위 자료를 참고하여 실습을 진행했다.

Elasticsearch리파지토리 GPG 공개키를 import 한다.

1
wget -qO - https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add -

아래처럼 OK 가 나온다면 정상적으로 키를 import 한 것이다.

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%204.png

Elasticsearch 라파지토리를 등록한다. 아래처럼 현재 최신 버전인 7 버전 리파지토리를 등록했다.

1
sudo sh -c 'echo "deb https://artifacts.elastic.co/packages/7.x/apt stable main" > /etc/apt/sources.list.d/elastic-7.x.list'

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%205.png

다음 명령어로 elasticsearch를 설치하자.

1
2
sudo apt update
sudo apt install elasticsearch

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%206.png

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%207.png

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%208.png

위 처럼 설치가 정상적으로 진행 되었다.

엘라스틱서치를 동작시키기전에 간단한 설정파일을 집고 넘어가자.

  • /etc/elasticsearch/elasticsearch.yml
  • /etc/elasticsearch/jvm.options

elasticsearch.yml 파일에는 엘라스틱 서치의 전반적인 환경설정이 들어간다.

일단 아래처럼 클러스트명을 지정한다.

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%209.png

그리고 network 영역에서 network.host에서 해당 host의 ip를 등록한다.

network.host를 지정하지 않을경우, elasticsearch가 설치된 host pc에서 localhost로 접속이 가능하지만, 외부에서 elasticsearch에 접속 할 수 없다.

아래처럼 network.host에 명시적으로 host pc의 ip를 지정할경우 해당 ip를 사용해서 외부에서 elasticsearch에 접속 할 수 있다.

http.port 에서 포트를 지정한다.

discovery.seed_hosts를 아래 이미지 처럼 지정한다.(클러스트 노드 관련 설정인거 같다.)

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%2010.png

jvm.options 파일은 elasticsearch의 jvm heap 메모리 설정을 할 수 있다.

아래 이미지를 보면 기본으로 jvm heap이 1g 로 설정되어 있는 것을 확인 할 수 있다.

자신의 환경에 맞게 설정해주자.(초기 heap과 max heap의 사이즈를 동일하게 설정하는 것이 좋다고 한다.)

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%2011.png

기초적인 elasticsearch설정이 끝났다면, 서비스를 등록하고 실행해보자.

1
2
sudo systemctl enable elasticsearch.service
sudo systemctl start elasticsearch.service
1
sudo systemctl status elasticsearch.service

아래처럼 서비스가 정상 동작하는 것을 확인 할 수 있다.

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%2012.png

ubuntu의 포트 여는 것은 생략한다.

아래 명령어로 elasticsearch에 GET 요청을 날려보자.

1
curl -X GET '10.0.2.15:9200'

Ubuntu%2018%2004%20elasticsearch7%20install%20a053c074d29c440f9377bdbc67dbd811/Untitled%2013.png

정상적으로 elasticsearch가 응답하는 것을 확인 할 수 있다.

참고자료

https://iruwl.github.io/catetan/install-elasticsearch-7.0.0-on-ubuntu-18.04/

[https://kifarunix.com/install-elasticsearch-7-x-on-ubuntu-18-04-debian-9-8/](