분류 전체보기 검색 결과

해당 글 15건

JSONP

Jsonp 웹 브라우저에서 실행되는 JavaScript는 동일 출처 정책에 따라 XMLHttpRequest 등의 직접적인 HTTP 통신을 이용해 외부 출처에서 데이터를 받아오는 것이 불가능하지만, HTML script 요소는 외부 출처로부터 조회된 내용을 실행하는 것이 허용되어 있다. JSONP는 동일-출처 정책을 우회하는 데이터의 공유를 가능하게 한다. 상속 비보안 문제로 인해 JSONP는 CORS로 대체되고 있다. 참고 위키백과 쇼핑하우 fetch 요청해보기 // 쇼핑하우에 검색어에 'abc'라고 입력했을때 url 'https://suggest-bar.daum.net/suggest?limit=10&mode=json&code=utf_in_out&q=abc&id=shoppinghow_suggest' 요러..
JavaScript 2021. 6. 6. 02:26

SVG 그래프(차트) 만들기 (베지어 곡선)

베지어 곡선 참고링크 https://ko.javascript.info/bezier-curve https://blog.coderifleman.com/2016/12/30/bezier-curves/ 베지어 곡선 테스트해보기 링크 https://cubic-bezier.com/#.5,0,.5,1 베지어 곡선을 차트로 만들어 보기전에 간단한 예제로 문법을 살펴봅시다 차트에서 활용할 곡선은 이런 모양입니다 이런식의 선을 계속 연결하면 베지어 곡선의 차트가 완성될 것 같습니다 svg의 path를 사용했는데 문법은 polyline과 비슷하지만 명령문자에 M, C가 사용되었습니다 M, C 말고도 추가로 여러가지 명령문자가 있지만 자세한건 아래의 링크에서 참고하실 수 있습니다 https://developer.mozilla...
HTML 2021. 6. 5. 23:58

SVG 그래프(차트) 만들기 (polyline)

빨강색으로 차트를 그려보았습니다 svg 여기에서 svg 태그는 현재 차트의 크기를 설정할 수 있습니다 viewBox 속성은 값으로 min-x, min-y, width, height숫자 배열 값을 전달 받습니다. 현재 min-x는 0, min-y는 0, width는 500, height는 100입니다 polyline fill속성 - 도형의 안쪽을 색깔을 채울수 있습니다 stroke 속성 - 도형의 선 색상을 지정할수 있습니다 points - 도형에 점을 찍습니다 (x좌표, y좌표) 현재 points는 00, 100 으로 시작하고 500,100으로 끝납니다 00, 100의 00은 맨왼쪽을 의미하고 100은 바닥을 의미합니다 같은 것을 선으로 표시해보면 이런식의 도형이 그려집니다 여기에서 알 수 있는것은 fi..
HTML 2021. 6. 5. 00:54

[task runner] concurrently 사용하여 터미널 한개로 한번에 실행시키기

npm run start 시에 터미널 한개로 한번에 자동 watch하기 (sass 컴파일, webpack 번들링, 서버 실행) 이전 포스팅에서 npm run start시에 한번에 묶어서 실행이 되게 하였는데 watch가 되지 않아 계속 서버를 껏다가 켰었다 그래서 이번에는 nodemon ,concurrently 를 이용하여 한번에 watch 하여 실행되게 하였다 (서버를 껏다킬 필요가 없어졌다) (～￣▽￣)～ 방법 npm install -g nodemon 노드몬을 전역에 설치 하고 npm install concurrently concurrently를 설치하였다 webpack 은 webpack.config.js에 watch: true로 바꾸었고 (자동 반영) sass는 package.json에서 --wat..
express 2021. 2. 28. 12:37

npm start 실행시 사전배포 설정하기

사전배포 설정 현재 express 설정, sass설치, webpack설치를 해놓은 상태이다 ▼ express에서 html rendering하는 설정을 위한 설치 $npm install consolidate $npm install swig ▼ scss를 css로 컴파일 하기 위한 설치 $npm install sass ▼ js모듈을 가능하게 해주는 webpack 설치 $npm install webpack $npm install webpack-cli (이것들은 다 다를 수 있음..) 현재 실행시킬때의 순서가 sass 컴파일 -> webpack 번들링 -> 서버 실행 이렇게 된다 그래서 sass를 컴파일 하기 위한 명령어는 참고 $sass public/stylesheets/scss:public/styleshee..
express 2021. 2. 28. 12:33

순수 함수(pure Function)

함수형 프로그래밍에서는 함수를 중심으로 Side-Effect가 없도록 프로그래밍을 하는 것을 말한다 여기서의 함수는 순수 함수(pure Function)이다 순수 함수란 동일한 인자를 넣었을 때 항상 동일한 리턴값을 반환하고 외부에 영향을 받지 않는 함수를 말한다 순수 함수 input : 어떠한 함수에서 외부의 데이터를 직접적으로 사용하지 않고, 파라미터로 받는다 output : input값에 의해 output이 결정되기 때문에 외부의 값들이 변경되더라도 함수 자체에는 외부에 영향을 받지 않기 때문에 Side-Effect가 없다는 것이다 파라미터 순수하지 않은 함수 const peopleList = ['eve', 'kyle', 'dico', 'autumn']; const getPeopleList = ()..
함수형 프로그래밍 2021. 1. 20. 17:02

Solid 객체지향 5대 원칙

객체 지향 5대 원칙이란 SRP(단일 책임 원칙) 소프트웨어의 설계 부품(클래스, 함수 등)은 단 하나의 책임만을 가져야 한다. OCP(개방-폐쇄 원칙) 기존의 코드를 변경하지 않고(Closed) 기능을 수정하거나 추가할 수 있도록(Open) 설계해야 한다. LSP(리스코프 치환 원칙) 자식 클래스는 부모클래스에서 가능한 행위를 수행할 수 있어야 한다. ISP(인터페이스 분리 원칙) 한 클래스는 자신이 사용하지 않는 인터페이스는 구현하지 말아야 한다. DIP(의존 역전 원칙) 의존 관계를 맺을 때, 변화하기 쉬운것 보단 변화하기 어려운 것에 의존해야 한다는 원칙이다. 앞글자를 따서 SOLID 원칙이라고 부른다
객체지향 프로그래밍 2021. 1. 16. 18:11

7장 클래스

자바스크립트는 프로토타입 기반 언어라서 '상속' 개념이 존재하지 않는다 클래스 기반의 다른 언어에 익숙한 많은 개발자들은 이를 혼란스러워 했고, 따라서 클래스와 비슷하게 동작하게끔 흉내 내는 여러 기법들이 탄생 했으며 결국 ES6에는 클래스 문법이 추가되었다 클래스와 인스턴스의 개념 이해 프로그래밍 언어에서의 클래스는 현실세계에서의 클래스와 마찬가지로 '공통요소를 지니는 집단을 분류하기 위한 개념'이라는 측면에서는 일치하지만 인스턴스들로부터 공통점을 발견해서 클래스를 정의하는 현실과 달리, 클래스가 먼저 정의돼야만 그로부터 공통적인 요소를 지니는 개체들을 생성할 수 있다 클래스간의 상하관계 위의 그림에서 음식, 과일, 귤류는 모두 클래스이다 음식은 과일보다 상위의 (superior) 개념이고, 과일은 음..
코어 자바스크립트 2020. 12. 28. 16:35