[바닐라코딩 프렙] 1주차 후기

바닐라코딩 프렙 1주차의 경우, 기본적인 문법 & Git의 사용방법 등을 한 번 Review하면서 메신저 기능을 구현하는 과제가 있었다. 고작 1주차가 지났음에도 개선해야할 점들이 너무 많이 보인다. 바닐라코딩에 관심이 있으신 분들이 볼 수 있도록 회고 & 배운 점 등을 정리해두려고 한다.

바닐라코딩 프렙 과정은 Office hour (월, 금)와 과제(월요일에 내주셔서 금요일까지!), 코드리뷰(주말 간)으로 나뉘어진다.

코드리뷰를 통해서, 얻어야할 것은 다른 분들의 관점을 참고하여 내 코드를 더욱 개선하는 것 (속도, 가독성)이 중요하다.

첫번째 과제의 To-Do는 크게 정리하면 다음과 같다:

1) http:// 가 포함된 주소의 경우 Hyperlink 처리
2) 메시지를 입력할 때, 입력시간을 받아오기
3) 메시지를 입력받고, Value를 브라우저에 표시

완성된 본은 https://github.com/Hyunwooksuh의 저장소에서 참고 가능하시니 바닐라코딩 PREP의 전반적인 내용이 궁금하시면 참고 부탁드린다.

이번 과제에서 피드백을 통해 개선하고자 하는 점은:

• 메세지 입력 창을 예쁘게 구현 (HTML/CSS 능력 부족...)
• 링크를 누르면 새 페이지를 열어서 이동할 것
• 간결성을 위해 string literal을 사용할 것
• 간결성을 위해 변수선언 시 destructing을 사용할 것
• value를 submit 시 버튼 뿐 아니라 엔터로도 가능하게

이 문제점 들 중 오늘은 허접한 메신저 창을 '봐줄만하게' 바꾸는 것을 정리해보려고 한다.
기능을 구현했으나, 적어도 형태는 나와야 하므로...

메신저 입력 창을 구현하기 위해서는 폼 테그(Form tag), Input tag와 배치를 위한 CSS 스킬이 필요하다. 수정에 앞서 부족했던 개념들을 간단히 정리하면,

폼(form): 사용자 정보를 받아 서버로 보내주고, 이를 처리하여 다시 브라우저에 보여주도록 하는 역할
action : 폼을 전송할 서버 쪽 스크립트 파일을 지정
name : 폼을 식별하기 위한 이름
target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

폼을 구성하는 다양한 요소
<input> : 폼 테그에 입력할 수 있는 공간을 만들어 줌

• type: 태그 모양을 다양하게 변경. text, radio, checkbox, password, button, submit 등이 있음
• name: 태그 이름을 지정함
• required: 해당 태그가 필수태그로 지정되어, 입력하지 않고 submit 버튼을 누르면 에러메세지가 출력됨
• placeholder: 태그에 입력할 값에 대한 힌트를

<textarea> : 여러 줄을 입력받는 태그. 속성 중에 rows와 cols가 있으며, rows는 줄을, cols는 한 줄에 입력될 크기를 지정

CSS Position 속성
참고: Suyeon Bak님의 블로그

• position: static
  기본적으로 셋팅되어 있는 position 속성으로서, top, bottom 등이 반영되지 않음. HTML의 일반적인 흐름대로 배치가 됨
• position: relative
  처음 위치로 부터 상대적인(relative) 위치로 수정할 수 있음. 즉, top, bottom 등이 반영됨. 이 경우, 다른 element에 영향을 받지 않아 글자가 겹칠 수도 있음
• position: absolute
  HTML의 일반적인 흐름을 따르지 않고, 가장 가까운 위치에 있는 element의 상대적인 위치에 배치가 됨. 주변 element가 없으면 문서 본문(body)을 기준으로 페이지 스크롤에 따라 움직임.
• position: fixed
  마찬가지로, HTML의 일반적인 흐름을 따르지 않고 스크린을 기준으로 한 위치에 배치됩니다. 스크롤을 내려도 그대로의 위치를 고수함.

CSS Flex 속성
참고: 1분코딩
Flex 속성은 수평적인 레이아웃을 만드는 속성으로, 컨테이너에 적용하는 속성과 아이템에 적용하는 속성으로 나뉜다.
자세한 부분은 1분코딩의 내용을 참고 부탁드린다.

이제, 이 예쁘지 않은 메세지 입력창을 바꿔볼 차례다. 저 허접한 버튼을 누르면 전송이 되도록 기능을 짰지만, 굉장히 허접해보이는 문제가 있다.

문제점은 일단 별로 사용하고 싶지 않은 촌스러운 버튼, 그리고 메세지를 입력하면 스크롤이 내려가는 저 모양이 있다. JS가 동작하는 것은 둘째치고, 저걸 수정하는 것이 급선무이다.

  <form class="message-container">
    <input type="text" id="new-message" name="new-message" required>
  </form>
  <button id="message-button"><img src="asset/right-arrow.png"></button>

먼저, html부분을 보면 버튼이 form 밖에 있으므로, 이를 집어 넣고, 촌스러운 버튼 이미지는 빼도록 한다.

  <form class="message-container">
    <input id="message-input" type="text" placeholder="메세지를 입력하세요" required>
    <button id="message-button">보내기</button>
  </form>

button을 form 태그에 넣어, 좀 더 semantic하게 수정하였고, id를 병렬로 놓아 좀 더 보기 좋게 했으며, placeholder로 설명을 추가하였다.

CSS의 경우, 다음과 같이 수정하였다.

.message-form {
  position: fixed;
  height: 3rem;
  left: 0;
  bottom: 0;
  width:100%;
  display: flex;
}
.message-input {
  flex-grow: 1;
  padding-left: 1rem;
}
.message-button {
  flex: 0 1 5rem;
}

먼저, 컨테이너 전체를 flex로 묶어, flex item에 메세지 입력창(input) 및 button이 속하도록 하였다. Message form의 경우 스크롤을 올리고 내려도 움직이지 않도록 고정하기 위해 postion:fixed 속성을 주었으며, height를 사용하여 메세지 창의 높이를 조정하였다.

참고로, flex-grow의 경우 아이템의 너비를 늘리는 것으로, 1을 지정하게 되면, input창과 버튼이 1:1만큼씩 추가적인 너비를 나눠가지게 된다.

다소 담백하긴 하지만 드디어 괜찮은 메신저 창을 만든 것 같다. 다음 시간에는 tic-tac-to를 구현할 예정이다.