es6
-
[2021.03.23] 라이브러리 모듈 단에서 ES5 에러 발생시 확인할 요소개발 블로깅/Modern script 2021. 3. 23. 07:28
프로젝트 내에서 로그 수집을 위해 fireBase 라이브러리를 이용 중이다. 그런데 해당 라이브러리를 거쳐서 요청된 API 쪽에서 아래와 같은 에러가 발생하는 것이었다. Object.values is not a function Object.values는 자바스크립트 공식 함수이며 ES6부터 사용할 수 있는 명령어임으로 ES5환경에서는 지원이 되지 않는다. 그런데 이게 라이브러리 단에서 이러한 에러가 발생하니 어떻게 조치를 해야할지 몰랐었다. 그러나 알고보니 방법은 굉장히 간단했다. 해결 방법 해당 fireBase를 이용하기 위해서 코드 내에 Account Set을 하는 부분이 있다. import * as firebase from 'firebase'; let database; let config = { a..
-
[2019.08.27] 오늘의 TIL - Next.js + TypeScript + Mobx 사용시 주의사항 [Provider, inject]개발 블로깅/Next.js 2019. 8. 27. 23:51
오늘 Next.js + TypeScript로 작업한 내용에 Mobx를 적용시켜서 새롭게 리펙토링을 하는 작업을 했다. Mobx를 적용하면서 부딪혔던 이슈 사항들을 정리해보려고 한다. # [Next.js + Mobx] 다른 pages로 렌더링 할 때 Next.js에서 최상위 컴포넌트는 pages디렉토리의 _app.js이므로, 해당 파일에 Provider를 적용시킨다. import App, { Container } from "next/app"; import React from "react"; import { Provider } from "mobx-react"; import RootStore from "../stores"; interface State { Store: RootStore; } export def..
-
[2019.04.27] Promise 꿀팁 - util 모듈 promisify()개발 블로깅/Server&DataBase 개념 2019. 4. 27. 15:53
node.js의 내장함수인 util모듈 중에 promisify라는 함수가 있다. 이것을 쓰면, 비동기로 돌리려는 함수를 promise로 감싸주지 않고 사용할 수 있다. 그래서 지금부터 이 Promise를 조금 더 잘 다룰 수 있도록 하는 util promisify()함수를 소개해보려고 한다. 안녕하세요~! // hello.txt const fs = require('fs'); fs.readFile('./hello.txt', 'utf-8', (err, result) => { console.log(result); // '안녕하세요~!' }); // util.js 위와 같이 hello.txt와 utiltest.js 파일이 있다. util.js은 node.js 내장함수인 fs모듈을 이용하여 hello.js파일의 ..
-
[2019.04.26] 자바스크립트의 비동기 특징과 비동기 방식을 다루는 법개발 블로깅/Modern script 2019. 4. 26. 19:29
자바스크립트는 싱글 스레드이다. 그래서 비동기 방식의 함수를 정말 많이 내장하고 있다. # 비동기 방식의 특징 동기적 함수들은 절대 비동기 함수를 기다려주지 않는다. 그래서 비동기 방식의 함수는 동기적 방식의 함수들이 처리를 다 하면, 그제서야 이벤트 큐에서 하나씩 가져와서 처리가 된다. 그래서 비동기적 방식의 함수를 호출 후 처리해야할 작업은, 처리할 함수를 콜백으로 넘기는 등 전부 비동기 함수 쪽에 몰아 넣어야 한다. # 비동기 방식의 필요성 자바스크립트는 네트워크 상 웹 브라우저에서 사용하는 언어이다. 그러므로 자바스크립트는 통신이라는 개념을 가지고 있다. 통신 중 어떤 함수가 일 처리가 길어지면, 웹 브라우저는 계속 멈춤 상태가 되고 기다려야 된다. 통신 중 계속 기다려야 되는 상황을 방지하기 위..
-
[2019.04.22] WebPack 사용법 #4 - babel 세팅개발 블로깅/Modern script 2019. 4. 22. 12:11
브라우저 내에서는 ES6 이상의 문법을 호환하지 않는다. 그럼 우리는 어떻게 ES6문법을 이용하여 개발이 가능한 것인가. 바로 babel이란 모듈이, ES6 문법을 브라우저에 사용할 수 있는 방식인 ES5으로 바꿔준다. 이 babel을 사용하게 위해서는 모듈을 설치하고 webpack에 설정을 해 주어야 한다. 그러면 babel을 사용하는 법을 알아보자. 이전 글에 작업했던 webpack에 이어서 한다. # babel 모듈 설치 npm i -D babel-cli babel-preset-env babel-core 위 세개의 모듈은 babel을 사용하게 위해서 필요로 한 필수 모듈이다. 설치를 하면 package.json에서 babel 관련 버전이 표시되는 것을 확인할 수 있다. 그리고 해당 root경로에 '..
-
[2019.04.21] WebPack 사용법 #1 - webpack 설치개발 블로깅/Modern script 2019. 4. 21. 22:25
# webPack이 왜 필요한가? 우선 webPack이란것을 왜 사용하는지부터 정리해보면, https://helloinyong.tistory.com/75 (이전에 작성한 내용) 에 나와 있는 것 처럼 여러 파일을 한꺼번에 묶어서 하나의 .js파일로 사용하기 위한 것도 있다. 무엇보다 파일 간 dependency를 위해서 modern script에서는 import, export, require을 사용하는데, 브라우저가 이를 호환하지 않는다. 그래서 modern script 방식의 dependency를 브라우저에서 사용할 수 있도록 브라우저 방식에 맞게 하나의 js파일로 bunddling(묶음)하여 script src로 선언하는 것! # webPack 설치법 npm install -g webpack webp..
-
[2019.04.17] CommonJS란?개발 블로깅/Modern script 2019. 4. 17. 16:26
개념은 간단하다. '.js' 파일 간의 어떻게 의존성을 가지게 할지 정해주는 것이다. 우선 commonJS라는 개념이 존재하는 이유는, 자바스크립트를 범용적으로 모듈화를 높이기 위함! ES6 리액트 기준으로만 설명 // test1.js function MSG1(){ console.log('1'); } function MSG2(){ console.log('2'); } export {MSG1, MSG2} 위 코드를 보면, test1.js에서 MSG1, MSG2의 함수를 export 한다. export는 다른 곳에서 쓸 수 있게 내보내 주는 것. export 키워드 뒤에는 내 보낼 함수 혹은 변수명을 {}괄호로 묶어줘서 보낸다. 이름을 꼭 맞춰주어야 한다. // test2.js import {MSG1, MSG..
-
[2019.04.17] ES6 문법 - default parameter개발 블로깅/Modern script 2019. 4. 17. 12:27
함수에서 매개변수를 호출할 때 넣어주는 데이터가 없으면, 함수에서는 해당 매개변수가 undefined가 된다. function testFunc(argu1, argu2){ console.log(argu1); // 1 console.log(argu2); // undefined } testFunc(1); 그런데 ES6 문법에서는 매개변수가 선언이 되었는데, 호출 시 값이 들어오지 않으면 초기화 해줄 수 있다. function testFunc(argu1, argu2 = 2){ console.log(argu1); // 1 console.log(argu2); // 2 } testFunc(1); 위와 같이 매개변수에 들어오는 값이 없으면 초기화 해 줄 수 있다. # Default parameter 활용법 functi..