"js" tagged

내가 애정하는 함수 `oneOf`

동적 타입언어인 js 는 타입정의를 하지 않아도 되기 때문에 편하고 빠르게 코딩을 할 수 있다는 장점이 있습니다. js…

AWS Lambda 에서 optional chaining 연산자를 사용하고 싶어서 잠깐 알아봤다. optional chaining 은 Node14 부터 사용이 가능하다고 한다. https://stackoverflow.com/a/5957416…

자바스크립트는 문법적으로 여러가지 애매한 특징들을 가지고 있다. 특별히 소수점 처리가 범상치 않다는 것은 이미 대충은 알고 있을 것이다. 왜 유독 14 에 0.1 을 곱할 경우만 결과가 이상하게 떨어지는 걸까? 위 문제가 현실 세계에서 어떤 문제를 발생시킬 수 있을 지 직접 예시를 통해 확인해 보자.

알쏭 달쏭 js 퀴즈 정리. 결과값을 예상해 봅시다 :)

canvas 의 이미지를 클라이언트에서 바로 다운로드 하는 방법 dom 구조가 아래와 같을 때, 이렇게 처리한다. a 태그의 속성을 이용하는 것이 포인트! Ref https://stackoverflow.com/questions/812662…

ramda 를 응용한 몇가지 유용한 확장함수들 go noop except propNotEq OR AND isNotNil peek 사용시 중간에 전달되는 값을 로그로 찍어서 확인할 때 필요한 함수 hasProps

주어진 문자열에서 매칭되는 문자열을 전부 찾아내는 방법 메소드는 실행될 때마다 다른 결과를 순차적으로 리턴한다. 전체 문자열을 대상으로 매칭되는 문자열이 없을 때까지 주어진 문자열을 순회하며 매칭된 문자열을 찾아야 한다. Ref https…

URL 스트링 파싱할 때 옛날엔 url-parse 모듈을 이용했었는데.. 요즘은 URL 객체가 기본적으로 지원이 되는구나! 브라우져와 노드 모두 사용가능하구나! 👍

자바스크립트는 문장(statement)의 구분을 위해 세미콜론 `;` 을 사용한다. 일반적으로 코드의 가독성을 위해 한줄에 하나의 문장만 사용한다.

Context api 를 이용하면 mobx, redux 없이도 애플리케이션 상태를 공유할 수가 있다. 하지만 상태를 업데이트하기 위해서는 공유되는 컨텍스트 안에 상태 변경 메소드까지 포함하여야 하는데 이를 통해 애플리케이션의 전체 상태를 관리하기가 불편할 수 있다.

프로젝트의 폴더 구조를 개선해 나가다 보면 폴더 구조의 depth 가 깊어짐에 따라 와 같이 보기 싫은 코드가 만들어 질 수 있다. 프로젝트/src…

create-react-app 으로 시작해서 mobx 를 사용하기 위한 기본적인 세팅방법 기록해 둠 1. 앱생성 2. CRA 기본 앱 설정 추출 3. mobx, mobx-react 설치 4. 데코레이터 사용 설정 preset 설치 package…

mobx-react 를 이용해 리액트 컴포넌트에 상태를 주입하는 방법 1. 함수형 컴포넌트 2. 클래스 컴포넌트

일반적인 리액트 클래스 컴포넌트는 React.Component 를 확장하여 정의한다. React.Component…

mobx 는 우리를 의 늪에서 꺼내 주었다. 충분한 자유함과 유연함은 좋지만 그 것이 좋은 것이 되려면 언제나 책임을 전제로 해야한다. observalbe…

react 에서 코드 재사용을 위해 적극적으로 권장하는 방법 Render Props. 리액트는 prop 을 통해서 primitive…

함수형 컴포넌트는 부모 컴포넌트가 렌더링될 때 무조건 함께 같이 렌더링이 됩니다. 하지만 함수컴포넌트의 경우 props 가 다르지 않다면 항상 같은 결과를 리턴하므로 부모 컴포넌트가 re-render 되더라도 함수 컴포넌트의 props…

…

image lazy load 란 사용자가 보여지는 화면 영역 안에(viewport…

안 되는 줄 알았는데.. 찾아보니 간단히 되는구나! 요즘 웹으로 정말 안되는 게 없는 듯~ Ref. https://stackoverflow.com/questions/9419263/playing-audio-with-javascript

0부터 99까지 배열을 만드는 방법(내가 아는 가장 간단한 방법)

프로젝트 공통에서 계층 구조적으로 에러를 핸들링하고자 하고자 한다면 함수를 이용할 수 있다 구체적인 설명은 귀찮아서 생략한다.

js 에서 제공하는 클래스는 기본적으로 아래와 같이 문자열을 인자로 받는다 객체타입을 사용해 에러메세지를 입체적으로 정의하고자 한다면 클래스를 아래와 같이 확장하여 사용한다.

async/await 를 이용하면 간단하게 비동기함수를 순차적으로 실행할 수 있다. 하지만 이것은 caller…

클립보드에 데이터를 읽고 쓰는 방법 클립보드에 데이터 쓰기(execCommand 이용) 크롬에서 정상 동작 클립보드 데이터 읽기(execCommand 이용) 크롬에서 정상 동작 파이어폭스 미지원 클립보드 데이터 읽기(clipboard API…

아래와 같이 특정 URL의 부가정보를 가져와서 간략하게 보여주는 뷰를 작성해 보았다. https://news.v.daum.net/v/20190907135442277 코드 함수는 이전 포스트 를 참고한다.

특정 URL의 타이틀, 이미지, 설명 정보를 간단히 긁어오는 웹스크래핑 소스를 작성해 보았다. 브라우져에서 사용할 경우에는 CORS 문제로 url의 응답을 가져오는데 제한이 있을 수 있다. 그럴 경우에는 URL…

async/await 를 사용할 때, 일반적으로 프라미스를 리턴하는 비동기함수의 응답을 기다릴 때 비동기 함수 앞에 await 를 사용한다. 하지만, await 다음 함수가 프라미스를 리턴할 지 일반적인 value…

디버깅용 로그를 남길 때 실행 중인 함수스코프 내의 해당 함수 이름을 참조하고 싶을 때가 있다. 함수 스코프 내에서 해당 함수의 이름을 참조하려면 어떻게 해야할까? 아래 방법이 가능하다 함수의 name 속성은 ES6부터 지원하지만 strict…

https://medium.com/@rinae/번역-두려움-믿음-그리고-자바스크립트-언제-타입-시스템과-함수형-프로그래밍이-먹히지-않는가-dde33972301f…

웹개발시 일반적으로 디버깅시 를 많이 사용하는데 주의해야 할 사항이 있다. 아래 코드를 보자 위와 같이 객체 자체를 직접 콘솔에 찍을 경우 브라우져(크롬)는 에 대한 참조를 이용해 console…

배열을 초기화하는 가장 쉬운 방법은 다음과 같다. arr 가 const 로 선언되어 있다면 아래와 같이 처리할 수 있다. 그런데 뷰에서는 length 를 초기화하는 방법으로 인한 변이가 reactive 하지 않기 때문에 splice…

여기 소스 살펴보다가 replace 를 이렇게 활용할 수도 있구나.. 인상적이어서 공유해 봅니다 쿼리스트링을 파싱하여 리턴하는 유틸함수(원본 소스를 일부 수정함) URL이 아래와 같을 때 http://www.11st.co.kr/product…

ES6에서 도입된 spread operator 는 객체를 다룰 때 상당히 유용하게 쓰인다. 하지만 정확히 알고 사용하지 않으면 오류를 발생시킬 수 있다. 특별히 프레임웍으로부터 전달받은 이벤트객체를 spread operator…

decorator를 이용하면 클래스 정의를 보다 예쁘게 할 수 있다. 그렇다면 decorator가 호출되는 시점은 정확히 언제일까? 다음 예제를 통해서 확인해 보자. 결과는 아래와 같다. 결론 객체가 생성될 때 가장 먼저 decorator…

함수 선언은 호이스팅 된다. 결과) 하지만 함수표현식은 호이스팅되지 않는다. 결과)

자바스크립트의 함수단위 스코프, 동적 this 바인딩, lexical scope 등 자바스크립트에서 scope 에 대한 개념을 정확히 이해하기 위해 알아야 할 사항들은 상당히 많다. 특별히 아래 퀴즈들을 통해 나는 자바스크립트 scope…

크로스도메인 요청을 보낼 https 서버가 인증정보(id/pw)를 요구하는 경우에 필자가 경험했던 문제를 정리한다. 시나리오 현재 화면()에서 특정 데이터를 가져오기 위해 로 요청을 보내야 한다고 가정하자. 그리고 프론트에서는 fetch…

var와 let의 구체적인 차이점을 확인해 보자 누구나 아는 내용 let, const 는 ES6부터 사용가능 var, let 은 변수 const는 상수 var 는 동일한 변수를 여러번 선언 가능하지만, let, const…

설치 .babelrc 에 아래 설정 추가 vscode 에서 문법오류 optional-chaining 사용 설정을 완료하고 VSCODE에서 해당 문법을 사용하려고 하면 문법오류라고 지적을 해준다. 물론 현단계에서 optional-chaining…

js 속도 튜닝이 필요할 경우 특별히 스크립트의 소요시간을 체크하고자 할 때 간단하게 사용할 수 있는 함수를 소개한다. 사용법 실행 결과 timelog.js…

어떤 작업을 수행했던 시작과 끝 시간이 주어지고 해당 기간에 소요된 공수를 일단위로 계산한 결과가 필요할 때 아래와 같이 계산할 수 있 다 요건 주5일(월~금) 하루 8시간 근무를 기준으로 계산한다 점심시간(12~1…

배열의 마지막에 2개 이상의 원소를 추가하는 방법 결론 4번이 가장 직관적으로 이해하기 쉽다고 생각한다.

배열의 특정 요소를 제거하는 2가지 방법 결론 2번째 방법은 조건에 따라 여러 개를 한꺼번에 삭제하는 것도 가능하다. 읽기도 쉽고 코드도 더 짧다. 를 이용하자

자바스크립트에서 제공하는 배열 함수는 original 배열의 상태를 변경시키는(mutable) 함수도 있고 기존 상태를 변경시키지 않고(immutable…

충분한 설계없이 만들어진 자바스크립트 자바스크립트는 1995년 Brendan Eich…

일반적으로 배열의 마지막 요소를 아래와 같이 인덱스 참조로 접근할 수 있지만, 배열이 특정 객체의 속성으로 depth 가 깊어지면 코딩이 불편해 진다. 이럴 때 활용할 수 있는 좀 더 깔끔한 표현을 찾아보았다. (es…