005 | Practical | Twittler Mockup Implement

Notice

Notice

Recent Posts

Recent Comments

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

Today

Total

관리 메뉴

나의 모양

005 | Practical | Twittler Mockup Implement 본문

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,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" />
        <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. 자랑타임) 왜 자랑타임이라고 한지 알 것 같았다! 다들 잘해서 구경하는 재미가 쏠쏠했다!
오늘로써 퍼블리싱이 끝났다. 앞으로 배울 것들이 기대된다!🥰

'SEB > TIL' 카테고리의 다른 글

007 \| Git & Github (0)	2022.07.01
006 \| Linux Basic (0)	2022.06.30
004 \| Page Layout, Web/App 화면 설계 (0)	2022.06.28
003 \| HTML, CSS (0)	2022.06.27
002 \| 컴퓨터와 프로그래밍의 이해 / 웹 클라이언트와 웹 서버 (0)	2022.06.24