개발 메모장 개발 메모장

CSS

• React에서 스크롤을 하단에 고정하는 방법(feat. css)

  Tip 2024. 9. 7. 14:22

  채팅 등의 서비스를 만들 경우 스크롤을 하단에 고정해야 되는 경우가 있습니다.간단하게 스크롤을 하단에 고정하는 방법에 대한 구현에 대해 알아보겠습니다.1. React 사용import { useEffect, useRef } from 'react';const Chat = ({ messages }) => { const endOfMessagesRef = useRef(null); useEffect(() => { endOfMessagesRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]); return ( {messages.map((msg, idx) => ( {msg} ))} )..

  Read More
• vh 버그 해결 방법(feat. safari)

  Tip 2024. 3. 19. 13:45

  웹 디자인의 세계에서 요소의 크기와 크기 조정은 웹 사이트가 다양한 장치에서 반응하고 시각적으로 매력적 이도록 하는 데 중추적인 역할을 합니다. 반응형 디자인에서 중요한 역할을 하는 두 가지 측정 단위는 vh(뷰포트 높이)와 vw(뷰포트 너비)입니다. 이러한 단위는 디스플레이 장치에서 웹 페이지의 표시 영역인 뷰포트의 크기에 따라 조정되는 동적입니다. 하지만 언제나 그렇듯이 모바일 safari에서 문제가 있습니다. 요소의 높이를 100vh로 설정하면 브라우저의 vh 계산에서는 주소 표시줄과 같이 동적으로 크기 조정이 가능한 UI 요소를 고려하지 않습니다. 결과적으로 vh로 설정된 높이가 실제 표시되는 뷰포트 높이를 초과하는 콘텐츠 오버플로가 발생할 수 있습니다. 1. 동적 vh 계산을 위한 JavaScr..

  Read More
• px vs rem

  CSS 2024. 3. 1. 12:24

  웹 개발의 끊임없이 변화하는 환경에서 스타일링을 위해 px와 rem 중 어느 것을 사용할지 선택하는 것은 웹사이트의 접근성과 반응성에 큰 영향을 미칠 수 있습니다. 1. px와 rem은 무엇인가요? px: px는 디지털 디스플레이에서 단일 광점을 나타내며, 디지털 그래픽에서 기본 측정 단위입니다. 절대 단위로, 설정된 정확한 크기로 표시됩니다, 사용자의 화면 해상도나 크기에 관계없이 말이죠. rem: rem 단위는 루트 요소()의 글꼴 크기에 상대적입니다. 루트 요소의 글꼴 크기가 16px(일반적인 기본값)이라면, 1 rem은 16px와 같습니다. 이를 통해 다양한 장치에서 확장 가능하고 접근 가능한 디자인을 가능하게 합니다. 2. 언제 px 또는 rem을 선택해야 할까 2.1 px이 더 나은 경우는? ..

  Read More
• 간단하게 카드 리스트 간격 주기 (feat. 오늘의집)

  CSS 2022. 11. 23. 16:30

  프로젝트를 진행할 때 카드 사이에 간격을 주는 것은 대부분의 프로젝트에서 빠지지 않는 UI입니다. 그리고 그런 카드 리스트의 간격이 카드의 위치마다 달라지기 때문에 다양한 CSS를 이용하여 구현합니다. // exam 1 & li + li { margin-left: 20px; } // exam 2 & li { margin-right: 20px; &:nth-child(3n) { margin-right: 0px; } } // exam 3 & li:not(:last-child) { margin-right: 20px; } exam 1처럼 앞에 li가 있을 경우에만 margin을 20px 주는 방식도 있고, exam 2처럼 특정 배수의 카드마다 margin을 재할당 해 주는 방식, exam 3처럼 줄 단위로 설정한..

  Read More
• Stylelint를 이용해 css 정리하기 (feat. Styled-Components)

  React 2022. 11. 14. 15:15

  (이 글은 MacOS, VSCode, postcss@8.4.19, postcss-jsx@0.36.4, stylelint@14.14.1, react@18.2.0을 기반으로 작성되었습니다.) Eslint는 이제 React로 개발을 진행할 때 혼자 하는 프로젝트에서는 물론이고 같이 협업하는 프로젝트에서는 거의 필수적으로 사용하는 라이브러리입니다. 주로 Eslint + Prettier을 이용해 자동으로 Eslint에서 설정한 룰과 Prettier에서 추가한 내용에 대하여 수정하는 식으로 진행하기에 더욱 사랑받고 있는 것 같습니다. 여기에서 style에 대해서는 이런 툴이 없을까 하는 생각에 발견한 것이 바로 Stylelint입니다. 이거다 하는 생각에 신나게 설정을 진행했을 때 당황할 수밖에 없었습니다. 제가 ..

  Read More
• 버튼의 크기는 고정한 채 선택 영역만 늘리기

  CSS 2022. 10. 26. 17:00

  프로젝트를 진행할 때 버튼의 사이즈는 무척 중요한 요소입니다. 특히 모바일이나 태블릿의 경우에는 그 중요성이 더 커진다고 생각합니다. 왜냐하면 PC의 경우 작은 사이즈의 버튼이라도 마우스라는 도구를 이용하기 때문에 상대적으로 정확한 위치를 선택하기 편한 반면 모바일이나 태블릿의 경우 선택의 주체가 대부분 손가락이기 때문입니다. 물론 버튼의 사이즈 자체를 키우는 것이 가장 이상적인 방법이지만 그렇지 않은 경우에 자주 사용하는 팁에 대해 설명해 보겠습니다. const Button = styled.button` position: relative; width: 20px; height: 20px; border-radius: 10px; background: tomato; &::after { content: ""; ..

  Read More
• NextJS Babel에서 SWC로 이사가기 2

  Next.js 2022. 5. 20. 12:21

  ( 이 글은 next@12.1.6, antd@4.20.5를 기반으로 작성되었습니다. ) 이전 글에 이어 Babel에서 SWC로 넘어갈 수 없었던 가장 큰 이유를 해결한 방법에 대해 써보겠다. 1편에 썼던 내용 중 styled-components에 대한 swc지원은 가장 빠른 수준으로 작성되었기에 해당 부분에 대해서는 큰 문제가 없었다. 하지만 가장 큰 문제는 내가 즐겨 사용하는 antd의 customize theme를 이용하지 못하는 문제였다. 해당 기능을 NextJS에서 이용하기 위해서는 next-plugin-antd-less라는 플러그인을 사용해야 한다. 이곳에서 문제가 발생했기에 여러 시행착오를 겪어야 했다. 1. antd의 Dynamic Theme (Experimental)을 활용하기 이 방법은 ..

  Read More
• 효과적인 CSS애니메이션 활용

  CSS 2021. 10. 7. 11:23

  개발을 할 때 애니메이션은 필수적인 요소라 해도 과언이 아니다. 하지만 애니메이션을 잘못 사용한다면 애니메이션이 버벅거리는 느낌이 들거나, 사이트 자체가 느려 보이는 효과가 날 수 있다. 이는 애니메이션을 사용할 때 사용한 CSS 속성의 문제인데, 여기에서는 크게 Layout을 다시 그리는(Reflow)와 Paint를 다시 하는(Repaint) 그리고 이 둘 모두를 안 하는 속성이 있다. 우리는 당연히 최대한 다시 그리는 것이 적은 요소를 사용해야 하고, 웬만하면 Reflow와 Repaint를 모두 하지 않는 속성을 사용하는 것이 좋다. 그럼 거두절미하고 3가지 경우에 해당하는 속성들을 보여주겠다. Reflow가 일어나는 대표적인 속성 position width height left top right b..

  Read More