JavaScript의 논리 연산자 중 NOT 연산자인 느낌표(!)는 부정(Negation)을 의미하며 피연산자의 논리 값을 반전시킨다. 즉, 입력값을 boolean으로 변환하여 값이 true면 false로, false면 true로 리턴한다. 느낌표 두 개(!!)는 이중 부정(부정의 부정)으로 긍정이 된다. 테스트 문자열 ("str")// true('str') !("str")// false !!("str")// true ("")// false('') !("")// true !!("")// false boolean true// true !true// false !!true// true false// false !false// true !!false// false NaN NaN// false(NaN) !NaN..

slice slice(indexStart) slice(indexStart, indexEnd) substr (Deprecated) substr(start) substr(start, length) 첫번째 매개변수인 start는 탐색 구간의 시작점을 의미한다. start가 음수일 경우, 문자열의 뒤에서부터 가져온다. 두번째 매개변수인 length는 가져올 길이 값이며, 생략 가능하다. length를 생략할 경우, start에서부터 문자열 마지막까지를 가져온다. length 값이 음수일 경우 빈 값을 반환한다. (가져올 길이 값이 마이너스이므로 빈 값을 리턴) ℹ️ Note: substr() is not part of the main ECMAScript specification — it's defined in ..

카카오페이에서 새로 배운 내용 기록. 밤(bam.chae)께서 목돈계산기/투자계산기 QA를 진행해주셨는데 슬라이더를 빠르게 이동시킬 경우 슬라이더가 멈춰버리는 현상이 이슈로 등록되었다. 슬라이더를 통해 금액값을 입력받고, 해당 값을 쿼리스트링으로 관리하도록 했는데 이 부분에서 따로 최적화를 하지 않아서 슬라이더를 빠르게 이동시킬 경우 지나친 Set 함수 호출로 인해 멈추는 것으로 확인되었다. UI팀 레츠(lets.go)께서 쓰로틀링이나 디바운싱을 적용하면 될 것 같다고 아이디어를 주셔서 해당 개념에 대해 먼저 알아보았다. 운영에는 수정 후 배포했다. 디바운싱(Debounce) 연속으로 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 바운싱 현상(bouncing) : 전자 회로 스위..

이벤트 등록 TEST var button = document.querySelector('button'); button.addEventListener('click', foo); function foo(event) { console.log('event'); } 위와 같이 addEventListener() 메소드를 통해 화면에 동적인 기능을 추가할 수 있다. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때, 상위 요소들로 전달되는 특성을 의미한다. * 상위 화면 요소 : HTML 트리 구조상 한 단계 위에 있는 요소. var divs = document.querySelectorAll('div'); divs.forEach(function(div) { div...

클로저(Closure) 클로저는 '포섭'이란 뜻으로, 독립적인(자유) 변수를 가리키는 함수이며 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 클로저 = 함수 + 함수를 둘러싼 환경(Lexical Environment) 예제 1 function outerFunc() { let outerVar = "outer"; function innerFunc() { console.log(outerVar); } return innerFunc; } var test = outerFunc(); // test 변수에 innerFunc 함수를 리턴함 // 유효범위의 어휘적 환경을 유지 test(); //리턴된 innerFunc 함수를 실행(outerVar 변수에 접근) test는 outerFunc이 실행될 때 생성된 inn..

호이스팅(Hoisting) 호이스팅은 '끌어올리기' 라는 뜻으로, 함수 또는 변수가 끌어올려져 최상단에 선언되는 현상을 말한다. function foo() { console.log('foo'); } foo(); // foo foo(); // foo function foo() { console.log('foo'); } Java와 다르게 함수 선언 자체를 나중에 해줘도 함수를 끌어올려서(Hoist) 갖고온다. 호이스팅은 JavaScript 엔진이 가지고 있는 특징이다. 함수표현식과 같이 에러가 발생하는 예외가 있기 때문에 신중히 사용해야 한다. 호이스팅이 발생하는 코드는 이해하기 어려워지고 > 유지보수가 힘들어지기 때문에 > 호이스팅 현상은 방지하는 것이 좋다. 호이스팅 적용 대상 호이스팅은 var 변수 선..

스코프(Scope) 스코프는 '범위'라는 뜻으로, JavaScript에서는 변수에 접근할 수 있는 범위를 뜻한다. 스코프에는 전역 스코프(Globap Scope)와 지역 스코프(Local Scope)가 있다. 전역 스코프(Global Scope) 변수가 함수 바깥이나 중괄호({}) 바깥인 전역에 선언되었다면 전역 스코프에 정의된 것이다. 전역 스코프는 어느 곳에서든지 해당 변수에 접근할 수 있다. 지역 스코프(Local Scope) 전역 스코프와 반대로, 변수가 함수 안이나 중괄호({}) 안에 선언된 경우 지역 스코프에 정의된 것이다. 지역 스코프는 해당 지역에서만 접근할 수 있다. 해당 지역을 벗어난 바깥에서는 접근이 불가능하다. JavaScript에는 블록 스코프, 함수 스코프 두 개의 지역 변수가 ..

원티드 프리온보딩 프론트엔드 챌린지 (8월)에 참여하면서 프로젝트에 TypeScript를 적용했다. type 지정을 해주니 코드량이 점점 늘어났고 타입 지정을 도대체 어디까지 해야하는지 의문이 들었었다.. before) 원래 내가 작성했던 코드인데 signin, signup 메소드 안에 response를 보면 const response: AxiosResponse = axios.post(); 이렇게 좌측에도 response 변수의 type 지정, 우측에 post 에도 Generic에 type 지정을 해줬었다. 이것도 처음에는 어떻게 썼었냐면... const response: AxiosResponse = axios.post(); 이렇게 AxiosResponse 안에 Generic type까지 지정해줬었다 ㅋ..

location.href location.replace 기능 새로운 페이지로 이동 기존 페이지를 새로운 페이지로 변경 형태 속성 메서드 히스토리 기록됨 기록되지 않음 ex location.href = '주소' loation.replace('주소') href는 속성이기 때문에 속성값을 지정 = 해주면 되고, replace는 메서드이기 때문에 호출 () 해서 파라미터로 값을 넘겨주면 된다. 리다이렉트 된 페이지에서 뒤로가기 했을 경우, blank(빈화면)가 노출되지 않도록 리다이렉트 케이스는 모두 href 대신 replace 사용했다. 예) PC 주소를 모바일 디바이스에서 접근시 모바일 주소로 리다이렉트 시킬 때 replace 사용