Javascript
-
쿼리스트링 복수값 전달하기 :: 마이구미Javascript 2022. 12. 11. 19:24
이 글은 쿼리스트링(querystring) 을 사용하는 사례 중 하나를 다뤄본다. 정확히는 하나의 필드에 여러개의 값을 넣는 경우에 대한 내용이다. 글의 예제들은 URLSearchParams API 와 qs 라는 모듈을 기반으로 작성되었다. 예제 코드 - https://codesandbox.io/s/multi-querystring-gopv63 URLSearchParams - https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams qs - https://github.com/ljharb/qs 쿼리스트링을 활용하는 대표 사례는 검색 필터 조건을 들 수 있다. 이미 URL 에 포함된 쿼리스트링의 값을 기반으로 검색 조건의 값들을 셋팅하여 사용자에게 더 나은..
-
npm install vs npm ci :: 마이구미Javascript 2021. 11. 24. 21:16
이 글은 npm install 과 npm ci. 명령어를 비교해본다. 두 명령어 모두 의존성 목록을 설치하는 것이지만, 서로 다른 방향을 가진다. 둘 사이의 차이점을 이해하면 유용하게 사용할 수 있을 것이다. 다른 패키지 매니저(yarn) 가 아닌 npm 을 기준으로 다루게 된다. 우선 npm install 명령어는 우리가 알다시피 특정 파일과 밀접한 관계가 있다. package.json package-lock.json 두 파일을 간단하게 살펴보자. package.json 은 우리가 설치하고자 하는 모듈에 대한 의존성 목록이 존재한다. 여기서 의존성 목록의 버전은 version range 를 따르고 있다. (~, ^
-
Default Parameters 문법 :: 마이구미Javascript 2021. 8. 28. 22:50
이 글은 자바스크립트 문법 중 Default Parameters 문법에 대해 다룬다. 이름이 생소할 지라도 대부분 사용하고 있는 문법이다. 디폴트 파라미터를 사용할 경우, 정확히 이해하고 있지 않으면 이슈를 맞이할 여지가 있다. MDN - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters 디폴트 파라미터(Default Parameters) 문법은 흔히 사용하고 있다. function multiply(a, b = 1) { return a * b; } 값이 할당되어있지 않으면 기본값을 채워주기 위한 용도로 사용하고 있다. 그리고 함수 파라미터가 아닌 객체에서도 구조 분해 할당 문법과 함께 많이 ..
-
Tagged Template Literals 문법 :: 마이구미Javascript 2021. 6. 30. 22:00
이 글은 "Tagged Template Literals" 문법을 다룬다. 이 문법은 직접 구현해서 사용하는 경우는 흔치 않지만 이미 여러 라이브러리에서 활용하고 있어 쉽게 접할 수 있다. MDN - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals Template Literals 우리는 동적인 문자열을 처리할 때 다음과 같은 형태를 많이 사용한다. const userName = 'Mygumi'; const age = 20; const output = `Hi, ${userName} and I am ${age}.`; ES6 에서 새롭게 도입된 기능으로 템플릿 리터럴(Template Literals) 이라고 불린다...
-
window.open() 팝업창 구현하기 :: 마이구미Javascript 2021. 6. 5. 20:34
이 글은 widnow.open() 을 통해 새 페이지를 띄우는 팝업창을 다뤄본다. 팝업창은 여러 상황에서 따라서 메인 페이지와 통신하기도 하고, 어떤 시점 닫아야하기도 한다. 이러한 방식을 위한 구현, 주의사항, 웹앱 이슈 등을 알아본다. 우선 여기서 말하는 팝업창은 팝업이라는 용어와 비교하겠다. 팝업은 같은 창에서 단순히 div 태그를 absolute 형태로 보여지는 형태이다. 팝업창은 같은 창이 아닌 새로운 창을 의미한다. 위 이미지처럼 서로 다른 창으로 존재한다. 이렇게 새로운 팝업창을 띄우는 경우는 다음으로 나열할 수 있다. SNS 로그인 본인인증 모듈창 다른 페이지 or 다른 도메인의 페이지가 필요할 경우. 자바스크립트에서는 window.open() 을 통해 이를 구현할 수 있다. // 기본 예..
-
파일 다운로드 기능 구현하기 :: 마이구미Javascript 2021. 6. 5. 15:52
이 글은 자바스크립트를 통해 파일 다운로드 기능을 구현해본다. 파일 다운로드 기능은 클라이언트에서 제공해주거나 서버에서 제공해줄 수 있다. 2가지 방식에 대한 구현 및 주의사항, 웹앱 이슈 등을다뤄본다. 파일 다운로드 방식에 있어서, 2가지 방식은 무엇인가? 2가지의 기준은 클라이언트와 서버로 기능을 제공하는 주체가 된다. 간단하게 말하면, "서버 도움 없이 클라이언트 사이드에서 제공하는 것"과 "서버 사이드에서 다운로드를 위한 API" 를 제공해주는 것이다. 클라이언트 사이드에서 이를 제공할 수 있는 방식은 다음과 같다. a 태그에서 download 속성이라는 것을 제공해준다. 서버에서 제공해주는 방식은 다음과 같다. HTTP 응답 헤더인 Content-Disposition 를 활용하는 것이다. 이를 ..
-
제너레이터(Generators) 란? :: 마이구미Javascript 2020. 3. 23. 23:53
이 글은 ES6 에서 도입된 제너레이터(Generators) 를 다룬다. 사용법보다는 본인이 궁금했던 도입된 이유, 실행 컨텍스트 현황, 사용 이점을 살펴본다. 사용법이나 필요한 용어 및 지식은 크게 다루지 않으니 필요하다면, 다른 글에서 참고하길 바란다. 제너레이터는 ES6 에서 새롭게 도입된 개념이다. 기본적인 형태는 다음과 같다. function* myGenerator { yield "1"; yield "2"; } const it = myGenerator(); it.next(); 제너레이터의 핵심은 동시성 프로그래밍이다. 비동기 프로그래밍에도 많은 도움을 주지만, 여기서는 동시성(concurrency)을 중점으로 다뤄보려고 한다. 동시성이란 무엇인가? 들어갈수록 쉽게 이해할 수 없는 내용이기에 간략..
-
MouseEvent 종류와 주의사항 :: 마이구미Javascript 2019. 5. 12. 15:52
이 글은 마우스 포인터 좌표를 얻을 수 있는 MouseEvent 의 좌표 값에 대한 속성들을 다룬다. 크게 client*, page*, offset*, screen* 네 가지의 차이점을 알아보고, 주의사항을 알아본다. 차이점은 사실 이 글이 아니더라도, 쉽게 이해할 수 있을 것이다. 이 글을 쓰게 된 계기는 "주의사항" 이 된다. 결과적으로 특정 속성의 리턴값은 Integer 형태가 아닌 double 형을 반환한다. MDN - https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent client*, page*, offset*, screen* 차이점 본인이 경험한 관련 이슈 원인과 해결 참고하면 좋을 것들 우선 가장 기본적인 마우스 포인터 좌표에 대한 속성..