profile
๐Ÿ’กHabit is a second nature. [Git] https://github.com/Kimjimin97
post-thumbnail

[React] module css

๐Ÿ‘‡ https://react.vlpt.us/styling/02-css-module.html ์‚ฌ์ดํŠธ์—์„œ ๋žœ๋คํ•œ ํด๋ž˜์Šค ์ด๋ฆ„์˜ ์œ ์šฉ์„ฑ์— ๋Œ€ํ•ด์„œ ์•Œ์•˜์Šต๋‹ˆ๋‹ค. ํŒŒ์ผ ๋ณ„๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๊ฒƒ(import, export)๋Š” NodeJS ํ™˜๊ฒฝ์ด๋ผ์„œ ๊ฐ€๋Šฅํ•˜๋‹ค.

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

[React] ๊ณต์‹ ๋ฌธ์„œ๋กœ ์ œ๋Œ€๋กœ ์„ค์น˜ํ•˜๊ธฐ

โ—๏ธReact 18.0.0 ์‹คํ–‰์‹œ ์ฃผ์˜ โ—๏ธReactDom.render๋กœ ์‹คํ–‰์ด ๋ถˆ๊ฐ€๊ณต์‹ ๋ฌธ์„œ ์ฐธ์กฐ๐Ÿ‘‡https://github.com/facebook/react/blob/main/CHANGELOG.md๋”ฐ๋ผ์„œ ReactDom.render์ด ์•„๋‹Œ -> React

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

๊ฐ๊ฒฉ ๋ฆฌ์•กํŠธ ์ฒซ ์•ฑ ์„ค์น˜!!

node.js๋ฅผ ์„ค์น˜ํ•˜๊ณ  react๋ฅผ ์‹คํ–‰์‹œํ‚ฌ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค!!๋ฆฌ์•กํŠธ๋ฅผ app๋ฅผ ์„ค์น˜ํ•˜๋Š” ๋‚ ์ด ๋งž์ดํ•ด์„œ ๊ธฐ๋ปค์Šต๋‹ˆ๋‹ค.

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

[React] Prop

Props์„ ์‚ฌ์šฉํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์žฌ์‚ฌ์šฉํ•˜์ž!

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

๋ธ”๋กœ๊ทธ๋ฅผ ํ•˜๋Š” ์ด์œ 

๋ธ”๋กœ๊ทธ์— ๋‚ด๊ฐ€ ํ•œ ๊ณต๋ถ€๋ฅผ ์ ๋Š” ์ด์œ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ๋ณผ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ •ํ™•ํ•œ ๋‚ด์šฉ์„ ์ ๊ฒŒ๋˜์–ด ์žˆ๋‹ค.

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

[React] JS ๋ง๊ณ  "JSX" ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

React ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ–ˆ์Šต๋‹ˆ๋‹ค.

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

[React] ์‹œ๊ฐ„์„ ํ™˜์‚ฐํ•ด ์ฃผ๋Š” ์‚ฌ์ดํŠธ

๋™์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋Š” State๋ฅผ ํ™œ์šฉํ•ด ์‹œ๊ฐ„ ํ™˜์‚ฐ ์‚ฌ์ดํŠธ

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

[์•Œ๊ณ ๋ฆฌ์ฆ˜] Sliding Window, ํˆฌํฌ์ธํ„ฐ

๋ฐฑ์ค€ ์ค€ํ‘œ ์กฐ์•ฝ๋Œ ๋ฌธ์ œ๋ฅผ ํ’€๋ฉฐ, ํˆฌํฌ์ธํ„ฐ์™€ sliding window ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์ดํ•ดํ•˜๊ธฐ!

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

[React] 2. State ์„ค์ •

state ๋ฐ์ดํ„ฐ๊ฐ€ ์ €์žฅ๋  ๊ณณ์ด๋‹ค. JSX๋ž€? HTML๊ณผ ๊ฐ™์ง€๋งŒ ํŽธ๋ฆฌํ•œ ๊ธฐ๋“ฑ๋“ค ๋งˆ์ € ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๋ณ€์ˆ˜๋ฅผ JSX์— ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ• {} Container๋ฅผ ๋ฆฌ๋ Œ๋”ฉํ•ด์ฃผ์–ด์•ผ ๋ณ€์ˆ˜๊ฐ€ ์—…๋ฐ์ดํŠธ ๋œ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๊ฐ’์„ ๋ฐ”๊ฟ€๋•Œ๋งˆ๋‹ค, ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๋Š” ๊ฒƒ์„ ์žŠ์–ด์„œ๋Š” ์•ˆ๋œ๋‹ค. ๋ฐ”

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

์ปค๋ฎคํ‹ฐ์ผ€์ด์…˜ ๋Šฅ๋ ฅ

ํ”„๋ก ํŠธ ์—”๋“œ๋Š” ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ๋Šฅ๋ ฅ์ด ์ข‹์•„์•ผํ•œ๋‹คbackend์™€ ๋””์ž์ด๋„ˆ์˜ ์ทจํ–ฅ์„ ๋ชจ๋‘ ๋งŒ์กฑ์‹œ์ผœ์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๋“ค์˜ ์ทจํ–ฅ์„ ์ž˜ ์ดํ•ดํ•ด์•ผ ํ•œ๋‹ค.ํ”„๋ก ํŠธ๋Š” ๋ณด์—ฌ์ง€๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ถˆ๊ฐ€๋Šฅํ•œ ์ด์œ ์— ๋Œ€ํ•ด์„œ ์ •ํ™•ํ•˜๊ฒŒ ์ „๋‹ฌ ํ•  ์ค„ ์•Œ์•„์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

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

๋ฐฑ์—”๋“œ๋Š” ๋ถˆ์•ˆํ•˜๋ฉฐ, ํ”„๋ก ํŠธ ์—”๋“œ๋Š” ์˜ˆ๋ฏผํ•ด์•ผ ํ•œ๋‹ค.

๋ฐฑ์—”๋“œ๋Š” ๋ถˆ์•ˆํ•˜๋ฉฐ, ํ”„๋ก ํŠธ ์—”๋“œ๋Š” ์˜ˆ๋ฏผํ•ด์•ผ ํ•œ๋‹ค๊ณ  ํ–ˆ๋‹ค.์‚ฌ๋žŒ๋“ค์ด ์˜์‹ฌ์—†์ด ์‚ฌ์šฉํ•˜๊ฒŒ ํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์˜ˆ๋ฏผํ•˜๊ฒŒ ๊ฐœ๋ฐœ ํ•ด์•ผ ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

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

๊น€์น˜์ฐŒ๊ฐœ ๋ ˆ์‹œํ”ผ = ๊ฐœ๋ฐœ์ž

์–ด๋–ป๊ฒŒ ๋ณด๋ฉด ์š”๋ฆฌ์˜ ๋ ˆ์‹œํ”ผ๋ผ๋Š” ๊ฒŒ ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ ๊ต‰์žฅํžˆ ๋‹ฎ์•„์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ฑฐ๋“ ์š”. ๋‚ด๊ฐ€ ์š”๋ฆฌ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ์ธํ„ฐํ”„๋ฆฌํ„ฐ*(interpreter)๊ฐ€ ๋˜์—ˆ๋‹ค๋Š” ๋งˆ์Œ์œผ๋กœ ๊ทธ ์š”๋ฆฌ์˜ ๋ ˆ์‹œํ”ผ๋ฅผ ๋ณด๊ณค ํ•ฉ๋‹ˆ๋‹ค. [์ถœ์ฒ˜] https://doomoolmori.com/people/?idx=10556614&bmode=view

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

์•ฑ์ด ์•„๋‹Œ ์›น์ธ ์ด์œ 

์•ฑ์ด ์•„๋‹Œ ์›น์„ ์„ ํƒํ•œ ์ด์œ ์•ฑ์€ ์ž์‹ ์˜ ํ•ธ๋“œํฐ์— ๋‹ค์šด๋กœ๋“œ ์„ค์น˜๋ผ๋Š” ๋‹จ๊ณ„๋ฅผ ๊ฑฐ์ณ์•ผ ํ•œ๋‹ค.

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

[React] 1. ๋ฆฌ์•กํŠธ ์™œ ์“ธ๊นŒ?

1. ๊ฑฐ๋Œ€ ํšŒ์‚ฌ๋“ค์ด ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค. ํ•œ๊ตญ ์ƒ์œ„ 1๋งŒ ๊ฐœ์˜ ์›น ์‚ฌ์ดํŠธ ์ค‘์—์„œ 44.76%๊ฐ€ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋Š” ์‹œ๊ฐ„์ด ์ œ์ผ ์ค‘์š”ํ•˜๋‹ค. ์–ด๋–ค ๊ธฐ์ˆ ์„ 2๋‹ฌ ๋ฐฐ์›Œ์„œ 6๊ฐœ์›”์„ ์“ธ ์ˆ˜๋„ ์žˆ์œผ๋ฉฐ, 5๋…„์„ ์“ธ ์ˆ˜๋„ ์žˆ๋‹ค. ๊ฑฐ๋Œ€ ํšŒ์‚ฌ๋“ค์ด React๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์ด๋“ค์ด f

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

[๋ฐฑ์ค€] ์†Œ์ฝ”๋ฐ˜ ๋ณต๊ธฐ

1. ๋ฌธ์ œ https://westmino.tistory.com/79 2. ์•„์ด๋””์–ด

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

[๋ฐฑ์ค€] ๊ฐ์‹œ ๋ณต๊ธฐ

https://www.acmicpc.net/problem/15683

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

[JS ์Šคํ„ฐ๋”” ์ผ์ง€] 1์ผ์ฐจ

์Šคํ„ฐ๋”” ๋ฐฉํ–ฅ์— ๋Œ€ํ•œ ์—ฌ๋Ÿฌ ์˜๊ฒฌ์ด ๋‚˜์™”๋‹ค.1) ๋‹ด๋‹น ์ฑ•ํ„ฐ ์ •ํ•ด์„œ ํ•˜๋ฃจ์— ํ•œ ์‚ฌ๋žŒ์ด ๊ฐœ๋… ๋ฐœํ‘œํ•˜๊ธฐ์žฅ์ : ๋‹ด๋‹น ์ฑ•ํ„ฐ์— ๋Œ€ํ•ด์„œ๋Š” ํ™•์‹คํžˆ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.๋‹จ์ : ๋‹ด๋‹น ์ฑ•ํ„ฐ๊ฐ€ ์•„๋‹Œ ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ ๊ณต๋ถ€๋ฅผ ์•ˆํ•ด์˜ฌ ์ˆ˜ ์žˆ๋‹ค. (๊ฐ•์ œ์„ฑ์ด ๋–จ์–ด์ง)2) ๋‹น์ผ์— ๋žœ๋ค์œผ๋กœ ๋‹ด๋‹น ์ฑ•ํ„ฐ๋ฅผ ์ •ํ•ด์„œ

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

[ํฌ๋กฌ ์•ฑ] ํˆฌ๋‘ ๋ฆฌ์ŠคํŠธ

html์— ์—†๋˜ ์š”์†Œ๋ฅผ ๋„ฃ๋Š” ๋ฒ• ์ด๋ฒคํŠธ ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ์ด๋ฒคํŠธ ํ”„๋กœํผํ‹ฐ๊ฐ€ ํ•„์š”ํ•œ ์ด์œ ์— ๋Œ€ํ•ด์„œ ์•Œ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๋…ธ๋“œ์™€ element์˜ ์ฐจ์ด ํ•˜๋‚˜์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ์•„๋‹Œ ์—ฌ๋Ÿฌ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฒ• ์ผ๋‹จ, array์— ์ €์žฅํ•œ ๋ฐฐ์—ด์„ ๋กœ์ปฌ storage์— ์ €์žฅํ•œ๋‹ค.

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

[ํฌ๋กฌ ์•ฑ] Clock

setInterval ํ•จ์ˆ˜setInterval์˜ ์ฒซ๋ฒˆ์งธ ์ธ์ˆ˜๋Š” ๋‚ด๊ฐ€ ์‹คํ–‰ํ•˜๊ณ ์ž ํ•˜๋Š” ํ•จ์ˆ˜๋‘๋ฒˆ์งธ ์ธ์ˆ˜๋Š” ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜๋Š” ์‹œ๊ฐ„ ๊ฐ„๊ฒฉ์„ ์˜๋ฏธํ•œ๋‹ค.padStartํ•จ์ˆ˜String.padStart(๋งž์ถ”๋Š” ์ž๋ฆฟ์ˆ˜, ๋Œ€์ฒด ๋ฌธ์ž)

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