반응형
자바스크립트에 함수를 만들 수 있는 방법이 일반적으로 function 함수가 있고 ES6 문법 이후로 Arrow 함수가 생겼습니다. function 함수 함수를 만드는 일반적인 방법입니다. function add(a, b) { return a + b; } 생성자, arguments, prototype 기능이 사용 가능합니다. 함수 선언시에 호이스팅 됩니다. 함수에 이름 있어 직관적으로 사용이 가능하고 디버깅등에 편리합니다. Arrow 함수 const add = (num1, num2) => { return num + 1 } 화살표 키워드를 이용해서 간편하게 함수를 표현할 수 있습니다. 더 간단히 return 키워드와 중괄호까지 생략할 수 있습니다. const add = (num1, num2) => num1..
Axios란? Axios는 자바스크립트에서 HTTP 통신을 쉽게 처리할 수 있도록 만든 라이브러리입니다. Node.js 와 브라우저에서도 사용할 수 있습니다. Axios에는 많은 기능들이 있어서, 쉽고 편리하게 데이터를 가져올 수 있어서 개발자들이 많아 사용하는 방법입니다. Axios 설치하기 npm install axios npm을 이용해서 설치 후 사용 가능합니다. Axios 사용법 node.js 환경에서는 선언해야 합니다. const axios = require('axios'); get 호출 axios.get('https://jsonplaceholder.typicode.com/todos/1') .then((response) => { // 요청 성공 시 처리 console.log(response.da..
npm vs Yarn vs pnpm npm, Yarn, pnpm 모두 자바스크립트나, node 프로젝트 패키지를 관리하는 도구입니다. 프로젝트 내에 있는 패키지 종속성을 관리하거나 빌드 프로세스를 용이하게 해 줍니다. npm(2010) ➡️ Yarn (2016) ➡️ pnpm(2023) 순서로 출시되었습니다. npm npm은 Node.js 패키지 관리 도구입니다. 세계에서 널리 사용되고 있습니다. Node.js 기본 패키지에 포함되어 있습니다. 설치방법 node 설치 시 자동 설치 Yarn 페이스북에서 만든 패키지 관리 도구입니다. npm 보다 가볍고 빠르다는 장점이 있습니다. 패키지를 다운로드할 때, 병렬로 처리를 하여 빠르고, 캐시를 이용하여 중북 된 패키지를 다운로드하지 않는다는 장점이 있습니다. ..
JSDoc 이란? JSDoc을 자바스크립트 프로그램이나, API를 문서화하기 위한 스타일 도구입니다. 기본적으로 /** 을 작성하면 JSDoc Parser가 인식을 합니다. 별 한 개 또는 세 개는 인식을 하지 않습니다. 다양한 태그를 이용해서 정보를 저장할 수 있고, 문서화할 수 있습니다. /** * 두개 숫자 더하기 */ function add(num1, num2) { return num1 + num2 } JSDoc 장점 단순히 설명을 작성하는 것 외에도 장점이 있습니다. JSDoc 목적에 맞게 문서화를 할 수 있고, 타입을 미리 정의하기 때문에 IDE 자동 완성 기능을 사용할 수 있습니다. 생산성 향상과 오류 찾는 디버깅 시간을 줄일 수 있습니다. 자바스크립트 프로젝트에서 타입스크립트를 도입하기 어..
jQuery를 이용해서 이벤트를 등록하면 이벤트 파라미터로 다양한 변수들이 넘어옵니다. ex) currentTarget, delegateTarget, data 등 그 중 data 변수에 대해서 알아보겠습니다. 자바스크립트 클릭 이벤트 const btn = document.getElementById('btn'); btn.addEventListener('click', (e) => { console.log('e', e); }); 위와 같이 자바스크립트를 이용해서 이벤트를 등록하면 data는 보이지 않습니다. 자바스크립트로는 PointerEvent라는 객체가 넘어오게 됩니다. jQuery 클릭 이벤트 jQuery를 이용해서 이벤트를 등록해야 data 값이 넘어옵니다. const $btn = $('#btn'); ..
자바스크립트 Math 함수에 반올림, 내림, 올림을 할 수 있는 함수들이 있습니다. 1. 반올림 round() 0.5 이상이면 올림, 0.5 미만이면 내림을 합니다. Math.round(0.5); // 1 Math.round(0.4); // 0 위와 같이 사용할 수 있습니다. 2. 내림 floor() 내림입니다. 소수점 여부와 관계 없이 내림입니다. Math.floor(0.5); // 0 Math.floor(0.4); // 0 3. 올림 ceil() 올림입니다. 소수점 여부와 관계없이 올림입니다. Math.ceil(0.5); // 1 Math.ceil(0.4); // 1 round, floor, ceil 모두 다양한 곳에서 자주 쓰이는 함수들입니다. 간단하게 Math 함수를 이용해서 반올림, 내림, 올림..
toFixed()는 자바스크립트 Number 함수입니다. 하는 일은 숫자의 소수점 자리를 정해서, 문자열로 반환합니다. 숫자.toFixed(원하는 소수점 자리수(0~20)); 아래와 같이 사용할 수 있습니다. const number = 0.12345 console.log(number.toFixed()); // 0 console.log(number.toFixed(2)); // 0.12 console.log(number.toFixed(7)); // 0.1234500 변수를 넣지 않으면 0이 들어가기 때문에 소수점은 표시되지 않고 나오게 됩니다. 2를 넣으면 소수점 둘째 자리까지 반올림해서 반환됩니다. 소수점 보다 많은 숫자를 넣으면 뒤에 0으로 표시되어서 반환됩니다. 원하는 소수점 자리를 맞추기 위해서 to..
자바스크립트에서 부모노드에서 자식 노드를 추가 하고 삭제하는 함수들을 알아보도록 하겠습니다. 1. appendChild 부모노드.appendChild(자식노드) 이렇게 사용하게 되면 부모노드의 가장 마지막에 자식 노드가 추가 됩니다. 아래와 같이 사용할 수 있습니다. const root = document.querySelector('#root'); const button = document.createElement('button'); const text = document.createTextNode('버튼'); button.appendChild(text); root.appendChild(button); 2. removeChild 부모노드.removeChild(삭제할노드) 이렇게 사용하면 부모노드에서 삭제..
var / let / const 이란? var 자바스크립트에서 변수를 선언할 때 var를 사용하였다. var a = 'superman'; 문자도 var 숫자도 var 하나로 동일하게 사용하여서 편리하였는데 ES6 이상 문법으로 갑자기 let과 const가 생겼다. const const b = 'batman'; // 변경 불가 const로 선언한 변수는 값을 변경할 수 없습니다. 변하지 않는 상수의 값만 선언할 수 있습니다. let let은 var와 같이 변수의 값을 변경 가능합니다. 하지만, 유효 범위가 다릅니다. var result; function add(a, b) { result = a + b; // 접근 가능 return result } let은 { } 괄호 안의 선언된 범위 안에서만 접근이 가능..
SSR과 CSR 이란 무엇이고, 언제 사용하는지 알아보도록 하겠습니다. SSR (서버 사이드 렌더링) 이란?SSR의 경우 서버에서 바로 렌더링 할 수 있는 HTML 파일을 만들어서 전달합니다. 그 이후 js 파일을 로드합니다.장점미리 만들어진 HTML 파일을 가져오기 때문에 검색엔진 최적화에 좋습니다.초기화면 렌더링 속도가 빠릅니다.CSR (클라이언트 사이드 렌더링) 이란?CSR은 서버에서 HTML과 자바스크립트를 함께 전달합니다. 자바스크립트가 모두 로드된 이후에 페이지가 로드됩니다.장점매끄러운 화면 전환사용자 경험 향상 화면 렌더링 방식SSR (서버 사이드 렌더링)흰 화면 -> 서버에서 내려준 HTML 렌더링 -> 자바스크립트 파일 로드 CSR(클라이언트 사이드 렌더링)흰 화면 -> 자바스크립트 파일..