치춘짱베리굿나이스

Web Share API 2차로 갈만한 가게를 추천해주는 웹앱 개발에 참여하면서, 특정 장소나 장소 모음집 (컬렉션) 을 다른 사람에게 공유해줄 수 있는 기능을 만들 일이 생겼다 스마트폰에서 공유 버튼을 누르면 대부분 같은 UI의 팝업이 뜨는데, 이걸 보니 공유 기능이 각자 독자적으로 개발된 것이 아니라 자바스크립트 또는 HTML 등에서 제공해주는 특정 API를 사용하겠구나 싶었고, 실제로도 그랬다 이 API를 사용해서 어떻게 링크 공유를 해줄 지 알아보자 설명 MDN에서의 설명 번역 The Web Share API allows a site to share text, links, files, and other content to user-selected share targets, utilizing the..

[Violation] took 1000⬆️ms 이게 뭐지 앞에서 this 바인딩 문제를 해결하니 이번엔 이상한 경고가 출력된다 대충 이 핸들러 호출하고 종료되기까지 1016초 걸렸으니 왠만하면 비동기로 동작하게끔 하는 게 좋겠다 라는 의미이다 또한 이 경고는 숨길 수가 없다고 한다 원인은 경고 출력용 alert 함수 때문이었는데, alert로 출력된 경고 메시지의 ‘확인' 버튼을 눌러야 함수가 종료되었다고 판단하기 때문에 확인 버튼을 언제 누르냐에 따라 위의 경고 메시지의 시간이 달라진다 테스트해보니 3초 뒤에 클릭하면 대충 3초 조금 넘는 시간이 걸렸다고 나왔다 만약 경고 메시지의 확인 버튼을 10분 뒤에 누르면 아마 600,000ms 걸렸다고 나오지 않을까… alert 함수는 위의 함수 종료를 지연시..

이벤트 핸들러 this 오류 문제 클래스 안에 있는 메서드를 핸들러로 부착하니 클래스의 멤버 변수들을 찾지 못하는 상황이 발생했다 처음에는 메서드가 프라이빗 메서드라 그런 건가? 싶어서 이리저리 고쳐봤는데, 알고 보니 this가 클래스 인스턴스를 가리키지 않고 이벤트가 걸린 요소를 가리켜서 그런 것이었다 원인 https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener MDN 문서에 따르면 이벤트 수신기 (이벤트 핸들러) 의 this는 이벤트가 걸린 대상 요소를 가리키게 된다고 한다 (= e.currentTarget이 가리키는 요소와 같다) 디버깅하느라 별 짓을 다 했는데 이런 이유가 있었다 해결 DOM요소.addEventListe..

모듈과 모듈 번들러 이 글은 웹팩과 웹팩 설정 관련 정리 포스팅을 적기 위한 빌드업이다 모듈 모듈이란 특정 기능을 가진 작은 코드 단위로, 웹팩에서는 하나의 파일을 하나의 모듈로 부른다 계산기를 만든다고 하면, 덧셈을 담당하는 파일, 뺄셈을 담당하는 파일 등 세부 기능 단위로 파일을 분리해서 그 함수를 다른 파일에서 가져다 쓰게 되는데, 각각의 파일이 모듈이라고 할 수 있다 한 파일 내에는 같은 주제의 함수 여러 개가 존재하고, 이를 내보내면 다른 모듈에서 가져와 사용하는 식으로 큰 기능을 구현한다 자그마한 테스트용 스크립트 파일이나 간단한 파일 입출력 연산 정도면 파일 한개로 구현이 가능하겠지만, 프로젝트 규모가 커지다 보면 절대 하나의 파일에 모든 기능을 몰아넣을 수 없고, 설렁 넣는다 해도 한 파일..

콜 스택 (호출 스택) 개념 프로그램이 함수 호출을 추적할 때 사용한다 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하는지, 다음에는 어떤 함수를 동작하여야 하는지 등을 제어한다 스택의 LIFO (후입선출) 특성을 생각하면 호출 스택도 비슷한 원리로 동작함을 알 수 있다 메모리 구조에서 스택이 의미하는 것이 바로 이 콜 스택이다 힙이랑 다른 점 스택은 액세스가 빠르고, 힙은 상대적으로 느리다 힙은 사용자가 직접 변수 할당 및 해제를 관리해줘야 하지만, 스택은 관리할 필요가 없다 (CPU가 알아서 관리해줌) 힙은 메모리 단편화가 일어날 수 있지만, 스택은 그렇지 않다 스택 내의 변수는 해당 스코프 내에서만 접근할 수 있지만, 힙 내의 변수는 (주소값만 알고 있다면) 전역적으로 접근 ..

일반 함수 vs 화살표 함수 (람다식) 참고로 필자는 자바스크립트 입문을 let, const, 화살표함수로 했기에 그것만 주구장창 썼는데 이걸 왜 쓰는지는 명확히 이해하지 못했다 (그냥 일반함수랑 똑같이 작동한다고 생각했음) 언젠가 두 개의 차이를 정리해봐야겠다 막연한 생각은 했었는데 그게 지금이 될 줄은 일반 함수 function foo() { console.log("foo"); } 평범하게 작성한 함수이다 const bar = function foo() { console.log("foo"); } 변수에 할당하고 싶다면 이렇게 작성한다 화살표 함수 const foo = () => { console.log("foo"); } 화살표를 이용해서 조금 더 간결하게 작성되는 함수이다 ES6에서 추가되었으며, 람..

Symbol 뭐 하는 녀석인지? 태초에 자바스크립트는 원시 자료형 5개와 객체 자료형 1개 총 6개의 자료형으로 이루어져 있었다 Number, String, Boolean, null, undefined 그리고 객체 Object가 그것이었는데, ES6 (2015년) 에 원시자료형팀 환상의 식스맨으로 Symbol이 합류했다 심볼은 객체의 고유 식별자로 활용할 수 있는 원시자료형으로, 쉽게 말해 객체 내부 프로퍼티의 키를 설정할 때 사용할 수 있다 심볼을 사용하면 프로퍼티 키가 겹치지 않고 고유한 값으로 설정되므로, 키가 중복으로 설정됨으로써 발생하는 충돌을 막을 수 있다 프론트엔드에서 클래스명을 겹치지 않게 설정하기 위해 CSS module을 사용하거나, CSS-in-JS 라이브러리들 (Styled Comp..

자바스크립트에서의 싱글톤 패턴과 static 싱글톤의 의미 Singleton 이름의 ‘Single’ 에서 뭔가 한 개..? 하나의…? 라는 뜻이 연상된다 싱글톤은 특정 클래스에 인스턴스를 단 하나만 생성 (메모리를 단 한 번만 할당) 하여 사용하는 패턴을 의미한다 (= 메모리를 단 한 번만 할당한다) 특징 인스턴스가 딱 하나만 생성된다 (대개 private, static 등의 키워드를 이용하여 구현한다) ‘단 한 개’ 만 생성되는 인스턴스는 전역으로 참조될 수 있으며, 다른 객체들이 이 공유된 인스턴스에 접근할 수 있어 데이터 공유가 편리하다 메모리를 한 번만 할당하면 되기 때문에 효율이 좋다 인스턴스가 ‘단 하나' 임을 보장하고 싶을 때 주로 사용한다 단점 일반 클래스보다 더 복잡하며, 비동기적인 상황..