동탁의 개발자취

1. 의존성 (Dependency) 프로젝트 내에서 사용하는 라이브러리를 관리하는 방법이다. 프로젝트가 실행되기 위해서는 라이브러리에 의존하기 때문에 이러한 라이브러리들을 dependency(의존성)이라고 한다. 라이브러리 : 특정 기능을 수행하는 코드의 묶음, 복잡한 기능을 직접 작성하지 않고 다른 사람이 구현한 것을 사용하는 방법으로 Node.js에서는 패키지라고도 부른다. 프로젝트에 의존성을 추가하면 package-lock.json이라는 파일이 생성되는데 프로젝트에 의존성을 추가하면 자동으로 최신버전으로 추가가 된다 그 이유는 의존성의 버전이 갑자기 변경되지 않도록 설치된 버전을 고정하는 역할을 한다. 2. 로컬 패키지와 전역 패키지 로컬 패키지 : package-json 에 선언되어 있고, nod..

1. NPM 이해하기 Node Package Manager Node.js의 프로젝트를 관리하는 필수적인 도구로 온라인 저장소 + 커맨드라인 도구이다. 커맨드라인 도구 : - 저장소에서 라이브러리, 도구 설치 - 프로젝트 설정 / 관리 - 프로젝트 의존성 관리 NPM을 사용하기 위해서는 NPM 커맨드라인 도구의 사용법을 익혀야 한다. 2. NPM 커맨드라인 도구 ($는 터미널에 입력하는 코드라는 뜻이다.) $npm init : 프로젝트 디렉토리를 생성하고 해당 디렉토리 안에서 npm init 명령어를 사용하면 몇 번의 질문을 통해 package.json이라는 파일을 만들어 주고 이 디렉토리가 Node.js 프로젝트가 된다. ! package.json : 프로젝트 관련 정보들이 저장되는 파일로 이 파일을 직..

1. Node.js의 등장 단방향 통신의 WEB 1.0에서 상호작용하는 WEB 2.0으로 변경되면서 고성능의 JavaScript가 필요했다. 따라서 V8 엔진이 등장하게 된다. 이 JavaScript를 브라우저의 외부 환경에서 사용하기 위하여 Node.js가 탄생하게 되었다. 2. Node.js의 특징 Node.js의 큰 특징은 싱글 쓰레드 / 비동기 / 이벤트 기반 총 3가지로 나누어 볼 수 있다. 1) 싱글 쓰레드 쓰레드란 명령을 실행하는 단위이고 한 개의 쓰레드는 한 개의 명령만 실행이 가능하다. 장점 : 쓰레드가 늘어나지 않기 때문에 리소스 관리가 효율적이다. 단점 : 쓰레드 기반의 작업들의 효율이 떨어진다. (CPU연산 작업) 2) 비동기 따라서 Node.js에서는 비동기 동작을 이용하여 쓰레드..

1. Axios Axios는 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리이다. 따라서 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되며, 백엔드와 프론트엔드의 연결을 위하여 아주 중요하다. 만약 이 비동기 통신 라이브러리를 사용하지 않으면 모든 코드가 순차적으로 처리되어야 하므로 코드 작성이 복잡해진다. Fetch VS Axios 1. Fetch는 자바스크립트에 내장되어 있어 별도의 설치가 필요없다 2. Fetch는 일부 예전의 인터넷 익스플로러 버전에서 지원하지 않는다. 3. Fetch에서 지원하지 않는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 Axios에서 지원해준다. 따라서 당장은 Fetch보다는 Axios를 익히지만 경우에 따라 두 가지를 사용해야 할 경우..

1. DOM과 객체의 선택 DOM = HTML이나 XML 문서의 프로그래밍 인터페이스로 프로그래밍 언어가 문서의 구조, 스타일, 내용등을 변경할 수 있게 한다. Core DOM : 모든 문서 타입을 위한 DOM 모델 XML DOM : XML 문서를 위한 DOM HTML DOM : HTML 문서를 위한 DOM 따라서 모든 HTML의 요소는 DOM을 통해서 접근이 가능하다. 2. Document Document 객체 : 웹 페이지 자체를 의미하며, 웹 페이지에 존재하는 HTML요소에 접근하고자 할 때는 반드시 Document 객체를 통해서 접근한다. (ex. document.write() , document.getElementById() ) Document에 관련하여 HTML 요소와 관련된 작업을 도와주는 ..

해당 포스팅은 https://www.youtube.com/watch?v=8aGhZQkoFbQ 의 정리글 입니다. 해당 포스팅의 목적 : 비동기와 이벤트루프의 이해와 비동기적인 처리가 필요한 이유에 대한 생각 정리 1. Call Stack 자바스크립트에서의 코드 실행 순서는 다음과 같은 순서로 진행된다. 1. 제일 먼저 코드 자체를 말하는 main() 함수를 스택에 집어넣는다 2. 함수들을 위에서 부터 순서대로 정의한다. 3. 함수 호출을 만나면 스택에 함수를 추가한다. 4. 해당 함수를 추가 후 함수 안에 있는 또 다른 함수가 있다면 해당 함수도 호출한다. 5. 이후 최종 함수에서 return을 만나면 return 할때마다 스택의 맨 위에 있는 것을 꺼낸다. 6. 이후 함수의 return이 끝나면 최종 ..

자바스크립트 Function declaration의 종류 ! 주로 함수의 이름을 정의할때는 카멜 케이스 (Camel Case) 방식으로 함수의 이름을 정해준다. Camel Case는 낙타의 혹 처럼 첫 단어를 제외 한 나머지 단어들의 맨 앞 글자를 대문자로 표시한다. ex) myFunc , exFunc, numCalculateFunc 함수의 선언은 1. 함수 선언문 2. 함수 표현식 두가지로 나뉘어 진다. 1. 함수 선언문 함수 선언문의 특징은 어디서든 호출이 가능하다는 것이다. 이는 Execution Context 단계에서 모든 함수 선언문을 확인한 후 선언된 함수들을 variable objects에 저장하기 때문에 함수선언보다 먼저 함수를 호출하는 것이 가능한데 이를 Hoisting이라고 부른다. f..

! 이번 게시글은 Execution Context를 이해해 보기 위하여 나의 사견을 넣어 정리한 블로깅으로 팩트와 다를 수 있음 Execution Context 자바스크립트의 여러 개념들을 깊게 이해하기 위해 중요한 개념으로 자바스크립트의 스펙에도 명시가 되어 있음 컨텍스트란 번역하면 ‘문맥’으로 코드의 전반적인 실행 환경으로 이해하면 좋다. 실행 컨텍스트가 콜 스택 구조로 쌓이는 과정 자바스크립트가 실행 될 때 처음에 전역 실행 컨텍스트가 만들어진다. 함수가 실행 될때 함수 실행 컨텍스트가 만들어진다. 마지막 까지 실행이 완료 된 경우 콜 스택 구조는 가장 나중에 실행된 컨텍스트 부터 제거 되어 다시 전역 실행 컨텍스트로 돌아온다. 3번의 과정을 콜 스택 구조라고 부른다. 전역 실행 컨텍스트 (glob..

1. 배열과 관련된 메서드 sort() sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다. (a-b, b-a 등으로 오름차순 내림차순 결정이 가능하다.) map() map 메서드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해준다. let arr = [1, 2, 3, 4]; let maparr = arr.map(function(element){ return element *2; }); console.log(maparr); // [2, 4, 6, 8] join 배열의 모든 요소를 연결해 하나의 문자열로 만든다. 배열.join()으로 배열을 하나의 문자열로 출력 괄호 안의 구분자를 생략하면 쉼표..

1. 자주 쓰는 자바스크립트 연산자 비교 연산자 == : 피연산자가 서로 같다 ! = : 피연산자가 서로 다르다 === : 두 피연산자가 서로 값과 타입이 모두 같다. ! == : 두 피연산자가 서로 값 또는 타입이 서로 다르다. : 서로 크거나 작음 = : 서로 작거나 같음, 크거나 같음 산술 연산자 % : 나머지, 두 피연산자를 나눴을 때의 나머지를 반환함 ++ : 피연산자에 1을 더한다. — : 피연산자에 1을 뺀다. ** : 거듭 제곱한다. 논리 연산자 && : AND연산자, 둘 다 참일 경우 true || : OR연산자, 둘 중 하나가 참일 경우 true 2. let과 var의 차이 let : let 으로 선언한 변수는 자신을 선언한 부분과 이외의 모든 부분에서도 자신의 값을 가진다..