[TIL] 코드스테이츠 SEB BE Day 4

in TIL

💡 Today I Will Learn

  • Pair Programming
  • twittler 목업 구현

✏️ Summary

  • twittler 목업 구현

    목업_결과물

    페어와 진행한 twittler 목업이다. js는 실제 구현하지 않았지만 매니저님들의 배려? 덕분에 Event가 등록되어있어 재밌는 실습이었다.
    진행하면서 있었던 Issue를 노트해보려 한다.

    • Selector의 효율적 사용

      <div id ="writting">
  <span id = "userName">Username</span>
  <input type="text" id="usernameInput">
  <span id = "message">Message</span>
  <textarea id="messageInput"></textarea>
  <button id="tweetButton" >Tweet!</button>    
</div>

      div태그 내에 존재하는 모든 태그에 margin을 적용하기 위해 div하위 모든 태그에 동일한 class명을 부여하여 적용하려 하였다.

      #writting *{
  margin-bottom: 5px;
}

      위의 방법을 적용하려 생각해보니 복합 Selector를 떠올리게 되었다. Writting Id 하위에 모든 후손들에게 margin을 적용하는 코드를 사용하면 모든 태그에 class를 명명하여 코드가 조잡해질 일은 피할 수 있다.

    • flex의 활용 댓글 ul내 username, createdAt, message의 배치를 고려하던 중 box모델인 createAt을 diplay: inline-block 으로 설정하여 줄바꿈 하지 않게 설정하였다.
      view는 적절히 보이나 세부적으로 보았을 때 username과 createdAt이 차지하는 height가 서로 일치하지 않아 다른 이슈를 야기할 수 있다고 판단하였다.

      /* 리스트 li tag */
.white{
  border-bottom: 1px solid gray;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;

}

/* span 유저네임 */
.tweet__username{
  font-weight: bold;
  font-size: 1.2rem;
  flex-basis: 60%;
}

/* div 생성날짜 */
.tweet__createdAt{
  text-align: right;
  font-size: 0.8rem;
  height: 26px;
  flex-basis: 40%;
}

/* div 메시지 */
.tweet__message{
  font-size: 1rem;

}`

      따라서 flexbox의 flex-wrap과 flex-basis(콘텐츠의 크기를 초기에 구성) 속성을 통해 username과 createdAt이 공간을 차지하면 message가 줄바꿈 되도록 설정하여 height를 일치시켜 일관성을 유지하였다.

    • 디자인 및 배치에서의 특이사항

      • padding, margin 등 4방향 옵션에서 parameter가 2개일 경우

        padding: 상하 좌우 ;
margin: 상하 좌우 ;

        gap 속성을 이용하여 내부 childeren 요소의 간격을 지정할 수 있다.
        매번 margin으로 간격을 띄울 필요가 없다는 것이다.

      • rem vs em
        폰트 사이즈를 지정할 때 페어가 추천해준 옵션이다.
        em은 상위 태그를 기준으로 사이즈를 지정하는 반면 rem은 최상위(ex. html) 태그를 기준으로 사이즈를 지정하여 크기의 일관성을 유지할 수 있다.

📌 정리

첫 페어프로그래밍은 생각했던것 보다 훨씬 긍정적이었다. 페어의 적극적인 자세와 피드백으로 네비게이터, 드라이버 역할 수행이 원활하였고 남은 시간에 진행하면서 부가적으로 수정해야할 부분까지 같이 논의하였다.
지금처럼 긍정적인 페어만 만날 수 없지만, 그만큼 내가 노력한다면 항상 페어와 좋은 성과를 낼 수 있을거라 자신한다💪

다음주의 Linux와 Github 실습은 더더욱 기대된다. 원체 따분한 CLI창과 노는 것을 흥미롭게 생각했던 나이기에…..🌈

🎯 Next Week

  • CLI
  • 패키지와 패키지 매니저
  • Permission, 환경변수

Back to [TIL] 코드스테이츠 SEB BE Day 3