김재욱의 이모저모

대회 홍보용 웹 페이지를 만들던 중 페이지를 이쁘게 디자인하기 위해서 아이콘을 사용하고 싶었다. 그래서 내가 처음 사용했던 방법은 react-icons를 사용하는 것이었다. react-icons에 많은 icon이 존재하지만 맘에 드는 아이콘이 없어서 고민하다가 이모 지라는 것을 알게 되었다! 우리가 핸드폰에서 많이 사용하는 자그마한 이모티콘들을 이모지라고 부르는데 😄 이러한 친구들을 그냥 복사 붙여 넣기 하거나 html에 이모지 특수문자 코드를 입력하면 된다. https://snskeyboard.com/emoji/ 이 사이트에서 이모지를 찾아서 사용했습니다. 나는 vscode에서 코딩 언어로 typescript를 사용했는데 그냥 이모지 맘에 드는 걸 클릭해서 복사를 하고, vscode에 붙여 넣기를 하면..

우리의 프로젝트를 진행하면서 자주 사용할 UI들은 컴포넌트를 만들어서 여러 페이지에서 사용하려고 했다. 하지만 아래의 이미지의 컴포넌트를 하나의 컴포넌트로 관리하자는 말이 있어서, 이를 어떻게 설계해야 할지 고민해야 했다. 위 컴포넌트는 ListItem이라는 컴포넌트였고, 이 컴포넌트에는 Icon, Title, Description이라는 값이 들어갈 수 있다. Title은 반드시 들어가야 하는 값은 Title 값이고, Description과 Icon 값은 존재할 수도 존재하지 않을 수도 있다. 처음에는 Icon과 Description의 유무에 따라 해당 컴포넌트의 Wrapper를 따로 작성하였다. 이렇게 코드를 작성하니 Wrapper를 총 3개 작성해야 했고, 앞으로 다른 경우의 수가 생긴다면 최대 8개..