JavaScript
-
JavaScript | Babel Plugin 제작하기JavaScript/JavaScript 2020. 4. 22. 12:35
Babel Plugin 제작하기 바벨은 프리셋과 플러그인을 누구나 제작할 수 있는 API를 제공 바벨 플러그인을 제작해 보면서 바벨의 내부 동작 구조를 이해하는 것이 목표 AST 구조 확인 바벨은 문자열로 입력되는 코드를 AST(abstract syntax tree)라를 구조체로 만들어서 처리하며 플러그인에서는 AST를 기반으로 코드를 변경함 AST의 구조는 https://astexplorer.net/ 사이트에서 확인 가능 astexplorer 이용하기 astextplorer 사이트에서 const v1 = a + b; 코드의 AST 확인 바벨은 babylon이라는 파서를 이용해서 AST를 만들기 때문에 파서 목록에서 babylon을 선택 { "type": "File", "start": 0, "end": ..
-
JavaScript | Babel 기초 정리JavaScript/JavaScript 2020. 4. 22. 10:49
Babel 웹 애플리케이션 기반 기술 중 하나로 입/출력이 모두 자바스크립트 코드인 컴파일러 초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 컴파일러였으나, 현재는 바벨을 이용해서 리액트 JSX 문법, 타입스크립트, 코드 압축, 제안(proposal) 단계에 있는 문법 등을 사용할 수 있음 여러가지 Babel 실행 방법 @babel/cli 프로젝트 생성 $ mkdir test-babel $ cd test-babel $ npm init -y 패키지 설치 $ npm install @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react ..
-
ReactJS | Json-Server & ConcurrentlyJavaScript/React JS 2020. 4. 21. 09:28
json-server 가상의 데이터 서버를 구성할 수 있도록 도와주는 라이브러리 설치 yarn glodbal add json-server 데이터 입력 루트 폴더에 mock 폴더를 만들고 db.json이라는 파일을 만들어 가상의 데이터 입력 { "data": [ { "id": 1, "name": "pathas", "age": 1000, }, { "id": 2, "name": "pathasHH", "age": 1000, } ] } json-server 구동 package.json에 json-server를 실행하는 "mockserver" 명령어 추가 ... "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "..
-
ReactJS | Firebase로 React 프로젝트 DB 연동 및 배포JavaScript/React JS 2020. 4. 10. 17:37
Firebase 데이터 베이스를 포함한 여러가지 서비스를 제공하는 Google의 모바일 플랫폼 ※ 주의사항__요금제를 Spark로 사용해야 무료로 이용 가능!! ※ 그 외의 서비스나 다른 클라우드 플랫폼도 마찬가지로 서비스에 따라, 서비스 사용량에 따라 과금이 발생하는 경우가 있기 때문에 무료로 이용을 원하는 경우에는 항상 요금을 확인하고 서비스를 이용해야 불필요한 과금이 발생하지 않음 Firebase 주요 서비스 Firebase Cloud Function: 클라우드 서비스들을 빌드하고 연결할 수 있는 serverless 실행 환경 Google Cloud Function과 유사한 부분이 많음 Auth: 주요 SNS를 통해서 로그인을 쉽게 구현할 수 있도록 도와 주는 서비스 Hosting: 서버 없이 웹 ..
-
JavaScript | Event Handling 이벤트 처리JavaScript/JavaScript 2020. 4. 9. 12:38
Evnent Handler 이벤트 처리기 등록 방법 이벤트 주도형 프로그램(event driven program)에서는 이벤트가 발생했을 때 실행할 함수를 등록해 두는데 이때 실행되는 함수를 이벤트 처리기 또는 이벤트 리스너라고 함 HTML 요소의 이벤트 처리기 속성에 설정 HTML 문서를 읽어들일 때 이벤트 처리기도 함께 설정하기 때문에 설정하기 쉬움 DOM 요소 객체의 이벤트 처리기 프로퍼티에 설정 HTML과 자바스크립트를 분리해서 작성 가능 → 겸손한 자바스크립트 구현 → 프로그램 유지 보수성 향상 const btn = document.getElementById('button'); btn.onclick = changeColor(); addEventListener 메서드 사용 const btn = d..
-
ES6+ | PromiseJavaScript/ES6+ 2020. 4. 7. 11:12
Promise 사용 배경_비동기 처리 예 setTimeout, addEventListener 메서드, XMLHttpRequest 객체의 작업은 비동기로 실행됨 비동기 작업은 동기와 다르게 순차적으로 실행되지 않음 자바스크립트에서 비동기 코드의 순서를 동기적으로 보장받으려면 콜백 함수를 사용해야 함 비동기 코드 실행 순서 console.log("A"); setTimeout(() => console.log("B"), 0); console.log("C"); // A → C → B setTimeout 함수는 인수로 받은 콜백 함수를 n밀리초 뒤에 실행되도록 예약만 하고 바로 다음 코드가 실행됨 setTimeout 함수가 콜백 함수를 0초 후에 실행되도록 했으나 실제로는 호출 스택에 실행 문맥이 남아 있을 때는 ..
-
ReactJS | ProxyJavaScript/React JS 2020. 3. 30. 11:40
Proxy 사전적 의미 proxy: 대리 Proxy를 설정한 서버를 Proxy Server라고 함 원래 서버의 대리 역할을 수행하는 서버가 됨 서버가 2개 일 때 발생하는 문제들 데이터 서버: php, Django, JSP etc. 클라이언트 서버: React Dev Server 클라이언트는 특별히 서버가 필요 없지만 create-react-app이 개발 서버를 제공 → 두 서버에 각각의 PORT 번호를 설정함으로써 각 서버를 식별할 수 있도록 함 → 여러 가지 문제 발생 개발 시에는 fetch API 등으로 ('http://localhost:8000/api_path')와 같은 경로로 서버에 데이터를 요청하지만 배포 시에는 '/api_path' 이외의 주소가 있다면 에러 발생 CORS(Cross-Or..
-
ES6+ | Destructuring 구조 분해 할당 & 객체 확장 표현식JavaScript/ES6+ 2020. 3. 6. 16:57
Destructuring 구조 분해 할당 & 객체 확장 표현식 객체 확장 표현식 ES6에 도입되었으며 객체 내부에서 표현식을 사용하거나 보다 편리하게 키와 키값을 저장할 수 있도록 하는 문법 객체의 키에 저장할 값을 가진 변수와 키의 이름이 동일한 경우 키 이름만 작성 가능 객체 생성 블록 안에 대괄호[]를 사용하여 표현식 작성 가능 함수 선언 시 function 키워드 생략 가능 const x = 0; const y = 0; const obj = {x, y}; console.log(obj); // {x: 0, y: 0} const randomKey = 'other'; const comObj = { ['the' + randomKey]: 'hello?' } console.log(comObj); // {th..