First-Project | Team Villy - ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๐Ÿ’Š

Soojeong Leeยท2021๋…„ 7์›” 9์ผ
0
post-thumbnail

Villy ๐Ÿ’Š

์œค๊ฒฝ๋‹˜, ์ฐฝ์›๋‹˜, ์ง€์šฐ๋‹˜, ํƒœ์˜๋‹˜, ๋ช…์ค€๋‹˜๊ณผ ํ•จ๊ป˜ํ•˜๋Š” ๋‚˜์˜ ์ฒซ ๋ฒˆ์งธ ํ”„๋กœ์ ํŠธ โœจ

์ฝ”๋“œ ๋ฆฌ๋ทฐ

ํ”„๋กœ์ ํŠธ์˜ ๋ฐ˜์„ ๋‚จ๊ฒจ๋‘” ์‹œ์ ์—์„œ ๋‚ด๊ฐ€ ์ƒˆ๋กญ๊ฒŒ ๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค์— ๋Œ€ํ•œ ์ •๋ฆฌ (feat. ์—ฐ์šฑ๋‹˜ ๋ฆฌ๋ทฐ)

โœ”๏ธ ๊ณต๋ฐฑ

import React, { Component } from 'react';

import ProductCard from './ProductCard/ProductCard';

import './Product.scss';

โœ๏ธ import ๊ฐœ์ˆ˜์— ๋”ฐ๋ผ์„œ, import๋ฅผ ์ข…๋ฅ˜๋ณ„๋กœ ๊ณต๋ฐฑ์„ ๋„ฃ์–ด์„œ ๊ตฌ๋ถ„ํ•œ๋‹ค. ๋‹จ, ์ด๋ ‡๊ฒŒ ๋ช‡๊ฐœ ์—†์„ ๊ฒฝ์šฐ์—๋Š” ๊ณต๋ฐฑ์—†์ด ๋ถ™์—ฌ๋„ ๋ฌด๋ฐฉํ•˜๋‹ค.


โœ”๏ธ ์Šคํƒ€์ผ

โœ๏ธ tag selector๋Š” ๋‹ค๋ฅธ ์š”์†Œ๋“ค์— ์˜ํ–ฅ์„ ๋ฏธ์น  ์—ฌ์ง€๊ฐ€ ๋„ˆ๋ฌด ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ์ถ”ํ›„ ์œ ์ง€๋ณด์ˆ˜์— ์•…์˜ํ–ฅ์„ ๋ฏธ์น˜๊ธฐ ๋•Œ๋ฌธ์— ์Šคํƒ€์ผ์ด ํ•„์š”ํ•œ ์š”์†Œ์—๋Š” className์„ ๋ถ€์—ฌํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

โœ๏ธ ๊ฐœ์ธ์ ์œผ๋กœ๋Š” SASS๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๊ฐ ์ปดํฌ๋„ŒํŠธ๋งˆ๋‹ค ์ตœ์ƒ์œ„์—์„œ ์Šคํƒ€์ผ์„ ์ฃผ๊ธฐ ๋•Œ๋ฌธ์— nesting๋œ ์•ˆ์ชฝ์˜ ์š”์†Œ๋“ค์—๋Š” className์„ ๋ถ€์—ฌํ•˜์ง€ ์•Š์•„๋„ ๋  ๊ฒƒ ๊ฐ™๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์ง€๋งŒ ์ฐฝ์›๋‹˜๊ณผ ์ด์•ผ๊ธฐ ํ•ด๋ณด๋‹ˆ, ์ถ”ํ›„ ์ปดํฌ๋„ŒํŠธ๋ผ๋ฆฌ ํ•ฉ์ณ์ง€๊ณ  css๋กœ ์ปดํŒŒ์ผ์ด ๋˜์—ˆ์„ ๋•Œ ๋„ค์ด๋ฐ์ด ๋˜์ง€ ์•Š์€ class์— ์˜ํ–ฅ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.


โœ๏ธ addedDec์ด๋ผ๋Š” ์ด๋ฆ„์˜ className์„ ์‚ฌ์šฉํ•˜๊ณ , ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์•˜๋‹ค. ์‚ฌ์œ ๋Š” ์ถ•์•ฝ์–ด์˜ ๊ฒฝ์šฐ ๊ด€์šฉ์ ์œผ๋กœ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” event -> e ์ •๋„๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š” ๋„ค์ด๋ฐ์ด ๋‹ค์†Œ ๊ธธ์–ด์ง€๋”๋ผ๊ณ  ์ดํ•ด๊ฐ€ ์‰ฝ๋„๋ก ๋ช…ํ™•ํ•˜๊ฒŒ ์ „๋‹ฌํ•ด์ฃผ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๊ณ  ํ•œ๋‹ค.

โœ”๏ธ ๋„ˆ๋น„์™€ ๋†’์ด

โœ๏ธ height๋ฅผ ๊ณ ์ •์ ์œผ๋กœ ์ •ํ•ด๋ฒ„๋ฆฌ๋ฉด ์ถ”ํ›„ ์ž์‹์š”์†Œ๋“ค์˜ height๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ์„๋•Œ ์œ ๋™์ ์œผ๋กœ ์กฐ์ •๋˜์ง€ ์•Š๋Š”๋‹ค. ์ž์‹์š”์†Œ๋“ค์˜ height๋ฅผ ์ˆ˜์ •ํ•ด์•ผ ํ•  ์ผ์ด ์ƒ๊ธฐ๋ฉด ๋ถ€๋ชจ์š”์†Œ์˜ height๋„ ๊ณ„์‚ฐํ•ด์„œ ๋‹ค์‹œ ์ˆ˜์ •ํ•ด์•ผํ•˜๋Š” ๋ถˆ์ƒ์‚ฌ๊ฐ€ ์ผ์–ด๋‚œ๋‹ค.

โœ๏ธ ์ด๋Ÿฌํ•œ ๋ถ€๋ถ„์„ ์•Œ๊ณ  ์žˆ์œผ๋ฉด์„œ๋„ ์Šคํƒ€์ผ์ ์ธ ๋ถ€๋ถ„์„ ํด๋ก ํ•˜๋‹ค๋ณด๋‹ˆ ๋‚˜๋„ ๋ชจ๋ฅด๊ฒŒ ๋†’์ด๋ฅผ ์ฃผ๊ณ ์žˆ์—ˆ๋‹ค...ํ•˜ํ•˜

โœ๏ธ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ ์ž์‹์š”์†Œ๋“ค์˜ height๋ฅผ ์ •ํ•˜๊ณ  ๋ถ€๋ชจ์š”์†Œ์˜ ํฌ๊ธฐ๋Š” ๊ฑฐ๊ธฐ์— ๋”ฐ๋ผ ์ž๋™์ ์œผ๋กœ ์กฐ์ •๋˜๊ฒŒ ๊ณ ์ •๊ฐ’์„ ์•ˆ์ฃผ๋Š”์‹์œผ๋กœ ๋ ˆ์ด์•„์›ƒ์„ ์งœ๋Š” ๊ฒƒ์ด๋‹ค. (๋ณดํ†ต ์Šคํฌ๋กค์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š” ๋ชจ๋‘ bottom-up ๋ฐฉ์‹์œผ๋กœ ๋ ˆ์ด์•„์›ƒ์„ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๊ณ  ํ•˜์…จ๋‹ค.)


โœ”๏ธ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ

โŒจ๏ธ ์ตœ์ดˆ ์ฝ”๋“œ

{
    "id": 1,
    "backgroundColor": "none",
}      

โœ๏ธ ๋ฐฑ์—”๋“œ์—์„œ ์ฃผ๋Š” ๋ฐ์ดํ„ฐํ˜•์‹์— backgroundColor๊ฐ€ ์žˆ์ง€ ์•Š์„ ๊ฒƒ์ด๋ผ๋Š” ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์•˜๋‹ค.

โœ๏ธ ์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ์ œํ’ˆ ์นด๋“œ๊ฐ€ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฐ˜๋ณต๋ ๋•Œ, ์นด๋“œ์˜ Background ์ปฌ๋Ÿฌ๊ฐ€ 9๊ฐœ์”ฉ ๋ฐ˜๋ณต๋œ๋‹ค. ์ฒ˜์Œ์—” ๋‹จ์ˆœํžˆ ์ „๋‹ฌ๋˜๋Š” ๋ฐ์ดํ„ฐ๋ผ๊ณ ๋งŒ ์ƒ๊ฐํ•ด์„œ Back์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ฌ ์ƒ๊ฐ์œผ๋กœ Mock data๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›๊ณ  ๊ณฐ๊ณฐํžˆ ์ƒ๊ฐํ•ด๋ณด๋‹ˆ backgroundColor๋Š” ๋ฐ์ดํ„ฐ๋กœ ์ €์žฅํ•˜๋Š” ๊ฒƒ ์ž์ฒด๊ฐ€ ์˜๋ฏธ๊ฐ€ ์—†๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ Front ๋‹จ์—์„œ ๊ด€๋ฆฌํ•˜๊ธฐ๋กœํ–ˆ๋‹ค.

โœ๏ธ ์ฒ˜๋ฆฌ ๋ฐฉ๋ฒ•์€ ์ƒ์ˆ˜๋ฐ์ดํ„ฐ๋กœ ์ €์žฅํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ์˜ ํ‚ค ๊ฐ’์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•ด์ฃผ๋Š” ๊ฒƒ์ด๋‹ค.

โ—๏ธ ์—ฌ๊ธฐ์„œ ํฌ์ธํŠธ๋Š” 9๊ฐœ์˜ ์ƒ‰์ƒ์ด ๋ฐ˜๋ณต๋œ๋‹ค๊ณ  ํ•ด๋„ ์ œํ’ˆ ์นด๋“œ๊ฐ€ 9๋ณด๋‹ค ๋งŽ์•„ ์ง„๋‹ค๋ฉด โ—๏ธ ์ด๋ผ๋Š” ๊ฐ€์ •์„ ๋ฉ˜ํ† ๋‹˜๊ป˜์„œ ํ•ด์ฃผ์…จ๋‹ค. ์ด ๋ถ€๋ถ„์€ ๋ฐ์ดํ„ฐ ๋ฐฐ์—ด์˜ index % ์ƒ์ˆ˜๋ฐ์ดํ„ฐ์˜ ๊ธธ์ด๋ฅผ ํ•ด์ฃผ๋ฉด ์ด๋ ‡๊ฒŒ ๋‚˜๋จธ์ง€๋Š” ๊ณ„์†ํ•ด์„œ 0~8์„ ๋ฐ˜๋ณตํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ์ดํ„ฐ ๋ฐฐ์—ด์˜ ๊ธธ์ด์™€ ๊ด€๊ณ„์—†์ด 9๊ฐ€์ง€์˜ ์ƒ‰์ƒ์ด ๋ฐ˜๋ณต๋œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๋‚˜์˜ ์‚ฌ๊ณ ๋ ฅ์œผ๋กœ๋Š” ์ƒ๊ฐํ•˜๊ธฐ ์–ด๋ ค์› ์ง€๋งŒ...! ๋ฐฉ๋ฒ•์„ ์•Œ๊ณ ๋‚˜๋‹ˆ ์ด๋ ‡๊ฒŒ ์ ์šฉํ•˜๋ฉด ๋˜๊ฒ ๋‹ค!! ํ•˜๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค :)

โœ๏ธ ํ˜„์žฌ๋Š” ์ž์‹์š”์†Œ์—์„œ props๋กœ ๋ฐ›์•„ ์ด ๊ฐ’๋“ค์„ ์•„๋ž˜์™€ ๊ฐ™์ด ์Šคํƒ€์ผ๋ง ํ•˜์˜€์ง€๋งŒ, ์ธ๋ผ์ธ ์Šคํƒ€์ผ๋ง์€ ์ง€์–‘ํ•ด์•ผํ•˜๋Š” ์ผ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ถ”ํ›„์—” class๋กœ ๋ถ€์—ฌํ•˜์—ฌ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ ์šฉํ•  ๊ฒƒ์ด๋‹ค. (ํ•  ์ผ ํƒœ์‚ฐ...)

<li className="ProductCard" style={{ backgroundColor }}>

โœ”๏ธ arrow function

โŒจ๏ธ ์ตœ์ดˆ ์ฝ”๋“œ

 {this.state.productCard.map(product => {
              return <ProductCard key={product.id} productCard={product} />;
            })}

๐Ÿ”ง ๋ฆฌํŒฉํ† ๋ง

 {this.state.productCard.map(product => <ProductCard key={product.id} productCard={product} />)}

โœ๏ธ arrow function ์—์„œ ๋ฐ”๋กœ ๋ฆฌํ„ด๋งŒ ํ•  ๊ฒฝ์šฐ์—๋Š” ์œ„์™€ ๊ฐ™์ด ์ฆ๊ด„ํ˜ธ๋ž‘ return ํ‚ค์›Œ๋“œ ์ƒ๋žตํ•  ์ˆ˜ ์žˆ๋‹ค. ์•„์ง๋„ arrow ํ•จ์ˆ˜๊ฐ€ ๋ฌด์—‡์„ ์ธ์ž๋กœ ์ „๋‹ฌํ•˜๋Š”์ง€ ํ—ท๊ฐˆ๋ ค์„œ syntax๋Œ€๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์žˆ๋Š”๋ฐ, ์–ด์„œ ์ต์ˆ™ํ•ด์ ธ์„œ ๊ฐ„ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ๋‚ ์ด ์˜ค๊ธธ ์†Œ๋งํ•œ๋‹ค !


โœ”๏ธ && ์—ฐ์‚ฐ์ž
โŒจ๏ธ ์ตœ์ดˆ ์ฝ”๋“œ

     {description
                ? description.map(descriptionItem => {
                    return (
                      <ProductDec
                        key={descriptionItem.id}
                        description={descriptionItem.descriptionList}
                      />
                    );
                  })
                : null}

โœ๏ธ mapํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, ๋ฐฐ์—ด์˜ ํ˜•ํƒœ๊ฐ€ ์•„๋‹Œ ๊ฒฝ์šฐ error๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. ์ด๋•Œ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์„ ํ†ตํ•˜์—ฌ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด์•ผํ•˜๋Š”๋ฐ, ๋‚˜๋Š” ์‚ผํ•ญ์—ฐ์‚ฐ์ž๋กœ ์กฐ๊ฑด์„ ๋ถ€์—ฌํ–ˆ๋Š”๋ฐ ์ด๋ณด๋‹ค ๋” ์œ ์šฉํ•œ &&์—ฐ์‚ฐ์ž๋ฅผ ๋งŒ๋‚ฌ๋‹ค..โšฝ๏ธ

โœ๏ธ &&์—ฐ์‚ฐ์ž๋Š” true์ผ๋•Œ๋งŒ ํŠน์ • ๊ฐ’์„ ๋ Œ๋”ํ•  ์ˆ˜ ์žˆ๋„๋ก ์กฐ๊ฑด์„ ๊ฑธ์–ด์ฃผ๋Š” ๊ฒƒ์ด๋‹ค. ์—ฌ๊ธฐ์„  ๋ฌด์กฐ๊ฑด true์ผ๋•Œ๋งŒ mapping ํ•ด์•ผํ•˜๋‹ˆ &&์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.


โœ”๏ธ state

โœ๏ธ ๋‚˜๋Š” state์— ๊ตณ์ด ์ƒํƒœ๊ฐ€ ๋ณ€ํ•˜์ง€ ์•Š๋Š” ๊ฐ’๋“ค์— ๋Œ€ํ•˜์—ฌ state์— ์ €์žฅํ•ด๋ฒ„๋ฆฌ๋Š” ์ด์ƒํ•œ..? ์Šต๊ด€์ด ์ƒ๊ฒจ๋ฒ„๋ ธ๋‹ค. ์ผ๋‹จ state์— ๋‹ค ์ €์žฅํ•ด๋ฒ„๋ฆฐ๋‹ค๊ณ  ํ•ด์•ผํ• ๊นŒ. ๋ฐ์ดํ„ฐ ํ๋ฆ„์— ๋Œ€ํ•œ ์ดํ•ด๋ฅผ ๋จผ์ € ํ•˜๊ณ  state๋ฅผ ํ†ตํ•ด ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•ด์ฃผ์–ด์•ผํ•˜๋Š”๋ฐ ์•„์ง ๊ทธ ๋ถ€๋ถ„์ด ํฐ ๊ทธ๋ฆผ์œผ๋กœ ๊ทธ๋ ค์ง€์ง€ ์•Š๋Š”๋‹ค. ์ž์ฃผ ๋ฐ›๋Š” ํ”ผ๋“œ๋ฐฑ์ด์–ด์„œ ๋‹ค์Œ์— ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๋• ๊ฐ€์žฅ ์œ ์˜ํ•˜์—ฌ ์ž‘์„ฑํ•˜๊ณ  ์‹ถ์€ ๋ถ€๋ถ„์ด๋‹ค.

โœ๏ธ ๋˜๋Š” ํ•˜๋‚˜์˜ state๊ฐ’์„ ๊ธฐ์ค€์„ ๋ณ€ํ™”ํ•˜๋Š” ๊ฒƒ๋“ค์— ๋Œ€ํ•˜์—ฌ๋Š” state๋กœ ๋”ฐ๋กœ ๊ด€๋ฆฌํ•  ํ•„์š” ์—†์ด reder์‹œ์— ๋ฐ”๋กœ ๊ณ„์‚ฐ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

{addCart && <AiOutlinePlus />}
{addCart ? "์žฅ๋ฐ”๊ตฌ๋‹ˆ ์ถ”๊ฐ€๋จ" :  "์žฅ๋ฐ”๊ตฌ๋‹ˆ ๋‹ด๊ธฐ"}

โœ”๏ธ image ํƒœ๊ทธ

โœ๏ธ img tag์˜ ์†์„ฑ์„ ์ ์„๋• alt๊ฐ€ ์ œ์ผ ์ƒ๋‹จ์œผ๋กœ ์˜ค๋„๋ก ํ•ด์•ผํ•œ๋‹ค. ์ง€๊ธˆ๊นŒ์ง€ ๋‚˜์˜ ์Šต๊ด€์€ src๋ฅผ ์ ๊ณ  alt๋ฅผ ์ ๋Š” ๊ฒƒ์ด์—ˆ๋Š”๋ฐ, alt๋ฅผ ๋จผ์ € ์ ์–ด๋‹ฌ๋ผ๊ณ  ํ•˜์…จ๋‹ค. ๊ฐœ์ธ์ ์œผ๋กœ ์ถ”์ธกํ•˜๊ฑด๋ฐ ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ธฐ์—์„œ ์ฝํžˆ๊ฒŒ ๋œ๋‹ค๋ฉด ๋จผ์ € ์ฝํ˜€์•ผํ•˜๋Š” ๊ฒƒ์ด ์ด๋ฏธ์ง€์˜ alt์—ฌ์„œ ๊ทธ๋Ÿฐ๊ฒŒ ์•„๋‹๊นŒ !


โœ”๏ธ ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น

โœ๏ธ ์‹ ๋น„ํ•œ ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น์˜ ์„ธ๊ณ„... ์†”์งํžˆ state, props๋กœ ์ „๋‹ฌ๋˜๋Š” ๊ฐ’ ์ •๋„๋‚˜ ๊ตฌ์กฐ ๋ถ„ํ•ด ํ•˜๋ ค๊ณ  ํ–ˆ์ง€ map์œผ๋กœ ์ „๋‹ฌ๋˜๋Š” ์ธ์ž๋“ค์„ ๊ตฌ์กฐ ๋ถ„ํ•ด ํ•˜๋ ค๋Š” ์ƒ๊ฐ์€ ํ•œ ๋ฒˆ๋„ ์•ˆํ•ด๋ดค๋‹ค..๋Š˜ ํšจ์œจ์„ ์ƒ๊ฐํ•˜๋ฉด์„œ ์ฝ”๋“œ๋ฅผ ์งœ๋Š” ์Šต๊ด€์„ ๋“ค์—ฌ์•ผ๊ฒ ๋‹ค.

โŒจ๏ธ ์ตœ์ดˆ ์ฝ”๋“œ

icon.map(iconItem => {
                    return (
                      <ProductIcon
                        key={iconItem.id}
                        src={iconItem.src}
                        alt={iconItem.alt}
                      />
                    );
                  })}

๐Ÿ”ง ๋ฆฌํŒฉํ† ๋ง

  icon.map(({id,src,alt})=> {
                    return (
                      <ProductIcon
                        key={id}
                        src={src}
                        alt={alt}
                      />
                    );
                  })}

โœ”๏ธ ์…€ํ”„ํด๋กœ์ง• & className

โœ๏ธ ์žŠ์ง€๋ง๊ธฐ.. ์Šต๊ด€์ด ๋ฌด์„ญ๋‹ค. ํŠนํžˆ icon์„ importํ•ด์˜ค๋Š” ๊ฒฝ์šฐ ์ข…์ข… ์…€ํ”„ํด๋กœ์ง•์„ ์žŠ๋Š”๋‹ค. ๊ทธ๋ฆฌ๊ณ  className๋„..class๋กœ ์ ๋Š” ๋งค์ง...! ๊ทธ๋ž˜๋„ className์€ ๊ฒฝ๊ณ ๋ผ๋„ ๋œจ์ง€๋งŒ ์…€ํ”„ํด๋กœ์ง•์€ ์žก์•„๋‚ด๊ธฐ ๋„ˆ๋ฌด ์–ด๋ ต๋‹ค. ํ•˜์ง€๋งŒ ์ด๋Ÿฐ ์ฝ”๋“œ๋„ ์žก์•„๋‚ด๋Š” ์—ฐ์šฑ๋‹˜ ์ตœ๊ณ ..๐Ÿ‘๐Ÿป

๋Š๋‚€์ 

์•„์ง ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ถ€๋ถ„์— ๋Œ€ํ•˜์—ฌ๋Š” ๋งˆ๋ฌด๋ฆฌ๊ฐ€ ๋˜์ง€ ์•Š์•„ ์ •๋ฆฌํ•˜์ง€ ๋ชปํ–ˆ์ง€๋งŒ, ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„์˜ ๋ฐ˜์ด ์ง€๋‚˜๊ณ  ๋‚ด๊ฐ€ ์–ด๋””์„œ ์ž์ฃผ ๊ฐ™์€ ์‹ค์ˆ˜๋ฅผ ๋ฐ˜๋ณตํ•˜๋Š”์ง€ ์–ด๋–ค ์‹์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์งœ๋ฉด ํšจ์œจ์ ์ธ์ง€์— ๋Œ€ํ•˜์—ฌ ๋Œ์•„๋ณด๋Š” ์‹œ๊ฐ„์ด์—ˆ๋‹ค. ์ด๋ฒˆ ์ฃผ๋ง์€ ์•ž์œผ๋กœ ๋‚˜๊ฐ€๊ธฐ ์œ„ํ•œ ๋ฒ ์ด์Šค๋ฅผ ๋‹ค์ง€๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ์•ผ์ง€ !

profile
๐Ÿผ newbie frontend developer

0๊ฐœ์˜ ๋Œ“๊ธ€