본문 바로가기

JavaScript/AboutJS

(13)
[javascript] FormData form 태그 안의 복수의 input 창 입력값을 한번에 추출하기 1. FormData 란? FormData는 HTML 폼의 데이터를 쉽게 구성하고 전송할 수 있게 해주는 웹 API입니다.  2. 장점 파일 업로드를 포함한 폼 데이터를 쉽게 처리멀티파트/폼데이터 형식으로 자동 인코딩체크박스나 다중 선택과 같은 복수 값 처리가 용이 예시코드 Email Password Confirm Password First Name Last Name ..
[javascript] 내 위치의 경도, 위도 정보 알아보기 (navigator.geolocation.getCurrentPosition) 웹 브라우저에서 제공하는 위치 정보 메소드 중 아래의 메소드를 사용하면 됩니다.navigator.geolocation.getCurrentPosition(success, error, options)    GeolocationPosition의 coords 속성 상세 설명`coords` 객체는 사용자의 지리적 위치에 대한 상세 정보를 제공합니다. 주요 속성은 다음과 같습니다:1. `accuracy`: 35937.106310649929   - 위도와 경도 값의 정확도를 미터 단위로 나타냅니다.   - 이 경우 약 35.9km의 오차 범위를 가집니다.2. `altitude`: null   - 해수면 기준 고도를 미터 단위로 나타냅니다.3. `altitudeAccuracy`: null   - 고도 값의 정확도를 미..
[JavsScript] 함수의 부분 적용과 유연한 합성 3: curry - 인자를 유연하게 다루는 고차 함수 만들기 https://daunje0.tistory.com/174 [JavsScript] 함수의 합성과 데이터 파이프라인 2: pipe - 재사용 가능한 함수 파이프라인 만들기https://daunje0.tistory.com/173 [JavsScript] 함수의 합성과 데이터 파이프 라인 1. go함수를 값으로 다룰 수 있다는 자바스크립트의 특성 ( 일급함수 ) 때문에정말 다채로운 표현이 가능한 데, 그걸 배우는daunje0.tistory.com 위 블로그에서 계속 됩니다.  const log = console.log const products = [ {name: '반팔티', price: 15000}, {name: '긴팔티', price: 20000}, {name: '핸드폰케이스', price..
[JavsScript] 함수의 합성과 데이터 파이프라인 2: pipe - 재사용 가능한 함수 파이프라인 만들기 https://daunje0.tistory.com/173 [JavsScript] 함수의 합성과 데이터 파이프 라인 1. go함수를 값으로 다룰 수 있다는 자바스크립트의 특성 ( 일급함수 ) 때문에정말 다채로운 표현이 가능한 데, 그걸 배우는 데에는 아래 강의가 개인적으로 최고이지 않을까 싶습니다. 참고 : 함수daunje0.tistory.com위 블로그에서 계속 됩니다. go 함수는 즉시 실행되어 값을 리턴하는 함수였지만지금 다룰 pipe 함수는 여러 개의 함수를 인자로 받아 새로운 함수를 반환합니다. 생성된 함수는 인자로 받은 함수들을 순차적으로 실행합니다.  const go = (...args) => args.reduce((a, f) => f(a)); const pipe = (...fs) => (..
[JavsScript] 함수의 합성과 데이터 파이프 라인 1. go - 즉시 실행되는 함수 체인 만들기 함수를 값으로 다룰 수 있다는 자바스크립트의 특성 ( 일급함수 ) 때문에정말 다채로운 표현이 가능한 데, 그걸 배우는 데에는 아래 강의가 개인적으로 최고이지 않을까 싶습니다. 참고 : 함수형 프로그래밍과 JavaScript ES6+ 유인동 님https://www.inflearn.com/course/functional-es6 함수형 프로그래밍과 JavaScript ES6+ 강의 | 유인동 - 인프런유인동 | ES6+와 함수형 프로그래밍을 배울 수 있는 강의입니다. 이 강좌에서는 ES6+의 이터러블/이터레이터/제너레이터 프로토콜을 상세히 다루고 응용합니다. 이터러블을 기반으로한 함수형 프www.inflearn.com   const go = (...args) => args.reduce((a, f) => f(..
[JavsScript] yield* 란? yield*는 하나의 표현식입니다. 여기서 *는 yield와 함께 특별한 의미를 가집니다.ECMAScript 명세에 따르면, yield*는 "YieldExpression"의 한 형태로 정의됩니다. yield*는 뒤에 오는 제너레이터나 이터러블 의 각 값을 현재 제너레이터의 yield 지점으로 전달합니다.이는 마치 해당 제너레이터나 이터러블의 모든 값을 현재 제너레이터 내에서 개별적으로 yield하는 것과 같은 효과를 냅니다.1. ECMAScript 2015 언어 명세 (ECMA-262, 6th Edition):https://www.ecma-international.org/ecma-262/6.0/#sec-generator-function-definitions2.MDN Web Docs의 yield 문서:ht..
[Javascript] Iterable, Iterator 프로토콜 자바스크립트의 이터러블(Iterable)과 이터레이터(Iterator) 프로토콜은 객체의 순회 가능성을 정의하는 중요한 개념으로 ES6에 와서for of 문으로 간단히 map set string 도 순회가 가능하도록 만들어준 개념입니다.map set 은 배열처럼 set[0], set[1] 혹은 map[0], map[1] 으로 값을 접근 못하지만 for of 문을 돌 수 있는 이유가  이터러블 이터레이터 프로토콜 때문입니다.  아래의 커스텀 이터레이터 코드를 보면서 정의를 보면 이해가기가 조금 더 쉬워집니다. const iterable = { [Symbol.iterator](){ let i = 3; return { next(){ return i === ..
[JavaScript ]CommonJS 모듈 ES 모듈 차이 1. 문법 - CommonJS 모듈 const module = require('module'); module.exports = { ... }; - ES 모듈 import module from 'module'; export const something = { ... }; 2. 로딩방식 CommonJS: 동기적으로 로드 ES 모듈: 비동기적으로 로드3. 사용환경CommonJS: 주로 Node.js 환경 ES 모듈: 브라우저와 최신 Node.js 버전에서 지원4. 정적 분석CommonJS: 런타임에 동적으로 모듈 결정 ES 모듈: 컴파일 시간에 정적으로 분석 가능5. 캐싱CommonJS: 모듈을 캐시하여 여러 번 호출해도 한 번만 실행 ES 모듈: 모듈을 한 번만 평가하고 결과를 공유6. thi..