210412_TIL

seungyeonยท2021๋…„ 4์›” 12์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
51/64

IM: DAY 50

(DAY 51) UP!!!!!!! ๐ŸŽญ๐Ÿฐ๐Ÿ˜

์˜ค๋Š˜

  • ORM
  • MVC Pattern
  • React์— summernote ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ ์šฉํ•˜๊ธฐ
  • ์Šคํ„ฐ๋”” ์ฐธ์—ฌ

๊ธฐ์–ตํ•  ๊ฒƒ

ORM

0. sequelize ๋ฐ sequelize-cli ์„ค์น˜

Sequelize ์„ค์น˜

$ npm install --save sequelize

Sequelize-cli ์„ค์น˜

$ npm install --save-dev sequelize-cli

1. ORM ์„ค์ •

Bootstraping(ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐ ๋‹จ๊ณ„๋ฅผ ์ž๋™์œผ๋กœ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ์ผ)

$ npx sequelize-cli init 
  • ๊ธฐ์กด์— bootstraping์„ ์ด๋ฏธ ํ•œ ์ƒํƒœ์ผ ๊ฒฝ์šฐ ์—†๋Š” ๋ถ€๋ถ„๋งŒ ๋งŒ๋“ค์–ด์ค€๋‹ค. ๊ธฐ์กด์— ์กด์žฌํ•˜๋Š” ํŒŒ์ผ์„ overwrite ํ•˜๊ณ  ์‹ถ์„ ๊ฒฝ์šฐ --force ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

์„ค์ • ํŒŒ์ผ์„ ์ด์šฉํ•ด MySQL ์ ‘์† ์„ค์ •(Configuration ์„ค์ •)

  • ./config/config.json ํŒŒ์ผ์—์„œ password์™€ database ๊ฐ’์„ ์„ค์ •ํ•ด์ค€๋‹ค.
  • development, test, production ํ™˜๊ฒฝ ์ค‘ ๊ธฐ๋ณธ์ ์œผ๋กœ development ํ™˜๊ฒฝ์„ ์‚ฌ์šฉํ•œ๋‹ค.
  • ๋‹ค๋ฅธ ํ™˜๊ฒฝ์œผ๋กœ ์ „ํ™˜ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ./models/index.js ์˜ env๋ถ€๋ถ„์„ ๋ฐ”๊พธ์–ด์ฃผ๋ฉด ๋œ๋‹ค.
  • ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํ™˜๊ฒฝ์„ ๋ถ„๋ฆฌํ•œ ์ด์œ ๋Š” ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ๋ฐ์ดํ„ฐ ํƒ€์ž…๋“ฑ์„ ๋‹ค๋ฅด๊ฒŒ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

2. Model ์ƒ์„ฑ

CLI๋ฅผ ํ†ตํ•ด model ์ƒ์„ฑ

$ npx sequelize model:create --name user --attributes "name:string"
// ๊ธฐ๋ณธ ๋ฌธ๋ฒ•
$ npx sequelize model:create --name TABLE_NAME --attributes "COLUMN1:type, COLUMN2:type, COLUMN3:type"
  • CLI๋กœ ๋ชจ๋ธ์„ ์ •์˜ํ•  ๋•Œ, attributes์˜ ๋‚ด์šฉ์€ ๊ผญ ๊ฒน๋”ฐ์˜ดํ‘œ(")๋กœ ๊ฐ์‹ธ์ฃผ์–ด์•ผ ํ•œ๋‹ค.
  • Seqeulize๋Š” column(attributes field)์˜ default value๋ฅผ NULL๋กœ ์ถ”์ •ํ•œ๋‹ค. ์ด๋Š” model ํŒŒ์ผ์˜ Model.initํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ defaultValue ์˜ต์…˜์„ ํ†ตํ•ด ์„ค์ • ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋‚ด๋ถ€์ ์œผ๋กœ sequelize.define์€ Model.init์„ ๋ถ€๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ด ๋‘ ๊ฐ€์ง€๋Š” ์™„์ „ํ•˜๊ฒŒ ๊ฐ™์€ ๊ฐœ๋…์ด๋‹ค.

3. ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜

์ƒ์„ฑํ•œ model์— ๋”ฐ๋ผ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์‹ค์ œ๋กœ table์„ ์ƒ์„ฑํ•ด์ฃผ๋Š” ๊ณผ์ •์ด๋‹ค. (๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ์ „๊นŒ์ง€๋Š” ์‹ค์ œ๋กœ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์•„๋ฌด๊ฒƒ๋„ ์ถ”๊ฐ€๋˜์ง€ ์•Š์€ ์ƒํƒœ๋‹ค.) ์Šคํ‚ค๋งˆ ๋ณ€๊ฒฝ์ด ์žˆ์„ ๋•Œ๋งˆ๋‹ค ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์„ ์‹คํ–‰ํ•ด์ค˜์•ผ ํ•œ๋‹ค.

$ npx sequelize-cli db:migrate

์•„๋ž˜ ๋ช…๋ น์–ด๋กœ ๊ฐ€์žฅ ์ตœ๊ทผ์˜ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ์ž‘์—…์„ ์ทจ์†Œํ•  ์ˆ˜ ์žˆ๋‹ค.

$ npx sequelize-cli db:migrate:undo

React

Create-React-App ์˜ webpack.config.js ์ฐพ๋Š” ๋ฒ•

CRA๋กœ ๋ฆฌ์•กํŠธ ์•ฑ์„ ์ƒ์„ฑํ•œ ๋’ค ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ๋ณด๋ฉด CRA๊ฐ€ ์„ค์ •ํŒŒ์ผ์„ ์ˆจ๊ฒผ๊ธฐ ๋•Œ๋ฌธ์— ์„ค์ •ํŒŒ์ผ์„ ์ฐพ์„ ์ˆ˜๊ฐ€ ์—†๋‹ค. ์ด๋•Œ ํ„ฐ๋ฏธ๋„ ์ฐฝ์—์„œ ๋ช…๋ น์–ด๋กœ ์ˆจ๊ฒจ๋†“์€ ์„ค์ •ํŒŒ์ผ์„ ๊บผ๋‚ผ ์ˆ˜ ์žˆ๋‹ค. package.json ์˜ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ •์˜ํ•˜๋Š” ๋ถ€๋ถ„์„ ๋ณด๋ฉด โ€œejectโ€: โ€œreact-scripts ejectโ€ ๋ผ๋Š” ๋‚ด์šฉ์ด ์žˆ๋‹ค. ์ด ๋ช…๋ น์–ด๊ฐ€ ์„ค์ •ํŒŒ์ผ์„ ์ถ”์ถœํ•˜๋Š” ๋ช…๋ น์–ด๋‹ค.

$ yarn eject

์œ„ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•ด์„œ ์ˆจ๊ฒจ์ ธ์žˆ๋˜ ํŒŒ์ผ์„ ๊บผ๋‚ด๋ฉด config ์™€ scripts ํด๋”๊ฐ€ ์ƒ๊ธฐ๊ณ  package.json ํŒŒ์ผ์— ๋ชจ๋“  dependency ์™€ babel, jest ์„ค์ • ์ฝ”๋“œ๊ฐ€ ๋“œ๋Ÿฌ๋‚œ๋‹ค.

๋‚ด์ผ

  • MongoDB

Reference

reference 1
reference 2
react-summernote github

0๊ฐœ์˜ ๋Œ“๊ธ€