즐겁게, 코드

/* 적용할 CSS 규칙을 선언한다. */ vue.js는 컴포넌트 파일에 스타일을 함께 작성하곤 하는데, SCSS 문법을 지원해 nested CSS를 쉽게 작성할 수 있다. 다만 SCSS를 적용하는 동안 발생할 수 있는 이슈가 두 가지 있다. 1. "sass" is not defined 첫 번째는 sass 모듈이 인식되지 않을 때다. CRA로 리액트는 node-sass나 sass 모듈을 설치해주기만 하면 사전에 설정된 sass-loader에 의해 sass로 CSS 전처리가 가능하지만, 뷰는 sass와 함께 sass-loader를 함께 설치해줘야 한다. yarn add sass sass-loader​ 2. TypeError : this.getOptions is not a function 두 번째로 맞닥뜨리..

이슈 내용 : Enzyme 사용 시, mount 함수를 사용해 스냅샷 테스팅을 진행하면 TypeError: Cannot read property 'child' of undefined 오류가 출력됨. 간단한 오류입니다! Enzyme으로 테스팅을 진행할 때, 컴포넌트에는 아무런 오류가 없음에도 "Cannot read property 'child' of undefined" 라는 오류가 출력될 때가 있습니다. import { mount } from "enzyme"; import Profile from "./Profile"; describe("", () => { it("matches snapshot", () => { const wrapper = mount(); expect(wrapper).toMatchSnapsh..

/* app.css 파일 */ .example { background-image: url("/images/img.jpg"); } 불과 몇 개월 전 CRA 3.대 버전까지는 public 폴더에 에셋 폴더를 추가하고, 위와 같이 경로를 지정하면 public 폴더를 기준으로 리소스를 찾았다. 그런데, CRA 4.0.0 버전부터는 아래와 같이 오류가 출력된다. Failed to compile ./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!.. # 대략 src 폴더 안에서 해당 리소스를 찾을 수 없다는 내용 관련 이슈를 찾아보니, https://github.com/facebook/create-react-app/issues/10022 ..

📋 내용 : Tailwind CSS의 클래스로 스크롤바 숨기기 한 페이지에 컨텐츠가 전부 표시되지 않을 경우, 브라우저는 스크롤바를 통해 화면을 스크롤할 수 있게 합니다. 다만 이 스크롤바가 디자인을 해치는 경우가 있어서 스크롤바를 숨기고 싶은 경우도 많이 생기는데요, w3schools 에 나와있는 스크롤을 숨기는 방법을 살펴보겠습니다. /* 클래스명이 example인 요소의 스크롤바를 숨기는 코드 */ .example::-webkit-scrollbar { display: none; } .example { -ms-overflow-style: none; /* IE and 엣지 */ scrollbar-width: none; /* 파이어폭스 */ } 이 방법은 분명 동작합니다! 다만 추가적인 CSS 파일 생성..

📋 내용 : 리액트 코드 작성 시, vs code가 emmet 자동완성을 지원하지 않음. 저는 마크업을 작성할 때 에밋을 자주 활용하는데요, 갑자기 vs code에서 에밋을 지원하지 않아 난감했던 일이 있었습니다. 원래 지금까지 CRA를 사용해 리액트 프로젝트를 구성하면 jsx 파일에서는 언제나 에밋을 지원했는데, 이게 어떻게 된 일일까요? 이번 문제는 CRA가 아니라 create-next-app을 사용했을 때 발생했는데, 지금까지는 CRA에 포함된 웹팩 설정이 jsx 파일에서 에밋을 자동으로 지원하게끔 도와주는 것이었습니다. 그러나 create-next-app에는 이런 설정이 포함되지 않아 에밋이 갑자기 사라지게 된 것으로, 이럴 경우 에디터의 설정을 직접 수정해 에밋을 사용할 수 있게끔 해야 합니다...

내용 : 파일명 변경 후 임포트 시 Already included file name~ 에러가 출력됨. 원래 SignUpModal 이라는 이름의 파일을 SignupModal로 변경했더니 갑자기 빨간 줄이 그어지면서 알 수 없는 오류가 출력됩니다. 아마 바벨이나 웹팩 문제인줄 알고 발만 동동 구르실 수 있는데, 다행히 타입스크립트 설정으로 고칠 수 있는 문제였습니다. Already included file name~ 에러가 출력된다면 tsconfig.json의 옵션 중 forceConsistentCasingInFileNames 가 true로 되어 있을 것입니다. forceConsistentCasingInFileNames 옵션을 false로 설정해주면, 문제가 해결됩니다. (+ 설정을 변경했음에도 문제가 해결..

📋 내용 : styled-components를 사용해 스타일할 때, 자기 자신에 선택자 지정하기 const Container = styled.div` display: flex; width: 1200px; height: 800px; `; styled-components를 사용해 위와 같은 컴포넌트를 만들었다고 가정하자. 그런데 말 그대로 이런 스타일의 컴포넌트를 만든 것인데, :hover나 ::after 등의 의사 선택자(Pseudo-selector)는 어떻게 지정할까? 아주 간단하다. const Container = styled.div` display: flex; width: 1200px; height: 800px; &::after { content: ""; width: 30px; height: 30px..