[미니 프로젝트] 25JS Ideas (4 of 27)- Pass the message

Seungrok Yoon (Lethe)·2023년 7월 20일

CSS google material icon html vanilla javascript

[FE] 프로젝트 기록과 회고

목록 보기

7/7

네 번째 미니 프로젝트 - Pass the message

이 프로젝트는 input태그에 사용자가 입력한 값을 다른 요소가 접근할 수 있도록 하는 것이 핵심이었습니다.

생각보다 금방 끝날 것 같으니, 구현을 다 마친 다음에는 리팩토링을 함께 진행해보도록 하죠!😆

PR: https://github.com/SeungrokYoon/25-vanilla-javascript-projects/pull/17
site: https://animated-pony-97da24.netlify.app/

완성된모습

기본 마크업

카드 디자인을 보고 크게 위에서 아래로 세 부분으로 나누면 좋겠다는 생각을 했습니다.

제목이 있는 top
label과 input, 그리고 제출버튼이 있는 middle
input 의 값이 출력되는 bottom
이렇게 말이죠.

이것 설계를 바탕으로 아래와같이 마크업구조와 스타일을 잡았습니다. 추가적인 스타일링은 기능구현 이후에 하도록 할게요.

 <body>
    <div id="root">
      <div class="container">
        <div class="card">
          <div class="card-top">
            <h3>Pass the message</h3>
          </div>
          <hr />
          <div class="card-middle">
            <label for="message-input">Enter a message</label>
            <div>
              <button>icon</button><input id="message-input" type="text" />
            </div>
            <button id="submit">Submit</button>
          </div>
          <div class="card-bottom">
            <p id="output-message"></p>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="main.js"></script>
  </body>

기능구현

기능구현의 핵심은 버튼의 클릭이벤트, keydown 이벤트를 활용해서 input의 값을 카드컴포넌트 하단의 p태그에 업데이트하는 작업이었습니다.

keydown event

https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event

기능구현이 완료된 모습은 다음과 같습니다.

버튼을 클릭할 때, 엔터키를 누를 때 동일한 로직이 반복되는 것 같아

submitMessage함수로 값을 주는 쪽과 받는 쪽을인자로 받을 수 있도록 개선했습니다.

기능구현코드

const inputEl = document.getElementById('message-input');
const submitBtn = document.getElementById('submit');
const outputMessageEl = document.getElementById('output-message');

function submitMessage({ start, destination }) {
  const nextText = start.value;
  start.value = '';
  const currentDestinationText = destination.innerHTML;
  const isNewTextNotEmpty = nextText.length;
  const shouldUpdate = isNewTextNotEmpty && currentDestinationText !== nextText;
  shouldUpdate ? (destination.innerHTML = nextText) : '';

  if (!isNewTextNotEmpty) alert('The message is empty!');
}

submitBtn.addEventListener('click', (e) => {
  submitMessage({ start: inputEl, destination: outputMessageEl });
});

inputEl.addEventListener('keydown', (e) => {
  if (e.code === 'Enter') {
    submitMessage({ start: e.target, destination: outputMessageEl });
  }
});

스타일 추가

Google Material Icon 사용해보기

이메일 아이콘을 인풋 태그 옆에 넣을 예정입니다.

Google Material Icon은 폰트더라구요. 그래서 만약 아이콘을 기본 형태가 아닌 다른 형태 (outlined, two tone, round, sharp) 로 사용하고 싶다면, 구글 폰트 API를 사용하는 방식으로 스타일에 맞는 폰트를 불러와야서 HTML에 추가해줘야합니다.

이렇게요!

<link
      href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
      rel="stylesheet"
    />

이렇게 하고 나면, 다운로드받은 폰트에 따라 특정 클래스이름(material-icon, material-icon-outlined, 등등)에 자동으로 스타일이 적용되게 됩니다.

아이콘을 사용할 때는 아래와 같이 클래스 이름 + 클래스 요소 내부에 아이콘 이름 을 명시해 사용해주시면 되겠어요!

<span class="material-icons-outlined">
home
</span>

Hexcolor code에 투명도를 주고 싶을땐?

내가 사용하는 색상코드에 rgba처럼 불투명도를 주고 싶었습니다.
그렇지만 hexcode를 매번 rga로 변형하고, 거기에 alpha코드를 부여하는 것은 너무 불편해요.

그래서 검색해보았습니다. 투명도 수치를 4bit의 hexadecimal(16진수)로 표현해서 추가할 수가 있었습니다.

https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

React의 관점에서 리팩토링해보기

만약 이 프로젝트를 리액트로 제작했다면, 저는 카드의 레이아웃을 별도로 만들어, top, middle, bottom에 각각 children을 전달했을 것 같습니다.

//상상해본 리액트 컴포넌트 예시1
<MessageCardLayout 
	top={<h3>Pass the message</h3>} 
    middle={<>
         <label for="message-input">Enter a message</label>
            <div>
              <button>icon</button><input id="message-input" type="text" />
            </div>
         <button id="submit">Submit</button>} bottom={}/>
         </>
   bottom={<p id="output-message"></p>}
/>

만약 top에는 h3태그만 사용해야한다처럼 디자인이 확정되었다면, props로 텍스트만 전달해도 되겠네요.

또한 인풋태그와 아이콘은 하나의 컴포넌트로 추상화했을 것 같아요.

//상상해본 리액트 컴포넌트 예시2
<MessageCardLayout 
	top={"Pass the message"} 
    middle={<>
         <InputWithIcon src={} withIcon={true}/>
         <button id="submit">Submit</button>} bottom={}/>
         </>
   bottom={<p id="output-message"></p>}
/>