gpt logo test

JS에서 string을 number로 바꾸는 방법들

자바스크립트는 변수 타입을 지정하지 않고 사용한다. 하지만 === 연산자 등을 사용할 경우 변수의 타입을 맞춰줘야 하고, 0과 "0"은 서로 falsy, truthy 값이라서 구분 할 필요는 있다. 최근 읽은 기사에서 string을 number로 바꾸는 여러 방법들을 보고 이를 정리해 보았다. 1. Number() const quantity = "12"; console.log(Number(quantity)); // 12 무난하고 자주 사용되는 용법이다. 직관적으로 나타내어지고, 정수와 소수 모두 사용가능하다. 2. parseInt() const quantity = "12.5"; console.log(parseInt(quantity)); // 12 parseInt는 주로 소수의 버림이나 n진법 만들기 용으..

Closure &Scope chain

스코프 체인 자바스크립트는 스코프라는 개념이 있다. 스코프는 유효범위를 뜻하고, 크게는 함수 레벨 스코프와 블록 레벨 스코프가 있다. var로 선언한 변수는 함수 레벨 스코프를 따르는데, var은 옛 것이므로 생략하면 let과 const는 블록 레벨 스코프를 따른다. 이 때 블록은 {}를 뜻한다. 따라서 자바스크립트는 {}안에서만 같은 레벨인 것이다. 하지만 같은 스코프 안의 변수만을 사용할 수는 없다. 이 때 필요한 것이 스코프 체인이다. 스코프 체인은 하위 스코프가 상위 스코프를 참조하는 것을 의미한다. const a = 10; { console.log(a); // 10 } 콘솔이 찍히는 곳은 글로벌 안의 하위 스코프지만, 해당 스코프에 a가 선언되어 있지 않으므로 상위 스코프에서 a를 가져온다. c..

React Router Dom V6 : nested routes

Reac Router Dom가 V6로 업그레이드 되면서 중첩 라우팅 기능이 강화되었다. 공식 문서에서는 nested routes라고 설명하는 중첩 라우팅은 동일한 레이아웃을 공유하는 여러 페이지에 한번의 레이아웃 호출로 간단하게 레이아웃을 공유하게 해준다. 위 홈페이지는 패스트캠퍼스에서 미니프로젝트로 진행한 해커뉴스 페이지이다. 3개의 페이지를 보면 헤더와 네비게이션을 동일하게 가져가는 것을 볼 수 있다. 만약 중첩라우팅을 사용하지 않는다면 위 3개의 라우트에 모두 각각 헤더와 네비게이션을 따로 설정해줘야 할 것이다. 예시로 들어보면 아래와 같은 구조가 나올 것이다. // simplify Router 구조를 보면 Route들이 모두 안에 들어간 모습임을 볼 수 있다. 해당라우트가 상위 라우트이고 그 안..

Cross-Origin Resource Sharing : 교차 출처 리소스 공유

동일 출처 정책에 의해 다른 출처의 데이터와 소통할 수 없는 문제가 생긴다. 다만 우리는 항상 같은 출처의 데이터만 이용할 수는 없다. 내가 소통하는 실제 서버의 도메인 네임이 다를수도 있고, 혹은 아예 다른 서버와 소통하는 경우도 많을 것이다. 이때 필요한 것이 CORS이다. CORS는 출처가 다른 경우에도 데이터의 교환을 하게 해준다. 이는 HTTP헤더를 추가함으로써 동작한다. 아래는 HTTP헤더를 통해서 CORS 동작이 작동되는 한 예시이다. const xhr = new XMLHttpRequest(); const url = 'https://bar.other/resources/public-data/'; xhr.open('GET', url); xhr.onreadystatechange = someHand..

Same-Origin Policy : 동일 출처 정책

만약 내가 만든 서버에서 나가는 데이터를 아무 사람이나 받게된다면 큰 문제가 생길수 있다. 반대로 아무 사람이 내 서버에 데이터를 전송해도 큰 문제가 생길 것이다. 따라서 출처가 확실한, 믿을만한 사람과 데이터를 교환해야만 한다. 물론 서버에서도 이런 보안과정을 처리하지만, 브라우저단에서도 이를 처리하는 큰 원칙이 있다. 그것이 바로 동일 출처 정책이다. 동일 출처 정책은 스크립트 사이에서 데이터를 전달할 때 중요하게 작용하는 보안 방식인데, 말 그대로 출처가 동일한 사람끼리만 데이터를 전달하게 해준다. 여기서 말하는 출처는 도메인 네임이다. http://store.company.com/dir/page.html 을 기준으로 하여 출처의 동일 여부를 판단한 결과는 아래와 같다. URL 결과 이유 http:..

React Router Dom V6 변경점-NavLink

리액트 라우터의 Link와 NavLink는 둘 다 새로고침 없이 URL을 변경해주는 역할을 한다. 그 중 NavLink는 해당하는 링크에서 스타일과 같은 특성을 바꿀 수 있게 해준다. 예를 들면 홈 화면에서는 이런 메뉴바가 News를 선택하면 그 부분의 스타일만 변경된다. 이런 NavLink도 리액트 라우터 돔이 V5 => V6로 업그레이드 되면서 변경점이 있다. 1. activeClassName, activeStyle 삭제 activeClassName과 activeStyle은 해당하는 NavLink가 선택되었을 때 알아서 클래스명을 추가하거나 스타일을 활성화하는 기능이다. 하지만 리액트 라우터가 V6로 올라오면서 삭제되었다. 따라서 다른 방식으로 클래스를 추가해 주어야한다. className // V5..

React Router Dom V6 변경점-Switch, Route

 리액트 라우터 돔이 V5에서 V6로 업그레이드 되면서 여러 변경점들이 생겼다. 이번에 새로 진행하는 프로젝트부터 V6를 사용하고 싶어서 큰 변경점들을 기록하려고 한다. 1. → 기존의 Switch가 Routes로 변경되었다. // V5 function App() { return ( ); } // V6 // Switch 대신 Routes를 사용하는 모습 function App() { return ( ); } 2. exact 옵션이 기본값이 되었다. // V5 // V6 // exact를 사용하지 않아도 된다. 따라서 exact를 제외하기 위해서는 주소에 *를 첨가해 주어야한다. // V5 // V6 // exact를 사용하지 않은 대신 users 뒤에 *를 붙여서 users 다음 어떤 경로가 들어와도 ..