동탁의 개발자취

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 으로 선언한 변수는 자신을 선언한 부분과 이외의 모든 부분에서도 자신의 값을 가진다..