전체 글 47

자바스크립트 object 2개 비교하기

개발 도중에 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:..

Webworker 언제 사용 해야 될까?

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

Throttle(쓰로틀링)과 Debounce(디바운스)에 대해서 알아보자! 정리하자!

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

Javacript - call , apply , bind 차이점 정리

함수를 호출하는 방법: -함수이름.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..

Jest 절대경로 설정(script: test 에 적용)

기존 프로젝트에서 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 를 넣으면 절대경로를 인식..

package-lock.json 또는 yarn.lock 왜 필요한가?

리액트로 프로젝트를 개발하며 자주 볼수있는 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개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다..

IT/Algorithm 2019.12.04

GIT 이쁘게 보기

적용하는 법 터미널에 입력 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

IT/GIT 2019.12.03

META OG TAG (정리)

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

IT/CSS 2019.11.12

정말 쉽게 Dispatch & states 를 Redux Hooks 사용하기

드디어 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..