즐겁게, 코드

/* 적용할 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에는 이런 설정이 포함되지 않아 에밋이 갑자기 사라지게 된 것으로, 이럴 경우 에디터의 설정을 직접 수정해 에밋을 사용할 수 있게끔 해야 합니다...

📋 내용 : 쿠키의 Expires 옵션값 형태로 인한 에러 해결법 '클론코딩으로 시작하는 Next.js' 라는 책을 따라가다가 발견한 문제입니다. (이 책 괜찮아요) res.setHeader( "Set-Cookie", `access_token=${token}; Path=/; Expires=${new Date( Date.now() + 60 * 60 * 24 * 1000 * 3 //3일 후 쿠키 만료 )}; HttpOnly` ); 문제의 코드를 살펴보면 setHeader 메서드를 통해 헤더에 쿠키를 설정하고, 이 때 쿠키에는 인증을 위한 access_token과 쿠키 옵션인 Path, Expires, HttpOnly를 문자열 쌍으로 대입합니다. 이제 이 이슈를 해결해보도록 하겠습니다. 원인은 Expires ..

📋 내용 : git이 파일명 대소문자 변경사항을 감지하지 못할 때 아주 열받는 문제다. home.tsx라는 파일을 만들고 한번 커밋 트리에 반영되면, 이후에는 Home.tsx라고 이름을 바꿔도 인식하질 못한다. (+ 대략 알아보니 MacOS나 깃허브 GUI 버전에서 발생하는 문제라고 한다.) 이전에 윈도우 노트북에서는 이런 문제가 없었던 것 같은데, 아무튼 이것 때문에 배포도 실패하는 등 사소하게 거슬리는 문제다. 여하튼, 결론은 깃에서 케이스(대소문자) 변경사항을 무시하지 않도록 하는 명령어를 한번 쳐주면 된다. (※ 깃 설정을 한번 바꾸면 이후에도 계속 반영되니, 최초 1회만 입력하시면 됩니다.) git config core.ignorecase false 📋 참고 I change the capital..