profile
๐Ÿ‘ฉโ€๐Ÿ’ป๊ฐœ๋ฐœ์ž_์„ฑ์žฅ์ผ๊ธฐ
post-thumbnail

[Toy Project] WCF SHOP

๋Œ€์žฅ์ •์˜ 1์ฐจ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋์ด๋‚ฌ๋”ฐโœŒ๏ธ ๋‹ค์‚ฌ๋‹ค๋‚œํ•˜๊ณ  ์šฐ๋‹นํƒ•ํƒ•์ด์—ˆ์ง€๋งŒ ์ข‹์€ ํŒ€์›๋“ค๊ณผ ํ•จ๊ป˜ ๊ธฐํš๋ถ€ํ„ฐ ํšŒ๊ณ ๊นŒ์ง€ ๋ฌด์‚ฌํžˆ ๋๋งˆ์น  ์ˆ˜ ์žˆ์—ˆ๋‹ค :) 1. Scrum Process ์• ์ž์ผ๋ฐฉ๋ฒ•๋ก ์— ๋”ฐ๋ผ Weekly Sprint๋กœ ์ด 2๋ฒˆ์˜ Sprint๋ฅผ ์ง„ํ–‰ํ•˜์˜€๋‹ค. Notion,

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

[CS] ์šด์˜์„œ๋ฒ„ - ์˜จํ”„๋ ˆ๋ฏธ์Šค vs ํด๋ผ์šฐ๋“œ

1. ์šด์˜ ์„œ๋ฒ„๋ž€? ๊ฐœ๋ฐœ์ด๋‚˜ ํ…Œ์ŠคํŠธ ๋ชฉ์ ์ด ์•„๋‹Œ ์‹ค์ œ ์‚ฌ์šฉ์ž๋“ค์„ ๋Œ€์ƒ์œผ๋กœ ์„œ๋น„์Šคํ•˜๋Š” ์„œ๋ฒ„ 1-1. ๋‹จ์ผ ์„œ๋ฒ„ ๊ฐ€์žฅ ๋‹จ์ˆœํ•˜๋ฉด์„œ ๊ธฐ๋ณธ์ ์ด๊ณ , ๊ตฌ์ถ•ํ•˜๊ธฐ ๊ฐ„๋‹จํ•œ ์„œ๋ฒ„๊ตฌ์กฐ ์ „์ฒด ์„œ๋น„์Šค์˜ ์žฅ์•  ๋ฐœ์ƒ ๊ฐ€๋Šฅ์„ฑ ๋†’์Œ ์„œ๋ฒ„ ์ž์›์„ ํšจ์œจ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์–ด๋ ค์›€ ๋ณด์•ˆ์„ฑ์ด ๋–จ์–ด์ง scale-o

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

[React] ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง

์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ํ–ฅ์ƒ์‹œ์ผœ ์ฝ”๋“œ ํ€„๋ฆฌํ‹ฐ๋ฅผ ์˜ฌ๋ฆฌ๊ธฐ ์œ„ํ•ด ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ๋ฅผ ์ ์šฉview์™€ ๋กœ์ง์„ ๋ถ„๋ฆฌstate์— ๋”ฐ๋ผ์„œ ๋ถ„๋ฆฌ

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

[CS] Session vs Cookie vs Token

๋™์ผํ•œ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•ด ์›น ์„œ๋ฒ„์— ์ ‘์†ํ•œ ์‹œ์ ์œผ๋กœ๋ถ€ํ„ฐ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ข…๋ฃŒํ•˜์—ฌ ์—ฐ๊ฒฐ์„ ๋๋‚ด๋Š” ์‹œ์  ๋™์•ˆ์— ๋“ค์–ด์˜ค๋Š” ์ผ๋ จ์˜ Request๋ฅผ ํ•˜๋‚˜๋กœ ๋ณด๊ณ , ๊ทธ ์ƒํƒœ๋ฅผ ์ผ์ •ํ•˜๊ฒŒ ์œ ์ง€ํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ์™€ ์›ธ ์„œ๋ฒ„๊ฐ€ ๋…ผ๋ฆฌ์ ์œผ๋กœ ์—ฐ๊ฒฐ๋œ ์ƒํƒœ์„œ๋ฒ„๋Š” session์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ

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

[ํšŒ๊ณ ] ์ผ์ผํšŒ๊ณ  - 221110

FACT RESTful API ์„ค๊ณ„๋ฐฉ๋ฒ•(uniform interface) ์ธ์Šคํƒ€๊ทธ๋žจ ๋ฆฌ์•กํŠธ ํด๋ก ์ฝ”๋”ฉ fetchํ•จ์ˆ˜๋ฅผ ํ†ตํ•œ ์„œ๋ฒ„์™€์˜ ํ†ต์‹  FEELING fetch๋ฅผ ํ†ตํ•ด ๋ฐฑ์—”๋“œ์™€์˜ ํ†ต์‹ ์„ ์ฒ˜์Œ ์‹œ๋„ํ–ˆ๋‹ค. jsonํ˜•ํƒœ๋กœ ์ฃผ๊ณ ๋ฐ›์•˜๊ณ  ์ฒ˜์Œ์œผ๋กœ RESTful API๋ฅผ ์ ‘ํ•ด๋ณด

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

[ํšŒ๊ณ ] ์ผ์ผํšŒ๊ณ  - 221109

์ธ์Šคํƒ€๊ทธ๋žจ ๋ฆฌ์•กํŠธ ํด๋ก ์ฝ”๋”ฉ \- ํ”ผ๋“œ ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ \- ํ”ผ๋“œ ๋ณ„ ๋Œ“๊ธ€ ๋“ฑ๋ก/์‚ญ์ œ ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ”ผ๋“œ ๋ณ„๋กœ ๋Œ“๊ธ€์ด ๋‹ค๋ฅด๊ฒŒ ๋‹ฌ๋ ค์•ผํ•˜๋Š”๋ฐ ํ•œ๊ฐœ์˜ ํ”ผ๋“œ์— ๋Œ“๊ธ€์„ ๋“ฑ๋กํ•˜๋ฉด ํ•ด๋‹น ํ”ผ๋“œ์—๋งŒ ๋“ฑ๋ก๋˜์–ด์•ผํ•˜๋Š”๋ฐ ๋ชจ๋“  ํ”ผ๋“œ์— ๋“ฑ๋ก์ด ๋˜์–ด์„œ ๋‹นํ™ฉํ–ˆ๋‹ค. ์›์ธ์€ ํ”ผ๋“œ๋ฅผ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ถ„๋ฆฌ์‹œ์ผฐ๋”

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

[ํšŒ๊ณ ] ์ผ์ผํšŒ๊ณ  - 221108

์ธ์Šคํƒ€๊ทธ๋žจ ๋ฆฌ์•กํŠธ ํด๋ก ์ฝ”๋”ฉ \- ์ƒ์ˆ˜ ๋ฐ์ดํ„ฐ๋กœ footer section ์ˆ˜์ • \- mock data๋กœ ํ”ผ๋“œ ๊ตฌํ˜„footer๋ถ€๋ถ„์„ ์ƒ์ˆ˜ ๋ฐ์ดํ„ฐ๋กœ footer์˜ ๋ฆฌ์ŠคํŠธ๋“ค์„ ์ •๋ฆฌํ•ด์„œ map์œผ๋กœ ๊ตฌํ˜„ํ•˜๋Š” ์ชฝ์œผ๋กœ ์ˆ˜์ •ํ–ˆ๋‹ค. ํ™•์‹คํžˆ map์œผ๋กœ ๋Œ๋ฆฌ๋‹ˆ๊นŒ ์ˆ˜์›”ํ•˜๊ธด ํ–ˆ๋Š”๋ฐ ๊ทธ๋Ÿผ

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

[React] useEffect

React์—์„œ side effect๋ฅผ ํŽธ๋ฆฌํ•˜๊ณ  ์•ˆ์ „ํ•˜๊ฒŒ ๋ฐœ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” hookuseEffect(์ฝœ๋ฐฑ ํ•จ์ˆ˜, ์˜์กด์„ฑ ๋ฐฐ์—ด)์ฝœ๋ฐฑํ•จ์ˆ˜ : ํŠน์ •ํ•œ side effect๋ฅผ ์ˆ˜ํ–‰์˜์กด์„ฑ ๋ฐฐ์—ด : ๋ Œ๋”๋ง ์‹œ useEffect๋ฅผ ์‹คํ–‰ํ•  ์กฐ๊ฑด์˜์กด์„ฑ ๋ฐฐ์—ด์ด ์ „๋‹ฌ๋˜์ง€ ์•Š์•˜์œผ๋ฏ€๋กœ

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

[ํšŒ๊ณ ] ์ผ์ผํšŒ๊ณ  - 221104

์ธ์Šคํƒ€๊ทธ๋žจ ๋ฆฌ์•กํŠธ ํด๋ก ์ฝ”๋”ฉ \- ๋Œ“๊ธ€ ์ปดํฌ๋„ŒํŠธํ™”์ฝ”๋“œ ์นดํƒ€ \- strs์€ ๋‹จ์–ด๊ฐ€ ๋‹ด๊ธด ๋ฐฐ์—ด์ž…๋‹ˆ๋‹ค. ๊ณตํ†ต๋œ ์‹œ์ž‘ ๋‹จ์–ด(prefix)๋ฅผ ๋ฐ˜ํ™˜ํ•ด์ฃผ์„ธ์š”. ์˜ˆ๋ฅผ ๋“ค์–ด strs = \['start', 'stair', 'step']return์€ 'st'์ธ์Šคํƒ€๊ทธ๋žจ ํด๋ก ์ฝ”๋”ฉ ๋Œ“๊ธ€์ฐฝ

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

[React] state

์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ๊ฐ’ -> ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ UI์— ๋ณด์—ฌ์ค„ ์ •๋ณด๋ฅผ ๊ฒฐ์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ƒํƒœ๊ฐ’useState()๋ฅผ ์‚ฌ์šฉํ•ด์„œ state๋ฅผ ๊ด€๋ฆฌํ•œ๋‹ค.์ฒซ๋ฒˆ์งธ ์š”์†Œ : ๋™์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ณ ์ž ํ•˜๋Š” ์ƒํƒœ๊ฐ’๋‘๋ฒˆ์งธ ์š”์†Œ : ์ƒํƒœ๊ฐ’์„ ์—…๋ฐ์ดํŠธํ•˜๋Š” ํ•จ์ˆ˜useState()

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

[React] props

1. props๋ž€? ์ปดํฌ๋„ŒํŠธ์˜ ์†์„ฑ๊ฐ’ -> ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋กœ๋ถ€ํ„ฐ ์ „๋‹ฌ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ง€๋‹ˆ๊ณ  ์žˆ๋Š” ๊ฐ์ฒด ์ „๋‹ฌํ•˜๊ณ ์ž ํ•˜๋Š” ์–ด๋–ค ๊ฐ’์ด๋“  ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌ ๊ฐ€๋Šฅ

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

[ํšŒ๊ณ ] ์ผ์ผํšŒ๊ณ  - 221103

์ธ์Šคํƒ€๊ทธ๋žจ ๋ฆฌ์•กํŠธ ํด๋ก ์ฝ”๋”ฉ \- ๋Œ“๊ธ€ ์ถ”๊ฐ€๊ธฐ๋Šฅ ๊ตฌํ˜„์ฝ”๋“œ ์นดํƒ€ \- ์ˆซ์ž์ธ num์„ ์ธ์ž๋กœ ๋„˜๊ฒจ์ฃผ๋ฉด, ๋’ค์ง‘์€ ๋ชจ์–‘์ด num๊ณผ ๋˜‘๊ฐ™์€์ง€ ์—ฌ๋ถ€๋ฅผ ๋ฐ˜ํ™˜๋Œ“๊ธ€์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ map์„ ํ™œ์šฉํ•˜๋ผ๋Š”๊ฒŒ ์‚ฌ์‹ค ํฌ๊ฒŒ ์™€๋‹ฟ์ง€ ๋ชปํ–ˆ๋‹ค. ์™œ ๋ฐฐ์—ด์„ ์จ์•ผํ•˜๋Š”๊ฑด๊ฐ€.... ๊ทธ๋Ÿฐ๋ฐ ๊ธฐ์กด ๋Œ“๊ธ€์„

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

[ํšŒ๊ณ ] ์ผ์ผํšŒ๊ณ  - 221102

์ธ์Šคํƒ€๊ทธ๋žจ ๋ฆฌ์•กํŠธ ํด๋ก ์ฝ”๋”ฉ \- ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์œ ํšจ์„ฑ๊ฒ€์‚ฌ ํ›„ ๋ฉ”์ธํŽ˜์ด์ง€ ์ด๋™๋ฆฌ์•กํŠธ ํด๋ก ์ฝ”๋”ฉ ํŒ€ํ”„๋กœ์ ํŠธ \- ํŒ€ ๋ ˆํฌ์ง€ํ† ๋ฆฌ ์ƒ์„ฑ ํ›„ ๊ฐ ํŒ€์›๋ณ„ ๋ธŒ๋žœ์น˜ ์ƒ์„ฑ ํ›„ ๋ ˆ์ด์•„์›ƒ ์ƒ์„ฑ์ฝ”๋“œ ์นดํƒ€ \- String ํ˜•์ธ str ์ธ์ž์—์„œ ์ค‘๋ณต๋˜์ง€ ์•Š์€ ์•ŒํŒŒ๋ฒณ์œผ๋กœ ์ด๋ฃจ์–ด์ง„ ์ œ

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

[ํšŒ๊ณ ] ์ผ์ผํšŒ๊ณ  - 221101

FACT ์ธ์Šคํƒ€๊ทธ๋žจ ๋ฆฌ์•กํŠธ ํด๋ก ์ฝ”๋”ฉ FEELING FINDING FUTURE ACTION

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

[React] hook

1. hook(ํ›…)์ด๋ž€? 2. hook - useNavigate

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

[ํšŒ๊ณ ] ์ผ์ผํšŒ๊ณ  - 221031

React ํ•™์Šต \- ์ปดํฌ๋„ŒํŠธ, JSX, CRA, Route, css์ „์ฒ˜๋ฆฌ๊ธฐ์ธ์Šคํƒ€๊ทธ๋žจ ํด๋ก ์ฝ”๋”ฉ \- ๋ฐ”๋‹๋ผ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฆฌ์•กํŠธ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜๋ฆฌ์•กํŠธ๋ฅผ ํ•™์Šตํ•˜๊ณ  ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์— ๋Œ€ํ•œ ๊ฐœ๋…์ด ํ™•๊ณ ํ•ด์กŒ๋‹ค. <div id ="root"> ์— ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋“ค

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

[React] Link ์ปดํฌ๋„ŒํŠธ

1. Link ์ปดํฌ๋„ŒํŠธ๋ž€? ๋ผ์šฐํŒ… ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ > - to : ์ด๋™ํ•  ์ปดํฌ๋„ŒํŠธ ๊ฒฝ๋กœ ๐Ÿ’ก `์™€ ` ํƒœ๊ทธ์˜ ์ฐจ์ด๋Š”? > - `` : ์‹ค์ œ ์„œ๋ฒ„์— ์š”์ฒญ์„ ๋ณด๋‚ด์ง€์•Š๊ณ  url๋งŒ ๋ณ€๊ฒฝ `` : ํŽ˜์ด์ง€ ์ด๋™ ์‹œ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋งค๋ณธ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ์š”์ฒญํ•ด์„œ ๋ฐ›

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

[React] Route ์ปดํฌ๋„ŒํŠธ

๋‹ค๋ฅธ ๊ฒฝ๋กœ(url ์ฃผ์†Œ)์— ๋”ฐ๋ผ ๋‹ค๋ฅธ View(ํ™”๋ฉด)๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.๋ฆฌ์•กํŠธ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์•„๋‹Œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋ฏ€๋กœ ๋ผ์šฐํŒ…์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” npm react-router-dom ๋ช…๋ น์–ด๋กœ ํ•„์š”ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‹ค์šด๋ฐ›์•„์•ผ ํ•œ๋‹ค./src/index.js์—์„œ ๋ Œ๋”๋ง์„ ํ• ๋•Œ

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

[React] React ์ •์˜์™€ ํŠน์ง•

ํŽ˜์ด์Šค๋ถ์—์„œ ๊ฐœ๋ฐœํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI)๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ์„ ์–ธDOM์กฐ์ž‘์€ React์—๊ฒŒ ์ „์ ์œผ๋กœ ์œ„์ž„๋ฆฌ์•กํŠธ๊ฐ€ Ui๋ฅผ ์ž๋™์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•๊ฐ€์ƒ ๋”์„ ํ†ตํ•ด dom ์กฐ์ž‘์„ ๊ณ„์‚ฐํ•œ ๋’ค, ํ•œ๋ฒˆ์— dom์„ ์กฐ์ž‘๋ธŒ๋ผ์šฐ์ €๊ฐ€

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

[React] CRA๋กœ ๊ฐœ๋ฐœํ™˜๊ฒฝ ๊ตฌ์„ฑํ•˜๊ธฐ

์ฒ˜์Œ ๋ฆฌ์•กํŠธ ํ™˜๊ฒฝ์„ ์„ค์ •ํ•  ๋•Œ๋‚˜ SPAํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•  ๋•Œ ๊ถŒ์žฅํ•˜๋Š” ๋„๊ตฌํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ณ ์ž ํ•˜๋Š” ํด๋”์— ์žˆ๋Š”์ง€ ํ™•์ธํ•œ ํ›„ npx create-react-app ํ”„๋กœ์ ํŠธ๋ช… ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ๋ฆฌ์—‘ํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ์„ค์น˜ํ•œ๋‹ค.์ƒ์„ฑ๋œ ํ”„๋กœ์ ํŠธ๋ช… ํด๋”๋กœ ์ด๋™ํ•ด npm start ๋ช…๋ น์–ด๋ฅผ

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