Q. 어떤 버튼을 클릭했을 때 어떤 액션이 일어나게 하려면 어떻게 해야 할까?  - Event Listener :마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생한다.이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데, 그 함수가 바로 이벤트 리스너이다.  - addEventListener() :위에서 말한 것처럼 어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는이벤트 리스너를 해당 객체나 요소에 등록해줘야 한다.이벤트 리스너 등록 방법을 살펴보도록 하자. 1. 자바스크립트 코드에서 프로퍼티로 등록.window.onload = function () { // 문서가 load 될 때 이 함수를 실행 let text = document.getElementById("te..

- Window Object window 객체는 브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)을 나타낸다.또한 window는 브라우저의 객체이지 자바스크립트의 객체가 아니다. 이 window 객체를 이용해서1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수 있다.2. 또한 var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 된다.   - Document Object Window 객체가 브라우저 창이라고 하면document 객체는 브라우저 내에서 콘텐츠를 보여주는 웹 페이지 자체라고 할 수 있다.  이제부터 DOM 객체를 자바스크립트를 사용하여 삭제하거나 업데이트 해보도록 하겠다.아래의 코드를 사용할 것이다.  M..

- HTML을 이용한 화면에 UI 표현하기 브라우저에서 UI를 볼 수 있는 것은 이 HTML을 분석해서 보여줄 수 있다.이 HTML은 요소(Element)로 구성되어 있다.   - DOM이란? (Document Object Model) Window 객체 안에 Document 객체가 있다. => window.documentwindow 자체를 브라우저에서 제공하는 것이므로 window.document도 브라우저에서 제공하는 것이다.(자바스크립트 코드 안에 있지만 자바스크립트 코드가 아니다) DOM(문서 객체 모델)은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서웹 브라우저가 HTML 페이지를 인식하게 해준다. 또한 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔브라우저가 트리구조로 만든 객..

1. npm init -y : node.js 프로젝트를 초기화할 때 사용하는 명령어.이 명령어를 실행하면 기본 설정값으로 package.json 파일이 자동으로 생성된다.package.json 파일은 프로젝트에 대한 메타 데이터를 포함하고, 프로젝트의 의존성, 스크립트, 버전 등을 관리하는 데 사용. -y 플래그는 모든 질문에 대해 기본값을 자동으로 선택하도록 하는 옵션으로,이를 통해 사용자가 일일이 질문에 답하지 않고도 신속하게 프로젝트를 설정할 수 있다.기본값은 다음과 같은 항목들을 포함한다. :이름, 버전, 설명, 진입점 (보통 index.js), 테스트 명령어, 라이선스이렇게 자동으로 생성된 package.json 파일은 나중에 필요에 따라 수정할 수 있다.   2. npm install expr..

- Express란? Express는 웹 및 모바일 애플리케이션 구축을 위한 광범위한 기능을 제공하는node.js 웹 애플리케이션 프레임워크이다.단일 페이지, 다중 페이지 및 하이브리드 웹 애플리케이션을 빌드하는 데 사용한다. 서버와 경로를 관리하는 데 도움이 되는 node.js 상단에 구축된 레이어이다. => Node.js의 API를 단순화하고 유용한 기능들은 더 추가시켜node.js를 더 편리하고 유용하게 사용할 수 있게 해주는 프레임워크.  - Express.js를 사용하는 이유 1. Node.js의 API를 쉽게 사용할 수 있게 해준다.(Express.js를 사용하는 법을 쉽게 배울 수 있다.)2. 굉장히 많은 사람들이 사용하고 있다.3. Express.js를 기반으로 하는 다른 프레임워크들도 만..

{a : "a", b : "b"} 객체 데이터에 c : "c"를 추가해줄 것이다.그 다음에 페이지를 리프레쉬 했을 때 추가한 값이 들어갈 수 있도록 해줄 것이다.  데이터를 추가할 때는 fetch 메소드를 사용하여 POST 요청을 보내준다.(Client에서)그렇게 c : "c" 값을 추가해주는 요청을 보내고, 이 요청을 받아주는 부분이 있어야 한다. request.method : 요청 메소드를 반환한다.위쪽에 reqest.method === "POST" && reqest.url === "/home" 조건의 if문을 하나 더 작성해준다.조건에 부합할 때 request.on() 메소드를 실행한다.=> 특정 event를 listen 할 수 있게 해주는 기능을 가지는데,여기서 인자로 'data'와 콜백 함수를 ..