ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [React] ์‹ค์Šต - react twittler
    codeStates 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 };
    ๋ฐ˜์‘ํ˜•

    ๋Œ“๊ธ€

Designed by Tistory.