0%

저번에 만든 next.js 프로젝트를 버리고 다시 셋팅을 한다.

이번에는 next.js + typescript + antd 를 적용해보려 한다.

이 3개중 뭐 하나도 재대로 아는게 아니라 프로젝트 설정 자체가 힘들었다.

실습

next.js 프로젝트 생성

cra처럼 next.js도 보일러플레이트 프로젝트를 생성하는 명령어 create-next-app 이 있다.

1
npx create-next-app 프로젝트명

1

next.js에 typescript 적용

생성된 폴더를 webstorm으로 열고 root 경로에 tsconfog.json 파일을 생성한다.

2

그리고 아래 명령어로 typescript관련 모듈을 설치한다.

1
npm install --save-dev typescript @types/react @types/node

3

pages 폴더 내부에 _app.js 와 index.js 파일이 있을 것이다.

해당 파일들의 확장자를 tsx로 변경해준다.

4

아래 명령어로 next.js를 개발모드로 실행한다.

1
npm run dev

5

next.js가 실행되면서 위 빨간줄 처럼 tsconfig.json 파일을 인식해서 디폴트 셋팅을 tsconfig.json에 해준다.

브라우저로 접근하면 정상동작 하는 것을 볼 수 있다.

6

7

tsconfig.json 파일을 열어보면, 자동으로 위처럼 내용이 채워진 것을 확인 할 수있다.

나도 typescript는 잘 몰라서 어떤 설정인지 잘 모른다.

typescript가 정상적으로 동작하는지 확인해보기 위해서, strict 설정을 잠시 true로 변경하고 pages폴더의 _app.tsx 폴더를 열어보자.

아래처럼 MyApp의 Props에 빨간줄이 처지면서 webstorm에서 자동으로 typescript문법 검사를 하고 있는 것을 볼 수 있다.

난 처음에 typescript가 동작하는지 않하는지 몰라서 webstorm에 별도의 설정을 해줘야 하는줄 알았다. next.js에서 자동으로 생성해주는 tsconfig.json의 strick 값이 false여서 webstorm에 빡세개 검사를 하지 않았던 것이었다.

Typescript가 다들 좋다고 하는데, 개인적인 생각으로는 이런 통일성없는 문법체크설정이 존재하는것 자체가 문제가 있다고 본다.

8

자 여기까지 next.js 와 typescript 설정이 끝났다.

next.js 에 atnd(앤트디자인) 적용

여기서 좀 많이 해맸다. 20210515기준 next.js 버전은 10버전이다. 뭔가 webpack 최신버전과 충돌이 있어서 삽질을 많이 했다.

일단 antd를 설치한다.

1
yarn add antd

9

그리고 styles폴더에 antd.less 파일을 생성하고 아래 내용을 채운다.

주석이 살아 있는 것은 antd의 메인컬러설정으로 빨강으로 정했다.

나머지는 다 주석으로 일부로 처리했다.(나중에 사용할수 있으므로 참고용으로 나둔다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@import "~antd/dist/antd.less";

@primary-color: #c02428; // 매인 색 빨강
//@primary-color: #000; // primary color for all components
//@link-color: #1890ff; // link color
//@success-color: #52c41a; // success state color
//@warning-color: #faad14; // warning state color
//@error-color: #f5222d; // error state color
//@font-size-base: 14px; // major text font size
//@heading-color: rgba(0, 0, 0, 0.85); // heading text color
//@text-color: rgba(0, 0, 0, 0.65); // major text color
//@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
//@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
//@border-radius-base: 4px; // major border radius
//@border-color-base: #d9d9d9; // major border color
//@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers

10

pages폴더의 _app.tsx 파일에 globall.css를 주석처리하고 방금 생성한 antd.less를 import 한다.

_app.tsx는 next.js의 엔트리 포인트 파일로 공통적일 설정을 해당 파일에서 한다.

antd.less 파일에 설정으로 antd의 전체적인 테마를 설정 할수 있게 된 것이다.

11

아래 명령으로 next.js에서 css, less, sass 등 파일을 인식할 수 있게 도와주는 라이브러리를 추가하자.(webpack이나 babel을 잘 몰라서 정확한 것은 아니나 antd적용을 위해 필요한 라이브러리 인듯 하다.)

1
npm install --save @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less

pages폴더의 index.tsx 파일을 아래처럼 수정해주자.

antd의 Button 컴포넌트를 사용해서 antd가 정상동작하고 앞서 설정한 메인색상(빨강)이 동작하는지 확인하기 위해서이다.

1
2
3
4
5
6
7
8
9
import {Button} from "antd";

export default function Home() {
return (
<div>
<Button type="primary">Antd 버튼</Button>
</div>
)
}

12

그리고 root 폴더 경루에 next.config.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
const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");

const isProd = process.env.NODE_ENV === "production";

// fix: prevents error when .less files are required by node
if (typeof require !== "undefined") {
require.extensions[".less"] = (file) => {};
}

module.exports = withCSS({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
},
...withLess(
withSass({
lessLoaderOptions: {
javascriptEnabled: true,
},
})
),
});

13

npm run dev 를 실행해서 다시 동작시키면 동작이 되어야 하는데…

아래처럼 webpack의 모듈이 없다고 오류가 난다.

1
Error: Cannot find module 'webpack/lib/node/NodeTempaltePlugin'

14

아무 생각없이 그냥 최신 webpack을 설치해 봤는데, 역시 다른 오류가 난다.

webpack@4.44.1 를 설치하자. next.js 10버전에서 webpack관련 이슈가 있어보인다.

1
npm i webpack@4.44.1

15

다시 npm run dev를 하면….

또 오류가 난다. @zeit/next-sass ??? 이건 앞서 설치한건데?

다시 설치해주자.

16

다시 npm run dev를 하면….

@zeit/next-less??? 이것도 설치한건데???

17

그냥 또다시 설치해준다.

18

설치 중에 webstorm에서 디펜던시를 update하라고 한다. 해주자.

예상으로는 webpack이 설치되면서 뭔가 모듈간의 의존성에 변경? 문제가 발생한거 같다.

19

디펜던시가 완료된뒤 다시 npm run dev를 실행하면 아래처럼 antd가 정상동작하는 것을 확인 할 수 있다.

하… 프로젝트 셋팅 개빡세

20

혹시나 해서 package.json 파일을 남겨놓는다.

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
{
"name": "ml-speedmaster-next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@zeit/next-css": "^1.0.1",
"@zeit/next-less": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"antd": "^4.15.5",
"babel-plugin-import": "^1.13.3",
"less": "^4.1.1",
"next": "10.2.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"webpack": "^4.44.1"
},
"devDependencies": {
"@types/node": "^15.3.0",
"@types/react": "^17.0.5",
"typescript": "^4.2.4"
}
}

참고자료

https://nextjs.org/learn/excel/typescript/create-tsconfig

https://dev.to/burhanuday/using-ant-design-with-nextjs-custom-variables-for-ant-design-57m5

https://velog.io/@jakeseo_me/다시-프론트-틀잡기-2-next에-antd-설치하기

https://github.com/vercel/next.js/issues/21721

작성일: 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