IT

[styled-components] 폰트 깜빡임(FOUT) 해결하기

styled-components를 사용할 때, 리렌더링이 일어날 때 글자 폰트가 기본 폰트에서 적용된 폰트로 변경되는 과정이 그대로 보이는 경우가 있다. 이러한 현상을 FOUT(Flash Of Unstyled Font)라고 부른다. FOUT이 발생하면 폰트가 변경되는 과정에서 레이아웃이 살짝 어긋나면서 화면이 깜빡이는 것처럼 보이게 되는데, 이는 UX에 좋지 않은 영향을 준다. 이는 styled-components가 새로운 스타일이 렌더될 때마다 태그를 변경하면서 매번 폰트를 재요청하기 때문에 발생하는 문제다. 보통 styled-components를 사용한다면 createGlobalStyle로 글로벌 스타일을 관리할텐데, 만약 여기에서 font-face로 폰트를 설정했다면 이러한 문제가 발생한다. 이는 ..

[Webpack] webpack-dev-server가 두 번 실행되는 이유

개발 환경에서 webpack-dev-server를 사용할 때 아래와 같이 두 번 실행되는 경우가 있다. 이 경우 코드도 모두 두 번씩 실행된다. 이유는 빌드 전의 index.html에서 태그로 js 파일을 불러오고 있기 때문이다. 어차피 빌드를 하면 번들링된 js파일을 index.html 내부에 태그로 불러온다. 만약 빌드 전의 index.html에서 태그로 js파일을 불러오고 있다면, HtmlWebpackPlugin이 모든 자바스크립트를 태그 아래로 주입한다. 만약 태그가 꼭 필요하다면, 아래와 같이 HtmlWebpakcPlugin 설정의 inject 속성을 변경하여 해결할 수도 있다. // webpack.config.js ... plugins: [ new HtmlWebpackPlugin({ templ..

[mongoose] 에러 핸들링

Built-in Validator export const UserSchema = new Schema( { userId: { type: String, unique: true, required: true, match: /[a-z0-9_]{4,16}/, }, ... } ); mongoose Schema를 작성할 때, 각각의 field에 대해 validator를 지정할 수 있으며, 각각의 validator를 통과하지 못하면 에러를 발생시킨다. 이 때 Path `userId` is required가 오류 메시지이며, 이 오류 메시지를 Array Syntax로 간단하게 커스텀할 수 있다. export const UserSchema = new Schema( { userId: { type: String, unique:..

[Next.js] Next.js에서 mongoose 연동해서 API 만들기

Next.js에서 API 만들기 Next.js에서 pages/api 디렉토리에서 파일/디렉토리 이름으로 API endpoint를 나타낼 수 있다. pages/api/user.ts export default function handler(req, res) { if (req.method === 'GET') { // GET 요청 처리 } else if (req.method === 'POST') { // POST 요청 처리 } } /user로 들어온 요청이 pages/api/user.ts에서 처리된다. next-connect 라이브러리를 사용하면 마치 Express.js에서처럼 미들웨어의 형태로 코드를 작성할 수 있다. import { NextApiRequest, NextApiResponse } from 'ne..

[mongoose] exec()은 어떤 역할을 하는가?

아래 사진은 mongoose 공식 문서에서 find 메서드에 대해 설명하고 있는 부분이다. 그런데 사용 예시에서 어떤 때에는 exec()을 사용하고, 어떤 때에는 exec()을 사용하고 있지 않다. exec()을 사용하고 안 하고가 어떤 차이가 있는 것일까? 공식 문서를 보면 find, findOne, findById, findOneAndUpdate 등의 메서드의 리턴값은 Query라고 되어 있다. Mongoose Query는 프로미스가 아니고, then을 사용할 수 있는 일종의 유사 프로미스라고 할 수 있다. find, findOne 등의 메서드 뒤에 exec()을 붙이든 안 붙이든 기능은 동일하다. 대신 exec()을 사용하면 유사 프로미스가 아닌 온전한 프로미스를 반환값으로 얻을 수 있으며, 에러가..

[Next.js] Next.js에서 Prop `className` did not match 경고가 뜨는 이유

이 글은 Prop `props이름` did not match. 로 시작하는 Warning에 관한 내용입니다. 또한 Next.js에서 styled-components를 사용하면서 겪은 여러 가지 문제를 다룹니다. _document.tsx(jsx) Next.js에서 styled-components를 사용할 때 _document를 따로 설정해서 SSR될 때 CSS가 head에 주입되도록 해야 한다. 만약 따로 설정하지 않는다면, styled-components가 적용되지 않은 상태로 렌더링될 수 있다. import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; import { ServerStyleSheet } ..

[React] You are running create-react-app 4.0.3 which is behind the latest release (5.0.0)

$ npx create-react-app 프로젝트이름 create-react-app을 npx를 통해 설치할 때 아래와 같은 오류가 뜨는 경우가 있다. You are running `create-react-app` 4.0.2, which is behind the latest release (4.0.3). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app The latest instruction..

[JS] 자바스크립트의 배열 생성 방법

자바스크립트에서 배열은 배열 리터럴, Array 생성자 함수, Array.of 메서드, Array.from 메서드를 통해 생성할 수 있다. 배열을 생성하는 방법이 4가지나 있기 때문에 각각의 생성 방식과 특징을 제대로 이해해야 목적에 맞는 방법을 선택할 수 있을 것이다. 이 외에도 String.prototype.split 메서드처럼 배열을 반환하는 빌트인 객체의 메서드들도 있다. 각각의 배열 생성 방식의 특성을 살펴보고, 몇 가지 기본적이면서도 자주 쓸 수 있는 배열 생성 방법에 대해 알아보자. 1. 배열 리터럴 가장 단순하고 직관적인 배열 생성 방식이다. 거의 대부분의 브라우저에서 가장 성능이 좋은 배열 생성 방법이다. const a = []; const b = [1, 2, 3]; 배열 리터럴 내부에서..

[JS] 함수의 매개변수와 RangeError

함수가 호출되면 함수의 매개변수, 반환 주소값, 지역 변수 등의 스택 프레임(Stack Frame)이 호출 스택(Call Stack)에 쌓이게 된다. 재귀함수나 콜백함수에 의해서 함수가 종료되지 않고 너무 많이 호출되면 이러한 스택 프레임들이 호출 스택의 메모리를 초과하게 되면 스택 오버플로우(Stack Overflow)가 발생한다. 함수의 호출이 너무 많아서 스택 오버플로우가 일어날 수도 있지만, 함수를 한 번만 호출했는데 매개변수가 너무 많아서 스택 오버플로우가 발생할 수도 있다. 함수의 매개변수도 호출 스택에 쌓이기 때문이다. const arr = new Array(1000000); const arr2 = [...arr]; 위의 코드에서 length가 1000000인 배열 arr를 스프레드 연산자(..

Node.js로 백준(BOJ) 문제 풀 때 유의할 점들

백준에서 Node.js로 입력을 받는 방법은 크게 두 가지가 있다. 첫 번째는 readline 모듈을 사용하는 것이고, 두 번째는 fs 모듈을 사용하는 것이다. (이 글에서는 fs 모듈에 대해서만 다루겠다.) Python으로 백준 문제를 풀 때 시간 초과가 나는 것을 막기 위해 input() 대신 sys.stdin.readline()을 쓰는 것처럼, Node.js도 readline보다 fs모듈을 사용하는 것이 더 빠르다. var fs = require('fs'); var input = fs.readFileSync('/dev/stdin').toString().split(' '); var a = parseInt(input[0]); var b = parseInt(input[1]); console.log(a+b..