본문 바로가기
728x90
반응형

Javascript

 (133)
[node] 내보내기와 불러오기 지난번 게시물 hello node! 출력 하기의 활용이다. 이번 예시에서는 내보내기 파일과 불러오는 파일을 별도로 구분했다. 해당 예시에서는 내보낼 땐 Module.exports 변수를, 불러올 땐 require 파일명을 사용하였다. 먼저 내보내기 파일 생성 hello.js를 만들었을 때와 동일하게 myvar.js라는 파일을 생성한 후 module.exports.a = "hello a"; 작성 이후 불러올 파일(사용할 파일)인 index.js 파일 생성 생성한 파일에 myvar 파일의 경로 작성 및 console.log()로 출력할 메시지 입력. cmd 창에서 index.js를 실행한다. 같은 방식으로 함수도 내보낼 수 있다. 다시 myvar.js 파일로 돌아가 내용을 아래 이미지처럼 수정 index.j..
[node] 'hello node!' 출력하기 node 명령어를 통한 hello.js 실행 새 폴더를 생성하여 vscode에 드래그 앤 드랍한다. 이 때 생성산 새 폴더의 경로를 기억해 두는 것이 좋다. (CMD 명령어 입력 시 폴더의 경로를 알아야 함) 예시에서는 폴더명을 exercise라고 만들었다. 마우스 우클릭하여 새 파일을 생성한다. 파일 명은 hello.js로 생성했다. 생성한 hello.js 파일에 console.log("hello node!")라고 코딩한다. 윈도우 기준 cmd 창을 열어 새로 생성한 폴더(exercise)로 이동 및 hello.js를 실행한다. 이동 : cd 해당폴더 경로 실행 : node hello.js(실행할 js 파일명) hello.js 실행 시 hello node!가 뜨는 것을 확인할 수 있다. 출처 : 본 포..
node 설치 및 에디터(vscode) 설치 구글에 node download를 검색하여 다운로드 링크로 이동하거나 해당 URL 접속 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운로드가 완료되면 install 프로그램을 실행하고 별도의 설정 없이 next 버튼만 누르면 설치가 완료된다. 설치 완료 후 정상적으로 설치가 되었는지 확인 windowOS 기준으로 cmd창을 열어 node -v, npm -v를 각각 입력하여 아래 이미지와 같이 출력되면 정상 설치 완료 다음으로 vscode 설치 및 기본 세팅 방법이다. 구글에 vscode download 검색 하여 링..
[Javascript] 동기/비동기 처리와 callback 동기와 비동기를 나누는 가장 큰 차이점을 어떻게 실행 순서를 가지는 지에 있다. 아래 이미지와 같이 Syncronous 동기는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식을, Asynchronous 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행할 수 있는 방식을 의미한다. 아래와 같이 함수를 작성하여 호출했을 때 동기적으로 실행된다. function work() { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start + 'ms'); } work(); console.log('다음 작업'); 위의 결과와 같이 함수 로직이..
[Javascript] 단축 평가 논리 계산법 단축 평가 논리 계산법이란 이전 포스트에 게시된 truthy and falsy를 활용한 방법이다. 아래의 소스코드는 getName 의 파라미터에 제대로 된 객체가 주어지지 않아 에러가 발생한다. const dog = { name: '강아지' }; function getName(animal) { return animal.name; } const name = getName(); console.log(name); 물론 아래와 같이 if문을 사용하여 에러를 피할 수 있다. const dog = { name: '강아지' }; function getName(animal) { if (animal) { return animal.name; } return undefined; } const name = getName();..
[Javascript]에서의 Truthy and Falsy 일반적인 Javscript에서 null 체크 코드는 아래와 같다. function print(person) { if (person === undefined || person === null) { console.log('person is null'); return; } console.log(person.name); } const person = null; print(person); 위의 코드는 아래와 같이 축약하여 사용이 가능하다. function print(person) { if (!person) { console.log('person is null'); return; } console.log(person.name); } const person = null; print(person); 위와 같은 방식이 ..
[Javascript] 배열 내장 함수 정리(shift & pop, unshift, concat, join) shift 는 첫번째 원소를 배열에서 추출한다. const numbers = [10, 20, 30, 40]; const value = numbers.shift(); console.log(value); console.log(numbers); pop은 맨 마지막 원소를 배열에서 추출한다. const numbers = [10, 20, 30, 40]; const value = numbers.pop(); console.log(value); console.log(numbers); unshift는 shift의 반대 개념으로 배열의 맨 앞에 새 원소를 추가한. const numbers = [10, 20, 30, 40]; numbers.unshift(5); console.log(numbers); concat은 여러 개의..
[Javascript] 배열 내장 함수 정리(splice, slice) splice는 배열의 특정 항목을 자를 때 사용한다. splice를 사용할 때 첫 번째 인자 값에는 시작점이고 두 번째 인자는 시작점부터 몇개까지 지울지를 적어준다. const numbers = [10, 20, 30, 40]; // 배열 선언 const index = numbers.indexOf(30); // 삭제할 인덱스 추출 let delList = numbers.splice(index, 1); // 삭제 리스트 console.log(numbers); // 삭제 후 배열 출력 console.log(delList); // 삭제 항목 출력 3행과 같이 splice한 항목을 변수에 담게 되면 삭제된 항목이 무엇인지 알 수 있다. slice 는 splice와 같이 배열을 잘라내는 용도로 사용되나 기존의 배열..
728x90
반응형

티스토리툴바