범데이의 개발노트 📄

1. 개요 Javascript에서 변수 선언 방식에는 const, var, let이 있다. const는 값을 재할당 하지 않는 변수를 선언하기 위해 사용하는데, 특히 let과 var의 차이는 무엇일까? 이 둘의 개념을 알기 전에 호이스팅이라는 개념을 알아야 한다. 2. 호이스팅이란? 호이스팅이란 변수가 사용되기 전에 선언된 함수와 변수들을 메모리가 미리 기억할 수 있게 범위의 최 상단으로 끌어올리는 것을 의미한다. console.log(a) var a = 1 console.log(a) // undefined // 1 a변수가 선언되기 전의 라인에서 a를 사용할때에, 에러가 나오는 대신 undefined를 출력한다. 이는 아직 a가 할당되기 전 이라는 의미를 갖는다. 이는 바로 호이스팅때문인데, 자바스크립..

NodeSource에 의해 관리되는 PPA에서 원하는 버전의 NodeJS를 설치해 보자. 게시물 작성 일자 기준 LTS 버전은 16.15.0, Latest 버전은 18.1.0인데, 14버전으로 설치해본다. 설치 스크립트를 다운로드 한다. 설치 버전을 바꾸려면 setup_14 부분을 setup_10 으로 바꾸는 식으로 하면 된다. $curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_14_setup.sh 그 다음 다운로드한 스크립트를 실행시킨다. $sudo bash nodesource_setup.sh 실행이 끝나면, 다음 명령으로 PPA가 등록된 것을 확인해볼 수 있다. $apt policy 확인한 뒤에 apt로 설치하면 된다. $sudo apt i..

0. 서론 (서론을 읽는건 생략해도 된다.) NodeJS로 개발한 소스를 GitHub에 push한 후 다른 컴퓨터에서 pull받고 의존성 패키지를 설치 한 뒤 빌드하는데, 빌드가 실패하는 상황이 나왔었다. 설치한 외부 모듈 소스 내에서 아래와 같이 dependency를 찾을수 없다는 에러가 발생했다. 하지만 해당 dependency가 node_modules 폴더 내에 있어서 의아했었으나, 원인을 찾아보니, package-lock.json파일이 버전관리대상이 아니었고, 기존 개발 환경과 해당 파일의 내용이 달라서 구성되어야 할 의존성 트리가 정상적으로 구성되지 않았던 것이었다. 순서대로 위는 빌드가 되던 원래 소스의 package-lock.json파일 내의 "bootstrap-vue-3" 모듈의 의존성 정..

1. package.json이란? package.json이란 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)을 통해 설치한 모듈들의 의존성을 관리하는 파일이다. 2. package.json 초기 생성 아래와 같은 명령어로 초기의 package.json파일을 생성할 수 있다. $npm init -y 뒤에 -y는 별도의 설정 없이 default 값으로 생성하는 옵션이다. 이를 통해 아래와 같이 파일이 생성이 된다. 아래는 React 프로젝트의 샘플 package.json 내용이다. 패키지 매니저(npm, yarn)를 통해 설치한 모듈들이 dependencies안에 해당 모듈의 이름과 버전 내용이 추가된다. { "name": "react-sample", "version": "0.1.0", "pr..

1. tsconfig.json 파일이란? Typescript는 동적 타입언어인 Javascript를 타입이 있는 형태로 코딩할 수 있게 해주는 언어이다. Typescript로 짜여진 코드를 Javascript로 컴파일 하기 위해서는 다음과 같은 커맨드를 사용한다. $tsc example.ts 위와같이 실행 시 동일한 위치에 example.js 파일이 생성되는 것을 확인할 수 있다. 이름을 다르게 하고 싶다면 tsc --outFile newName.js example.ts와 같이 사용할 수도 있다. 이처럼 --outFile와 같은 옵션들은 tsc --help를 통해서 더 알아볼 수 있다. 이와 같이 tsc는 사실 tsconfig.json 파일 없이도 바로 사용할 수 있다. 그러면 왜 tsconfig.jso..

오늘은 Javascript에서 자주 사용되는 배열 메서드에 대해 살펴볼 것이다. 1. indexOf indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환한다. const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']; console.log(beasts.indexOf('bison')); // expected output: 1 // start from index 2 console.log(beasts.indexOf('bison', 2)); // expected output: 4 console.log(beasts.indexOf('giraffe')); // expected output: -1 구문 ar..

1. 개요 자바스크립트에서 값은 원시 값과, 참조 값으로 나뉜다. 원시 값 Number String Boolean Null Undefined 참조 값 Object Symbol 원시 값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 아래와 같이 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다. const a = 1; let b = a; b = 2 console.log(a); //1 console.log(b); //2 반면에, 참조 값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킨다. const a = {number: 1}; let b = a; b.number = 2 console.log(a); // {number: 2} console.log(b);..

Javascript에서 async functions 그리고 await 키워드는 ECMAScript2017에 추가되었다. 이 기능들은 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 쉽도록 만들어 준다. 오늘은 이 async & await 키워드에 대해 알아보자. asunc/await의 기초 async/await 코드는 두 가지 부분으로 나눠져 있다. async 키워드 먼저 비동기 함수를 async 함수로 만들기 위하여 function()앞에 async 키워드를 추가한다. async fuction()은 await 키워드가 비동기 코드를 호출할 수 있게 해주는 함수이다. async function hello() { return "Hello" }; hello(); 이 코드는 Promise를 반환한다. ..

devExtreme 프레임워크의 chart를 사용하기 위해서 객체배열을 만들어 주어야 했는데, 처음에는 public arr = [{A: 1, B: 2, C: 3, }, { A: 1, B: 2, C: 3 }]; 이런식으로 구조를 먼저 정해놓고, 정의 해 놓은다음에 arr[0]["A"] = 2 arr[0]["B"] = 6 변경이 필요한 데이터를 이런식으로 바꾸어주었었다. 하지만 이러한 구조는 차트에 데이터가 온전히 바인딩 되지 않아서, 에러가 발생했다. 이후 public arr = []; 이런식으로 먼저 빈 배열을 먼저 선언해 준다음에, let _arr = []; let obj = { "A" : 1, "B" : 2, "C" : 3, } let obj2 = { "A" : 4, "B" : 5, "C" : 6, ..