즐겁게, 코드

이슈 내용 : 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 ..

한기대의 코인 이라는 프로젝트에서 영감을 얻어 시간표 부분을 항공대 버전으로 만들어볼 계획을 세우고 있었습니다. (※ 저희 학교는 에브리타임 시간표 자동 불러오기를 지원하지 않아 학우들의 불만이 꽤 있습니다. 작은 학교 슬퍼요 ㅠ__ㅠ) 아무튼 공사를 앞두고 어찌저찌 과목 정보까지는 가져오는데 성공했는데, 뭔가 쎄한걸 느꼈습니다. 두 텍스트가 약간씩 다른게 보이시나요? 분명 겉으로 봤을때는 멀쩡했는데, 노드 입출력을 거치니 "항우기학부" 는 "항우기학" 이 되어있고 "배재성" 은 "배재" 가 되어 있네요. 😣 벌써 어지러워졌지만 원인을 찾아 보기로 했습니다. 1. 인코딩을 의심하자 첫 번째로 의심한건 바로 인코딩이었습니다. 아니나 다를까 뭔가 이상하긴 했는데요, 응답 헤더에 담긴 인코딩 타입이 UTF-8..

📋 내용 : 리액트 코드 작성 시, 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 ..

내용 : 파일명 변경 후 임포트 시 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..