SEB/TIL

005 | Practical | Twittler Mockup Implement

kexon 2022. 6. 29. 20:38

πŸ’™ μ‹€μŠ΅

  • νŠΈμœ„ν‹€λŸ¬ λͺ©μ—… κ΅¬ν˜„
    • νŠΈμœ„ν‹€λŸ¬: κ°€μ§œ νŠΈμœ„ν„°
  • μ‹€μŠ΅ λ‚΄μš©: μ£Όμ–΄μ§„ 이미지와 ν•¨κ»˜ μ΅œμ†Œν•œμ˜ html, css 그리고 이미 λ§Œλ“€μ–΄μ§„ js둜 창의λ ₯ ν•œ μŠ€ν‘Όμ„ 더해 νŠΈμœ„ν‹€λŸ¬ λͺ©μ—…을 λ§Œλ“œλŠ” 것

HTML

더보기
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>twittler</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>
  <body>
    <div id="greeting">twittler</div>

    <div id="box1">
      <div>Username</div>
      <input type="text" id="usernameInput" />

      <div>Message</div>
      <input type="text" id="messageInput" />

      <br />
      <button id="tweetButton" type="button">Tweet!</button>
    </div>

    <!-- Tweet lists -->
    <div id="cButton">
      <button id="randomButton" type="button">
        <div class="icons8-refresh"></div>
        Check New Tweets
      </button>
    </div>

    <section id="tweetlist" class="white">
      <div id="imgfile">
        <img src="http://cdn.ggilbo.com/news/photo/201911/718556_555324_3851.jpg" />
        <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBYWFRgWFhUZGBgaGhoYGhgaGBwaGBwaGRgZGhgYGBgcIS4lHB4rIRgYJjgmKy8xNTU1GiQ7QDs0Py40NTEBDAwMEA8QGhISGjEhGh0xMTExNDE0MTQ0MTE0NDQxMTQ/NDQ0NDQ/MT8/PzE0MTQ0PzQxMTExMTExMTExMTExMf/AABEIAOAA4QMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAADBAIFAQYHAAj/xAA9EAABAwIDBQUGBQMEAgMAAAABAAIRAyEEEjEFQVFhcQYigZGhMkKxwdHwExRS4fEVcpIHYoKiIzMWc8L/xAAYAQEBAQEBAAAAAAAAAAAAAAAAAQIDBP/EAB0RAQEBAQEBAAMBAAAAAAAAAAABEQIhEgMxQVH/2gAMAwEAAhEDEQA/ANDKywjklDWU2ulRBZQwVhokFYBQHa3ksiilXVShuxDp1QOfl96IykNJVca7uK82s7irhVyzChedhQq6hXPFMurGNVMAzhQCifl2wka2JQfzR4qi1bQbxUvwWRr6qp/EPFZLzGqUWzKbINwl3hnEKtpvMG6C95UFwx7BvCyajJlUeYqUqrGwnbrmiG8UjiNqvdq4qtaoO1TTDhr8SpUnNJvySSk0pqa6Nsus3IICsG1QqDYv/rarNpVD5eqXtLQmnqrKm5J9pP8A1INNw9No1TFYsLYCrajzKK0rKp5FhGyryIE6mFlhhCzFSY9DBMywCo5kJzkEqgQHgyiZlhyAJWQVlwQyVoMNes/jpbMolygzVcoSiuYC2QgoYJSfuRzolAU2NOon78lKB0jqguN0elTMExaw/ZHOzXloflMQD5kgfBAis5VY/wBHf+G6oRAAJHOPajpCI3ZL8pGU5gWgjm9sgddPNNFa1Yc1bYezTw5wgw3M6Y1N4A8gq6vsGo0jumLerw0eJlKqkLV5ourt2wKkkBtxJd/t0N/BwTdLspWeWNYwnNmExbuxJn/kEMWGwj/4xCtG6gb9Fe9m/wDT57GA1H5e5oP1EyfSAtow/Z7C0yHO7zm3km1pU1Zzv6aLRwr3RlaTNrCUTamw69VgY2m4nfA0+7roH9QYwAMY1oGgsFgbYdwB6aKfcan4q5Cz/TbHEyKcTFnOA1uZ6feqM/8A04xojuA3ucwAA6alddbtvi3780Wntph9qyfU/wBLxY5J/wDAsTw+P0Xl2P8AqNP9XwWFfqJ8180Vwl2uupYnEDikX1eCnEuJT0qDilWVCUxTaTuJ4W1W0jK8Uy3AVCJDHkcQ0n4Iw2PX3Un/AOJUVWvCG5quP6NW7s0ngOMSWmGmYE8lYU+xuJc4f+MwSATwkXTRqxCgKZMRv058l0Fn+m1e8m8nL03SvYbsJUDXAtIdAeydA9jrgHg76K6mNGwQOkWO9So4MueWjgSPC/yK6MOxuWpIYchyujgS4l46RCb2V2SyVGF0Zpk8NDos6uNAo7Ae9vdaSQXsdyc0tLfMStiwvY17w3Xu2PiQf/0fJdFwGy2U2CBeLze/z4K4pYYAWEWHoAlXGhM7IU2BrTGpJHElob8JV5s/s+xwLCJHd/66BXOIwrc19RcdYj6pnAQ0DqPQJphSt2SpODAGjKxpaG7u8S4nzJTuH7M0mknLcmTzjSVb/mAN6Jn0VRXjY9OfZWP6HSkOyCRp4AgW8T5qylSBQUjOzdIBwI9uc3if48k42kymBlaBHJMYnEBo1Wt7S2hfK3X4LPXWN8c3qmsXtMkwD4yEk8E+9r4oOGa1v6S7if2iUw0sdwB3ZTboRuK57a9GTn9FcjQCYJ8fWF4kC4g6eR4jUKdaRcQdSCLHmDxVc+oTcWPr4ws2EOPqCJHkka1ZBe8jql61SVitYP8AmhzXkkvKemRyKrgnjVLtYSY3q8MvNyt17D9iG1nCtVBbTbu0zeRXsjwxU9iuwtXEuD3Ny095d8o16yuu7L7IYTD6MaTvzGfTRHdjGU2hlJoa1tgAFXVMWTdx9VL03zxq/aKLNGsHQBSOKp8B5Ba7+Lx8lJrydGa8ySfBZ+m/iNhzsPug+ARKZYPdHktfFYttPXdCsMFXnUgnrfxCs61OuVqWA7kjiWDT1+SOXkBK1XzqjJCo8DM3fCWwZk5jrChXBNSeX3801h6FgI3eqDLKeZ0bhb0/hWJMN8FjDUQPFZxboaeiCl2liRmZBsQfqPgR4rDcVp5+KrcbT7w+/v8AlTe6R0U/osGYpxIubFp+M/JbFSq90eC1PAPlx81sNF9gqliw/FUDiAEi+slauItJ4/wIQkFxeILjDQqHaQIIA13mJVxRdf74aBJYtoeYI/fopZrrxcUbHjUvnjNx0um/wi4AscHbuY5c1lxY0kEuAAmGtcTxJLgLjkl343Dg91zWui7ix+Y+MRPisZI679GamIe1oc7xJmx4HiOBQnVg4/pdu3efFJYjaoG/MCL2sR/bu9EpUxLZyiYIBaZmJ4FZtWcnMU/XikhUlQ/HzGD581Ki0zKxWxIC8jwvKHjlDzG9XfZvtnUwxyl7nUyCMpJIB4ha9XaTYILKN17ceCO0UNth1MPgBzhIbOg1vzUMJii90kzyHz4SuaYbabmNLdZ47ua2XYu1slJz3ePFx+g+SxY3Om+sxLRcrNXGkyBaVqWysW6q973Tlp2aN0xr1V1nMcysWN8+rJr43z8FabNzDcInWVV7Lok66dJWw4eiGi3zWuYdUZ7kCpyRXFRAW3KlWYWXTu0Vg2mo02o4CyrxCQ2mzMwxqrGErWbMhBrb6JIPh5hBrMIabcfJX7sMLpZ+H3QmJqr2dhy286385MK8a6B4JIsDSTOlkR9WRrqiiVKlwOKXxD9/C46myEXyRxB+v7KboJvxB8phF1irUyC5vw5xpbolazwxuZ1iRFtSXHQAc96lVBe87gB8Tc+SWezMXO3RAG4BvHx+CNRrW2GGS7ObyYDyTBsLCyRwhuG8s3rb4LYMXkHdguc67iLCBFteE+iC/CAS82LssAAWkW72+y59R256yKXaByn78fFDo1ZHT7hWW1cOGtLnERuG/f8AuqrC97QQ3ceK52OvPWw7ReGmTO5W+FqB4mIE8FWUaEk8oA56SVcYbCmAPT5KYz1TGZnD4/VYRvwG8F5Vz1w1zysCoeKZdhuKGaIXq15QnVCnsNizly7koaQRWiEHQdm1mim1gcGgyTBuTvtvWyYB7QzutPVxnxhcjZinS2/s6fwujdksYatM54OW19fSFmxvm+txwuPA7mrumvIblYsxci4hUuHYxwENHTMfgVY4epNiCCON/VItOtRmodJiNC0ykwIrFGg3cpPEEKVE3IT2ojTZRfxUAyLJSq26feEtWbZFUmLdr1SzX7vD5hOYulJ8j6of5Um/GPRCA0bk+Hr/AB6ozG3R6OEIAtedET8HXj0srgTLdeaVYwaEWBjqdSrP8Kx8IQBTAn0+qy1KpamFMtMACSTG++k7/kmqeCL3SRlAMyeJ387JxzAYkWCnTY4mTbgN/UqNTpR9pcKwNgNLjo0Bs9SeAWsYYy4tOoiwK6a/Atcwh28X3rWH7ADaksJjX2Y67ys9R0568wHA4XeR0+as6bQjswpAgWUhTCxjPVR8F5TyLyM64Y9ygUZrJCn+GIXpcCsKJRHhClFSYFvXYXFPBLO4G6ySc0+ULRWroH+n2ysz87nSP9paR4w74hFjoeEYTEwecfQKzZTnVMYbCNA9keUJmnQAUkXQGUospCmmHFBe5USpMhSeFhjrKFVylBGhDdqvCpZAe/es6gzylK7rFRqYocUB+JB3qrGGUg653Jss0SVKqBJNt/hc/JEpYib9PVaXDYCw5k8UN1a0+X7perjMovBPUBTUNOpAiN+5IVKQJDW34nieSEzaQeY3FO4IDdCivNwcCLc9/wDCyMPHBNkDjPgUN3VE0NoUoEIRfCE+qsLEK7N4STgnHvSzwFLF0LKvLMjivLOLrh1PRTBsgNfCw7EcF6HF6qNUsF6pUJUQUU7gWS4LtHYbZ8NBIaLfpAXGdnVA17SZHMG/xHxXdOx2MD2CH5rDU38Rf4oRuDGwIQ61TKsmsEviHTogjVfxI80tUxQGpWs9pdvtw7SXONvdazM76Ln1X/UTvGGPIneQCpa6SeOu1toxoZCnQx+Yc1ofZPtE3GOc0S1zQDld7w4jyW44Gjf74KVLFgzEyksdi4Gqm+mZgKo2twWcSEMZtAzISp2i9e/LZlX7TGRhM36JjWHP60RYlBd2nYDBqtB/uAWiYzZmLrkuaCQT7IOnVBp9jcY83pEDiY+q1Cujv26InNmaf0uzfDVN4eo+oWkOAbuBGvGZuCtU2L2IfT7z3GeAdA9CtuwlPINCfCfipRZsoNjQeUI9OplSRxfOOhv4oQxce8VnRdfnSOJQnYsneqt2JneT4obnlS9ItXYoKP4h3KubUKYpVOamqbzlQe6yiXc0N2hhNAcxXkpkf+sf4ryo45UCAUeslnFdnN5EYEJhsisKAtMXFwOuniupdhtqUmZWurMLzaA1w8BmXKpV52ZxGWo2JmRAYxrnnlneYaEI74+rwU3Vbc1WYepmY03FhYkG/MhMh9oiUVVbV2ayrZ7dfgqpnYDBO7zmudv9qAtvp4Yn91mvswuHtQOAUxfpqTdgUKVRv5akGETJHDqts2Y0OFm6anmVnZ+y8hJO/wCSsKFENBDdJJTFvWgVKI4blXYnANdchXVVwaFW4nEti+iUjXMVgyCcvkVr+0cA95IvG/781uVSsxxtwU24VpYCPTh9Uxda3gKJY3KBI8irKi179Gkc1b0MG0G7fvorI12sb3QFGdUAw8XN+bp+QS2JrNAgRPDUeoVrjcdyAP3uVJiKub3h45vSylpKRqQdfghhw4LNVx3oLlhoyHrMpRrjKZYVkTamqQSzGc0xTQMyvOaYWAVOUC34T+PovJnMvKjg1Y2S0p5zJRMPg5K7uRBjCpZVb1sKANUhWABRQg1N4DFfhuzAAndOnUpNzkXDsk+t7COJPBB1fsntovYGvdPOIE8BqSFuDa8Rp5Lj/Z7GtD2tDiYtmzBregsT46rqVCsCwXk8hAHSUVsOGeAAfkjfmtAB4rWWbVIs6w0CbwGKzvAB9UMbKzRLU3wSpsq3ha9tDbApnK4FskmY63TV5524sMRiMxLfj4qq2i+ASTPLl92VXW260SS4TA3+gVFjdvl2628k9blZvUdp+OrzCnMZzQN/0VzhO7aZGsLQNn4p73ywQ2bk7+i2qhiXCLSfBJWOo2J1QbvvqlMViY94eH1SlLFkktLZOvOEtiMOXhzmxA46SlrDGIxrToCb3MqvfivuZ/hQdhiD3ntHKf2QatCdHMPifosVWK9Yfwl2P8ll1Azq3/NvwlY/CIO7/Jv1UUwxyMxySYb/ALo7CshxjimGFK03JhpUtDDSjNSzUdhUBF5eXk0cOYmaNkqw3TDHQvTXKp4h1lW1hdN16toCU63VIiyZ1gb02zGVYysfUI/2l3rCEx5GgaP+IPq6SjteHe0546kuHkim8Ni67DLqrhEEg1CT0ytJPot+2DtcOaM1RzjplFv+2p9FzgUmyAHt5d18nwDSr/ZTG0mlzquQTBgd8z7oEyPEDmixvdauRvPm76q77OVWgFz3HPOhOg5BadhtvU4Dabb6S67usDRW+ytouD59oGxa0cOQCyutwdWaLCZ18VU9ocOKtMye+27T4XB5FEftQMiGXPT5Ksxm0SRIEE6g7uStviy560XF1LkacuCrRRz1L+yBMbvJXG3qYc4uFideCrcA+BOrtFyx6L3sXuDAYLNCdGKfPd8/4VNTrumInxsjtrPi1lXG1sWH2nUbJfMxubJ85Cl/VKsSGmP1EKio16pFni/ukDzvqjA1GyS4f3NsJ4dequsrGs9zwSS2TukA+qratIt1BU3Ymfb73MWP08woPe9sua7Mzfy5OadFlS/4jtxPmsh/EDyj1EFFbUa72mweI08t3mvGjGh8Pv6RzRGWFu6R4z+/xRm30v8AfBAHMeOnwsptA5j1+iyppj0wxyTZ1B8/ommDms0kNNKOwpdgRmORRMyysZl5FcUQ3PRSkKr16nAy94hCzSlmuRqaKMAjspjmeQ+ZQWpllllNGY0i2n+1tp/udrHKUxh8IXuAuToGjQAX03AXuh4WmXTFmj2nn2R48d8fDVPjHsY05fZ0JkZnka6+6PIczpZNTVjh8LSpDM995933iRMZuHJuusgJultd7rewwe623QGNT8FqlXaJe4WncL2aN/zJOpiVKjtHO9rGuysbLi79IAGd7vAE/wCIT5pK6HQxzyxpNpMDcbIdbEOIiY+i1nBbYNR0+y3Rg1Ia3eT4G/GVc0sW12+ee790sblVmNqZjAVYyk5uk3W0OwoKA/DBYsdJ0qWYghxlsdE0yuDcHXkjvw43cIUBQG8KalqbADzT1CtHNukbuYSlNoFwmacTlG+7eo0+Y8VNEq7ADmboTv3H9LuSiDHeZbiJnqDxCgKm/cbEfJRf3TrINwd/X5FEFOUibDjy/bmsCoW28pgjqNyWde7TfeOPRZY49RwnTogYZWv9/ZTDHA7vL6FKsp+Px8UZrVlToYjNagUZTLXBSqKxTCGCphSia8sLyDkMID6AJumFFxXocAhsqRIKD+Uc1NB54lYNVXTQ2UjvTTYESLbhAl3SdBbVLgqYIJvMb+P9o4JPfAatiCWkk93QNFg6Lw0bmzqd+vCKvE1STf8AYDcAOCaxFQk9Nw3DWAk3vuusmQZD4Y5x1JyDSwiXHyIH/IpkQyiAfaqd553im27Wf8iWu8OSWbSzGm03EFx/tkud/wBR8Fnaj3OeW/pOXSJPvRyzF0DmlgxTxj4kmAYY1o0DRBdA8AJ5lPYHa7gRmMWkkmTqdPoqeqYIA3CB8z5kqLDv4KWLPHTtlYwOaL31MmT4qwcQtF2JjGNIl7nGRA1A3AAD6eK3ai+WjouXUblYLBuUSEbKhvasYoD1nPYHeDHzHzWXsssNb3T1B9CoPPu5w0DoI5ZhmE+cITXS2L2cRHUfVp80ZzbNPL4Ej5BBfZ0j3r+I1++aCDmO3WRaLXaGx4ceYRB0RMjrQgLRYd6aYOPn9UrSqH3gjsq8isqaaFJqEx6M1FEapyhAqYUxE8ywoyvKYrkD6vBDDySg51hr+cL0OBkNJU20XJZmIITjahKCOR0r1R4uBu9T9EdxyiJudeiULZnh/C688/0Bedbkn7+aiWqTmRPh6/ysSPsSfvethjCN708GN9SwGPAx4qvBuSTe9+Z95P0XmHf/AFuP+M/fgq5zyVBAsQypOehkrNFhsvMHSHBk73fTUroOBdYTw4yubYGMwk+A1PITZb5gNGhoi1xvHU8VjqNRsLBKw9qxhtEw5q5tFHtWPw7I72KJYs2KFlsB1Hz+aE+lIjxTDW/FeY2D1QJ4WoRZ14sn2QgsZ3+R+SabTjRFSa1Ta3kotduRWrIk1qmEPMs5igIFJphCkqRnegJmC8oryD//2Q==" />
        <img src="https://cdn.imweb.me/upload/S201807025b39d1981b0b0/16b98d3e3d30e.jpg" />
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt18wCyQPO-BWMnThSlQ0_D4MJyDp32fJZrQ&usqp=CAU" />
        <img src="https://pbs.twimg.com/media/ESbTA4rUcAArJfB.jpg" />
      </div>

      <div id="listfile">
        <script src="script.js"></script>
      </div>
    </section>
  </body>
</html>

CSS

더보기
#greeting {
  font-size: 24px;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 1em;
  color: #2aa9e0;
  background-color: white;
  text-align: center;
  margin: 0.5em;
  padding: 0.5em;
}

#box1 {
  background-color: #e8f5fd;
  padding: 24px;
  border-radius: 10px;
}

#usernameInput,
#messageInput {
  border-radius: 10px;
  border: 2px solid #ccc;
}

#tweetButton,
#randomButton {
  cursor: pointer;
  background-color: #8fd1f7;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  margin-top: 5px;
  color: white;
}

#cButton {
  padding: 24px;
  display: flex;
  justify-content: left;
}

#tweetlist {
  background-color: #e8f5fd;
  padding: 24px;
  display: flex;
  border-radius: 10px;
}

#imgfile {
  display: flex;
  flex-direction: column;
}

img {
  margin: 10px 0 24px 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

ul {
  list-style-type: none;
}

.tweet.white {
  margin-bottom: 20px;
  border-bottom: 1.5px solid grey;
  padding-right: 32px;
}

.tweet__username {
  font-size: 18px;
  font-weight: bolder;
}

κ²°κ³Όλ¬Ό

πŸ’›  νŽ˜μ–΄ ν”„λ‘œκ·Έλž˜λ°

  • #첫 #νŽ˜μ–΄ν”„λ‘œκ·Έλž˜λ° #성곡적 πŸ₯°
  • μ „μ²΄μ μœΌλ‘œ νŽΈμ•ˆν•œ λΆ„μœ„κΈ°μ—μ„œ μ•ˆμ •μ μœΌλ‘œ 진행됐닀. λŒ€λž΅ μ–΄λ–€μ‹μœΌλ‘œ λͺ©μ—…을 ν•˜κ³ μ‹Άμ€μ§€ μ •ν•˜κ³  μ™€μ΄μ–΄ν”„λ ˆμž„μ„ κ·Έλ Έλ‹€.
  • μš°λ¦¬λŠ” μ œμ‹œλœ 이미지와 λΉ„μŠ·ν•˜κ²Œ κ°€μ§€λ§Œ id μ˜†μ— 이미지λ₯Ό λ„£κ³  μ‹Άμ—ˆλ‹€. 같이 ν•˜λŠ” 것도 μ’‹μ§€λ§Œ 각자 30뢄정도 μ‹œκ°„μ„ κ°–κ³  ν•΄λ³΄κΈ°λ‘œ ν–ˆλ‹€. 이 κ³Όμ •μ—μ„œ λ‚˜λŠ” js νŒŒμΌμ—μ„œ {} imgλ₯Ό λ”°λ‘œ μΆ”κ°€ν•˜λ €κ³  ν–ˆμ§€λ§Œ λŠ₯λ ₯λΆ€μ‘±(...)으둜 ν•˜μ§€ λͺ»ν–ˆλŠ”λ° νŽ˜μ–΄λΆ„μ΄ μ–΄μ œ 배운 flexboxλ₯Ό ν™œμš©ν•΄μ„œ κ°„λ‹¨ν•˜μ§€λ§Œ μ„±κ³΅μ μœΌλ‘œ κ΅¬ν˜„μ„ ν•˜μ…¨λ‹€!!πŸ‘πŸ» μ•„λŠ”κ±Έ μ‘μš©ν•˜κ³  ν™œμš©ν•˜κΈ°κ°€ μ΄λ ‡κ²Œ μ–΄λ ΅κ΅¬λ‚˜! μ—­μ‹œ 많이 ν•΄λ³΄λ©΄μ„œ μ•Œμ•„κ°€λŠ” 것이 μ€‘μš”ν•˜λ‹€λŠ” 것을 λŠκΌˆλ‹€.
  • νŽ˜μ–΄ μ§„ν–‰ λ‚΄λ‚΄ μ˜μ‚¬μ†Œν†΅λ„ λ„ˆλ¬΄ 잘됐고 κ΅¬ν˜„ν•˜κ³  싢은 것도 ν•΄λƒˆκ³ , 무엇보닀 μ„œλ‘œ 만쑱슀러운 결과물이 λ‚˜μ™€μ„œ μ’‹μ•˜λ‹€πŸ™ŒπŸ» 혼자 ν•˜λ©΄ 슀트레슀 λ°›μœΌλ©΄μ„œ ν–ˆμ„ 것 같은데 νŽ˜μ–΄λΆ„μ΄λž‘ 같이 ν•΄κ²°ν•΄λ‚˜κ°€λŠ” 과정이 μž¬λ°Œμ–΄μ„œ μ‹œκ°„κ°€λŠ” 쀄 λͺ°λžλ‹€.
  • λ§ˆμ§€λ§‰μ— μ„œλ‘œμ˜ 신상(?)을 쑰금 λ‚˜λˆ„λŠ” κΈ°νšŒκ°€ μžˆμ—ˆλŠ”λ° μ „κ³΅μžλΆ„μ΄μ…¨λ‹€. κ·Έλž˜μ„œ μ•žμœΌλ‘œ 배울 것에 λŒ€ν•΄ 쑰언을 κ΅¬ν–ˆλŠ”λ° μ—΄μ‹¬νžˆ λŒ€λ‹΅ν•΄μ£Όμ…”μ„œ λ„ˆλ¬΄ κ°μ‚¬ν–ˆλ‹€ πŸ˜‡
  • νŽ˜μ–΄λ¦¬λ·°μ—μ„œ κ°μ‚¬ν•˜κ²Œλ„ 쒋은 ν”Όλ“œλ°± λ‚¨κ²¨μ£Όμ…”μ„œ 기뢄이 μ’‹μ•˜κ³ , 덕뢄에 λ‚˜λ₯Ό λŒμ•„λ³΄κ²Œ 됐닀.

πŸ’š 동기뢀여 μ„Έμ…˜

  • ν•œ λ§ˆλ””λ‘œ μ •λ¦¬ν•˜μžλ©΄, λ‚˜μ—κ² 울림이 μžˆλŠ” κ°•μ˜μ˜€λ‹€.
  • λ‚˜λŠ” μ˜¨κ°– 걱정을 μ‚¬μ„œ ν•˜κ³ , κ·Έ 걱정이 꼬리에 꼬리λ₯Ό λ¬Έλ‹€. 그런데 κ°•μ˜μžλΆ„μ΄ μ€€λΉ„ν•˜μ‹  κΈ€λ°°μš°μ˜ 글을 μ½μœΌμ‹œλŠ”λ° κ°‘μžκΈ° λ‚΄ 마음이 λ¨Ήλ¨Ήν•΄μ§€λ”λ‹ˆ κ°•μ˜λ₯Ό λ“£λ‹€κ°€ λ‚˜λ„ λͺ¨λ₯΄κ²Œ 눈물이 났닀.

κΈ€: κΈ€λ°°μš°

  • μΆ”κ°€λ‘œ 였늘 쀌 μ±„νŒ… λ³΄λ©΄μ„œ 웃겨 μˆ¨μ§€λŠ”μ€„ μ•Œμ•˜λ‹Όγ…‹γ…‹γ…‹γ…‹γ…‹γ…‹γ…‹πŸ€£πŸ€£πŸ€£ λ‚˜μ€‘μ— 보면 웃을라고...
    • μ‘Έμ—…ν•œ 선배쀑에 μ „λ„μ‚¬λ‹˜ κ³„μ…¨λŠ”λ° μ–΄λ–€ λΆ„μžŒγ…‹γ…‹γ…‹γ…‹γ…‹ μ½”λ”© μ•ˆλ λ•Œ 기도 버프받냐곸ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ μ•„ μ§„μ§œ 웃닀 λˆˆλ¬Όλ‚¬λ‹€. 와 μ§„μ§œ λ„ˆλ¬΄μ›ƒκ²ΌπŸ€£
    • μ–‘νŒŒ γ…‹γ…‹γ…‹γ…‹ μ–‘νŒŒ 무더기λ₯Ό ν‚€μš°λŠ”λ° ν•œ λ¬΄λ”κΈ°μ—λŠ” 쒋은 말, ν•œ λ¬΄λ”κΈ°μ—λŠ” λ‚˜μœ 말 ν•΄μ€¬λŠ”λ° 쒋은 말을 ν•΄μ€€ μ–‘νŒŒ λ¬΄λ”κΈ°λŠ” 골고루 잘 μžλžλŠ”λ° λ‚˜μœ 말 무더기 μ–‘νŒŒλŠ” 자람이 λ“€μ­‰λ‚ μ­‰ν–ˆλ‹€. κ·Έλž¬λ”λ‹ γ…‹γ…‹γ…‹γ…‹ κ°•ν•˜κ²Œ 컀야 μž˜ν°λ‹€κ³Έγ…‹γ…‹γ…‹γ…‹γ…‹ λ‚˜μœ 말 λ“€μ–΄μ•Ό 정신차리고 더 μž˜ν°λ‹€κ³Έγ…‹γ…‹γ…‹γ…‹γ…‹γ…‹γ…‹γ…‹γ…‹γ…‹γ…‹ μ•„ λ„ˆλ¬΄μ›ƒκ²Όλ‹€.

🀍 μ„±μž₯을 μœ„ν•œ λͺ©ν‘œ

μ§€κ°‘ μ•ˆμ— λΆ€μ μ²˜λŸΌ κ°„μ§ν•˜κ³  κΊΌλ‚΄λ³Ό, 동기뢀여가 될 λ‚˜μ˜ λͺ©ν‘œλ₯Ό μ μ–΄λ³΄λŠ” μ‹œκ°„μ΄ μžˆμ—ˆλ‹€. 마침 λ©°μΉ  μ „ μš°μ—°ν•œ(?) 기회둜 뭘 보게 λ˜μ—ˆλŠ”λ° κ·Έκ±Έ λ³΄λ©΄μ„œ κ°€κ³  싢은 νšŒμ‚¬κ°€ λͺ©ν‘œκ°€ 생겼닀! 무렀 λ‚˜μ˜ 인생 λͺ©ν‘œμ™€ κ΄€λ ¨λ˜μ–΄ 일석 3쑰의 효과λ₯Ό λˆ„λ¦΄ 수 μžˆλ‹€! κ·Έλ‚ λΆ€ν„° κ°œλ°œμ„ κ³΅λΆ€ν•˜λŠ” 데 μ—„μ²­λ‚œ 동기뢀여가 λ˜μ—ˆκ³  λ“€λ– μžˆμ—ˆλŠ”λ° 마침 였늘 λ‹€μ‹œ κ°κ΄€μ μœΌλ‘œ 생각을 μ •λ¦¬ν•˜λŠ” μ‹œκ°„μ΄ 됐닀. 이미 μ˜¨κ°– ꡰ데 λ‹€ λΆ™μ—¬λ†¨λŠ”λ° 쑰금 더 κ΅¬μ²΄ν™”ν•΄μ„œ 이루기 μœ„ν•΄ ν•  수 μžˆλŠ” 것듀을 적어봐야지!

 

πŸ’œ Today was ...

  • λ°±μ—”λ“œ μ—”μ§€λ‹ˆμ–΄ μ‚μ•½μ΄λ‘œ ν”„λ‘ νŠΈλ₯Ό μ΄ν•΄ν•˜λŠ” 관점(?)이 맀우 μƒ‰λ‹¬λžλ‹€. μ‹œλ§¨ν‹± νƒœκ·Έμ— λŒ€ν•΄μ„œ 생각해볼 수 μžˆλŠ” κΈ°νšŒμ˜€λ‹€.
  • CodeSandBoxλΌλŠ” 툴(?)을 μ‚¬μš©ν–ˆλŠ”λ° μ•„μ‰¬μš΄ 점이 λ§Žλ‹€. λΌμ΄λΈŒκ°€ 잘 μ•ˆλΌμ„œ VSCodeλ₯Ό μ„€μΉ˜ν–ˆλŠ”λ° νƒ€μž…μŠ€ν¬λ¦½νŠΈ npm이 없어가지ꡬ 울며겨자먹기둜 λ‹€μ‹œ 툴둜 λŒμ•„μ™”λ‹€. λ‹€ν–‰μŠ€λŸ½κ²Œ 잘 λ§ˆλ¬΄λ¦¬ν•˜κΈ΄ ν–ˆλŠ”λ° λ‚˜λ‚˜ νŽ˜μ–΄λΆ„μ΄λ‚˜ 계속 μ—λŸ¬κ°€ μžˆμ–΄μ„œ λΆˆνŽΈν–ˆλ‹€.
  • νŽ˜μ–΄ ν”„λ‘œκ·Έλž˜λ°μ΄ λλ‚˜κ³  λ‹€λ₯Έ 뢄듀이 κ΅¬ν˜„ν•œ 것을 λ³Ό 수 μžˆμ—ˆλŠ”λ°(a.k.a. μžλž‘νƒ€μž„) μ™œ μžλž‘νƒ€μž„μ΄λΌκ³  ν•œμ§€ μ•Œ 것 κ°™μ•˜λ‹€! λ‹€λ“€ μž˜ν•΄μ„œ κ΅¬κ²½ν•˜λŠ” μž¬λ―Έκ°€ μ μ ν–ˆλ‹€!
  • 였늘둜써 퍼블리싱이 끝났닀. μ•žμœΌλ‘œ 배울 것듀이 κΈ°λŒ€λœλ‹€!πŸ₯°