본문 바로가기

Study56

JS ) 함수를 생성하는 방법 함수를 정의하는 방법 JavaScript 에서 함수를 정의하는 방법은 4가지가 있습니다. 함수 선언문 function add(x,y) { return x+y; } 함수 선언문은 함수 이름을 생략할 수 없습니다. 함수 표현식 var add = function(x,y){ return x+y; }; 함수 선언문 vs 함수 표현식 함수 선언문으로 정의한 함수는 함수 선언문이전에 호출이 가능합니다. 하지만 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출이 불가능합니다. 이는 함수 선언문과 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문입니다. 함수 선언문은 런타임 이전에 JS 엔진에 의해 먼저 실행됩니다. 즉, 함수 선언문으로 함수를 정의한 경우 런타임 이전에 함수 객체가 먼저 생성됩니다. 그리고 .. 2022. 3. 13.
Chart.js ) Vue2 + Chart.js 해당 글은 vue2.^, chart.js 2.^ 버전을 바탕으로 합니다. Vue2 + Chart.js 실행화면 Chart.js 설치 npm install chart.js 를 통해 간단하게 설치할 수 있습니다. chart.js NPM 폴더 구조 plugins/ChartPlugin.js import Chart from 'chart.js' export default { install(Vue) { Vue.prototype.$_Chart = Chart; // xx.vue // this.$_Chart => 차트 접근 } } 여러 컴포넌트에서 chart library 를 import 해야 할 경우, 위처럼 임의의 js 파일에서 chart.js 를 import 한 뒤 사용할 컴포넌트에서 this.$_Ch.. 2022. 3. 1.
JS ) Sort() 정렬에서 CompareFunction 의 필요성 Sort() 배열에서 자주 쓰이는 sort() 함수는 기본적으로 정렬 순서가 유니코드의 코드 포인트를 따르게 되어 있습니다. 한 자리 수의 숫자들로 이루어진 배열 정렬 var numbers = [2,3,5,1,4]; numbers.sort(); console.log(numbers); // [1,2,3,4,5] 문자로 이루어진 배열의 정렬 var characters = ["b", "e", "s", "d", "a"]; characters.sort(); for(let x of characters){ console.log(x); // ['a','b','d','e','s'] } 따라서 문자열로 이루어진 배열이나 한 자리 수의 숫자들로 이루어진.. 2022. 2. 28.
node.js ) 비동기 패턴 해결 (3) - async/await 비동기 패턴 해결 - async/await 이전 글에서 Promise 패턴을 이용해 비동기 처리를 동기 처리처럼 처리하는 방법을 다뤘습니다. node.js ) 비동기 패턴 해결 (2) - Promise 비동기 패턴 해결 - Promise 이전 글에서 콜백형태로 비동기 처리하는 방법을 다뤘습니다. 하지만 콜백 형태를 이용해 비동기를 처리하면, 처리는 가능하지만 매우 비효율적으로 코드가 작성됩니 jongik.tistory.com 하지만 async/await 을 이용하면 더 보기 좋은 형태로 비동기를 처리할 수 있습니다. async/await 구조 async 와 await 는 세트로 사용합니다. test.txt async test 1 async test 2 const fs = require('fs'); con.. 2022. 2. 5.
node.js ) 비동기 패턴 해결 (2) - Promise 비동기 패턴 해결 - Promise 이전 글에서 콜백형태로 비동기 처리하는 방법을 다뤘습니다. 2022.02.05 - [Study/Express(node.js)] - node.js ) 비동기 패턴 해결 (1) - 콜백함수 하지만 콜백 형태를 이용해 비동기를 처리하면, 처리는 가능하지만 매우 비효율적으로 코드가 작성됩니다. 코드가 화살표 형태로 되거나 함수를 계속 쪼개서 타고 들어가는 형태가 되어 코드의 가독성이 많이 떨어지게 됩니다. 이를 해결하기 위해 사용되는 패턴이 Promise 패턴입니다. Promise 패턴을 이용하면 비동기 형태의 코드를 마치 순서대로 동작하는 것처럼 구현할 수 있습니다. Promise 객체 Promise 패턴을 사용하기 위해 Promise 객체를 사용합니다. then 을 통해 .. 2022. 2. 5.
node.js ) 비동기 패턴 해결 (1) - 콜백함수 콜백함수를 이용한 비동기 패턴 해결 가장 기본적인 방법으로 콜백함수를 이용해 비동기 패턴을 해결할 수 있습니다. test.txt async test 1 async test 2 index.js const fs = require('fs'); fs.readFile('./test.txt', (err, data) => { console.log(1) console.log(data.toString()); fs.readFile("./test.txt", (err, data) => { console.log(2); console.log(data.toString()); fs.readFile("./test.txt", (err, data) => { console.log(3); console.log(data.toString());.. 2022. 2. 5.
node.js ) 비동기 (asynchronous) 패턴 비동기 (asynchronous) 패턴 비동기 방식이란? 메인 스레드가 존재하고 메인 스레드는 실제 코드를 실행합니다. 메인 스레드는 실행시간이 오래 걸린다고 판단하면 내부에 처리하는 다른 스레드로 해당 작업을 넘기게 됩니다. 하지만 메인 스레드에게 작업을 받은 스레드는 해당 작업이 끝나면 콜백함수를 메인 스레드에게 돌려줍니다. 메인 스레드는 전달받은 콜백함수를 실행하지만 이 콜백함수를 실행할 때는 이미 다른 코드가 처리된 이후입니다. 그리고 또 다른 작업을 스레드에게 전달하게 됩니다. 예시 : fs 를 이용해 파일을 읽고 결과를 출력하는 코드 index.js const fs = require('fs'); fs.readFile('./test.txt', (err, data) => { console.log(.. 2022. 2. 5.
express ) express-generator 프로젝트 생성하기 express-generator 매번 서버를 만들 때마다 라우터, 모델, 뷰, 미들웨어, 에러 미들웨어 등을 만드는 일은 매우 번거롭습니다. 이처럼 반복적으로 수행되는 일은 express-generator 를 이용해 한 번에 만들 수 있습니다. express-generator 를 통해 생성된 프로젝트는 개인의 스타일에 맞춰 수정하는 것도 가능합니다. express-generator 프로젝트 생성 npm 을 이용해 설치가 가능합니다. $ npm install -g express-generator express-generator 가 생성되면 express 명령어를 통해 프로젝트를 생성할 수 있습니다. express [프로젝트명] 위처럼 express 프로젝트가 생성되면 의존성 모듈을 설치하는 방법과 앱을 실.. 2022. 2. 5.
express ) 미들웨어 미들웨어 express ) Router 라우팅이란 ? 처리 로직을 따로 관리해 사용자가 접속한 URL 과 method 에 따라 해당 록직을 실행하는 것입니다. 라우팅 등록 먼저 express 를 설치합니다. npm install -s express express 에서는 라우팅을 직 jongik.tistory.com 앞의 글에서 Router() 를 이용해 모듈 형태로 생성된 라우터를 app.use 로 등록하여 사용했습니다. app.use 가 미들웨어를 등록하는 부분입니다. 또한, app.use(bodyParse()) 를 이용해 클라이언트가 body 에 포함한 데이터를 사용 가능하도록 파싱합니다. app.use 로 등록한 미들웨어는 모든 요청에 대해 동작하게 됩니다. 하지만 사용자 요청을 처리하기 위해 사용.. 2022. 2. 4.
반응형

티스토리툴바