profile
๐Ÿง€ ๊ฐœ๋ฐœ์„ ํ•˜๋ฉด์„œ ๋„์›€์ด ๋˜์—ˆ๋˜ ๋ถ€๋ถ„์„ ๊ธฐ๋กํ•˜๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค ๐Ÿง€

POSTCSS๋ž€?

ํŽธ๋ฆฌํ•œ ๋ฌธ๋ฒ•์„ ์ด์šฉํ•ด์„œ css๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์ถ”ํ›„์— ๋‹ค์‹œ ์ˆœ์ˆ˜ css๋กœ ๋ณ€ํ™˜ํ•ด ์ฃผ๋Š” ๊ฒƒ๋‹ค์‹œ ๋งํ•˜๋ฉด ํ”„๋ ˆ์ž„์›Œํฌ์˜ ๋ฌธ๋ฒ•์— ๋งž๊ฒŒ css๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ฐฐํฌํ•  ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” css๋กœ ๋ณ€ํ™˜์ด ๋จ.๊ธฐ๋ณธ์ ์ธ CSS๋งŒ์œผ๋กœ๋Š” ์ค‘๋ณต์ ์œผ๋กœ ์ž‘์„ฑํ•ด์•ผ๋จ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ ์œ„ํ•ด ํ•„

3์ผ ์ „
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[React] ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ ๋ฐฉ๋ฒ•(GitHub, Netlify)

๊ฐœ์ธ์ ์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋‹ค๊ฐ€ ๋ฐฐํฌํ•˜๊ณ  ์‹ถ๊ฑฐ๋‚˜ ํ•ด์•ผํ•  ์ผ์ด์žˆ๋‹ค. ์ด๋•Œ ๋‚ด๊ฐ€ ํ•ด๋ณธ ๋ฐฉ๋ฒ•์€ GitHub์™€ Netlify๋ฅผ ์ด์šฉํ•œ ๋ฐฉ๋ฒ•์ด๋‹ค.์ƒ์„ฑํ•œ repository์˜ Settings์—์„œ GitHub Pages๋กœ ์ด๋™ํ•œ๋‹ค.master Branch๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ๋ฐฐํฌํ•˜๋ฉด ์–ป๊ฒŒ๋  ์ฃผ

2022๋…„ 6์›” 22์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[JS] Spread Operator

Spread Operator๋ผ๊ณ  ํ•ด์„œ ...์„ ์ด์šฉํ•˜๋ฉฐ ์Šคํ”„๋ ˆ๋“œ ์˜คํผ๋ ˆ์ดํ„ฐ, ์Šคํ”„๋ ˆ๋“œ ์—ฐ์‚ฐ์ž๋ผ๊ณ  ๋ถˆ๋ฆฐ๋‹ค. ES^์—์„œ ์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€๋œ ๋‚ด์šฉ์œผ๋กœ ์—ฐ๊ฒฐ, ๋ณต์‚ฌ ๋“ฑ์— ํ™œ์šฉ๋„๊ฐ€ ๋†’๋‹ค. ๊ธฐ์กด์—์„œ๋Š” ๋ฐฐ์—ด์„ ๊ฒฐํ•ฉํ•˜๋Š”๋ฐ ์žˆ์–ด concat ๋ฉ”์„œ๋“œ๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ–ˆ๋‹ค. spread ์—ฐ์‚ฐ์ž๋ฅผ ์ด

2022๋…„ 6์›” 20์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[JS] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜ค๋ธŒ์ ํŠธ

์˜ค๋ธŒ์ ํŠธ๋Š” key์™€ value์˜ ์ง‘ํ•ฉ์ฒด์ด๋‹ค.new class ํ‚ค์›Œ๋“œ ์‚ฌ์šฉ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋™์ ์œผ๋กœ ํƒ€์ž…์ด runtime(ํ”„๋กœ๊ทธ๋žจ์ด ๋™์ž‘ํ•˜๊ณ  ์žˆ์„ ๋•Œ)๊ฒฐ์ •๋˜๋ฏ€๋กœ ์˜ค๋ธŒ์ ํŠธ ์ƒ์„ฑ ํ›„ property๋ฅผ ํ›„์— ์ถ”๊ฐ€ ๋ฐ ์‚ญ์ œ ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ณ€์ˆ˜์— ์›์‹œํ˜• ๋ฐ์ดํ„ฐ (๋ฌธ์ž์—ด, ์ˆซ์ž)๋ฅผ ํ• 

2022๋…„ 6์›” 20์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[React]renderํ•จ์ˆ˜ ํ˜ธ์ถœ์— ๋”ฐ๋ฅธ ์„ฑ๋Šฅ ๋ถ„์„๊ณผ PureComponent

render() ์•ˆ์— ๋กœ๊ทธ๋ฅผ ํ™•์ธํ•˜์—ฌ Component์— ์ด render ํ•จ์ˆ˜๊ฐ€ ์–ธ์ œ ํ˜ธ์ถœ๋˜๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฝ”๋“œ์— console.log()๋ฅผ ์ฐ๊ณ  ํ™”๋ฉด์„ refresh ํ•ด์ฃผ๋ฉด ๋กœ๊ทธ๋“ค์ด ๋‘๋ฒˆ์”ฉ ์ฐํžŒ๋‹ค. index.js์—์„œ StrictMode๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ์„œ์ด๋‹ค.St

2022๋…„ 6์›” 14์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

[React] ref๋ž€?

HTML์„ ์ž‘์„ฑํ•  ๋•Œ, DOM ์š”์†Œ์— ์ด๋ฆ„์„ ๋ถ™์ผ ๊ฒฝ์šฐ <div id ="testId"> ์™€ ๊ฐ™์ด id ๊ฐ’์„ ์ค€๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ํ•ด๋‹น id๊ฐ€ ์žˆ๋Š” DOM ์š”์†Œ์—๋งŒ ์Šคํƒ€์ผ์„ ๋”ฐ๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋ฆฌ์•กํŠธ์—์„œ๋„ DOM์„ ์„ ํƒํ•ด ์ง์ ‘ ์ ‘๊ทผํ•˜๊ธฐ์œ„ํ•ด ref๋ฅผ ์‚ฌ

2022๋…„ 6์›” 13์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Excel data๋ฅผ DB๋กœ INSERT(๋งˆ์ด๊ทธ๋ ˆ์ด์…˜) ํ•˜๋Š” ๋ฒ•

๋Œ€๋Ÿ‰์˜ ๋ฐ์ดํ„ฐ๋ฅผ db์— insertํ•  ๋•Œ ์—‘์…€๋กœ ๋ณดํ†ต ์ž๋ฃŒ๋ฅผ ๋ฐ›๋Š”๋‹ค๊ณ  ํ•œ๋‹ค.ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค ๐Ÿ˜ฒ์•„๋ž˜์˜ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด data๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž.๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด์žˆ๋Š” ์ฒซ๋ฒˆ์งธ ํ–‰์— ์ฟผ๋ฆฌ๋ฅผ ์ž‘์„ฑํ•ด์ค€๋‹ค.์ด๋•Œ number" ์…€๋ฒˆํ˜ธ "varchar๋Š”'" ์…€๋ฒˆํ˜ธ "'์ฒซ๋ฒˆ์งธ ์…€

2022๋…„ 5์›” 27์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[node.js]windows์—์„œ ํ”„๋กœ์ ํŠธ node ๋ฒ„์ „ ๊ด€๋ฆฌ(nvm)

ํ”„๋กœ์ ํŠธ๋งˆ๋‹ค ๋‹ค๋ฅธ node ๋ฒ„์ „์ด ํ•„์š”ํ•ด์„œ ๋ฒ„์ „ ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ–ˆ๋‹ค.A ํ”„๋กœ์ ํŠธ - node v10.24.1B ํ”„๋กœ์ ํŠธ - node v13.14.0Node Version Manager๋…ธ๋“œ ๋ฒ„์ „์„ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•œ ํŒจํ‚ค์ง€๋กœ ์‰ฝ๊ฒŒ Node.js ๋ฒ„์ „์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค. nvm

2022๋…„ 5์›” 17์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[GIT] warning: LF will be replaced by CRLF in README.md. ์˜ค๋ฅ˜ ํ•ด๊ฒฐ

git์„ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋Ÿฐ error์„ ๋ณด๊ฒŒ ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค.์ด๋Š” mac ๋˜๋Š” linux๋ฅผ ์“ฐ๋Š” ๊ฐœ๋ฐœ์ž์™€ window ๊ฐœ๋ฐœ์ž๊ฐ€ Git์œผ๋กœ ํ˜‘์—…ํ•  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” whitespace ์—๋Ÿฌ์ด๋‹ค.๋‚˜๋˜ํ•œ macOS๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ถ„์˜ ์ฝ”๋“œ๋ฅผ clone ์‹œํ‚ค๊ณ  ๋‚˜์˜ windowOS์—์„œ

2022๋…„ 5์›” 13์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Spring vs SpringBoot

Spring ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ํ†ตํ•ด์„œ ๊ฐœ๋ฐœ์ž๋“ค์˜ ๊ฒจ์šธ์ด ๋๋‚ฌ๋‹ค. The fact that Spring represented a fresh start after the "winter" of traditional J2EEํ•˜์ง€๋งŒ!!! ์„ค์ •์˜ ์–ด๋ ค์›€์ด ํฌ๋‹ค! Spring์„ ๋ด„์ด๋ผ๊ณ 

2022๋…„ 5์›” 2์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Apache Kafka(์•„ํŒŒ์น˜ ์นดํ”„์นด) ๋ž€?

์นดํ”„์นด๋ž€? ์นดํ”„์นด๋ฅผ ๊ฐœ๋ฐœ ํ›„ ๋งํฌ๋“œ์ธ์˜ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ์‹œ์Šคํ…œ ์นดํ”„์นด๋ฅผ ์ ์šฉํ•จ์œผ๋กœ์„œ ๋ชจ๋“  ์ด๋ฒคํŠธ/๋ฐ์ดํ„ฐ์˜ ํ๋ฆ„์„ ์ค‘์•™์—์„œ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๊ณ  ์„œ๋น„์Šค ์•„ํ‚คํ…์ฒ˜๊ฐ€ ๊ธฐ์กด์— ๋น„ํ•ด ๊ด€๋ฆฌํ•˜๊ธฐ ์‹ฌํ”Œํ•ด์กŒ๋‹ค. Publish/Subscribe ์‹œ์Šคํ…œ ์นดํ”„์นด๋Š” Publish-Subscribe๋ชจ๋ธ์„ ๊ตฌํ˜„ํ•œ ๋ถ„์‚ฐ ๋ฉ”์‹œ์ง• ์‹œ์Šคํ…œ์ด๋‹ค. Publish-Subscribe๋ชจ๋ธ์€ ๋ฐ์ดํ„ฐ...

2022๋…„ 4์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[JS] Document.createElementNS() ๋ž€?

Document.createElementNS() ๊ณต์‹ ๋ฌธ์„œ์— ๋”ฐ๋ฅด๋ฉด Document.createElementNS() ๋Š” ์ง€์ •๋œ ๋„ค์ž„์ŠคํŽ˜์ด์Šค URL๊ณผ ์ ํ•ฉํ•œ ์ด๋ฆ„์œผ๋กœ element๋ฅผ ๋งŒ๋“ ๋‹ค ํ•œ๋‹ค. ์ข€ ๋” ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•˜์ž๋ฉด ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒˆ Element ๋…ธ๋“œ๋ฅผ ์ƒ

2022๋…„ 4์›” 12์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[moment.js] ๋‚ ์งœ ๋‹ค๋ฃจ๊ธฐ

Moment.js๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ dates๋ฅผ ๋‹ค๋ฃจ๊ธฐ ๊น”๋”ํ•˜๊ณ  ๊ฐ„๊ฒฐํ•œ API์ด๋‹ค. ์ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‚ ์งœ์™€ ์‹œ๊ฐ„์„ ๋ถ„์„, ๊ฒ€์ฆ, ์กฐ์ž‘ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋‹ค.Moment.js ํ™ˆํŽ˜์ด์ง€์— ๋“ค์–ด๊ฐ€๋ฉด ์•„๋ž˜ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด ์นœ์ ˆํžˆ ๋‚˜์™€์žˆ๋‹ค. Node์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ์•„๋ž˜ ๋ช…๋ น์–ด๋กœ ๋ชจ๋“ˆ์„

2022๋…„ 4์›” 6์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

[Javascript] ES6 โ†’ ES5 ๋ฌธ๋ฒ• ๋ณ€ํ™˜ ์‚ฌ์ดํŠธ

https://es6console.com/

2022๋…„ 4์›” 5์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

[TypeScript] ํƒ€์ž…์Šคํฌ๋ฆฐํŠธ๋ž€? (๋งํฌ)

https://www.samsungsds.com/kr/insights/TypeScript.html

2022๋…„ 3์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[DataTable] scrollX ์‚ฌ์šฉ ์‹œ header ์ค„์–ด๋“œ๋Š” ์˜ค๋ฅ˜ ํ•ด๊ฒฐ (causing squashed header)

DataTable์„ ์‚ฌ์šฉํ•˜๋˜ ์ค‘ ๊ฐ€๋กœ๋กœ data๊ฐ€ ๋Š˜์–ด๋‚  ์‹œ ์Šคํฌ๋กค์„ ๋„ฃ์–ด์•ผํ–ˆ๋‹ค.ํ•˜์ง€๋งŒ ์•„๋ž˜์˜ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉ ํ•  ์‹œ header๊ฐ€ ์—‰๋ง์ด ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ๋‹ค. ์•„๋ž˜์˜ ์„ธ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์€ ๋ชจ๋‘ ๋‚˜์—๊ฒŒ ํ•ด๊ฒฐ์„ ํ•ด์ฃผ์ง€ ์•Š์•˜๋‹ค.1\.scrollX ๋˜๋Š” scrollY ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜

2022๋…„ 3์›” 23์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[DataTables] cell ๋ฐ excel export ์‹œ ์ค„๋ฐ”๊ฟˆ (line break)

DataTables๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•˜์—ฌ ํ…Œ์ด๋ธ”์„ ๋งŒ๋“ค์—ˆ์„ ๋•Œ ์ฒ˜์Œ์—๋Š” ํ•œ์ค„์— ๋ชจ๋“  ๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด๊ฐ”๋‹ค.๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๊ฒƒ์€ ์ˆซ์ž ๋งˆ๋‹ค ์—”ํ„ฐ๊ฐ€ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.์—‘์…€์—์„œ๋„ ๋ฌผ๋ก  ์—‰๋ง์œผ๋กœ ๋œจ๊ณ , ๊ธ€์”จ ๊ตต๊ฒŒ ์„ค์ •ํ•œ ์„ค์ •๋„ ๊ฐ™์ด ๋ณด์ธ๋‹ค๐Ÿ˜๋งŒ์•ฝ ํ…Œ์ด๋ธ”์—์„œ๋งŒ ์ค„๋ฐ”๊ฟˆ์ด ํ•„์š”ํ•˜๋‹ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™

2022๋…„ 3์›” 11์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

[Javascript] replace ์ •๊ทœ์‹ ๋ฐ ์น˜ํ™˜ํ•˜๊ณ  ์‹ถ์€ ๋ถ€๋ถ„์ด ์—ฌ๋Ÿฌ๊ฐœ ์ผ ๋•Œ

์˜ˆ๋ฅผ ๋“ค์–ด string์—์„œ name, age, city ๋‹จ์–ด๋ฅผ ์ฐพ์œผ๋ฉด ๊ณต๋ฐฑ์œผ๋กœ ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•ด์ฃผ๋ฉด ๋œ๋‹ค.๊ฐ๊ฐ์˜ ๋ฌธ์ž์—๋Š” ๊ตณ์ด ๋”ฐ์˜ดํ‘œ๋ฅผ ํ•  ํ•„์š”๋Š” ์—†๋‹ค :ใ…‡Referencehttps://m.blog.naver.com/PostView.naver?

2022๋…„ 3์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

[DataTable] DataTable tfoot ์—ฌ๋Ÿฌ๊ฐœ ์ƒ์„ฑ ๋ฐ sum๊ฐ’ ํ‘œ์ถœ

ํ…Œ์ด๋ธ”์— ์ž…๋ ฅ๋œ ๋ฐ์ดํ„ฐ๋“ค์„ tfoot์— ์ƒ์„ฑ์‹œ์ผœ์ฃผ๋Š” ๋ฐฉ๋ฒ•์„ ํฌ์Šคํ•ด๋ณผ ์˜ˆ์ •์ด๋‹ค.๋ฐ์ดํ„ฐ๊ฐ€ db์— ๋งค์ผ ์ €์žฅ๋˜๋Š” ํ˜•์‹์ด๋‹ค. ์ฒซ๋ฒˆ์งธ๋Š” ๋‹น์ผ์˜ ๋ฐ์ดํ„ฐ๋งŒ ์ปฌ๋Ÿผ๋ณ„๋กœ sumํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.๋‘๋ฒˆ์งธ๋Š” ์ปฌ๋Ÿผ๋ณ„ ์ฒซ๋‚ ๋ถ€ํ„ฐ ๋‹น์ผ๊นŒ์ง€ sumํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— tfoot์„ ๋‘ํ–‰์— ๋‚˜๋ˆ„์–ด ์ƒ

2022๋…„ 2์›” 24์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[DataTable]๋‘ DataTable์„ ํ•œ๋ฒˆ์— excel์— export ์‹œํ‚ค๋Š” ๋ฒ•

์ด์ œ๊นŒ์ง€๋Š” ํ•˜๋‚˜์˜ DataTable์„ excel์— exportํ•˜๋Š” ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•ด์™”๋‹ค.๋”ฐ๋ผ์„œ ์ง์ ‘ ์—ฌ๋Ÿฌ๊ฐœ์˜ ํ…Œ์ด๋ธ”๋“ค์„ ํ•˜๋‚˜์˜ excel์— exportํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•œ ๋ฐฉ๋ฒ•์„ ๊ณต์œ ํ•ด๋ณผ ์˜ˆ์ •์ด๋‹ค.์•„๋ž˜์˜ ๊ทธ๋ฆผ์—์„œ ์‹ค์ œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ํ…Œ์ด๋ธ”์€ table 1, table 2์ด

2022๋…„ 2์›” 22์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€