bkjang / dev-tips Goto Github PK

❓ What is DocumentFragment?

BKJang/do-you-know-vanilla#8

❗️ React의 state는 왜 불변성을 유지해야할까? 왜 Immutable.js 를 사용할까?

react와 redux의 공식 문서를 읽다 보면 Immutability를 강조하는 대목을 종종 볼 수 있다.
왜 불변성(Immutability)를 유지해줘야 할까?

불변성을 지키지 않으면 우리는 컴포넌트를 최적화 할 수 없다.

리액트가 컴포넌트를 렌더링하는 과정을 살펴보자.

1. setState를 호출 (혹은 부모로부터 props를 전달 받음)
2. shouldComponentUpdate를 실행했는데 false를 리턴하면 여기서 멈추고, true를 리턴하면 다음 단계로 이동
3. 가상 DOM과 실제 DOM을 비교해서 변경사항이 있으면 화면을 다시 그린다

핵심은 2번에 있다. 다음과 같은 2개의 상태를 비교한다고 가정해보자.

const array = [1,2,3,4];
const sameArray = array;
sameArray.push(5);

console.log(array !== sameArray); // false

const array = [1,2,3,4];
const differentArray = [...array, 5];
console.log(array !== differentArray); // true

첫 번째 코드의 array와 sameArray변수가 참조하고 있는 배열의 주소 값은 서로 같다. 하지만, 두 번째 코드의 각각의 배열은 다른 레퍼런스를 가지기 때문에 비교했을 때 다르다는 결과 값이 나오게 된다.
이와 같이 불변성을 유지하여 코드를 작성하면 각 객체의 값이 아닌 레퍼런스 값만 비교를 해주면 된다.

즉, shouldComponentUpdate내의 코드는 한 줄이면 컴포넌트를 최적화할 수 있게 된다.

하지만, 불변성을 유지하며 코드를 작성하다보면 상태 업데이트 로직이 복잡해질 수 있다.

state = {
    where: {
        are: {
            you: {
                now: 'faded',
                away: true // 이 부분을 바꾸고 싶다
            },
            so: 'lost'
        },
        under: {
            the: true,
            sea: false
        }
    }
}

const { where } = this.state;
this.setState({
    where: {
        ...where,
        are: {
            ...where.are,
            you: {
                ...where.are.you,
                away: false
            }
        }
    }
});

위의 예시만 봐도 충분히 복잡해지는 것을 볼 수 있다. 이런 상태 업데이트 로직을 편하게 해주는 대표적인 라이브러리가 우리가 React를 사용하면서 패턴 처럼 많이 사용해왔던 Immutable.js이다.

정리하자면, React의 상태는 컴포넌트 최적화를 위해 불변성을 유지해야하며 이를 편하게 하기 위해 Immutable.js같은 불변 객체를 반환해주는 라이브러리를 사용한다.

🙏 Reference

• 누구든지 하는 리액트: 9편 불변성을 지키는 이유와 업데이트 최적화
• 리액트의 불변성과 Immutable.js 사용하기 - 1
• React state가 불변이어야 하는 이유

❗️ Prettier

코드의 스타일을 아름답게 통일성 있게 만들어준다.

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

🔨 ESLint

자바스크립트의 문법을 체크하고 통일성 있는 코드를 작성할 수 있도록 도와준다.

참고

• eslint-config-react-app
• eslint-config-airbnb
• eslint-config-google
• eslint-config-standard

// npm install eslint-config-airbnb eslint-config-prettier
"eslintConfig": {
  "extends": [
    "react-app",
    "airbnb",
    "prettier"
  ],
  "rules": {
    "no-unused-vars": 1,
    "no-console": 0,
    "react/jsx-filename-extension": 0
  }
},

지나치게 문법 체크를 하게 되면 생산성이 떨어질 수도 있기 때문에 굳이 꼭 eslint 라이브러리를 사용할 필요는 없다.

👍 Snippet (코드조각)

자주 사용되는 코드에 대하여 단축어를 사용하여 빠르게 만들어낸다.

참고

• snippet-generator

// Preferences => User Snippet
{
  "Create Functional React Component": {
    "prefix": "fc",
      "body": [
        "import React from 'react';",
	"",
	"function ${TM_FILENAME_BASE}() {",
	"  return (",
	"    <div>",
	"      ${1:Functional Component}",
	"    </div>",
	"  )",
      "}",
      "",
      "export default ${TM_FILENAME_BASE};"
      ],
      "description": "Create Functional React Component"
    }
}

❗️ 브라우저의 XY

• ImD/Dev-Docs - Browser XY

🔨 Get Unique Values of an Array

var j = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]

🔨 Array and Boolean

filter falsy values (0, undefined, null, false, etc.) out of an array.

myArray
    .map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(Boolean);

🔨 Create Empty Objects

Create empty object __proto__ and the usual hasOwnProperty and other object methods are not exist.

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them

🔨 Merge Objects

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};
/*
Object {
  "computer": "Mac",
  "editor": "Atom",
  "eyes": "Blue",
  "gender": "Male",
  "hair": "Brown",
  "handsomeness": "Extreme",
  "name": "David Walsh",
}
*/

🔨 Require Function Parameters

const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// This will throw an error because no name is provided
hello();

// This will also throw an error
hello(undefined);

// These are good!
hello(null);
hello('David');

🔨 Destructuring Aliases

const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as { otherName }
const { x: otherName } = obj;

🔨 Get Query String Parameters

// Assuming "?post=1234&action=edit"

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

🙏 Reference

• 7 Useful JavaScript Tricks

❗️ How did I encounter this issue?

Spring에서 정적 리소스를 못찾아오는 버그.

❓ What is the cause of this issue?

<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>

위와 같이 url-pattern 이 / 로 되어 있을 경우 모든 URI 에 대해 Servlet Mapping을 확인하기 때문에 정적 리소스들은 매핑시킬수 없으므로 404가 발생.

🔨 What have I tried? How did you finally solve it?

tomcat Module Path를 /로 세팅 후 reboot.

or

<servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.js</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.jpg</url-pattern>
    </servlet-mapping>

위와 같이 설정해 놓으면 dispatcherServlet 은 default Servlet Mapping 을 제외한 나머지 요청에 대해서만 Controller 와 매핑 시킨다.

하지만 이와같이 정적 매소드들에 대해 일일이 열거 하는 것 보다는 Spring 3.x 이상부터 지원되는 <mvc:default-servlet-handler/> 로 대체해서 사용하면 된다.

🙏 Reference

• Spring에서 css,image,js 등의 정적 리소스를 찾을 수 없을때

❗️ How did I encounter this issue?

React Native를 이용하여 앱 개발을 진행하며 push 알림 수신 기능이 필요.
react-native-firebase 라이브러리를 이용하여 개발을 진행하던 중 background 상태에서는 push 수신이 무리 없이 되나 foreground 상태에서는 push 수신이 안되는 상황이 재현.

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

🙏 Reference

• 효과적으로 TDD, 리팩토링, OOP를 연습하는 방법은?

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❓ What is the cause of this issue?

JSON.stringify()는 순환참조를 발견하면 TypeError를 발생시킨다.

var obj = { a: 1 };
obj.child = obj;
console.log( JSON.stringify( obj ) ); // TypeError: Converting circular structure to JSON

🔨 What have I tried? How did you finally solve it?

var cache = [];
JSON.stringify(obj, function(key, value) {
    if (typeof value === 'object' && value !== null) {
        if (cache.indexOf(value) !== -1) {
            // Circular reference found, discard key
            return;
        }
        // Store value in our collection
        cache.push(value);
    }
    return value;
});
cache = null; // Enable garbage collection

👍 Is there any better way?

const getCircularReplacer = () => {
  const seen = new WeakSet();
  return (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) {
        return;
      }
      seen.add(value);
    }
    return value;
  };
};

JSON.stringify(obj, getCircularReplacer());

🙏 Reference

• Github - zmmbreeze/stringify.js

❗️ How did I encounter this issue?

react-native-image-picker를 써서 이미지 파일을 업로드하는 과정에서 서버 쪽에서 이미지 데이터를 받지 못하는 상황이 재현됨.

❓ What is the cause of this issue?

Front에서는 FormData에 데이터를 append시켜 서버로 데이터를 전송하고 있었는데 서버 쪽에서는 json데이터가 넘어갈 것으로 생각하고 @RequestBody를 이용하여 데이터를 받고 있었음.
간단한 문제였는데 좀 더 꼼꼼하지 못해 발생.

🔨 What have I tried? How did you finally solve it?

서버쪽 @RequestBody를 @RequestPart로 수정.

//Server
@RequestPart(value = "addLogoFileIdList", required = false) MultipartFile addLogoFileIdList)

//Front
const formData = new FormData();
this.state.fileName && formData.append('addLogoFileIdList', {
      name: this.state.fileName,
      type: this.state.imageType,
      uri: Platform.OS === "android" ? this.state.imageUri : this.state.imageUri.uri.replace("file://", ""),
      data: this.state.data
});
const data = {
      storeName: this.state.storeName,
      storePhone: this.state.storePhone,
      storeAddress: this.state.storeAddress,
};
Object.keys(data).forEach(key => {
      formData.append(key, data[key]);
});

🙏 Reference

• Github - react-native-image-picker

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❗️ How did I encounter this issue?

react-router-dom 라이브러리 내부에는 객체의 값을 비교하는 기능을 내부적으로 사용하고 있다.
value-equal이라는 라이브러리를 사용하고 있고 이 코드를 실제로 개발시에도 충분히 적용해볼 수 있을 것 같다.

🔨 실제 내부 코드

• BKJang/do-you-know-vanilla

🙏 Reference

• SeonHyungJo/Dont_Waste_Your_Time

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❗️Time in JS

js를 사용하여 시간을 측정해야하는 경우가 있다.

예를 들어 내 코드가 얼마만큼의 시간을 사용했는지 알고 싶은 경우다.
또 쓰로틀링처럼 몇 초 동안 이벤트가 한 번만 발생하게 만들어야 하는 경우도 있다.

물론 프론트의 js 코드에서는 엄청 정밀한 시간이 필요한 경우가 많지는 않다.
하지만 정확도 높은 시간을 사용한 코드는 언제 어떻게 실행되어도 동일하게 동작한다는 것을 보장한다. 품질이 좋아진다.

따라서 시간을 측정하는 방법을 알아둘 필요가 있다.

js에서 시간을 측정하는 방법은 크게 4가지가 존재한다.

• Date.now
• console.time
• process.hrtime (nodeJS)
• performance

Date.now

Date는 가장 고전적이며 쉽게 접근할 수 있는 API다.

Date.now를 사용하면 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 세컨드(milliseconds)를 Number 타입으로 반환한다.

특정 코드 이전과 이후에 Date.now를 사용하면 그 코드의 실행 시간을 알 수 있다.

const start = Date.now();

let arr = ['1'];
for (let i = 0; i < 10000000; i++) {
  arr.push('' + i);
}

const end = Date.now();

console.log((end - start) / 1000);

Date.now 메서드는 시스템 시간을 기준으로 현재 타임스탬프를 받는다. 그래서 user agent에 따라 다를 수 있어 신뢰성이 떨어진다.

console.time

이걸 사용하면 Date.now보다 간편하게 이용할 수 있다.

console.time('pushTest');

let arr = ['1'];
for (let i = 0; i < 10000000; i++) {
  arr.push('' + i);
}

console.timeEnd('pushTest');

pushTest라는 label을 붙일 수 있다.

하는 일은 동일하다. console 객체에 있는 profile과 같은 메서드를 사용하여 dev tools에서 더 다양한 정보를 볼 수도 있다.

process.hrtime

nodejs에서는 위의 두가지 방법보다 더욱 정밀한 방법으로 process.hrtime를 제공한다.

이는 nanoseconds까지 정확히 측정가능하며 clock drift free하다.

const hrstart = process.hrtime();

let arr = ['1'];
for (let i = 0; i < 10000000; i++) {
  arr.push('' + i);
}

const hrend = process.hrtime(hrstart);

console.log(hrend);
//[2, 488580674]

hrtime은 반환값이 array인데 각각 [seconds, nanoseconds]다.

performance

브라우저에서는 μs라고 표기하는 마이크로 세컨드까지 정확한 API를 제공한다. 이 performance는 시스템 clock과는 무관하다.

console.time의 ms는 밀리세컨드로 1s / 1000 이다.
performance에서 제공하는 μs는 1ms / 1000 이다.

사용방법은 Date.now와 동일하다.

const start = performance.now();

let arr = ['1'];
for (let i = 0; i < 10000000; i++) {
  arr.push('' + i);
}

const end = performance.now();

console.log((end - start) / 1000);

performance.now의 반환값은 DOMHighResTimeStamp다. 이는 ms(밀리 세컨드)인데 소수점을 포함한다. 따라서 마이크로 세컨드까지 정확하다.

performance.now가 측정되는 시간은 performance.timing.navigationStart부터다.
이 시간은 이전 document가 unload되며 새로운 document를 fetch하는(fetchStart) 시점이다.

브라우저에서 제공하는 방법들은 web worker를 사용한다. 현재 performance가 그 중에 가장 정확한 시간을 측정할 수 있다.

🙏 Reference

• Im-D/Dev-Docs - TimeInJS

❗️ 객체(Object)

• BKJang/do-you-know-vanilla - Object.keys(), Object.values(), Object.entries() 그리고 for...in

❗️ 배열(Array)

• BKJang/do-you-know-vanilla - 배열 내장함수의 활용(sort, reduce, filter...)

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❓ What is WebComponent?

Im-D/Dev-Docs - Web Component(웹 컴포넌트)

❗️ How did I encounter this issue?

TextInput을 사용하여 form을 만들고 키보드가 올라왔을 때 최하단의 버튼이 키보드 위로 함께 올라옴.
키보다가 input 창은 덮어버리면서 마지막 항목을 입력하려면 키보드를 내리고 다시 클릭해야하는 불편함이 있었음.

🔨 What have I tried? How did you finally solve it?

windowsSoftInputMode를 adjustPan속성으로 설정하면 키보드가 최하단의 버튼을 가리고 올라옴.
KeyboardAwareScrollView컴포넌트로 키보드가 올라왔을 때 스크롤을 주고 싶은 영역을 감싸면 키보드가 올라와도 마지막 항목도 스크롤을 내려 입력 가능함.

🙏 Reference

• Github - APSL/react-native-keyboard-aware-scroll-view
• Change Soft Input Mode in React Native Android

❗️ How did I encounter this issue?

sessionStorage를 이용하여 인증 정보를 저장하던 중, 새로운 탭을 열었는데 인증 데이터가 공유되지 않는 문제가 발생.

❓ What is the cause of this issue?

sessionStorage는 기본적으로 브라우저를 닫으면 데이터가 삭제되지만, 탭 간에는 데이터가 공유되지 못한다. 하지만, localStorage를 사용하면 탭 간의 공유는 가능하지만, 브라우저 창이 종료되었을 때도 localStorage에는 데이터가 남아있기 때문에 보안상 문제가 될 수 있다.

🔨 What have I tried? How did you finally solve it?

sessionStorage와 localStorage 각각의 특성을 사용하여 탭을 새로 켰을 때 localStorage에 데이터를 저장하고 이를 새로연 탭의 sessionStorage에 담고 localStorage의 값은 지운다. 약간의 속임수긴 하지만, 잘 동작한다.

// transfers sessionStorage from one tab to another
var sessionStorage_transfer = function(event) {
  if(!event) { event = window.event; } // ie suq
  if(!event.newValue) return;          // do nothing if no value to work with
  if (event.key == 'getSessionStorage') {
    // another tab asked for the sessionStorage -> send it
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    // the other tab should now have it, so we're done with it.
    localStorage.removeItem('sessionStorage'); // <- could do short timeout as well.
  } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
    // another tab sent data <- get it
    var data = JSON.parse(event.newValue);
    for (var key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
};

// listen for changes to localStorage
if(window.addEventListener) {
  window.addEventListener("storage", sessionStorage_transfer, false);
} else {
  window.attachEvent("onstorage", sessionStorage_transfer);
};


// Ask other tabs for session storage (this is ONLY to trigger event)
if (!sessionStorage.length) {
  localStorage.setItem('getSessionStorage', 'foobar');
  localStorage.removeItem('getSessionStorage', 'foobar');
};

🙏 Reference

• stackoverflow - browser sessionStorage. share between tabs?

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

🙏 Reference

• Naver Deview -2018

❗️ How did I encounter this issue?

FormData를 Server의 api 규격에 맞추기 위해서 빈 객체를 만들어야할 경우가 있는데 이 때, 매번 빈 객체의 NPE체크를 진행해줘야하는 불편함이 존재.

🔨 What have I tried? How did you finally solve it?

var MYAPP = MYAPP || {};
MYAPP.namespace = function(ns_string) {
  var parts  = ns_string.split('.'),
      parent = MYAPP,
      i;
  if (parts[0] === "MYAPP") {
    parts = parts.slice(1);
  }
  for (i = 0; i < parts.length; i += 1) {
    if (typeof parent[parts[i]] === "undefined") {
      parent[parts[i]] = {};
    }
      // 참조를 변경한다. ( parent -> MYAPP 에서 parent -> MYAPP.parts[i]로 변경)
      parent = parent[parts[i]];
  }
  return parent;
}
MYAPP.namespace("MYAPP.modules.module2");
var module2 = MYAPP.namespace("MYAPP.modules.module2");
module2 === MYAPP.modules.module2; // true

🙏 Reference

• Im-D/Dev-Docs - 객체 생성 패턴

🙏 Reference

• URL 끝에 ‘/’ 는 왜 붙이는 걸까?

❓ What is the WebPack?

WebPack은 모듈 번들러.

WebPack은 프로젝트 전체를 한 단위로 분석한다.
즉, 지정한 메인 파일에서 시작해 자바스크립트의 require(webpack commonJS 모듈 지원)과 import(ES6)문을 참고해 프로젝트의 모든 의존성을 조사하고 로더를 이용해 처리한 후 번들로 묶은 자바스크립트 파일을 생성한다.

❓ What is the Babel?

Babel은 트랜스파일러.

Babel은 ES6/ES7 코드를 ECMAScript5 코드로 transpiling 하기 위한 도구.(꼭 ES5가 될 필요는 없다.)
Babel은 다양한 작은 모듈들로 구성되며 다양한 모듈을 담는 일종의 상자 역할을 한다.
코드를 컴파일 하기 위해 작은 모듈들(ex. presets)을 사용합니다.

🙏 Reference

• https://jusungpark.tistory.com/52
• https://jaeyeophan.github.io/2017/05/16/Everything-about-babel/

❗️ How did I encounter this issue?

Time Slider가 이동할 때 마다 지나치게 많은 요청이 발생.
시간별로 HeatMap을 보여줄 필요가 있어 Time Slider를 이용해 구현하던 중 발생.

❓ What is the cause of this issue?

Time Slider의 미세한 움직임에도 요청이 발생하여 지나치게 많은 자원 소모.

🔨 What have I tried? How did you finally solve it?

Debouncing을 적용해 일정 주기를 기준으로 마지막 이벤트에 대한 비동기 요청만 수행.

function onChangeSliderWithPlay() {	
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            //비동기 처리
            renderDataWithPlay();
        }, 500);
    }

👍 Is there any better way?

결국, Scroll 이벤트의 최적화와 크게 다르지 않기 때문에 rAF를 이용한 스크롤 이벤트 방식으로 구현이 가능하지 않을까?

• 스크롤 이벤트 최적화

🙏 Reference

• 쓰로틀링과 디바운싱
• ImD/Dev-Docs - 쓰로틀링과 디바운싱

❗️ What is the issue?

한 화면에 3개의 컴포넌트가 있고 가장 아래에 있는 컴포너트가 스크롤 컴포넌트이다.
스크롤 컴포넌트를 아래로 내렸을 때 위의 컴포넌트들은 접힌 상태로 최상단에는 To Top 기능을 하는 화살표가 함께 표시되어야 한다.

🔨 How did you finally solve it?

🙏 Reference

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

🔨 What have I tried? How did you finally solve it?

🙏 Reference

• SeonHyungJo/Dont_Waste_Your_Time - 만드는건 어려운데 사용하면 좋은 정규식(Sample)
• Im-D/Dev-Docs - 정규표현식
• Im-D/Dev-Docs - 정규표현식 Slider

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❗️ How did I encounter this issue?

재생 버튼(▶)을 클릭했을 때, Time Slider 애니메이션이 실행되며 해당 시간대에 맞는 데이터를 렌더링하는 기능을 구현하는 중 발견.
기존에는 setInterval을 이용해 해당 시간대의 데이터 요청 후 렌더링.

브라우저 창을 최소화했을 때도 Time Slider가 동작하네요. 브라우저 창이 켜져 있을 경우에만 Time Slider가 동작하도록 해주세요...

❓ What is the cause of this issue?

setInterval은 브라우저의 최적화 상태와 관계 없이 clearInterval을 해주기 전에는 계속해서 동작함.

🔨 What have I tried? How did you finally solve it?

애니메이션 구현으로 많이 쓰이는 라이브러리인 velocity.js에서 내부적으로 rAF을 이용하여 애니메이션을 구현한다는 것.
rAF(requestAnimationFrame)는 브라우저의 최적화 상태를 고려하여 애니메이션을 실행.
브라우저 화면의 축소나 화면 전환에 따른 애니메이션의 프레임 누락을 막을 수 있도록 구현.

🙏 Reference

• CSS 애니메이션 vs JS 애니메이션
• MDN Docs - window.requestAnimationFrame()
• [js] requestAnimationFrame 폴리필

❗️ How did I encounter this issue?

화면 초기 렌더링 이후 다시 같은 화면으로 돌아올 경우, 해당 화면의 데이터가 초기 데이터로 유지됨.

❓ What is the cause of this issue?

react-naviagtion 라이브러리에서 navigate() 함수 사용 시 route가 있으면 해당 route로 이동하고 없으면 스택에 넣는다. 즉, 초기 route가 스택에 존재하면 그 route로 이동하기 때문에 초기 데이터가 유지된다.
새로고침이 그 화면으로 넘어갈 때마다 필요했기 때문에 해결이 필요.

🔨 What have I tried? How did you finally solve it?

처음에는 무조건 스택에 route를 넣는 push() 함수를 사용했었지만 성능상 문제가 있었고 StackNavigator를 새로 구성하도록 구현하였다.

StackNavigator를 새로 구성하기 위해 NavigationActions를 가져온 뒤, StackNavigator를 reset()함수를 이용하여 새로 구성했다.

import { NavigationActions, StackActions } from 'react-navigation';

changeScreen( screenName ){
        const resetAction = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName : screenName })]
        });
        navigation.dispatch(resetAction);
    }

🙏 Reference

• SendBird로 시작하는 React Native Chat Tutorial #3

❗️ How did I encounter this issue?

External Component를 styled-componets를 이용해서 styling을 하는 과정에서 넘긴 property를 Styled Component에서 그대로 받아썼다.

그 결과, 다음과 같은 에러가 발생했다.

Warning: React does not recognize the '[프로퍼티 명]' prop on a DOM element.

🔨 What have I tried? How did you finally solve it?

const Input = styled(({ isDirty, ...rest }) => (
  <StyledInput {...rest} />
))`
  ${({ isDirty }) =>
    isDirty &&
    css`
      border: 1px solid rgba(48, 61, 220, 0.25);
      background: rgba(142, 172, 255, 0.07);
    `};
`;

🙏 Reference

• github/styled-components - issue305

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

🙏 Reference

• moment.js Docs
• jinyowo/JS-Calendar -Wiki

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❗️ Throttling

function throttled(delay, fn) {
  let lastCall = 0;
  return function (...args) {
    const now = (new Date).getTime();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    return fn(...args);
  }
}

❗️ Debouncing

function debounced(delay, fn) {
  let timerId;
  return function (...args) {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      fn(...args);
      timerId = null;
    }, delay);
  }
}

🙏 Reference

• Throttling and debouncing in JavaScript

❗️ How did I encounter this issue?

회원 탈퇴 기능 구현 중 확인과 취소 버튼을 가진 모달과 결과 메세지를 포함하는 확인 버튼만 가진 Dialog컴포넌트를 각각 구현.
확인 버튼을 눌러 회원 탈퇴 요청 시 android에서는 잘 동작하나 ios에서는 결과 메세지를 포함한 모달 창이 뜨지 않는 버그가 발생.
<RCTModalHostViewController... which is already presenting

❓ What is the cause of this issue?

iOS에서는 Dialog컴포넌트를 2개 이상 동시에 띄울 수 없다.
그렇다면, 기존 Dialog을 끄고 띄우면 되지 않을까?
분명히 setState의 callback에서 그 다음 번 Dialog을 띄웠는데 동작하지 않음.(같은 에러 발생)

🔨 What have I tried? How did you finally solve it?

nested component방식으로 구현이 가능하다고 한다.
다만, 내가 사용한 것은 react-native-dialog라이브러리를 사용했기 때문에 nested component로 커스터 마이징하지 않고 조건에 따라 다른 props를 넘겨 Dialog가 하나만 있도록 유지했다.

🙏 Reference

• facebook/react-native#3445
• aksonov/react-native-router-flux#2563

❗️ How did I encounter this issue?

처음에는 react-native-community/react-native-geolocation 사용하였다가 사용자에게 위치 정보 권한에 대해 물어보는 확인 창을 띄우고 앱이 비정상 종료되는 문제가 발생.

🔨 What have I tried? How did you finally solve it?

JS의 navigator.geolocation 라이브러리를 사용하여 개발

🙏 Reference

• Using Geolocation in React Native
• Current Location Latitude and Longitude Using React Native Geolocation
  

❗️ How did I encounter this issue?

React Native에 Spring Framework를 이용한 프로젝트 중 Front에서 세팅한 언어 설정을 서버에서 다시 세팅했을 때 서버 쪽에서는 제대로 먹지 않아 서버로 부터 받은 데이터가 default Locale로 매핑된 값이 넘어옴.

❓ What is the cause of this issue?

Front에서 언어 설정 기능을 실행했을 때 서버에도 해당 값으로 Locale 세팅을 해주고 있음.
디버깅 결과, BaseLocaleAspect에서 받는 HttpServletRequest의 locale 값이 간헐적으로 원하는 값으로 제대로 세팅되지 않고 요청되는 것을 확인.

🔨 What have I tried? How did I finally solve it?

1번 : 잘 안됨..

BaseLocaleAspect에서 execution을 수정하여 모든 rest 컨트롤러로 이동 전에 타도록 수정>

• @Before("execution(* com.blockware.keeper.app.server.*.rest.*.*(..))")

결과적으로 1번 방법이 맞았고 개발 서버 쪽 언어 설정 관련 라이브러리를 업데이트 하는 과정에 기존에 사용하던 jar파일이 개발 서버 쪽에 남아 있어 났던 오류였음.

기존 jar파일을 삭제하니 잘 동작함.

@SeonHyungJo 님의 글을 보고 문득 생각이 든건데 글의 내용대로 console.log의 console에는 하위 메서드가 존재할 것이다. 이를 잘 정리해두셔서 링크를 걸어둔다.

🙏 Reference

• SeonHyungJo/Dont_Waste_Your_Time

❗️ How did I encounter this issue?

❓ What is the cause of this issue?

🔨 What have I tried? How did you finally solve it?

👍 Is there any better way?

🙏 Reference

❗️ How did I encounter this issue?

렌더링 최적화를 진행하던 중, React.memo를 사용하여 불필요한 렌더링을 줄이던 중, 기존 기능이 정상적으로 동작하지 않는 버그가 발생.

❓ What is the cause of this issue?

React.memo의 두번 째 인자로는 propsAreEqual 함수를 넘길 수 있는데 기존의 state값을 변경하던 함수에서 함수형 업데이트를 사용하지 않아 해당 함수가 최신 state값을 참조하지 못해서 발생.

🔨 What have I tried? How did you finally solve it?

export default React.memo(
  UserDetail,
  (prevProps, nextProps) => prevProps.userData === nextProps.userData
);

위와 같이 두번째 인자로 props를 비교할 수 있고 true를 반환하면 리렌더링을 하지 않는다.
단, 위의 로직이 제대로 동작하려면 해당 상태 값을 변경하는 함수에서 함수형 업데이트를 통해 변경해주어야 한다.

// Bad
setUserData({
  ...userData,
  [e.target.name]: [e.target.value]
})

// Good
setUserData(prevState => {
  const { name, value } = e.target;
  return {
    ...prevState,
    name: value
  }
})

🙏 Reference

• react.vlpt.us - 19. React.memo 를 사용한 컴포넌트 리렌더링 방지