모던 자바스크립트 튜토리얼을 읽으며 정리한 글이다.이벤트 버블링이벤트 발생한 요소(자식 요소)에서 시작하여 DOM 트리 상위(부모 요소)로 전파되는 방식이벤트가 제일 깊은 곳에 있는 요소에서 시작하여 부모 요소를 거슬러 올라가며 발생하는 모양이 물 속에서 거품이 올라오는 모양🫧과 닮아서 표현된 것이다.event.target vs thisevent.target이벤트가 발생한 가장 안쪽의 요소, 실제 이벤트가 시작된 타깃 요소this(=event.currentTarget)현재 요소, 현재 실행 중인 핸들러가 할당된 요소를 참조버블링 중단event.stopPropagation(), event.stopImmediatePropagation() 함수를 통해 버블링을 중단할 수 있다.하지만, 이벤트 버블링을 막아야..

클라이언트에서 서버로 파일을 전송하는 방법을 알아보았다.input 태그- type = "file"로 지정- name = "서버에서 파일을 인식할 이름"name으로 이름을 지정하면, 서버에서는 이 이름으로 데이터를 얻는다는 것이다.예) upload.single("userfile")로 설정해야 한다.일반 form 전송 - form 태그 업로드- action = "서버에 보낼 경로"- enctype = "multipart/form-data"로 반드시 설정해야 한다.multer는 multipart(multipart/form-data)가 아닌 폼에서는 동작하지 않는다.body-parser데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리사용 목적: post로 정보를 전송할 때 요청의..

현재 부트캠프에서 Node.js에 대해서 배우고 있는데, 개인적으로 정리하고 싶은 부분이 있어 참고 자료에 있는 설명을 바탕으로 작성하게 되었다.프로젝트 생성mkdir "디렉토리 이름"cd "만든 디렉토리 이름"위 명령어를 입력해서 프로젝트를 생성한 후, 해당 프로젝트 디렉토리로 이동하여 프로젝트 루트 폴더에서 아래 명령어를 실행한다.npm init -ynpm i express ejsnpm init -y: npm을 쓸 수 있는 초기 환경을 설정한다. npm_modules 폴더가 만들어지며 express에 관련된 폴더가 생성되고, package.json의 dependencies에 express가 기록된다.npm i(or install) "패키지명": 원하는 패키지를 설치한다.코드const express =..

모듈(Module)특정한 기능을 하는 함수나 변수들의 집합재사용 가능한 코드 조각장점코드 추상화코드 캡슐화코드 재사용의존성 관리모듈은 module.exports 또는 exports 객체를 통해 정의하고 외부로 공개한다.공개된 모듈은 require 함수를 사용하여 import 한다.모듈 만들기하나의 모듈 파일에 하나 만들기// func.jsfunction connect() { return a + b;}module.exports = connect;module.exports에는 하나의 값(원시 타입, 함수, 객체)을 할당할 수 있다.하나의 모듈 파일에 여러 개 만들기// var.jsconst a = "a 변수";const b = "b 변수";module.exports = { a, b};export와 expor..

Node.js Node.js는 구글 크롬의 자바스크립트 엔진(V8 Engine)에 기반해 만들어진 Javascript 런타임 환경이다. 여기서, 런타임이란 프로그래밍 언어가 구동되는 환경을 말한다. Javascript의 런타임 환경은 웹 브라우저에만 존재했었다. 이러한 Javascript를 서버단 언어로 사용하기 위해 나온 것이 Node.js이다. Mac에서 Node.js 설치하기 brew install node 버전 확인 node -v npm -v npm Javascript로 개발된 각종 모듈의 설치, 업데이트, 구성, 제거 과정을 자동화하여 관리해주는 기능 npm 사용하기 npm init 프로젝트 시작할 때 사용하는 명령어이다. package.json에 기록될 내용을 문답식으로 입력한다. npm in..

모던 자바스크립트 튜토리얼을 읽으며 정리한 글이다. 2.7 형 변환 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다. 이런 과정을 "형 변환(type conversion)"이라고 한다. 문자형으로 변환 문자형으로의 형 변환은 문자형의 값이 필요할 때 일어난다. String(value) 함수를 호출해 전달받은 값(value)을 문자열로 변환할 수 있다. 숫자형으로 변환 숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어난다. Number(value) 함수를 사용하면 주어진 값(value)을 숫자형으로 변환할 수 있다. 한편, 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN이 된다. 아래는 숫자형으로 변환 시 적용되는 규칙이다. 전달..

모던 자바스크립트 튜토리얼을 읽으며 정리한 글이다. 2.4 변수와 상수 변수 자바스크립트에선 let 키워드를 사용해 변수를 생성 var도 let처럼 변수를 선언하는 데 쓰이지만 '오래된' 방식 변수를 두 번 선언하면 에러가 발생 → 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용해 참조해야 함 함수형 언어 변수에 데이터가 저장되면, 그 값을 영원히 유지 다른 값을 저장하고 싶다면 이전 변수를 재사용할 수 없기 때문에 새로운 변수를 만들어야 함 예약어 let class return function 상수 변화하지 않는 변수를 선언할 땐, let 대신 const 사용 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생 과제 - 변수 가지고 놀기 let admin..

모던 자바스크립트 튜토리얼을 읽으며 정리한 글이다. 2.1 Hello, world! 'script' 태그 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있음 외부 스크립트 분해해놓은 각 파일은 src 속성을 사용해 HTML에 삽입 절대 경로와 상대 경로 절대 경로 처음부터 시작하여 목적지까지의 절대적인 경로 상대 경로 현재 위치를 기준으로 하여 목적지까지의 상대적인 경로 캐시 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소 저장 공간이 작고 비용이 비싼 대신 빠른 성능을 제공 src 속성이 있으면 태그 내부의 코드는 무시됨 로 외부 파일 연결 태그 내에 코드 작성 2.2 코드 구조 문(statement) 어떤 작업을 수행하는 문법 구조(syntax structu..

모던 자바스크립트 튜토리얼을 읽으며 정리한 글이다. 1.1 자바스크립트란? 브라우저 인터넷을 검색할 때 문서나 영상, 음성 따위의 정보를 얻기 위하여 사용하는 프로그램 인터넷에서 웹 페이지를 볼 수 있게 하는 응용 프로그램 자바스크립트 엔진 자바스크립트 코드를 실행하는 소프트웨어 구성요소 자바스크립트 동작 원리 싱글 스레드 순차 실행 스레드 하나의 프로세스 안에서 다양한 작업을 담당하는 최소 실행 단위 자바 스크립트 → (트랜스파일) CoffeeScript, TypeScript, Flow, Dart 1.2 메뉴얼과 명세서 1.3 코드 에디터 통합 개발 환경(IDE) Visual Studio Code WebStorm 경량 에디터 Atom Visual Studio Code Sublime Text Notepa..

https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info 모던 자바스크립트를 공부하기 좋은 사이트를 찾다가 알게 된 곳이다. 앞으로 이 사이트를 참고하여 공부하면서 내 의식의 흐름을 기록하려고 한다.