개발 블로깅/Modern script
-
[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.11.17] ES2019(ES10) 새로운 기능을 습득하자~!개발 블로깅/Modern script 2019. 11. 17. 17:31
# Object.fromEntries 배열로 가지고 있던 값을, 알맞게 매칭시켜서 obj 형식으로 변환시킨다. 첫 번째 배열 인자를 key, 두 번째 배열 인자를 value로 한다. 기존의 Object.entries 기능의 반대 기능을 한다. const entry = Object.entries({name:'inyong', age: 27, family: ['father', 'mother', 'brother', 'sister']}); console.log(entry); // [['name','inyong'],['age',27],['family',['father','mother','brother','sister' ]]]; const fromEntry = Object.fromEntries(entry); cons..
-
[2019.05.28] TypeScript 사용법 (TypeScript+Express 구현)개발 블로깅/Modern script 2019. 5. 28. 20:17
기존의 자바스크립트는 컴파일을 돌리지 않고 브라우저 상에서 돌아가는 언어여서 데이터 타입이 정말 느슨하다. 변수 타입이나 파라미터에서도 제한되는 것이 없고 너무나도 자유롭다 보니, 개발할 때 데이터 타입에 대한 오류사항이 정말 많이 일어나기도 한다. 그러나 실제 컴파일 환경에서 돌리듯 자바스크립트 문법에 데이터 타입을 하나하나 명시를 해 줌으로써 이를 방지할 수 있는 방식이 타입 스크립트이다. 4주 차 프로젝트를 진행하면서 백엔드 역할을 맡게 되었는데, 이번 기술 스택에 typescript를 사용하도록 되어있다. 이번 기회에 typescript를 손에 익힐 기회가 왔다. 백엔드 파트를 맡았으므로, typescriptfh express환경을 구성하는 방법을 정리해보려고 한다. # typeScript 기본적..
-
[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 사용법 #3 - 브라우저 자동 동기화 browser-sync개발 블로깅/Modern script 2019. 4. 22. 00:21
이전에 bundle 작업을 자동으로 활성화 해주는 것을 해보았다. 그러나 코드를 저장하고 브라우저에서 반영된 내용을 확인하기 위해서는 새로고침을 해야 했다. 이번에는 새로고침을 하지 않아도 코드를 수정 후 저장만 하면 바로 브라우저에서 반영이 되는 sync browser 모듈을 사용하는 법을 알아볼 것이다. #sync browser 모듈 설치 npm install -D browser-sync browser-sync-webpack-plugin sync browser는 webpack과 함께 사용할 것이므로, browser-sync와 같이 browser-sync-webpack-plugin을 같이 설치해준다. package.json 모듈을 설치하면, package.json 파일에서 devDependecies에 ..
-
[2019.04.21]WebPack 사용법 #2 - webpack.config.js 설정개발 블로깅/Modern script 2019. 4. 21. 23:31
이전 사용법 #1에서는 webpack 명령어를 이용하여 직접 번들파일을 생성해주는 방식을 작업해 보았다. 그러나 웹 서비스를 개발할 때마다 일일히 webpack 명령어를 쳐서 번들화 작업을 해 줄 수 없다. 그래서 webpack.config.js라는 파일을 이용해서 개발작업을 할 때마다 자동으로 번들화 시켜주도록 설정한다. bundle 파일을 자동으로 생성해주는 작업을 위한 설정 - webpack.config.js webpack을 자동으로 사용하기 위한 설정을 하기 위해서는 'webpack.config.js' 이라는 파일을 하나 생성해 줘야한다. 이 파일에 webpack에 관한 정보가 들어가게 된다. const path = require('path'); module.exports = { entry: pa..
-
[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..