차가운세상

개발 도중에 JSON으로 된 Object 또는 일반 object에 특정 값이 변경 되었을 경우 비교하여 조건문을 걸고 싶은 경우 생각하지 못했던 결과를 얻게 되어서 정리를 해보겠습니다. const k1 = {fruit: '🥝'}; const k2 = {fruit: '🥝'}; // Using JavaScript JSON.stringify(k1) === JSON.stringify(k2); // true // Using Lodash _.isEqual(k1, k2); // true - Deep Nested 비교 조금더 복잡하고 중첩되어진 Object를 비교하여도 제대로된 결과를 얻을수 있습니다. const one = { fruit: '🥝', nutrients: { energy: '255kJ', minerals:..

web worker란? - 스크립트 작업이 오래 걸린다고 해서 페이지를 멈추고 기다릴 필요가 없어졌다. 웹 워커는 자바스크립트 코드를 UI 쓰레드와는 별도인 백그라운드에서 수행될 수 있도록 하는 표준적인 방법을 제공하기 때문에 웹 페이지를 가로막지 않고 스크립트를 돌릴 수 있게 되었다. Web worker를 언제 사용해야 될까? - 매우 복잡한 수학적 계산 작업 - 원격지에 있는 리소스에 대한 액세스 작업(또는 로컬 스토리지를 액세스 하는 경우) - 백그라운드에서 조용히 오랜시간 작업애햐 하는 경우 - UI 쓰레드에 방해 없이 지속적으로 수행해야 하는 작업 등 - 현재 프로젝트에 트래픽 높은 네트워크 통신에 의해서 UI화면이 멈추는 증상이 있어서 알아보게 되었다. Web worker VS React Vi..

밑에 참조한 블로그 들이 정말 정리가 잘되어서 있어서 간단하게 정리하려고 한다. Throttle : 쓰로틀링은 보통 성능 문제 때문에 많이 사용. 특성 자체가 실행 횟수에 제한 실사용 예제) 인피니티 스크롤, 관련 검색어 추천 및 자동완성 등 Debounce: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 실사용 예제) 리사이징(웹페이지) 등 참조 블로그: https://webclub.tistory.com/607 디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점 Throttle, Debounce & Difference 스로틀(Throttle) 과 디바운스(Debounce) 란 무엇일까? 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립..

함수를 호출하는 방법: -함수이름.call(객체, 인수,인수....) , 함수이름.apply(객체, [인수,인수,...]) , 함수이름.bind(객체,인수,인수 ...) Call - 모든 함수에서 사용할 수 있으며, this를 특정 값으로 지정할 수 있다. 뭔소리지? 밑에와 같이 person1의 객체에 매개변수 'Hello'을 담아서 함수를 즉시 호출 할 수 있다. 즉!! say함수 안에서 this는 person1 또는 person2로 지정된다. var person1 = {firstName: 'Jon', lastName: 'Kuperman'}; var person2 = {firstName: 'Kelly', lastName: 'King'}; function say(greeting) { console.log..

기존 프로젝트에서 TDD를 적용하기 위해서 @testing-library/react을 사용하여 시도를 하던중 Import 컴포넌트를 하였지만 Module를 찾지 못했다는 메시지가 발생하였다. 해결책: Package.json 안에 { "name": "testing", ... "scripts": { "start": "cross-env NODE_PATH=src react-scripts start", "build": "cross-env NODE_PATH=src react-scripts build", "test": "react-scripts test --modulePaths=src", "eject": "react-scripts eject" }, ... } --modulePaths=src 를 넣으면 절대경로를 인식..

리액트로 프로젝트를 개발하며 자주 볼수있는 npm을 이용하면 package-lock.json yarn을 사용하면 yarn.lock 왜? 자동으로 파일이 생성될까? 패키지 매니저 패키지 관리를 위해 npm을 사용하든 yarn을 사용하든 해당 프로젝트의 메타 정보는 package.json 파일을 통해 관리가 됩니다. 이 package.json 파일에는 해당 프로젝트가 의존하고 있는 모든 패키지 이름과 버전이 나열되어 있는데요. 일반적으로 쓰이는 패키지들은 dependencies (react,react-dom 등)항목에, 개발할 때만 필요한 패키지들은 devDependencies(Jest,cypress 등) 항목에 명시됩니다. 개발자들의 설치 날짜에 패키지 버전 다름 개발자가 여러명이 있는 개발팀에서 프로젝트..

해시 - Level 2 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류 이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다..

적용하는 법 터미널에 입력 git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)%Creset' --abbrev-commit" 실행시킬 때는 git lg 실행하면 그냥 git log --graph했을 때보다 직관적이고 하이라이팅된 형태로 볼 수 있다. 바뀐 내용을 상세히 보고 싶을 때에는 git lg -p를 입력하면 된다. 참고: https://developer-alle.tistory.com/320?category=826739

META TAG 란? META TAG 는 HTML 문서의 내용, 설명, 누가 만들었는지등의 HTML문서를 설명 하는 태그를 말합니다. OG TAG 란? SNS나 메신저에 링크를 공유 할때 미리 보기 화면이 나오는데, 그 미리보기 화면을 설정 할 수 있게 해줍니다. 그럼 바로 예시를 보여 드리죠 위에 보이는 소스 처럼 메타 태그 설정 하고자 하는 타입을 지정 해주고 content 속성에 타입에 해당되는 값을 넣어주면 됩니다. 가장 중요한 포인트: 각 메신저나 SNS마다 메모리 공간 절약과 빠른 제공을 위해 캐시에 데이터를 저장 해놓습니다. 따라서 개발 소스에 Meta Tag를 수정하여도 바로 적용되지 않습니다. 캐시가 업데이트 될 때 변경된 내용이 적용 됩니다. 적용 되는 시간은 각 메신저나 SNS마다 다..

드디어 React-Redux 버전 7.1(배포일 2019/6/11)이 정식 배포 되었습니다. 사실 리덕스 문서를 보러 들어갔다가 알게된 사실입니다. 에헴.... 이제 connect함수를 사용하지 않고도 각각의 dispatch,state를 쉽게 사용가능해졌습니다. 어떻게 써야하는지 간단한 예제로 시작해보겠습니다. Action, Reducer 는 생략 하겠습니다. 예제 기존방식 import React from "react"; import { connect } from 'react-redux' import { incrementAction, decrementAction } from "./Actions"; const counterSelector = state => state.counter; cons..