전체 글 155

[Node] NVM? 노드 버전관리

NVM(Node Version Manager)는 Node.js의 버전을 변경, 사용해야 할 때 사용할 수 있는 도구이다. NVM은 협업을 하거나 다양한 프로젝트를 동시에 진행할 때 개발툴의 버전 호환문제를 해결하기 위해 사용한다. 루비의 rvm, rbenv나 파이썬의 pyenv도 같은 기능을 하는 도구이다. 아래 설명은 macOS 기준이다. (macOS 10.15부터 기본 셸은 zsh임) 👉 설치 방법 macOS 기준으로 nvm을 설치하기 가장 간단한 방법은 패키지 관리자인 Homebrew를 사용하는 것이다. brew -v 명령어를 입력해 설치여부를 확인한다. 이미 설치가 되어있다면 설치되어있는 Homebrew의 버전 정보를 확인할 수 있으며, 설치되지 않은 경우 아래와 같은 내용을 확인하게 될 것이다...

CORS(클라이언트와 서버의 오리진이 다를때 발생하는 이슈)

CORS란? Cross Origin Resources Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘을 말함. 요청 시에는 cross-origin HTTP에 의해 요청되며, 동일 출처 정책(same-origin policy)에 의해 CORS 같은 상황이 발생하면 외부 서버에 요청한 데이터를 브라우저에서 보안목적으로 차단하게 되어 정상적으로 데이터를 받을 수 없게 됨. * 동일 출처 정책 (same-origin policy) 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호 작용하는 것을 제한하는 중요한 보안 방식으로 잠재적 악성 문서를 격리하여, 공격 경로를 줄이는 데 도움이 됨. 예시) localhost:3000으로 개발을 진행하며 서버는 locahost:80..

자바스크립트 비동기 처리와 콜백함수

콜백함수 일반 함수가 입력(파라미터)과 출력(리턴값)있다라고 생각할 경우, 출력값이 없고 그 대신 콜백 함수를 입력받는 함수들이 있다. 콜백 함수는 다른 함수에 인자로 넘어가서 실행될 로직을 담는다. function userInfo(id, cd) { const user = { id: id, name: 'User' + id, email: id+'@test.com', }; cb(user); } userInfo(1, function(user) { console.log('user: '+user); }); // 결과 // user: {id:1, name:'User1', email: '1@test.com'} userInfo() 함수의 두번째 파라미터로 콜백 함수를 선언 userInfo()가 실행될 때 cb 매개 변..

함수와 메서드 차이

메서드를 수행하기 위해서는 객체를 통해서 해당 메서드를 수행하여야 하며, 동작을 수행하는 주체는 객체이므로 객체에게 그 동작을 수행하라고 지시해야 함. 함수는 함수 자체가 그 동작을 정의한 함수객체이기 때문에 자기 자신을 수행함. 또한 자바스크립트 객체에서 프로퍼티 값이 함수인 경우, 일반 함수와 구분하여 메서드라고 함. (자바스크립트 객체 - 키 key와 값 value으로 구성된 프로퍼티의 집합) 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 symbol값 프로퍼티 값: 모든 값 let foo = {}; foo.a = 1; foo.b =2; foo.sum=function() {console.log(foo.a+foo.b);}; foo.sum(); // 3 * 프로퍼티 키에 문자열이나 symbol값..

인터프리터 언어와 컴파일 언어

인터프리터(스크립트) 언어 개발자가 작성한 코드를 기계어로 변환 과정없이 한줄 한줄 해석하여 실행하는 언어임. 즉, 한줄이 바뀔 때마다 즉시 검사하는 방식이다. 한문장씩 즉시 명령어를 검사하다보니 언어 속도가 빠르지 않다. 번역과 실행을 순차적으로 동작시키기 때문에 1개의 액션이 동작하게 된다. ex) R, Python, PHP, Javascript 컴파일 언어 개발자가 작성한 코드를 모두 기계어로 변환한 후에 기계어 코드로 실행하게 됨. 즉, 작성한 코드나 명령어를 한꺼번에 모아서 한번에 실행하는 방식이다. 한번에 하다보면 처음에는 오래 걸릴 수 있으며, 메모리도 많이 먹게 된다. 하지만 컴파일 이후에는 실행이 빠르며, 한번에 변환을 다 해줬기 때문에 그 이후로는 변환할 필요가 없다. 실행 전 번역이 ..

map() 함수

map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들때 사용한다. (기존 배열은 변하지 않음) map 함수는 모든 배열의 값에 function을 실행하는 메서드이다. 기존 배열의 값들을 특정값으로 변경하기 위해 map()이 많이 쓰인다.( 단순하게 반복을 위해 사용하기도함) array.map(callbackFunction(currentValue[, index[, array]])[, thisArg]); filter, forEach와 같은 구문임. currentValue: 배열 내 현재 값 index: 배열 내 현재값의 인덱스 array: 현재 배열 thisArg: callbackFunction 내에서 this로 사용될 값 const nums = [1,2,3]; const ..

Array.forEach

forEach문은 오직 Array 객체에서만 사용이 가능하다.(ES6부터 Map, Set 지원) 배열의 요소들을 반복하여 작업을 수행할 수 있다. forEach 구문의 인자로 callback함수를 등록할 수 있고, 배열의 각 요소들이 반복될때 이 callback함수가 호출됨. callback 함수에서 배열요소의 인덱스와 값에 접근할 수 있음. 배열의 첫번째부터 마지막까지 반복하면서 item을 꺼낼 수 있다. var arr = ['가', '나', '다', '라']; arr.forEach(function(item, index, arr2) { console.log(item, index, arr2[index+1]); }) // 첫번째 인수는 배열 각각의 item // 두번째 인수는 배열의 index // 세번째..

객체 길이 가져오기(To get length of object)

자바스크립트의 배열[]의 경우, length를 통하여 길이를 간단하고 손쉽게 가져올 수 있다. 하지만 obj의 경우에는 length를 지정하게 되면 undefiend가 나타남 obj의 length의 길이를 구하기 위해서는 Object.kdys를 이용한다. var objs = {name: 'test', age: '24', city: 'seoul'}; console.log(objs.length); console.log(Object.key(objs).length); 속성 나열 var myObj = Object.create({}, { getFoo: { value: function () { return this.foo; } } }); myObj.foo = 1; myObj.foo2 = 2; myObj.foo3 = ..

키워드와 예약어

키워드 키워드는 제어문의 시작과 끝, 특정한 조작 목적 등으로 쓰인다. 이런 기능들이 정의되어있기 때문에 식별자나 프로퍼티의 이름으로 사용할 수 없다. break case catch continue debugger default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with 예약어 예약어는 아직 특별한 쓰임새는 없지만 미래에 키워드로 쓸 가능성이 있어서 예약해둔 것이다. abstract boolean byte char class const debugger double enum export extends final float goto implements..

생성자 함수와 클래스의 차이

생성자 함수란? 생성자 함수는 여러 프로그래밍 언어에서는 '클래스'와 동의어이다. 어떤 경우 사람들은 참조타임, 클래스, 데이터 타입, 아니면 간단하게 생성자라고 부른다. 메서드란? 메서드는 자바스크립트에서 객체를 만들기 위한 템플릿으로 생성자 함수 안에서 속성에 함수를 할당하면서 정의되며 생성자 함수와 함께 class를 사용한다. hi 속성은 할당된 함수이다. Person 객체가 호출될때 this 키워드는 새로 생성된 Person 객체에 응답할 것이다. ** 메서드 사이엔 쉽표가 없음!! class Person(name) { this.name = name; this.hi = function() { console.log(`Hi, My name is ${this.name}`) } } const kim = ..