์ „์ฒด ๊ธ€ 296

[TIL] 2020.03.07 (ํ† )

1. JavaScript 1) parcel parcel ํŒŒ์ผ๋ช… 2) forEach - forEach ๋ฉ”์„œ๋“œ๋Š” ๋ฐฐ์—ด์˜ ๊ฐ ์š”์†Œ๋งˆ๋‹ค ํ•œ ๋ฒˆ์”ฉ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœ. See the Pen forEach by Sujin Lee (@sujinlee_910616) on CodePen. 2. Bootstrap 1) alert-danger - alert ์ƒˆ ์ฐฝ์ด ์•„๋‹ˆ๋ผ ๊ธฐ์กด ์ฐฝ์— ๋œจ๋Š” UI. 3. .๊ธฐํƒ€ - .gitignore ํŒŒ์ผ์˜ ์œ„์น˜: .git ํด๋”์™€ ๋™์ผํ•œ ์œ„์น˜์—!

[JavaScript] ํด๋ž˜์Šค ์ œ์–ด๋ฐฉ๋ฒ• ๋น„๊ต - jQuery vs JavaScript

jQuery์™€ JavaScript๋ฅผ ์ด์šฉํ•ด์„œ ํด๋ž˜์Šค๋ฅผ ์ œ์–ดํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋น„๊ตํ•ด๋ณด์ž. 1. ํด๋ž˜์Šค ์ถ”๊ฐ€ $('#element').addClass('class1'); // 1๊ฐœ ์ถ”๊ฐ€ $('#element').addClass('class1 class2'); // ์—ฌ๋Ÿฌ๊ฐœ ์ถ”๊ฐ€ 2. ํด๋ž˜์Šค ์ œ๊ฑฐ $('#element').removeClass('class1'); // 1๊ฐœ ์ œ๊ฑฐ $('#element').removeClass('class1 class2'); // ์—ฌ๋Ÿฌ๊ฐœ ์ œ๊ฑฐ 3. ํด๋ž˜์Šค ๊ต์ฒด: ๊ธฐ์กด ํด๋ž˜์Šค ์ œ๊ฑฐ ํ›„ ์ƒˆ๋กœ์šด ํด๋ž˜์Šค ์ถ”๊ฐ€ $().switchClass('oldClass', 'newClass'); $('#element').removeClass('oldClass').add('newClass') 4. ํด๋ž˜์Šค ์ƒˆ๋กœ..

[TIL] 2020.03.06 (๊ธˆ)

1. Vanilla JavaScript 1) form ๊ด€๋ จ ์ด๋ฒคํŠธ (1) submit: form์˜ ์ •๋ณด๋ฅผ ์„œ๋ฒ„๋กœ ์ „์†กํ•˜๋Š” submit ์‹œ์— ๋ฐœ์ƒ (2) change: ํผ ์ปจํŠธ๋กค์˜ ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜์—ˆ์„ ๋•Œ ๋ฐœ์ƒ (3) focus: ์—˜๋ฆฌ๋จผํŠธ์— ํฌ์ปค์Šค๊ฐ€ ์ƒ๊ฒผ์„ ๋•Œ ๋ฐœ์ƒ (4) blur: ์—˜๋ฆฌ๋จผํŠธ์— ํฌ์ปค์Šค๊ฐ€ ์‚ฌ๋ผ์กŒ์„ ๋•Œ ๋ฐœ์ƒ 2) DOM ์ด๋ฒคํŠธ https://www.w3schools.com/jsref/dom_obj_event.asp 3) blur vs focusout - blur : ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ์— ํฌ์ปค์Šค๊ฐ€ ํ•ด์ œ๋˜์—ˆ์„ ๋•Œ ๋ฐœ์ƒ. ๋ฒ„๋ธ”๋ง(X) focusout : ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ์— ํฌ์ปค์Šค๊ฐ€ ํ•ด์ œ๋˜์—ˆ์„ ๋•Œ ๋ฐœ์ƒ. ๋ฒ„๋ธ”๋ง (O) - focusout๊ณผ blur ๋ชจ๋‘ ์—˜๋ฆฌ๋จผํŠธ์— ํฌ์ปค์Šค๊ฐ€ ํ•ด์ œ๋  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ์ธ๋ฐ, ๋‘˜์˜ ์ฐจ์ด..

[TIL] 2020.03.05 (๋ชฉ)

1. gh pages - github.io ํŽ˜์ด์ง€๋ฅผ ์ด๋ ‡๊ฒŒ build ํ•  ์ˆ˜ ์žˆ๊ตฌ๋‚˜ - deploy: build ํด๋”๋ฅผ ์—…๋กœ๋“œ - npm run buildํ•˜๋ฉด build ํด๋”๋ฅผ ์–ป๋Š”๋‹ค - deploy๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด, predeploy๊ฐ€ deploy๋ณด๋‹ค ๋จผ์ € ์ž๋™์ ์œผ๋กœ ์‹คํ–‰๋œ๋‹ค. - npm run build npm run deploy 2. [JS] 33 Concepts of JavaScript - ๊ฐœ๋… ๋‹ค์‹œ ๋‹ค์ง€๊ณ  ์žˆ์Œ. - JS๋Š” ํ˜•๋ณ€ํ™˜์ด ์ฐธ... ํ—ท๊ฐˆ๋ฆฌ๊ธฐ ์‰ฌ์šด ๊ฒƒ ๊ฐ™๋‹ค. ์‹ค์ˆ˜ํ•˜๊ธฐ ์‰ฌ์šธ๋“ฏ. - ๋ธ”๋กœ๊ทธ์— ์ •๋ฆฌํ•ด์•ผ๊ฒ ๋‹ค.

[TIL] 2020.03.04 (์ˆ˜)

1. [React] - ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ (ํ˜น์€ ํŠธ๋žœ์Šคํฌ๋จธ ๋ผ๊ณ  ๋ถˆ๋ฆฌ๊ธฐ๋„) : ๋ฆฌ์•กํŠธ ์ฝ”๋“œ๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋กœ ๋ฐ”๊ฟ”์ฃผ๋Š” ํˆด. Ex) ์›นํŒฉ - props : props๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌ. : ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ์ฃผ๋Š” ๊ฐ’. react๋Š” props๋ฅผ ๊ฐ€์ ธ๊ฐ„๋‹ค. : ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” props๋ฅผ ๋ฐ›์•„์˜ค๊ธฐ๋งŒ ํ•˜๊ณ , ๋ฐ›์•„์˜จ props๋ฅผ ์ง์ ‘ ์ˆ˜์ •ํ•  ์ˆ˜๋Š” ์—†๋‹ค. - propTypes : ํƒ€์ž… ์ฒดํฌํ•  ๋•Œ ์‚ฌ์šฉ. ๋‚ด๊ฐ€ ์ง€์ •ํ•œ ํƒ€์ž…์ด ์•„๋‹Œ ๋‹ค๋ฅธ ํƒ€์ž…์˜ prop์ด ๋“ค์–ด์˜ค๋ฉด ์ฝ˜์†”์— ๊ฒฝ๊ณ ๋ฌธ ๋– ์„œ ์•Œ ์ˆ˜ ์žˆ๋‹ค. - ๋žŒ๋‹ค์‹ => - ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋“ค: https://reactjs.org/docs/react-component.html 2. ๊ธฐํƒ€ - React๋กœ ์˜ํ™” ์•ฑ์„ ๋งŒ๋“ค๊ณ  ์žˆ๋‹ค. - ์ง€๊ธˆ ์ ˆ๋ฐ˜์ฏค ํ•œ ๊ฒƒ ๊ฐ™์€๋ฐ....

[Git] ๋กœ์ปฌ ํด๋”๋ฅผ ์›๊ฒฉ ์ €์žฅ์†Œ์™€ ์—ฐ๊ฒฐํ•˜๊ธฐ

๋กœ์ปฌ ์ €์žฅ์†Œ์™€ ์›๊ฒฉ ์ €์žฅ์†Œ๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ๋ฐ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค. 1. Github์— ์›๊ฒฉ์ €์žฅ์†Œ๋ฅผ ๋งŒ๋“  ํ›„, ๋กœ์ปฌ(๋‚ด ์ปดํ“จํ„ฐ)์— ์›๊ฒฉ์ €์žฅ์†Œ๋ฅผ ๋ณต์ œ(clone)ํ•˜๋Š” ๋ฐฉ๋ฒ• - 1) ์ƒˆ๋กœ์šด ์ €์žฅ์†Œ๋ฅผ ์ƒ์„ฑํ•˜๊ฑฐ๋‚˜, ๋˜๋Š” 2) ์›๊ฒฉ์ €์žฅ์†Œ์— ์ด๋ฏธ ๋งŽ์€ ์ž‘์—…์ด ์ด๋ฃจ์–ด์กŒ๊ณ  ๋‚ด ๋กœ์ปฌ์—๋Š” ์ž‘์—…์ด ์—†๋Š” ๊ฒฝ์šฐ์— ์ ํ•ฉํ•˜๋‹ค. 2. ๋กœ์ปฌ(๋‚ด ์ปดํ“จํ„ฐ)์—์„œ git์„ ์‹œ์ž‘ํ•˜๊ฒ ๋‹ค๊ณ  ์„ ์–ธํ•œ ๋‹ค์Œ ์›๊ฒฉ์ €์žฅ์†Œ๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ• - 1) ์ƒˆ๋กœ์šด ์ €์žฅ์†Œ๋ฅผ ์ƒ์„ฑํ•˜๊ฑฐ๋‚˜, ๋˜๋Š” 2) ๋‚ด ๋กœ์ปฌ์— ์ด๋ฏธ ๋งŽ์€ ์ž‘์—…์ด ์ด๋ฃจ์–ด์กŒ๊ณ  ์ด ์ž‘์—…๋“ค์„ ์ƒˆ๋กœ์šด ์›๊ฒฉ์ €์žฅ์†Œ๋ฅผ ๋งŒ๋“ค์–ด์„œ ์˜ฌ๋ ค์•ผ ํ•  ๊ฒฝ์šฐ์— ์ ํ•ฉํ•˜๋‹ค. ๋‚˜๋Š” ๊ฑฐ์˜ ํ•ญ์ƒ 1๋ฒˆ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ, ํ•˜๋ฃจ๋Š” ์–ด์ฉŒ๋‹ค๋ณด๋‹ˆ ์›๊ฒฉ์ €์žฅ์†Œ๋ฅผ ์ƒˆ๋กœ ๋งŒ๋“ค๊ณ  ๋กœ์ปฌ์— clone ํ•˜์ง€ ์•Š์€ ์ƒํƒœ์—์„œ ์ด๋ฏธ ๋กœ์ปฌ์— ์ž‘์—…์„ ์ž”๋œฉ ํ•ด๋ฒ„๋ ธ๋‹ค..

Programming/Git 2020.03.04

[TIL] 2020.03.03 (ํ™”)

1. [JS] 1) ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด : https://flik.tistory.com/53 - `(backtick) ์„ ์‚ฌ์šฉํ•ด์„œ ๋ฌธ์ž์—ด์„ ํ‘œํ˜„ํ•œ ๊ฒƒ. - (1) ์ค„๋ฐ”๊ฟˆ์„ ์‰ฝ๊ฒŒ ํ•  ์ˆ˜ ์žˆ๊ณ  (2) ๋ฌธ์ž์—ด ๋‚ด๋ถ€์— ํ‘œํ˜„์‹์„ ํฌํ•จํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 2) createElement(), createTextNode(), appendChild() - createElement() : ์š”์†Œ(element)๋ฅผ ๋งŒ๋“ ๋‹ค. - createTextNode() : ์„ ํƒํ•œ element์— text ์ถ”๊ฐ€ - appendChild() : ์„ ํƒํ•œ element์— ์ž์‹ element ์ถ”๊ฐ€ ht..

[TIL] 2020.03.02 (์›”)

1. [js] 1) var, let, const ์ฐจ์ด - var : ์˜ˆ์ „๋ถ€ํ„ฐ ์žˆ๋˜ ๋ณ€์ˆ˜. ๊ฐ™์€ ์ด๋ฆ„์˜ ๋ณ€์ˆ˜๋ฅผ ์—ฌ๋Ÿฌ๋ฒˆ ์„ ์–ธํ•ด๋„ ์—๋Ÿฌ๊ฐ€ ์•ˆ ๋‚จ. function scope - let, const : ES6 ์ดํ›„๋ถ€ํ„ฐ ๋‚˜์˜จ ๋ณ€์ˆ˜ ์„ ์–ธ ๋ฐฉ์‹. var์™€ ๋‹ฌ๋ฆฌ ๊ฐ™์€ ์ด๋ฆ„์˜ ๋ณ€์ˆ˜ ์žฌ์„ ์–ธ ๋ถˆ๊ฐ€. block scope. - let : ๋ณ€์ˆ˜ ์žฌ์„ ์–ธ ๋ถˆ๊ฐ€, ๋ณ€์ˆ˜์— ์žฌํ• ๋‹น ๊ฐ€๋Šฅ. - const : ๋ณ€์ˆ˜ ์žฌ์„ ์–ธ ๋ถˆ๊ฐ€, ๋ณ€์ˆ˜ ์žฌํ• ๋‹น ๋ถˆ๊ฐ€. 2) - setInterval(ํ•จ์ˆ˜๋ช…, ํ•จ์ˆ˜์‹คํ–‰์‹œ๊ฐ„) (์‹œ๊ฐ„๋‹จ์œ„: ms) - localStorage.setItem(key, value) - Math.floor(Math.random()*(n+1)) : 0~n๊นŒ์ง€์˜ ๋‚œ์ˆ˜ ์ƒ์„ฑ ex) Math.floor(Math.random()*11) : 0~10๊นŒ..

[TIL] 2020.03.01 (์ผ)

1. 2์ฐจ ํ”„๋กœ์ ํŠธ ํ”„๋ก ํŠธ ์ž‘์—… - ๊ธฐ์กด์— ๋งŒ๋“ค์–ด๋†จ๋˜ ํšŒ์›๊ฐ€์ž… UI๊ฐ€, label ํ•œ ์ค„ input ํ•œ ์ค„ ๋ฐฉ์‹์œผ๋กœ ํ–ˆ๋”๋‹ˆ ๋„ˆ๋ฌด ๊ธธ์–ด์ ธ์„œ, label๊ณผ input์„ ํ•œ ์ค„์— ๋งŒ๋“œ๋Š” ๋ฐฉ์‹์œผ๋กœ UI๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  ์žˆ๋‹ค. 1) ์นด์นด์˜ค ์ฃผ์†Œ ์ ์šฉ - ๊ฐ„๋‹จํ•˜๋‹ค key ๋ฐœ๊ธ‰ ๋ฐ›์„ ํ•„์š”๋„ ์—†๋„ค - ๊ธˆ์š”์ผ์—๋Š” ์นด์นด์˜ค๋งต ์ ์šฉ์‹œ์ผฐ์—ˆ๋Š”๋ฐ ๋‘˜ ๋‹ค ์˜ˆ์ƒํ–ˆ๋˜ ๊ฒƒ๋ณด๋‹ค ๊ฐ„๋‹จํ–ˆ๋‹ค. ์—ญ์‹œ ๊ฒ๋จน์ง€ ๋ง๊ณ  ๊ณ„์† ์ฝ”๋”ฉํ•ด๋ณด๋Š” ๊ฒŒ ์ค‘์š”ํ•œ ๊ฒƒ ๊ฐ™๋‹ค. 2) jQuery Datepicker - ์–˜๋„ ๊ฐ„๋‹จํ•œ๋ฐ ์ปค๋ฐ‹ํ•˜๊ณ  ๋‚˜๋‹ˆ ์ƒ๋…„์›”์ผ์—์„œ ๋…„๋„ ์ฐพ๋Š”๊ฒŒ ๋„ˆ๋ฌด ๋ฒˆ๊ฑฐ๋กœ์›Œ์„œ yearRange๋ฅผ ๋ณ€๊ฒฝํ•ด์คฌ๋‹ค. 3) radio ๋ฒ„ํŠผ ์˜† ํ…์ŠคํŠธ๋ฅผ ๋ˆŒ๋Ÿฌ๋„ radio ๋ฒ„ํŠผ์ด ํด๋ฆญ๋˜๊ฒŒ ํ•˜๋Š” ๋ฒ• ๋‚จ์„ฑ - ์œ„์™€ ๊ฐ™์ด label์˜ for ์†์„ฑ ๊ฐ’์œผ๋กœ input์˜ id๋ฅผ ๋„ฃ๋Š”๋‹ค. 4) ..