동탁의 개발자취

1. 웹이란 World Wide Web, 인터넷상에서 동작하는 모든 서비스 일반적 의미 - 웹 브라우저로 접속해서 이용하는 서비스, 웹 사이트 참고 : 2022.11.29 - [ELICE AI6/HTML&CSS] - ELICE) HTML & CSS ELICE) HTML & CSS 1) 인터넷 == 웹 ?? 웹이 자동차라면 인터넷은 도로, 웹이 건물이라면 인터넷은 건물 팀 버너스 리는 World Wide Web(WWW)의 창시자로 WWW관련 기술들을 만들어 인터넷을 대중에게 가져다준 인물이다. 스 ursamajor0104.tistory.com 2. 웹 서비스 동작 방식 웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어짐 1. 브라우저가 인터넷을 통해 HTTP 요청을 서버에 전달 2. 서버는 사..

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 요소와 관련된 작업을 도와주는 ..