즐겁게, 코드

강의 링크 : https://classroom.udacity.com/courses/ud884/ 웹 최적화 기법과 브라우저의 원리에 대한 괜찮은 강의가 하나 있어 공유해보고자 합니다! 바로 유다시티의 Website Performance Optimization 무료 강의인데요, 브라우저가 화면에 페이지를 렌더링하는 과정 및 페이지 반응속도를 향상시키기 위한 여러 기법들에 대해 배울 수 있습니다. Vue나 리액트 등 특정 기술에 한정된 내용이 아닌 어떻게 보면 개발자의 기본 소양과도 같은 "최적화" 기법에 대해 익히기 좋으실 듯 한데요, 간단한 맛보기 퀴즈를 하나 보여드리겠습니다. 사진의 세 렌더링 프로세스는 각자 다른 방식으로 자바스크립트를 불러온 결과물인데요, 각 보기가 어떤 방식으로 스크립트를 불러온 것..

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

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..

/* 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 ..

Next.js가 페이지를 생성하는 방법에는 static generation과 server-side rendering 방식이 있음은 알고 계실 것입니다. 이 중 static generation은 항상 정적인 데이터만을 다루는 것처럼 보일 수 있는데, 꼭 그렇지만은 않습니다. 오늘은 아마 많은 분들이 모르실 수 있는 Incremental Static Generation에 대해 다뤄 보겠습니다. Incremental Static Re-Generation (ISR) getStaticProps 함수를 활용한 static generation 방식은 언제나 빌드 시점 에 페이지를 생성하지만, ISR 방식은 일정 주기마다 데이터의 최신 여부를 검사하고 업데이트된 데이터로 페이지를 다시 생성합니다. export asyn..

[백준 온라인 저지 링크] 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..