-
[React] ์ค์ต - react twittlercodeStates front-end/React 2023. 1. 20. 15:57๋ฐ์ํ
๐ react twittler
๐ ํ์ต ๋ชฉํ
์์ธ ์ปดํฌ๋ํธ ๊ตฌํํ๊ธฐ
Sidebar ์ปดํฌ๋ํธ ๊ธฐ์ ์๊ตฌ์ฌํญ
- App ์ปดํฌ๋ํธ์ ํ์ ์ปดํฌ๋ํธ๋ก Sidebar ์ปดํฌ๋ํธ๊ฐ ์์ด์ผ ํฉ๋๋ค.
- Font Awesome์ ํ์ฉํ์ฌ ํธ์ ๋ฉ์์ง ์์ด์ฝ์ด ์์ด์ผ ํฉ๋๋ค. (className : "far fa-comment-dots").
ํํ ๋ฆฌ์ผ1์ ๋จผ์ ํ์ตํ๊ณ ์งํํด๋ณด์ธ์.
Counter ์ปดํฌ๋ํธ ๊ธฐ์ ์๊ตฌ์ฌํญ
- Feature ์ปดํฌ๋ํธ์ ํ์ ์ปดํฌ๋ํธ๋ก Counter ์ปดํฌ๋ํธ๊ฐ ์์ด์ผ ํฉ๋๋ค.
- dummyTweet๋ก ์ ๋ฌ๋๋ ํธ์ ๊ฐ์์ ์นด์ดํธ๊ฐ ์ผ์นํด์ผ ํฉ๋๋ค. ex) total : 5
- total๊ณผ ์ซ์๊ฐ ์ฝํ ์ธ ์ ํฌํจ๋์ด ์์ด์ผ ํฉ๋๋ค.
Footer ์ปดํฌ๋ํธ ๊ธฐ์ ์๊ตฌ์ฌํญ
- Features ์ปดํฌ๋ํธ์ ํ์ ์ปดํฌ๋ํธ๋ก Footer ์ปดํฌ๋ํธ๊ฐ ์์ด์ผ ํฉ๋๋ค.
- Footer ์ปดํฌ๋ํธ์ ํ์ ์๋ฆฌ๋จผํธ๋ก ์๋งจํฑ ์๋ฆฌ๋จผํธ footer๊ฐ ์์ด์ผ ํฉ๋๋ค.
- ์๋ฉํฑ ์๋ฆฌ๋จผํธ <footer>๊ฐ ํฌํจ๋์ด์ผ ํฉ๋๋ค.
Tweets ์ปดํฌ๋ํธ ๊ธฐ์ ์๊ตฌ์ฌํญ
- ํธ์ ์ ์์ ํ๋กํ ์ฌ์ง์ด ์์ด์ผ ํฉ๋๋ค.
- li.tweet ์๋ฆฌ๋จผํธ์ ํ์ ์๋ฆฌ๋จผํธ๋ก <img> ์๋ฆฌ๋จผํธ๋ฅผ ์์ฑํ๊ณ dummyTweets์ ์ด๋ฏธ์ง ์ฃผ์ ์ ๋ณด๋ฅผ ์ฐพ์์ <src> ์์ฑ์ ์ง์ ํฉ๋๋ค.
- ์ ์ ์ด๋ฆ์ด ์์ด์ผ ํฉ๋๋ค.
- li.tweet ์๋ฆฌ๋จผํธ์ ํ์ ์๋ฆฌ๋จผํธ๋ก <span> ์๋ฆฌ๋จผํธ๋ฅผ ์์ฑํ๊ณ dummyTweets์ ์ ์ ์ด๋ฆ์ <span>์ ํ ์คํธ ์ฝํ ์ธ ๋ก ๋ฃ์ต๋๋ค.
- ํด๋์ค ์ด๋ฆ์ tweet__username์ผ๋ก ์ง์ ํฉ๋๋ค.
- ํธ์ ์์ฑ ์ผ์(yyyy. m. d.) ๊ฐ ์์ด์ผ ํฉ๋๋ค.
- li.tweet ์๋ฆฌ๋จผํธ์ ํ์ ์๋ฆฌ๋จผํธ๋ก <span> ์๋ฆฌ๋จผํธ๋ฅผ ์์ฑํ๊ณ dummyTweets์ ํธ์ ์์ฑ ์ผ์๋ฅผ <span>์ ํ ์คํธ ์ฝํ ์ธ ๋ก ๋ฃ์ต๋๋ค.
- ํด๋์ค ์ด๋ฆ์ tweet__createdAt์ผ๋ก ์ง์ ํฉ๋๋ค.
- ํธ์ ์์ฑ ์ผ์๋ yyyy. m. d. ํ์์ผ๋ก ํ์๋์ด์ผ ํฉ๋๋ค. (’static/dummyTweets.js’ ํ์ผ์ ์ ์ฝ์ด๋ณด์ธ์.)
- ํธ์ ๋ฉ์์ง๊ฐ ์์ด์ผ ํฉ๋๋ค.
- li.tweet ์๋ฆฌ๋จผํธ์ ํ์ ์๋ฆฌ๋จผํธ๋ก <div> ์๋ฆฌ๋จผํธ๋ฅผ ์์ฑํ๊ณ dummyTweets์ ํธ์ ๋ด์ฉ์ <div> ์ ํ ์คํธ ์ฝํ ์ธ ๋ก ๋ฃ์ต๋๋ค.
- ํด๋์ค ์ด๋ฆ์ tweet__message์ผ๋ก ์ง์ ํฉ๋๋ค.
- ํธ์์ด dummyTweets์ ๊ธธ์ด๋งํผ ์์ด์ผ ํฉ๋๋ค.
- dummyTweets์ ํธ์์ด n๊ฐ ์ ๋ฌ๋๋ฉด, ํ๋ฉด์ ํธ์์ด n๊ฐ๊ฐ ๋ณด์ฌ์ผ ํฉ๋๋ค.
ํต์ฌ ๊ธฐ๋ฅ ๊ตฌํํ๊ธฐ
์กฐ๊ฑด๋ถ ๋ ๋๋ง ๊ธฐ์ ์๊ตฌ์ฌํญ
- ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํ์ฉํด์ ์ฌ๋ฌ ํธ์ ์ค ์ ์ ์ด๋ฆ์ด parkhacker์ธ ๋ฐฐ๊ฒฝ์์ด var(--point-color-tint-2)๊ฐ ๋๋๋ก ํด๋์ค(tweet__username--purple)๋ฅผ ์ง์ ํด์ผ ํฉ๋๋ค. (tweet__username tweet__username--purple)
- ‘src/App.css’์ ํด๋์ค๊ฐ ๋ฏธ๋ฆฌ ์ค๋น๋์ด ์์ต๋๋ค. (className : 'tweet__username--purple')
app.js
import React from 'react'; import './App.css'; import './global-style.css'; import { dummyTweets } from './static/dummyData'; // ! ์ ์ฝ๋๋ ์์ ํ์ง ์์ต๋๋ค. console.log(dummyTweets); // ๊ฐ๋ฐ ๋จ๊ณ์์ ์ฌ์ฉํ๋ ๋๋ฏธ ๋ฐ์ดํฐ์ ๋๋ค. const Sidebar = () => { return ( <section className="sidebar"> <i className = "far fa-comment-dots"></i> {/* TODO : ๋ฉ์ธ์ง ์์ด์ฝ์ ์์ฑํฉ๋๋ค. */} </section> ); }; const Counter = () => { return ( <div className="tweetForm__input"> <div className="tweetForm__inputWrapper"> <div className="tweetForm__count" role="status"> {'total:' + dummyTweets.length} // dummyTweet๋ก ์ ๋ฌ๋๋ ๋ฐ์ดํฐ์ ๊ฐ์ </div> </div> </div> ); }; const Footer = () => { return ( <div> <footer><img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} /></footer> Copyright @ 2022 Code States </div> ); }; // TODO : Footer ํจ์ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํฉ๋๋ค. ์๋ฉํฑ ์๋ฆฌ๋จผํธ footer๊ฐ ํฌํจ๋์ด์ผ ํฉ๋๋ค. const Tweets = () => { return ( // ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํ์ฉํด์ ์ฌ๋ฌ ํธ์ ์ค username ๋ฐฐ๊ฒฝ์์ด var(--point-color-tint-2)๊ฐ ๋๋๋ก ํด๋์ค(.tweet__username--purple)๋ฅผ ์ง์ <ul className="tweets"> {dummyTweets.map((tweet) => { return ( <li className="tweet" key={tweet.id}> <div className="tweet__profile"> <img src = {tweet.picture}></img> </div> <div className="tweet__content"> <div className="tweet__userInfo"> {tweet.username === "parkhacker" ? <span className = "tweet__username tweet__username--purple">{tweet.username}</span> : <span className = "tweet__username">{tweet.username}</span>} <span className = "tweet__createdAt">{tweet.createdAt}</span> </div> <div className = "tweet__message">{tweet.content}</div> </div> </li> ); })} </ul> ); }; const Features = () => { return ( <section className="features"> <div className="tweetForm__container"> <div className="tweetForm__wrapper"> <div className="tweetForm__profile"></div> <Counter /> </div> </div> <Tweets /> <Footer /> </section> ); }; const App = () => { return ( <div className="App"> <main> <Sidebar /> <Features /> </main> </div> ); }; // ! ์๋ ์ฝ๋๋ ์์ ํ์ง ์์ต๋๋ค. export { App, Sidebar, Counter, Tweets, Features, Footer };
๋ฐ์ํ'codeStates front-end > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] ์ด๋ฒคํธ ์ฒ๋ฆฌ & Controlled Component & React ๋ฐ์ดํฐ ํ๋ฆ (0) 2023.01.26 [React] State & Props & ๋ ๋๋ง ์ ์ (0) 2023.01.25 [React] ์ค์ต - react twittler SPA (0) 2023.01.25 [React] SPA, Router (0) 2023.01.25 [React] JSX, Component (0) 2023.01.20