본문 바로가기

JavaScript19

ES6 ) Class 클래스 클래스 ES6 이전의 자바스크립트에는 공식적으로 클래스가 없었습니다. 타입은 함수로 정의하고 그 함수 객체에 있는 프로토타입을 사용해 메서드를 정의했습니다. function Vacation(destination, length){ this.destination = destination; this.length = length; } Vacation.prototype.print = function(){ console.log(this.destination+" "+this.length+"일"); } var daegu = new Vacation("대구",5); daegu.print() // 대구 5일 객체지향 프로그래밍을 학습해온 개발자에겐 이런 방식이 생소합니다. ES6 부터는 클래스 선언이 추가되었습니다. 함수는.. 2022. 4. 17.
JavaScript ) 간단한 click Counter 만들어보기 click counter 버튼을 누르면 1씩 증가, 감소하는 카운터 실행화면 코드 0 매번 프레임워크를 활용한 학습 및 프로젝트를 진행하다보니 javascript 에 소홀했던 것 같습니다.. 아주 기초적인 부분부터 다시 복습해볼 계획입니다. 2022. 3. 16.
JS ) 함수를 생성하는 방법 함수를 정의하는 방법 JavaScript 에서 함수를 정의하는 방법은 4가지가 있습니다. 함수 선언문 function add(x,y) { return x+y; } 함수 선언문은 함수 이름을 생략할 수 없습니다. 함수 표현식 var add = function(x,y){ return x+y; }; 함수 선언문 vs 함수 표현식 함수 선언문으로 정의한 함수는 함수 선언문이전에 호출이 가능합니다. 하지만 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출이 불가능합니다. 이는 함수 선언문과 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문입니다. 함수 선언문은 런타임 이전에 JS 엔진에 의해 먼저 실행됩니다. 즉, 함수 선언문으로 함수를 정의한 경우 런타임 이전에 함수 객체가 먼저 생성됩니다. 그리고 .. 2022. 3. 13.
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.
JavaScript ) fetch vs axios fetch vs axios 웹어플리케이션의 기본 업무 중 하나는 HTTP프로토콜을 통해 서버와 통신하는 것이다. 이 작업은 Fetch 또는 axios를 사용하여 쉽게 수행할 수 있다. 사용하기 쉽기 때문에 내장 API 보다 axios를 선호하는 개발자들도 있다. Fetch API는 Axios의 주요기능을 완벽하게 재현할 수 있다. axios 브라우저에서 node.js 또는 XMLHttpRequests의 HTTP 요청을 만드는데 사용되는 JS 라이브러리이다. JS ES6에 기본으로 제공되는 Promise API를 지원한다. XSRF에 대한 클라이언트 측 보호를 활성화한다. 프론트엔드와 백엔드의 통신을 도와준다. 코드 작성법 axios.get('url') // url과 data, headers.. 2022. 1. 29.
반응형

티스토리툴바