profile
๐Ÿ’ช๐Ÿป ์•„๋Š” ๊ฑธ ์„ค๋ช…ํ•  ์ค„ ์•„๋Š” ๊ฐœ๋ฐœ์ž ๋˜๊ธฐ
post-thumbnail

ํŒ€ํ”„๋กœ์ ํŠธ | ์—ฌํ–‰ ๋ชจ์ž„ ์„œ๋น„์Šค offstory (2์ฃผ์ฐจ)

\> Week 2. ํ”„๋ก ํŠธ์—”๋“œ ํŒ€ ํ”„๋กœ์ ํŠธ2์ฃผ์ฐจ: 21 / 10 / 18 - 21 / 10 / 24 (์ผ)10 / 18 - 10 / 19 : ํ”„๋กœ์ ํŠธ ๊ธฐ๋ณธ ์„ธํŒ… ๋ฐ ๊นƒํ—ˆ๋ธŒ, ๊นƒ ์ตํžˆ๊ธฐ(1) Grid System setup(2) Prettier/Eslint setup(3

์–ด์ œ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

ARTICLE | [JS] ํ”„๋กœํ† ํƒ€์ž…

ํŒ€์›๋“ค๊ณผ ํ•จ๊ป˜ํ•˜๋Š” ๋ชจ๋˜ JS ๋”ฅ๋‹ค์ด๋ธŒ ์Šคํ„ฐ๋”” 7์ฐจ ๐Ÿ’• 19.1 ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ~ 19.7 ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ ํ”„๋กœํ† ํƒ€์ž… ์—ฌํƒœ๊นŒ์ง€ ์ฝ”๋“œ ์ƒ์—์„œ ํ”„๋กœํ† ํƒ€์ž…์„ ์‚ฌ์šฉํ•  ์ผ์ด ์—†๊ธฐ๋„ ํ–ˆ๊ณ , ๋”ฐ๋กœ ๊ณต๋ถ€ํ•œ ์ ๋„ ์—†์ง€๋งŒ ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ์–ธ์–ด๋ผ ๋ถˆ๋ฆฌ๋Š” JS์—์„œ ํ”„๋กœํ† ํƒ€์ž…์„ ๋ชจ๋ฅธ๋‹ค๋Š”

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

ํŒ€ํ”„๋กœ์ ํŠธ | ์—ฌํ–‰ ๋ชจ์ž„ ์„œ๋น„์Šค offstory (1์ฃผ์ฐจ)

Week 1. ํ”„๋ก ํŠธ์—”๋“œ ํŒ€ ํ”„๋กœ์ ํŠธ 1์ฃผ์ฐจ21 / 10 / 14 (๊ธˆ ) ~ 21/ 10 / 17 (์ผ)(1) ํ”„๋กœ์ ํŠธ ์„ธํŒ… ๋ฐ ํ˜‘์—…๋„๊ตฌ, ๊ธฐ์ˆ ์Šคํƒ ๊ฒฐ์ •(2) Figma๋ฅผ ์ด์šฉํ•œ ์‹œ์•ˆ์„ ๋งŒ๋“ค๊ณ  Work ๋ถ„๋ฐฐ, Work์˜ ์šฐ์„ ์ˆœ์œ„ ๊ฒฐ์ •\- 21 / 10 / 14 (๊ธˆ)

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

๊ณ ๋‡Œ๋ก | ์ฒซ Vue ํ”„๋กœ์ ํŠธ : ์˜ํ™” ๊ฒ€์ƒ‰ ์‚ฌ์ดํŠธ

์˜ํ™” ๊ฒ€์ƒ‰ ์‚ฌ์ดํŠธ : Any Search ๊นƒํ—ˆ๋ธŒ: https://github.com/Jeong-jeong/-Any-Search ๋ฐฐํฌ: https://objective-jang-bed822.netlify.app ์‹œ์ž‘ํ•˜๊ธฐ ์ „์— Vanila JS ํšŒ๊ณ  ์ด์ „์— vanila

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

Article | [JS] ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ, ์ƒ์„ฑ์ž ํ•จ์ˆ˜, ํ•จ์ˆ˜ ๊ฐ์ฒด

Property Attribute์— ๊ด€ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฐ์ฒดํ”„๋กœํผํ‹ฐ์˜ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋‚ด๋ถ€ ์Šฌ๋กฏํ™•์ธ๋ฐฉ๋ฒ•: Object.getOwnPropertyDescriptor()๊ฐ์ฒด์˜ ๋ชจ๋“  Property Attribute ํ™•์ธ๋ฐฉ๋ฒ•: Object.getOwnPropertyDesc

2021๋…„ 10์›” 8์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Babel, PostCss

Week 8. ๋“œ๋””์–ด babel ๐ŸคฉES5 ์ด์ƒ์˜ ๋ฒ„์ „์„ ๊ตฌํ˜• ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋‚ฎ์ถ”๋Š”๋ฐ ์‚ฌ์šฉ๋˜๋Š” transcompilerโš ๏ธ Babel์ด ์—†๋Š” ๊ธฐ๋Šฅ์„ ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์ฃผ์ง€๋Š” ์•Š์Œnpm i -D @babel/core @babel/cli@babel/core: ๋ฐ”๋ฒจ

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

TIL | [Vue] Vue Router

Week 8. Vue Router ๊ธฐ์ดˆVue router๋ฅผ ์ด์šฉํ•˜๋ฉด SPA๋ฅผ ์†์‰ฝ๊ฒŒ ๊ตฌํ˜„ ๊ฐ€๋Šฅํ•˜๋‹ค.์„ค์น˜: npm i vue-router@next Vue 3 ๋ฒ„์ „์— ๋งž์ถฐ vue-router๋„ next(4๋ฒ„์ „)๋กœ ์„ค์น˜.๋“ฑ๋ก$route: router์™€ ๊ด€๋ จ๋œ ์ •๋ณด ์ €์žฅ$ro

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

ARTICLE | [JS] JS ์Šค์ฝ”ํ”„

ํŒ€์›๋“ค๊ณผ ํ•จ๊ป˜ํ•˜๋Š” ๋ชจ๋˜ JS ๋”ฅ๋‹ค์ด๋ธŒ ์Šคํ„ฐ๋”” 4์ฐจ ๐Ÿ’•์ด๋ฒˆ ์Šคํ„ฐ๋””๋ถ€ํ„ฐ๋Š” ์˜๋ฌธ์ ์ด๋‚˜ ๊ถ๊ธˆํ•œ ์ ์— ๋Œ€ํ•ด ์ •๋ฆฌํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค.1\. varํ‚ค์›Œ๋“œ๋Š” ๊ฐ™์€ ์Šค์ฝ”ํ”„์—์„œ ์ค‘๋ณต ์„ ์–ธ์„ ํ—ˆ์šฉํ•˜์ง€๋งŒ, let, const๋Š” ๊ฐ™์€ ์Šค์ฝ”ํ”„์—์„œ ์ค‘๋ณต ์„ ์–ธ์„ ํ—ˆ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.2\. ์Šค์ฝ”ํ”„์ฒด์ธ3\.

2021๋…„ 9์›” 30์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL | [Vue] Vue ๊ฐ„๋‹จ ์š”์•ฝ

Week 7. Vue ์‹ ์„ธ๊ณ„ ํƒํ—˜(3)Vue ๊ณผ์ œ ์ œ์ถœ ๊ธฐํ•œ์„ ๋งž์ถ”๊ธฐ ์œ„ํ•ด ๊ฐ•์˜ ๋‚ด์šฉ์€ ๊ฐ„๋‹จํžˆ ํ‚ค์›Œ๋“œ๋กœ ์ •๋ฆฌ

2021๋…„ 9์›” 28์ผ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL | [Vue] ์‹ ์„ธ๊ณ„ Vue ํƒํ—˜ (2)

TIL | ์‹ ์„ธ๊ณ„ Vue ํƒํ—˜ (2)v-bind์— ์—ฌ๋Ÿฌ๊ฐœ์˜ ํด๋ž˜์Šค๋ฅผ ๋‹ฌ๊ณ  ์‹ถ์„ ๊ฒฝ์šฐ,class ๊ฐ’์œผ๋กœ {ํ‚ค: ๊ฐ’} ํ˜•ํƒœ๋กœ ๋„ฃ์–ด์ฃผ๋ฉด ๋จ.

2021๋…„ 9์›” 26์ผ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

โš ๏ธ ์˜ค๋ฅ˜ ๋ฐœ์ƒ | Invalid CSS after " " expected expression(e.g, 1px, bold) was ...

Parcel๋กœ SCSS๋ฅผ ์ปดํŒŒ์ผํ•˜๋ ค๋‹ค ์ฝ”๋“œ ์ƒ๋‹จ๋ถ€์— map ๋ชจ๋“ˆ์„ ๋ถˆ๋Ÿฌ์™€map์˜ ์ถœ์ฒ˜: Pacel - SCSSNotes: You can also use node-sass module for SCSS compilation. Using node-sass module wil

2021๋…„ 9์›” 19์ผ
ยท
3๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL | [Vue] ์‹ ์„ธ๊ณ„ Vue ํƒํ—˜ (1)

Vue3์€ ๋น„๊ต์  ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ํ˜„์žฌ Vue2 > Vue3์œผ๋กœ ๋„˜์–ด๊ฐ€๋Š” ๊ณผ๋„๊ธฐ์ด๋‹ค.Vue ๊ณต์‹๋ฌธ์„œ{{ }}: ์ด์ค‘ ์ค‘๊ด„ํ˜ธ ๊ตฌ๋ฌธ๋ฐ˜์‘ํ˜•(๋ฐ˜์‘์„ฑ) ๋ฐ์ดํ„ฐ: ๋ฐ์ดํ„ฐ๊ฐ€ ๋ฐ”๋€Œ๋ฉด ํ™”๋ฉด๋„ ๋ฐ”๋€๋‹ค.v-\_\_\_ : html์—์„œ JS ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•  ๋•ŒVue.createApp(App).

2021๋…„ 9์›” 18์ผ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL | SCSS(Sass)

Week 7. SCSS๋‚ด๊ฐ€ ์ข‹์•„ํ•˜๋Š” SCSS! ๊ธฐ์ดˆ๋ฅผ ๋‹ค์‹œํ•œ ๋ฒˆ ์žก๊ณ  ๊ฐ€์ฆˆ์•„~!~!CSS Preprocessor(์ „์ฒ˜๋ฆฌ ๋„๊ตฌ): ์ „์ฒ˜๋ฆฌ ๋„๊ตฌ๋Š” ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง์ ‘ ๋™์ž‘ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—node.jsํ™˜๊ฒฝ์„ ํ†ตํ•ด CSS๋กœ ๋ณ€ํ™˜์ž‘์—…์„ ๊ฑฐ์ณ์•ผ ํ•จ.Sass: ์ฝ”๋“œ ๋ธ”๋ก์ด ์—†์Œ๋ธ”

2021๋…„ 9์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

ARTICLE | [JS] ํƒ€์ž… ๋ณ€ํ™˜๊ณผ ๋‹จ์ถ• ํ‰๊ฐ€

๋ฌธ์ž์—ด ํƒ€์ž…์œผ๋กœ ๋ณ€ํ™˜ ์ˆซ์ž ํƒ€์ž…์œผ๋กœ ๋ณ€ํ™˜ ๋ถˆ๋ฆฌ์–ธ ํƒ€์ž…์œผ๋กœ ๋ณ€ํ™˜

2021๋…„ 9์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL | CSS ์‹ฌํ™” (Transform 3D, Columns, Filter, ๋ณ€์ˆ˜, @supports, @media)

3D ํšจ๊ณผ๋ฅผ ์ฃผ๊ธฐ ์œ„ํ•ด์„  ์›๊ทผ๊ฐ์ด ํ•„์š”ํ•จ.๋ถ€๋ชจ ์š”์†Œ์—๊ฒŒ ์†์„ฑ์œผ๋กœ ์ฃผ๋Š” ๊ฒฝ์šฐperspective: ๊ฑฐ๋ฆฌ์†์„ฑ์œผ๋กœ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ๋ถ€๋ชจ์š”์†Œ์—๊ฒŒ ๊ฑธ์–ด์ฃผ๊ธฐex) perspective(300px) : 300px ๋งŒํผ ๋ฉ€๋ฆฌ ๋ณด์ด๋„๋กperspective-origin: x์ถ• y์ถ•์›๊ทผ ๊ธฐ์ค€

2021๋…„ 9์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL | [JS] ๋ฌดํ•œ์Šคํฌ๋กค UI ๊ตฌํ˜„ํ•˜๊ธฐ

Week 6. ๋ฌดํ•œ ์Šคํฌ๋กค ๊ตฌํ˜„ ๋ฐฉ์‹ ํ™”๋ฉด ์ „์ฒด height์™€ ์Šคํฌ๋กค ์œ„์น˜๋กœ ์Šคํฌ๋กค์ด ์ปจํ…์ธ  ๋์— ๋‹ค๋‹ค๋ž๋Š”์ง€ ์ฒดํฌํ•ด์„œ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ์‹ intersection observer ๋ฐฉ์‹ ๋‚ด๊ฐ€ ์ง€์ •ํ•œ DOM ๊ฐ์ฒด๊ฐ€ ๋ณด๊ณ  ์žˆ๋Š” viewport? ์‹œ์•ผ์— ๋‹ฟ์•˜๋Š”์ง€ ๊ฐ์ง€ํ•˜๋Š” ๋ฐฉ์‹

2021๋…„ 9์›” 11์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Article | [JS] ๋น„ํŠธ ์—ฐ์‚ฐ์ž(bitwise operator)

๋น„ํŠธ ์—ฐ์‚ฐ์ž๋Š” ๋‘ ๊ฐœ์˜ number ํƒ€์ž… ํ”ผ์—ฐ์‚ฐ์ž๋ฅผ ์ด์ง„์ˆ˜๋กœ ๋ณ€ํ™˜ํ•ด ๋น„๊ตํ•œ ํ›„ \[JS] ๋น„ํŠธ ์—ฐ์‚ฐ์ž\[JavaScript 33๊ฐ€์ง€ ๊ฐœ๋…] 12. Bitwise Operator(๋น„ํŠธ ์—ฐ์‚ฐ์ž)

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

TIL | ํด๋ผ์šฐ๋“œ ํ”Œ๋žซํผ๊ณผ ๋ฐฐํฌ

Week 6. ์ฒซ ๋ฐฐํฌ ์—ฐ์Šต !! ์•„์ž์•„์ž ๐Ÿ‘History API ๊ธฐ๋ฐ˜์˜ SPA๋ฅผ ๋ฐฐํฌํ•˜๊ธฐ ์œ„ํ•ด์„  404 ์—๋Ÿฌ ์ฒ˜๋ฆฌ ์˜ต์…˜์ด ํ•„์š”.์›์ธ: 1๊ฐœ์˜ inex.html ํŒŒ์ผ์— ์—ฌ๋Ÿฌ ๊ฒฝ๋กœ๋กœ ์˜ค๊ธฐ ๋•Œ๋ฌธ์— index.html์„ ์ฐพ์ง€ ๋ชปํ•ด 404 ์—๋Ÿฌ ๋ฐœ์ƒ.๐Ÿ‘‰๐Ÿป npx serv

2021๋…„ 9์›” 7์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

TIL | CSS ์‹ฌํ™”(float, position, flex, grid)

Week 5. CSS ์‹ฌํ™”float: ์š”์†Œ๋ฅผ ๋ณดํ†ต์˜ ํ๋ฆ„์—์„œ ๋ฒ—์–ด๋‚˜๊ฒŒ ํ•จ. (์–ด๋”˜๊ฐ€์— ๋‘ฅ๋‘ฅ ๋–  ์žˆ๋‹ค!)๋‘ฅ๋‘ฅ ๋„์šฐ๊ฑฐ๋‚˜, ๋ ˆ์ด์•„์›ƒ์„ ์ขŒ์šฐ๋กœ ๋ถ„๋ฆฌํ•  ๋•Œ ์‚ฌ์šฉ.block ์š”์†Œ๋ฅผ ๊ฐ€๋กœ์ •๋ ฌ ์‹œํ‚ฌ ๋•Œ๋„ ์‚ฌ์šฉfloat ํ•ด์ œ๋ฅผ ์‹œํ‚ค์ง€ ์•Š์œผ๋ฉด ๋ถ€๋ชจ๊ฐ€ ์ž์‹ ์ธ์ง€๋ฅผ ๋ชปํ•จ.์ฃผ๋ณ€ text๋‚˜ ์ธ

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

ARTICLE | [JS] ๋ณ€์ˆ˜

ํŒ€์›๋“ค๊ณผ ํ•จ๊ป˜ํ•˜๋Š” ๋ชจ๋˜ JS ๋”ฅ๋‹ค์ด๋ธŒ ์Šคํ„ฐ๋”” 1์ฐจ ๐Ÿ’•๋ชจ๋˜ JS deep dive ํ‘œ์ง€๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive๋ฅผ ๋ณด๊ณ  ์ •๋ฆฌํ•˜์˜€๋‹ค.JS ์—”์ง„์€ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•ด JS ์ฝ”๋“œ๋ฅผ ๊ณ„์‚ฐ(ํ‰๊ฐ€)ํ•˜๊ณ  ๋ฉ”๋ชจ๋ฆฌ์— ๊ธฐ์–ตํ•œ๋‹ค.์ฝ”๋“œ๋ฅผ ํ‰๊ฐ€๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด์„  ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด ๋ฐ์ดํ„ฐ

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