milliwonkim의 블로그

데이터 타입 구분 데이터 타입 예시 원시 타입(Primitive Type) number - 10, 10.12, -20 - Infinity, -Infinity, NaN - 0b100001(2진수), 0o101(8진수) - 1 === 1.0 (숫자타입은 모두 실수로 처리) - 0o101 === 1 ("") string - 'String\n Number'(이스케이프 시퀀스 없이는 줄바꿈 불가) - `Template Literal Number` (이스케이프 없이 줄바꿈 등 허용) - `variable value is ${variables}` (Template Literal은 변수를 넣어서 사용 가능) boolean - true, false null - null - 변수에 값이 없음을 의도적으로 명시 - und..

Cypress는 진짜 좋은 테스팅 툴입니다. testing-library에 비해서 페이지 전체를 화면을 띄워, 직접 유저가 이용하듯이 테스트를 할 수 있어요. 그런데 제가 Cypress에서 마주한 이슈들이 몇 개 있었습니다. - iframe 지원이 미흡 - 멀티 도메인이 안됩니다. - 일렉트론 기반으로 테스트에서 되는 것이 브라우저 기반의 테스트에서 되지 않는 현상 그래서 Cypress말고 어떤게 있을까 생각해봤는데, Microsoft에서 유지보수하는 Playwright를 발견했습니다. Cypress와 Playwright를 비교하자면 이렇습니다 Cypress Playwright 장점 배우기 쉬움 크로미움 기반 브라우저, 사파리, 파이어폭스 모두 지원 간단한 적용이 빠름 멀티 도메인, 멀티탭 지원 테스팅 ..

영상은 사진에 비해 용량이 큽니다. 예를 들어 png 사진 파일의 경우, 5MB이지만, 영상의 경우 짧아도 50MB는 합니다. 그래서 웹에서 영상을 다 업로드하지 않고, 아래의 이미지와 당장 필요한 부분을 잘라서 필요할 때 다운로드하는 형식입니다. 영상은 다음과 같이 다운로드 한 이후에 바로 재생이 되는 것이 아니라 시간이 지나고 나서 재생이 됩니다. 여기서는 Media.io라는 서비스를 이용해서 동영상 용량을 낮춰보도록 하겠습니다. https://www.media.io/ Media.io - Online Free Video Editor, Converter, Compressor Use Media.io free online tools to edit, convert, or compress video/audio..

이미지나 영상을 처음에 모두 띄울 필요는 없습니다. 첫 로딩을 빠르게 하고, 그 이후에 뷰포트가 이미지가 필요한 곳으로 들어왔을 때 그 때 로딩하는 방법도 성능 향상에 좋은 요소가 됩니다. 스크롤 이벤트에 LazyLoading을 할당할 경우, 수많은 콜을 부를 것입니다. 따라서 Intersection Observer를 이용해서 특정 뷰포트에 들어올 때만 Lazy Loading을 트리거하게끔 합니다. import React, { useEffect, useRef } from "react"; function Card(props) { const imgRef = useRef(null); useEffect(() => { const options = {}; const callback = (entries, observ..

import React from "react"; import { Switch, Route } from "react-router-dom"; import "./App.css"; import ListPage from "./pages/ListPage/index"; import ViewPage from "./pages/ViewPage/index"; function App() { return ( ); } export default App; 다음과 같은 코드를 렌더링 하면 크롬에서의 퍼포먼스와 fetching하는 파일들은 다음과 같습니다. 퍼포먼스 앱이 로드 되자마자 ListPage, ViewPage에 관련된 모든 js 파일이 다 업로드 됐습니다. 0.chunk.js의 로딩 시간이 22ms 다음의 상황에서 퍼포먼스 ..

문제 Given an integer numRows, return the first numRows of Pascal's triangle. In Pascal's triangle, each number is the sum of the two numbers directly above it as shown: Example 1: Input: numRows = 5 Output: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] Example 2: Input: numRows = 1 Output: [[1]] Constraints: 1

webpack5에서부터는 worker-plugin을 설치하지 않아도 worker-plugin을 이용할 수 있습니다.(자동으로 컴파일) 따라서 직접 worker-plugin을 설치해서 webpack에 적용하면 다음과 같은 에러를 만납니다 Module parse failed: ParserHelpers.addParsedVariableToModule is not a function 따라서 다음과 같이 해줍니다. // 이 라이브러리는 원하는 RPC와 같은 경험을 제공한다. // worker-plugin에 wrap해서 사용 yarn add comlink // App.css body { margin: 0; overflow: hidden; font-size: 3rem; } button { font-size: 1.2re..

https://mine-it-record.tistory.com/577 DOM(Document Object Model) 생성 - 생명주기: DOMContentLoaded, load, beforeunload, unload 1. DOMContentLoaded => DOM 트리 완성 즉시 발생함. => img 및 CSS 등 외부 자원 기다리지 않음 => 여러 스크립트 태그가 존재한다면 => 모든 스크립트가 실행된 이후 DOMContentLoaded가 실행됨 (이유: DOMContentLoaded에 DOM 조작 관련 로직이 있을 수 있기 때문) // a // b // c // 실행순서 b => c => a => document.createElement('script')로 동적으로 생성되고 웹페이지에 추가된 스크립..

DOM(Document Object Model = 문서객체모델) - 자바스크립트가 p, a 태그 등을 조작할 수 있게 만든 트리구조 객체모델 - HTML/CSS DOM JavaScript 가상돔이 필요한 이유 - 매번 document 객체를 이용해서 DOM 내의 태그 등을 가져올 경우 => 렌더링 비용이 큼 렌더링 = '스타일 => 레이아웃 => 페인트 => 합성'의 과정 중 스타일 이후의 과정(레이아웃, 페인트, 합성) 리렌더링 반복 시 => 돔 추가 삭제 등 계산이 계속 발생 => 안좋음 가상돔을 이용한 리액트의 렌더링 - '변화 전 가상돔 변화 후 가상돔' 끼리 비교 => 바뀐 부분만 실제 돔에 적용 레이아웃 계산은 한 번 뿐(일괄 돔 업데이트 방식) 작은 규모의 레이아웃이 여러번 발생(리플로우)보..

git init 후에 code .git/config // .git/config [user] email = you@example.com name = my name * 가장 처음 커밋은 되돌릴 수 없는 것으로 알고 있음 => 이럴 경우 rm -rf .git 후 다시 code .git/config를 해서 프로젝트 내부의 .git 파일에 유저 정보를 적은 후 커밋하기 rm -rf .git git init code .git/config // .git/config [user] email = you@example.com name = something