다시 시작된 개인 과제..
그럼 뭐다?
트러블 슈팅이다..
순조롭게 파일 구조를 만들고 패키지 매니저를 설치하고 라이브러리를 설치하고 기본 컴포넌트를 만들고 있었다.
이번에는 CSS를 Tailwind CSS를 사용하려고 해당 라이브러리 설치 후 CSS를 적용했는데...
이상하게 적용이 안되는거임;;
그래서..
내가 pnpm으로 패키지 관리를 하는데 yarn을 통해서 Tailwind를 설치해서 오류가 나는가? 싶어서 삭제하고 다시 설치했지만 적용이 되지 않았다..
그럼 오류가 뭔가..?
콘솔창을 확인해보니 다른 오류는 있지 않았다.
그렇다면 다른 페이지에서도 적용이 안되는지 확인을 위해 다른 파일에도 적용했지만 똑같이 스타일이 변경되지 않았다.
검색을 해보니..?
tailwind.config.js의 적용시키는 모듈을 module.export로 지정해야된다거나, index.jsx부분에 적용시켜야 된다는 얘기도 있었다.
(사실 많이 믿지는 않았지만.. 그래도..)
그래서 해당 방법들을 적용했지만... 역시나 작동 X
그러다가..
tailwind 설치 후 관리하는 파일을 삭제 후
구글에 존재하는 스켈레톤 코드로 적용하니까 되는거임?!
그래서 뭐가 다르지 하고 찾아봄;;
 스타일 미적용 코드 |  스타일 적용 코드 |
|---|
혹시 차이를 알겠나요?
바로 공백입니다...
content의 들어가는 내용은 tailwindCSS가 적용되는 파일을 지정하는 부분인데 마지막 부분의 확장자들을 골라주는 부분에서 공백을 넣으면 잘못된 인식을 해서 적용되지 않는 것이였다..
이후 수정하여 헤더 부분에 스타일이 적용됐다.
사실은..
검색할 때 Content의 경로를 똑바로 작성되있는지 확인해보라는 내용이 있었는데
나는 틀리게 쓰지 않았으니까 이 부분은 문제가 없을거야~ 하고 넘겼었다.
아 정말 후회하는 부분이다.
사실 알았더라도 공백에 대해선 의심을 하진 못했겠지만 그래도 개발자는 이런 사소한 부분에도 의심이나 확인을 해야하는데..
그런 부분에서 아쉬움을 많이 느끼는 것 같다.
정말 오류는 작은 부분에서 많이 발생한다.
그런 부분을 캐치할 수 있는 역량을 키우는 것도 개발자의 목표 중 하나라고 생각한다.
오류는 작은 부분에서도 일어난다.
언제나 옳은 건 없다.
