김재욱의 이모저모

개인 프로젝트를 진행하다가 컴포넌트 겹침 문제로 링크 클릭이 되지 않아 애를 먹은 기억이 있다. 나는 해당 컴포넌트를 클릭하면 링크를 타고 다른 페이지가 열리도록 코드를 작성했는데 배경으로 만든 컴포넌트가 위에 있다고 인식되어 원하는 컴포넌트가 아닌 배경 컴포넌트가 클릭되는 현상이 생겼었다. 아래 사진이 문제 해결 전 마우스 커서가 배경 컴포넌트 위에 있다고 인식될 때의 화면이다. 아래 사진은 문제 해결 후 마우스 커서가 해당 이미지 컴포넌트 위에 있다고 인식될 때의 화면이다. 이러한 문제를 해결하기 위해서 z-index 라는 개념을 찾아서 활용하였다. 사실 이때까지는 배경에 컴포넌트를 둘 일이 없어서 고민해보지 않은 문제였는데, 많은 컴포넌트를 담고 있는 화면을 만들어야 할 일이 생긴다면 꼭 z-ind..

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

대회 홍보용 웹 페이지를 만들다가 css적용에 어려웠던 점이 있어서 이것을 글로 남겨볼까 한다. 내가 구현하고 싶었던 것은 단순한 우측 정렬이었다. 이 사진 속의 엘리먼트들 중 제목이 아닌 메뉴들을 우측으로 보내고 싶었다. 위 엘리먼트들의 간단한 코드이다 제 3회 한국항공대학교 프로그래밍 경진대회 대회 규칙 대회 정보 유의 사항 Float 처음으로 생각난 방법은 간단하게 float를 사용하는 것이었다. float: right; 하지만 float를 사용하면 위 사진처럼 헤더의 밑 padding 부분이 깨진다. 웹 개발 경험이 많이 없어 이런 문제가 생길 줄은 몰랐는데, float를 사용하면 부모 컴포넌트 height 등 레이아웃에 문제가 생긴다고 한다. Flexbox 요즘은 위와 같은 이유로 float의 ..

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

웹 페이지를 만들기 위해 작년, 재작년의 페이지들을 보면서 내가 가장 관심이 갔던 부분은 움직이는 그림들이었다. 저런 애니메이션들은 내가 svg, png 파일들을 주입하는 것처럼 그냥 mp4나 gif 파일을 찾아서 주입하면 되는 건가?라는 의문이 들었고 git 주소를 받아서 뜯어본 결과 Lottie를 이용하여 애니메이션을 주입하신 거였다! https://lottiefiles.com/ LottieFiles: Download Free lightweight animations for website & apps. Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Creat..