분류 전체보기
-
JavaScript | Webpack 기초 정리JavaScript/JavaScript 2020. 4. 23. 14:46
Webpack 웹팩은 모듈 번들러로, 각각의 리소스 파일을 합쳐서 사용자에게 전달하기 좋은 형태로 만들어주는 역할을 함 모듈(module): 각 리소스 파일 번들(bundle): 웹팩 실행 후 나오는 결과 파일 웹팩이 필요한 이유 SPA(단일 페이지 애플리케이션) 등장 이후 하나의 HTML이 수많은 자바스크립트 파일을 포함하기 때문에 기존의 방식으로 자바스크립트 리소스를 관리하기가 어려워짐 HTML에서 모든 자바스크립트 리소스를 관리하면 계속 늘어나는 파일을 관리하기도 어렵고, 실행 순서도 신셩써야 하며, 기존에 생성된 전역 변수를 덮어쓸 수도 있는 위험이 발생 script 태그로 외부 모듈을 불러오는 경우 주소에 오타가 있거나, 해당 사이트에 문제가 있는 경우 모듈 요청 실패 외부 모듈이 필요없어지면 ..
-
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": "..
-
REST APIETC./REST 2020. 4. 16. 11:10
REST API REST(REpresentational State Transfer) 로이 필딩(Roy Fielding)의 2000년 논문에서 처음 소개되었으며, 발표 당시의 웹이 HTTP의 설계 상 우수성을 제대로 사용하지 못하고 있는 상황을 보고 웹의 장점을 최대한 활용할 수 있는 아키텍쳐로서 REST를 제시 REST는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하며, REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"하다고 표현 1. REST API 속성 서버에 있는 모든 자원은 각 자원당 클라이언트가 바로 접근할 수 있는 고유 URI가 존재 모든 요청은 클라이언트가 요청할 때마다 필요한 정보를 주기 때문에 서버에서는 세션 정보를 보관할 필요가 없음 → 서비스 자유도가 높아지고..
-
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초 후에 실행되도록 했으나 실제로는 호출 스택에 실행 문맥이 남아 있을 때는 ..