React Component

๋ฐ์ดํ„ฐ

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI)๋ฅผ ๊ฐœ๋ฐœํ•˜์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์—ญํ• ์„ ๋‹ด๋‹นํ•œ๋‹ค.

React๋Š” ๋ฐ์ดํ„ฐ๋ฅผ UI๋กœ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์„ ์–ธ์ ์ธ ๋ฐฉ์‹(HTML๊ณผ ์œ ์‚ฌํ•œ ๋ชจ์–‘์˜ DSL์„ ์‚ฌ์šฉ)์œผ๋กœ ๊ฐœ๋ฐœํ•œ๋‹ค.

๋ฐฑ์—”๋“œ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ JSON ํ˜•ํƒœ๋กœ ๋Œ๋ ค์ฃผ๋Š” API๋ฅผ ์ œ๊ณตํ•œ๋‹ค. (REST API, GraphQL)

REST API

HTTP๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์„œ๋กœ ์ •ํ•ด๋‘” ์ŠคํŽ™(end point, HTTP Method)์„ ํ™œ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›์œผ๋ฉฐ ํ†ต์‹ ํ•˜๋Š” ๊ฒƒ

  • GET, POST, PUT/PATCH, DELETE -> CRUD

  • Resource ์ค‘์‹ฌ

REST API์˜ ์ œ์•ฝ์กฐ๊ฑด REST API๋Š” 4๊ฐ€์ง€ ์ œ์•ฝ์กฐ๊ฑด์œผ๋กœ ์ž์›์˜ ์‹๋ณ„, ๋ฉ”์„ธ์ง€๋ฅผ ํ†ตํ•œ ๋ฆฌ์†Œ์Šค ์กฐ์ž‘, ์ž๊ธฐ์„œ์ˆ ์  ๋ฉ”์‹œ์ง€, ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ์— ๋Œ€ํ•œ ์—”์ง„์œผ๋กœ์„œ ํ•˜์ดํผ๋ฏธ๋””์–ด๋ฅผ ๋งŒ์กฑํ•ด์•ผ ํ•˜๋Š”๋ฐ ์ด๋ฏธ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ์ด ์ œ์•ฝ์กฐ๊ฑด์„ ์ง€ํ‚ค์ง€ ์•Š์•„๋„ REST API๋ผ๊ณ  ๋ถ€๋ฅด๊ธฐ ๋–„๋ฌธ์— HTTP API์™€ ๊ฐ™์€ ์˜๋ฏธ๋กœ ์‚ฌ์šฉ๋จ

GraphQL

Facebook์—์„œ ๊ฐœ๋ฐœํ•œ Graph ์ž๋ฃŒ๊ตฌ์กฐ์˜ Query ์–ธ์–ด ์ฟผ๋ฆฌ(Query)๋ฅผ ํ†ตํ•ด ์–ป๊ณ ์ž ํ•˜๋Š” ๊ฒƒ์„ ์„ ์–ธํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์–ป๋Š”๋‹ค.

  • ์ฟผ๋ฆฌ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœํ•˜์—ฌ SQL๊ณผ ๋น„์Šทํ•˜๋‹ค.

  • Query(Read), Mutation(Commend: Create, Update, Delete), Subscription(Event)

REST API์˜ ๋Œ€์•ˆ์œผ๋กœ ๋‚˜์˜ค๊ฒŒ๋œ ๋“ฑ์žฅ ๋ฐฐ๊ฒฝ

REST API๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, ํด๋ผ์ด์–ธํŠธ๋Š” ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ ๊ฐœ์˜ API ์—”๋“œํฌ์ธํŠธ๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค. ์ด๋•Œ, ๋ถˆํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋„ ํ•จ๊ป˜ ์ „์†ก๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋Œ€์—ญํญ ๋‚ญ๋น„์™€ ์„œ๋ฒ„ ๋ถ€ํ•˜ ์ฆ๊ฐ€์˜ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.

GraphQL์€ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ์ ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด, ํด๋ผ์ด์–ธํŠธ๊ฐ€ ํ•„์š”๋กœ ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋งŒ์„ ์„ ํƒ์ ์œผ๋กœ ์š”์ฒญํ•˜๊ณ  ์‘๋‹ต์œผ๋กœ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•œ๋‹ค.

JSON(Javascript Object Notation)

ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ„ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตํ™˜ํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ํฌ๋งท By Douglas Crockford

ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ„์˜ ๋ฐ์ดํ„ฐ๋ฅผ (HTTP)๊ตํ™˜ํ•  ๋•Œ ํฌ๋งท์€ JSON ํ˜•์‹์ด์ง€๋งŒ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜๋˜์–ด ์ฃผ๊ณ  ๋ฐ›๋Š”๋‹ค.

์ด๋Ÿฐ JSON ํ˜•์‹์˜ ๋ฌธ์ž์—ด์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด JSON ๋‚ด์žฅ ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๊ฐ€ ์ œ๊ณต๋œ๋‹ค.

  • JSON.stringify() โ†’ JSON ๊ฐ์ฒด๋ฅผ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜

  • JSON.parse() โ†’ JSON ํ˜•์‹์˜ ๋ฌธ์ž์—ด์„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜

DSL(Domain-Specific Language)

ํŠน์ •ํ•œ ๋„๋ฉ”์ธ์— ๋งž๊ฒŒ ์„ค๊ณ„๋œ ์–ธ์–ด

ํŠน์ • ๋ถ„์•ผ(๋„๋ฉ”์ธ)์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ์šฉ์–ด์™€ ๊ทœ์น™์„ ๊ฐ–๋Š” ์–ธ์–ด

ํ•ด๋‹น ๋ถ„์•ผ์—์„œ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋”์šฑ ์‰ฝ๊ฒŒ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค€๋‹ค.

  • SQL โ†’ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ๊ด€๋ จ๋œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” DSL ์–ธ์–ด (๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค)

  • HTML โ†’ ์›น ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” DSL ์–ธ์–ด (์›น ํŽ˜์ด์ง€)

  • JSX โ†’ UI๋ฅผ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•ด Javascript + XML ๋ฌธ๋ฒ•์„ ๊ฒฐํ•ฉํ•œ DSL ์–ธ์–ด (UI)

์„ ์–ธํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ vs ๋ช…๋ นํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ

์„ ์–ธํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ

์„ ์–ธํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ '๋ฌด์—‡์„' ํ•ด์•ผ ํ•˜๋Š”์ง€์— ์ดˆ์ ์ด ๋งž์ถฐ์ง ๊ฐœ๋ฐœ์ž๋Š” ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ์„ ์–ธํ•˜๊ณ  ์ปดํ“จํ„ฐ๊ฐ€ ๊ทธ ์›ํ•˜๋Š” ์ž‘์—…์„ ๋‹ฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์Šค์Šค๋กœ ์ฒ˜๋ฆฌํ•˜๋„๋ก ํ•œ๋‹ค.

๋ช…๋ นํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ

๋ช…๋ นํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ '์–ด๋–ป๊ฒŒ' ํ•ด์•ผ ํ•˜๋Š”์ง€์— ์ดˆ์ ์ด ๋งž์ถฐ์ง ๊ฐœ๋ฐœ์ž๋Š” ์ปดํ“จํ„ฐ๊ฐ€ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•  ๋ช…๋ น๋ฌธ์„ ์ˆœ์ฐจ์ ์œผ๋กœ ์ž‘์„ฑํ•˜๊ณ  ์ด๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ์–ป๋Š”๋‹ค.

ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ

ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ๋Š” ๋ช…๋ น์ ์œผ๋กœ ๋ฐ˜๋ณต๋˜๋Š” ์ž‘์—…์„ ์ถ”์ƒํ™”ํ•จ์œผ๋กœ์จ ๋™์ผํ•œ ์ž‘์—…์„ ์„ ์–ธ์ ์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค.

์ปดํฌ๋„ŒํŠธ ๊ณ„์ธต ๊ตฌ์กฐ

๋‹จ์ˆœํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์กฐํ•ฉํ•˜์—ฌ ๋ณต์žกํ•œ UI๋ฅผ ๊ตฌํ˜„ํ•œ๋‹ค. โ†’ React ๊ฐ•๋ ฅํ•œ ํŠน์ง•โœจ ์กฐํ•ฉ์€ ๊ฐ€์ง€์ˆ˜๋ฅผ ํญ๋ฐœ์ ์œผ๋กœ ๋Š˜๋ฆด ์ˆ˜ ์žˆ๋Š” ๊ฐ€์žฅ ์ „ํ˜•์ ์ธ ๋ฐฉ๋ฒ•

์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹จ์ˆœํ•˜๊ฒŒ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ๋ช‡๊ฐ€์ง€ ๊ธฐ์ค€

1. SRP(Single Responsibility Principle)

๋‹จ์ผ ์ฑ…์ž„ ์›์น™ โ†’ ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ์€ ์˜ค์ง ํ•˜๋‚˜์˜ ์ฑ…์ž„๋งŒ ๊ฐ€์ ธ์•ผ ํ•œ๋‹ค.

๋ชจ๋“ˆ, class, ํ•จ์ˆ˜ ์™€ ๊ฐ™์€ ์†Œํ”„ํŠธ์›จ์–ด์˜ ๊ตฌ์„ฑ์š”์†Œ๋Š” ํ•˜๋‚˜์˜ ์ฑ…์ž„๋งŒ์„ ๊ฐ€์ ธ์•ผ ํ•˜๋ฉฐ, ๋ณ€๊ฒฝ์ด ๋ฐœ์ƒํ•  ๋•Œ๋Š” ๊ทธ ์ด์œ ๊ฐ€ ๋‹จ ํ•˜๋‚˜์—ฌ์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.

์ด ์›์น™์„ ์ค€์ˆ˜ํ•˜๋ฉด ์ฝ”๋“œ์˜ ์‘์ง‘๋„๊ฐ€ ๋†’์•„์ ธ ์ฝ”๋“œ์˜ ํ™•์žฅ์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์ด ๋†’์•„์ง„๋‹ค.

์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ปค์ง€๊ณ  ์žˆ๋‹ค๋ฉด SRP๋ฅผ ์ค€์ˆ˜ํ•˜๊ณ  ์žˆ๋Š”์ง€ ์ ๊ฒ€ํ•ด๋ณด์ž~

SOLID ์›์น™

Single Responsibility(๋‹จ์ผ ์ฑ…์ž„)

Open/Close(๊ฐœ๋ฐฉ-ํ์‡„)

Liskovโ€™s Substitution(๋ฆฌ์Šค์ฝ”ํ”„ ์น˜ํ™˜)

Interface Segregation(์ธํ„ฐํŽ˜์ด์Šค ๋ถ„๋ฆฌ)

Dependency Inversion(์˜์กด ๊ด€๊ณ„ ์—ญ์ „)

2. CSS

๊ธฐ๋Šฅ๋ณ„๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ์ž‘์„ฑํ•˜๋Š” CSS ํด๋ž˜์Šค ๋ช…์ด๋‚˜ Styled Component ๋„ค์ด๋ฐ์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ณ„์ธต์ ์œผ๋กœ ๋‚˜๋ˆ„๋Š” ๊ทœ์น™์œผ๋กœ ํ™œ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค.

์ด๋Ÿฌํ•œ ๊ธฐ์ค€๋“ค์„ ์ ๊ทน์ ์œผ๋กœ ํ™œ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ธ๋ถ€์ ์œผ๋กœ ๋‚˜๋ˆ„๊ณ , ๊ฐ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ช…ํ™•ํ•˜๊ฒŒ ์—ญํ• ๊ณผ ์ฑ…์ž„์„ ๊ฐ€์ง€๋„๋ก ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

3. Design Layer

๊ตฌ์กฐ์ ์œผ๋กœ ์ž˜ ์งœ์—ฌ์ง„ ๋””์ž์ธ์€ ํŠธ๋ฆฌ ํ˜•ํƒœ์ธ ๋ ˆ์ด์–ด ๊ตฌ์กฐ๋กœ ์งœ์—ฌ์ ธ ์žˆ๋‹ค.

๋””์ž์ธ ๊ตฌ์กฐ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ธ๋ถ€์ ์œผ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค.

4. Information Arhitecture

JSON Schema์˜ ์˜ํ–ฅ

์„œ๋ฒ„์—์„œ ์ฃผ๋Š” ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ค๊ณ„ํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

๋ณดํ†ต์€ UI ์ž‘์—…์ด ๋จผ์ € ์ง„ํ–‰ํ•˜๊ณ  ์„œ๋ฒ„ API๊ฐ€ ํ›„์— ๋‚˜์˜ค๊ธฐ ๋•Œ๋ฌธ์— UI ๋””์ž์ธ์— ๋” ์ ํ•ฉํ•œ ํ˜•ํƒœ๋กœ ์„œ๋ฒ„ ์ธก ๋ฐ์ดํ„ฐ๋ฅผ ์žฌ๊ฐ€๊ณตํ•˜๊ฑฐ๋‚˜, ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ๋ฅผ ๋ณ€๊ฒฝํ•ด๋‹ฌ๋ผ๋Š” ์š”์ฒญ์„ ์„œ๋ฒ„ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ํ•  ๋•Œ๋„ ์žˆ๋‹ค.

์ž์—ฐ์Šค๋Ÿฌ์šด SRP๋ฅผ ์œ„ํ•ด์„œ ์‚ฌ์‹ค์ƒ ๊ฐ•์ œ๋˜๋Š” ๋ถ€๋ถ„์ด๊ธฐ๋„ ํ•˜๋‹ค.

Atomic Design

์šฐ๋ฆฌ๊ฐ€ ์ž˜ ์•Œ๊ณ  ์žˆ๋Š” ๊ณ„์ธต์  ๊ตฌ์กฐ๋ฅผ ๋ช‡๊ฐ€์ง€ ์นดํ…Œ๊ณ ๋ฆฌ๋กœ ๋ฌถ์€ ๋ฐฉ๋ฒ• [์ž์„ธํžˆ๋ณด๊ธฐ]

์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งŽ์•„์กŒ์„๋•Œ ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ์ ์ ˆํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ์•„ํ‚คํ…์ฒ˜๋ฅผ ์ œ๊ณต

์•„ํ† ๋ฏน ๋””์ž์ธ์—์„œ ์ œ์‹œํ•˜๋Š” ๊ฐ€์ด๋“œ๋ผ์ธ์— ๋”ฑ ๋งž์ถฐ ๋””์ž์ธ์„ ํ•˜๋ผ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ์•„ํ† ๋ฏน ๋””์ž์ธ์˜ ๊ฐœ๋…์„ ์ดํ•ดํ•˜๊ณ  ๊ทธ์— ๊ธฐ๋ฐ˜ํ•˜์—ฌ ์ž์‹ ์˜ ์ž‘์—…์— ์ ์šฉํ•˜๋ผ๋Š” ์˜๋ฏธ์ด๋‹ค.

๊ณ ๋ฏผํ•˜๋ฉด ์ข‹์€ ๊ฒƒ๋“ค

  • ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋Š” ๋น„์ฆˆ๋‹ˆ์Šค์— ๊ฐ€๊นŒ์šด์ง€, ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ์— ๊ฐ€๊นŒ์šด์ง€

    • ๊ณตํ†ต ์ฝ”๋“œ์— ๊ฐ€๊น๋‹ค๋ฉด ๊ณตํ†ต ๋ ˆ์ด์•„์›ƒ์„ ์ •์˜ํ•˜๊ณ , ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์—๋Š” ๋งˆํฌ์—… ๋กœ์ง๋งŒ์„ ๊ฐ–๊ฒŒํ•˜์ž.

  • ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ์ œ๊ณตํ•œ๋‹ค๋ฉด ๋กœ์ง์€ ์ปค์Šคํ…€ ํ›…์œผ๋กœ ๋ถ„๋ฆฌ

    • ๋‹จ์ˆœํ•œ useState๋ผ๋„ ์ปค์Šคํ…€ ํ›…์œผ๋กœ ๋ณ„๋„๋กœ ๊ด€๋ฆฌํ•˜๋Š”๊ฒŒ ์ข‹๋‹ค.

    • ๋น„์ฆˆ๋‹ˆ์Šค ๋ ˆ์ด์•„์›ƒ์€ ์–ธ์ œ๋“ ์ง€ ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ƒํƒœ, ๋กœ์ง์€ ํ›…์œผ๋กœ ๋ถ„๋ฆฌ

  • ์ปดํฌ๋„ŒํŠธ์˜ ๊ณ„์ธต์„ ๋งŒ๋“ค์ž.

    • ๊ณตํ†ต/๋น„์ฆˆ๋‹ˆ์Šค ๋“ฑ์˜ ์‚ฌ์šฉ๋˜๋Š” ๊ด€์ ์˜ ๊ณ„์ธต, ์ฝ”๋“œ ๋ ˆ๋ฒจ์—์„œ ๋ถ„๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ๊ณ„์ธต์˜ ํ•„์š”

Compound Pattern

  • ์•„ํ† ๋ฏนํ•œ ์ƒํƒœ, ๋ ˆ์ด์•„์›ƒ์„ ์ƒํ˜ธ ์ฐธ์กฐํ•˜๋Š” atomicํ•œ ํ”„๋ก ํŠธ ํ™˜๊ฒฝ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ํŒจํ„ด

  • ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋ชจ์•„ ํ•˜๋‚˜์˜ ๋™์ž‘์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•จ

  • ๋™์ž‘ ๊ตฌํ˜„์— ํ•„์š”ํ•œ ์ƒํƒœ๋“ฑ์„ ๋‚ด๋ถ€ context ๋“ฑ์œผ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ์— ๋‚ด๋ถ€ ๋™์ž‘์ด ๋“ค์–ด๋‚˜์ง€ ์•Š์Œ

  • ๋‚ด๋ถ€ ๋™์ž‘์ด ๋“ค์–ด๋‚˜์ง€ ์•Š๊ธฐ์— ์ฃผ์„ ๋“ฑ์— ์˜์กดํ•˜์—ฌ, ์‚ฌ์šฉ ํ˜•ํƒœ๊ฐ€ ํ•˜๋‚˜๋กœ ๊ณ ์ •๋˜๋Š” ๋‹จ์  ์กด์žฌ

  • ๋””์ž์ธ ์‹œ์Šคํ…œ, ํ˜น์€ ์—ฌ๋Ÿฌ ์ฐธ์กฐํ•˜๋Š” ๋ ˆ์ด์•„์›ƒ ์‚ฌ๋ก€์— ์ ํ•ฉํ•จ

    • ex: ๋ฒ„ํŠผ์— left, right์— ์ถ”๊ฐ€์ ์œผ๋กœ ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ๋Š” ๋ ˆ์ด์•„์›ƒ์ด ๋“ค์–ด๊ฐ€๋Š” ํŒจํ„ด์ด ์žˆ๋‹ค๋ฉด leftSide, rightSIde๋ฅผ ์ปดํฌ๋„ŒํŠธํ™” ํ•˜์—ฌ ์—ฐ๊ฒฐํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๋“ฑ ์ค‘๋ณต ๋กœ์ง์— ๋Œ€ํ•ด ์ผ€์–ดํ•  ์ˆ˜ ์žˆ๋”ฐ.ใ„ด

Last updated