성장일기

🤔 문제 상황 react-markdown을 적용이 안되서 찾아보니까 tailwind가 기본적인 html의 스타일을 제어하고 있어서 그냥 적용하면 안된다는 것을 알았다. 그래서 마크다운을 사용할 부분만 tailwind의 스타일이 적용되지 않도록 해야한다. ✅ 해결 방법 다행히 tailwind 자체에서 markdown 컴포넌트를 사용할 수 있도록 플러그인을 제공하고 있었다. 해당 플러그인을 사용하면 하위 태그는 tailwind 스타일이 적용되지 않는다. @tailwindcss/typography 설치 https://tailwindcss.com/docs/typography-plugin$ npm install @tailwindcss/typography tailwind.config.js 파일에 플러그인 추가// ..

🤔 문제 상황 현재 tailwind와 styled-components가 결합된 tailwind-styled-components를 사용하고 있는데 이미지 슬라이더가 필요했다. 찾아보니 carousel이 정식 명칭이었고 찾아보니 사용할 수 있는 소스가 많았다. 처음에는 간단할 줄 알았는데 구현하는데 거의 이틀이 걸렸다. 세 가지 프레임워크를 사용해봤는데 결론적으로 react-slick을 사용했다. 실패 기록 flowbite 이미 navbar를 flowbite로 구현했던지라 그 안에서 해결하고 싶었다. 그래서 flowbite에도 좋은 carousel이 있길래 사용하려고 했는데... 실패했다. 거의 하루를 붙잡고 있었는데 공식 문서에 나와있는대로 복붙을 해도 안됐다. 이미지를 싸고 있는 div를 벗기니까 이미지..

🤔 문제 상황 Typescript 환경에서 Tailwind와 styled-components를 함께 사용하는 tailwind-styled-components를 사용하던 중, 공통적으로 사용되는 컴포넌트의 스타일을 prop로 받아서 적용하고 싶었다. 즉, 동적으로 클래스를 할당하려고 한 것이다. 셋을 함께 사용하면서 작성하는 과정이 꽤나 까다로웠기에 기록해본다. ✅ 해결방법 tailwind와 동적 클래스 Tailwind의 공식 문서는 동적 클래스 사용을 지양하라고 써있다. 정규표현식을 통해 단어의 있는 그대로를 가져와서 클래스로 적용하기 때문에 코드적으로 분석이 필요한 부분은 건너뛰어버리기 때문이다. 그래서 아예 동적 클래스를 못 쓰느냐? 그건 아니다. 중요한 것은 '완전한 상태의 단어'로 ..

🤔 문제 상황 Semantic-ui-react를 사용해서 css 스타일링을 하는데 추가로 커스터마이징이 필요했다. 그래서 클래스명을 사용한 덮어쓰기도 해보고, 태그를 사용하여 추가해봤지만 무용지물이었다. !important만이 방법인가... 하고 있던 중 좋은 글을 발견해서 실마리를 찾았다 참고: Customizing the Semantic UI React library with Styled Components ✅ 해결 방법 보통 css에서 !important를 사용되는 것은 지양된다. 모든 우선순위를 무시한 채 최상위에서 적용되기 때문에 어떤 부작용이 나타날지 모르기 때문이다. 하지만 styled-components를 사용하면 말이 달라진다. styled-components는 자체 class명을 컴포넌..

🤔 BEM이란? Block / Element / Modifier 세 가지로 구성된 class이름을 짓는 방법 📌 미사용시 Find Kakao Account of Password #login-form input:not([type="submit"]) { border-bottom: 1px solid rgba(0, 0, 0, 0.2); transition: border-color 0.3s ease-in-out; } #login-form input[type="submit"] { background-color: var(--yellow); cursor: pointer; padding: 20px 0; border-radius: 5px; }📌사용시 welcome to kakaoTalk If you have a Kakao..

🤔 문제점 #login-form input:focus { border-color: var(--yellow); } #login-form input:not([type="submit"]) { border-bottom: 1px solid rgba(0, 0, 0, 0.2); transition: border-color 0.3s ease-in-out; } 아래 transition 코드가 작동하지 않는 상황 📌 원인 css의 cascading 중요도 명시도 코드 순서 세 번째 때문에 문제가 생겼다 border-bottom 이 구성되기도 전에 색상 설정(input:focus)이 작성되었기 때문 input:focus를 먼저쓰면 색을 설정해줘도 border가 없으니 적용이 불가능하고, 그 이후에 not으로 border-b..

뭘 만들까? input이 반쯤 걸친 header 만들기 내가 한 실수 library input을 header에 포함시켜 버린 것! 때문에 head의 margin이 input을 움직일때마다 변동되었다. 올바른 방법 library header와 input은 따로 작성할 것 search-bar는 relative로 움직이고, 안에 돋보기 아이콘을 absolute로 설정한 뒤 움직인다