encodeuricomponent vs encodeuri

mdn example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var set1 = ';,/?:@&=+$'; // Reserved Characters
var set2 = "-_.!~*'()"; // Unescaped Characters
var set3 = '#'; // Number Sign
var set4 = 'ABC abc 123'; // Alphanumeric Characters + Space

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)
  • 새롭게 url을 생성하는 과정에서는 encodeURIComponent를 쓰면될 것 같다

참고

ReDoS attacks

테스트

example.js
1
2
3
console.time(0);
/^(([a-z])+.)+[A-Z]([a-z])+$/g.test('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa!');
console.timeEnd(0);
  • a가 많아질수록 급격하게 평가하는데 오래 걸리는 모습이다
  • 복잡한 정규식을 짤 때 성능 테스트가 동반되어야 할 것 같다
  • 인풋의 길이 등 사전에 필터링해줄 수 있는 것들은 필터링해주면 좋을 것 같다

참고

퍼블리쉬없이 npm 패키지 테스트하기

terminal
1
2
3
4
5
# pwd: npm package
npm link

# pwd: other project
npm link -S {packagename}

상황

  • 패키지를 업데이트하고 퍼블리쉬한다
  • 해당 패키지를 사용하는 프로젝트에서 install 한다
  • 테스트한다
  • 퍼블리쉬를 해야지 확인할 수 있는 불편함이 있다. 테스트용 퍼블리쉬를 할 때마다 버전이 계속 증가한다

해결

  • npm link 명령을 통해 퍼블리쉬 없이 테스트해볼 수 있다
  • 글로벌 모듈이 설치되는 위치에 심볼릭 링크가 추가된다
  • npm link -S {packagename}명령으로 로컬의 패키지를 설치한다

  • npm r -g {packagename} 테스트를 다 끝내서 필요 없어졌다면 심볼릭 링크를 삭제

참고

로컬에서 vscode live server로 spa 실행하기

상황

  • live server로 리액트 빌드 결과를 실행해보고 싶었다
  • github pages로 호스팅하기 때문에 basePath?가 있었다
  • live server에서 일단 로컬로 실행해보고 싶었는데,
  • basePath와 spa를 어떻게 실행해 볼 수 있을까?

해결

.vscode\settings.json
1
2
3
4
5
// .vscode\settings.json
{
"liveServer.settings.mount": [["/go-home-time", "./"]], // package.json에 homepage필드가 있는 경우
"liveServer.settings.file": "index.html"
}

참고