![react](https://tistory1.daumcdn.net/tistory/4365896/skin/images/react-logo.png)
목록📖 전체보기 (254)
즐겁게, 코드
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/5Ajg3/btrav7QsXxx/LcVHKqcjttBVo5ZoatPJc1/img.png)
이슈 내용 : 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/vB18B/btq84OxufFD/beGxKvU3KiJZ9jPhWxlRA0/img.png)
Notion API로 데이터베이스 불러오기 0. 공식 문서 링크 포스트의 내용이 제대로 동작하지 않으면 한번 공식 문서를 탐험해 보세요! 오늘은 노션 데이터베이스 목록을 불러오는 방법을 소개해 보겠습니다. 아직은 노션 API가 베타 버전이라 그런지, 관련 포스팅이 거의 없어 이번 기회에 정리해보고자 합니다! # API 요청 형태 curl 'https://api.notion.com/v1/databases/"$데이터베이스 아이디"' \ -H 'Authorization: Bearer '"$NOTION_API_KEY"'' \ -H 'Notion-Version: 2021-05-13' 1. Notion API Key 발급받기 노션 공식 API의 키는 https://www.notion.so/my-integration..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/edp56D/btq8JtGAplN/cl8Yu89mKWLN7W3zi7a1r0/img.png)
/* 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 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bm5XjN/btq7DT8JLzn/6plrmfcyzeWUmc9sjl7WcK/img.png)
Next.js가 페이지를 생성하는 방법에는 static generation과 server-side rendering 방식이 있음은 알고 계실 것입니다. 이 중 static generation은 항상 정적인 데이터만을 다루는 것처럼 보일 수 있는데, 꼭 그렇지만은 않습니다. 오늘은 아마 많은 분들이 모르실 수 있는 Incremental Static Generation에 대해 다뤄 보겠습니다. Incremental Static Re-Generation (ISR) getStaticProps 함수를 활용한 static generation 방식은 언제나 빌드 시점 에 페이지를 생성하지만, ISR 방식은 일정 주기마다 데이터의 최신 여부를 검사하고 업데이트된 데이터로 페이지를 다시 생성합니다. export asyn..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/B7Tmz/btq7CPZfwzx/YevnUIrv1RbeE5Abv95BZ0/img.png)
[백준 온라인 저지 링크] 16922번: 로마 숫자 만들기 2, 6, 10, 11, 15, 20, 51, 55, 60, 100을 만들 수 있다. www.acmicpc.net 로마자 조합의 순서를 따지지 않는다는 조건을 통해 중복조합을 구하는 문제임을 알 수 있는데요, 따라서 N과 M 4번과 형태가 매우 유사하지만 같은 코드로 풀면 N=6 부터 답이 달라지기 시작합니다. 왜냐하면 바로 "조합의 합이 같은 경우" 가 생기기 때문인데요, 한번 예시를 들어보겠습니다. // N(뽑아야 하는 수)이 2일 때 (N과 M) => (로마자) 1 1 I I (2) 1 2 I V (6) 1 3 I X (11) 1 4 I L (51) 2 2 V V (20) 2 3 V X (15) 2 4 V L (55) 3 3 X X (20)..
한기대의 코인 이라는 프로젝트에서 영감을 얻어 시간표 부분을 항공대 버전으로 만들어볼 계획을 세우고 있었습니다. (※ 저희 학교는 에브리타임 시간표 자동 불러오기를 지원하지 않아 학우들의 불만이 꽤 있습니다. 작은 학교 슬퍼요 ㅠ__ㅠ) 아무튼 공사를 앞두고 어찌저찌 과목 정보까지는 가져오는데 성공했는데, 뭔가 쎄한걸 느꼈습니다. 두 텍스트가 약간씩 다른게 보이시나요? 분명 겉으로 봤을때는 멀쩡했는데, 노드 입출력을 거치니 "항우기학부" 는 "항우기학" 이 되어있고 "배재성" 은 "배재" 가 되어 있네요. 😣 벌써 어지러워졌지만 원인을 찾아 보기로 했습니다. 1. 인코딩을 의심하자 첫 번째로 의심한건 바로 인코딩이었습니다. 아니나 다를까 뭔가 이상하긴 했는데요, 응답 헤더에 담긴 인코딩 타입이 UTF-8..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/u5uFT/btq7gp6fM43/q6jkTix5u439esHWDI9KXK/img.png)
요즘에는 아마 많은 분들이 프라미스의 동작 순서를 직관적으로 표현하기 위해 async-await 문법을 사용하고 계실 텐데요, async-await를 사용하는 것만으로도 어느 정도 코드가 읽기 편해지지만 여기서 더 우아한 로직을 작성하는 방법을 공유해보려 합니다. const getStudentList = async () => { const res = await fetch("http://localhost:5000/students"); return res.json(); }; const getGradeInfo = async () => { const res = await fetch("http://localhost:5000/grades"); return res.json(); }; const fetchData = ..