그럼에도 불구하고

npm script에 대해 알아보자 [ npm script ] NPM은 노드 패키지 매니저를 뜻하며 node.js 내부에 함께 설치되어 있다. NPM을 이용하여 노드 코어 (나의 패키지)에 포함되지 않은 패키지 즉 노드 코어 모듈의 일부가 아닌 패키지를 설치할 수 있다. npn init을 터미널에 입력하고 설치하면 되며 나오는 질문들에 답변을 하면 기본 값이 설정된다. 설정된 기본 값은 package.json에서 확인할 수 있으며 여기서 편집도 가능하다. 기본적으로 JavaScript 객체와 매우 유사해 보이는 특수한 종류의 데이터 형식인 JSON 형식을 사용하며, 이를 기반으로 한다. 위의 사진을 보면 scripts 구획이 있는데 여기에 다른 스크립트들을 추가할 수 있다. 현재는 "start" : "n..

모듈 시스템을 사용하는 법에 대해 알아보자 기존 소스 코드 HTML 삽입 미리보기할 수 없는 소스 저번에 작성한 코드를 보면 하나의 파일만 해도 많은 코드가 존재한다. 보통 이렇게 여러 파일을 작업하게 되는데 url 확인 등의 작업을 하는 라우팅 로직을 포함한 새 파일을 나누어 코드를 분산시킬 수 있다. [ routes.js ] routes.js라는 파일을 만들어 uf문과 기본 응답 코드를 분리해서 넣어주자 HTML 삽입 미리보기할 수 없는 소스 const fs = require('fs');을 먼저 추가해주고 기존 소스파일에서는 지워준다. 기존 소스파일과 routes.js를 연결하기 위해 requestHandler 함수를 생성해 req와 res를 인수로 갖게 만들어주고 아래에 있는 기존 소스파일의 htt..

요소를 다루는 법에 대해 알아보자 [ 부모 / 자식 / 전 / 후 요소 읽어오기 ] ※ 특정 요소와 관련된 요소를 가져오고 싶을 때 사용! 속성 의미 타입 부모노드.children 자식 노드 요소군(HTMLCollection) 부모노드.firstElementChild 첫 번째 자식 노드 요소(Element) 부모노드.lastElementChild 마지막 자식 노드 요소(Element) 노드.nextElementSibling 다음 노드 요소(Element) 노드.previousElementSibling 이전 노드 요소(Element) 자식노드.parentNode 부모 노드 노드(Node) 소스 코드 HTML 삽입 미리보기할 수 없는 소스 [ 부모 요소에 자식 요소 추가하기 ] ※ 동적 표시 요소를 추가하고..

숫자 뽑기 게임을 만들어보자 ※ 조건 1. 0부터 내가 선택한 숫자 범위 내에서 비교할 숫자를 입력해야 한다. 2. 비교할 숫자가 내가 선택한 숫자보다 클 수 없다. 3. 비교할 숫자는 0이거나, 음수일 수 없다. 4. 0부터 내가 선택한 숫자 범위 내에서 "Play!" 버튼을 누를 때마다 랜덤으로 숫자를 생성하여 비교할 숫자와 크기를 비교한다. 5, 비교 결과를 알려준다. HTML HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미리보기할 수 없는 소스 결과 HTML 삽입 미리보기할 수 없는 소스

jQuery가 아닌데 변수명 앞에 $를 붙이는 경우를 알아보자 예전부터 jQuery를 쓰지 않는데 $를 붙이는 경우가 있어서 궁금했었다. 그래서 이번 기회에 그 이유를 알아보고자 한다. 보통 구글에 검색하다 보면 변수명 앞에 $가 붙는다는 것은, jQuery에서 쓰는 변수명을 의미한다는 글이 많았다. $는 jQuery에서 매우 일반적인 사용으로 변수에 저장된 jQuery 객체를 다른 변수와 구별하는 것이다. 윗 말이 제일 많았다. 혹은, jQuery가 아닐 때에도 jQuery를 사용해서 받은 것을 변수에 넣었다는 것을 표시하기 위해서?라는 말이 있었다. (jQuery를 사용하지는 않는데, jQuery를 사용해서 받은 것??? (의문) 무슨 말인지 이해가 잘 안 되고, jQuery라는 단어를 써야만 대답할..

fs.writeFile과 fs.writeFileSync에 대해 알아보자 https://despiteallthat.tistory.com/131 [Node.js] 응답 헤더 / 라우터 요청 / 요청 리디렉션 / 요청 분석 응답 헤더 / 라우터 요청 / 요청 리디렉션 / 요청 분석에 대해 알아보자 [ 응답 헤더 ] const http = require('http'); // require 파일을 불러오는 방법 const server = http.createServer((req,res) => { res.setHeader('Content-Ty despiteallthat.tistory.com // 요청 본문 분석 // http 모듈 사용 const http = require('http'); // require 파일을..

Http 301과 302 Redirect의 차이를 알아보자. HTTP Response Status Code는 요청에 대한 웹서버의 응답을 나타내는 코드를 말한다. 이 코드를 바탕으로 웹브라우저나 검색엔진 크롤러는 요청을 어떻게 처리해야 할지 판단한다. 이중 301과 302 코드는 사용자를 새로운 URL로 이동시키는 코드이다. [ 3XX Redirection ] HTTP 상태 코드는 보통 5개의 클래스로 구분된다. 우리가 많이 보는 404나 500 코드의 경우도 다 구분이 되어 있다!! HTTP 상태코드의 첫번째 자리 숫자는 이 코드가 어떤 클래스에 속하는지 나타내는다 301과 302는 "3XX Redirection" 클래스에 속하게 된다. Redirection 클래스에 속하는 상태코드들은 클라이언트를 지..

Node Life Cycle & Event Loop에 대해 알아보자 ※ node app.js 실행 node app.js를 파일을 실행하면 스크립트가 시작되어 Node.js가 파일 전체를 살펴보고 코드를 분석한 후 변수와 함수를 등록한다. => 전체 코드를 읽고 실행 ※ 계속 작동하는 이벤트 리스너 전체 코드를 읽고 실행하는데 목적을 달성해도 프로그램을 끄지 않는다. 이는 Node.js에서 중요한 개념인 이벤트 루프 때문이다. Node.js가 관리하는 이벤트 루프는 작업이 남아 있는 한 계속해서 작동하는 루프 프로세스로, 이벤트 리스너가 있는 한 계속 작동한다. 등록 후 제거하지 않았던 이벤트 리스너로 createServer가 만든 요청 리스너가 있다. createServer에 계속되는 이벤트 리스너라는 ..

Node.js로 서버 생성을 해보자 const http = require('http'); const server = http.createServer((req,res) => { console.log(req); }); server.listen(3000); Node.js에 탑재된 http 모듈의 기능을 전역에서 사용하기 위해 const로 변수를 생성해 준다. (var과 let으로도 생성이 가능하지만, 절대 변경하지 않을 값을 사용할 것이므로 const를 사용해서 다시 변경하지 못하게 할 것이다.) const http = require('http'); http라는 이름으로 변수를 선언하면, http 뒤에 =를 붙인 다음 값을 지정해야 한다. 이때, 특별한 키워드 및 기능을 사용할 수 있는데, Node.js는 전..

Drag & Drop 이용하여 이미지를 올려보자 HTML 이미지를 올려주세요 업로드한 이미지 CSS 더보기 body { display: block; overflow: scroll; width: 100%; height: 100vh; } .file-zone { background-color: rgba(0, 0, 0, 0.1); box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 400px); transition: 0.1s all ease-out; } .file-zone.on { background-color: rgba(97, 131, 209, 0.9)..

event.preventDefault()와 event.stopPropagation()에 대해 알아보자 [ event.preventDefault() ] event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다. 주로 사용되는 경우를 나열하자면, 1. 페이지를 이동시키는 a 태그를 눌렀을 때 이동을 막음 ★ 2. form 태그 안에 submit 역할을 하는 버튼을 눌러도, submit은 작동하되 새로 실행되지는 않게 함 2번의 경우 내가 행한 event에 대해 (여기서는 submit) preventDEfault를 해주지 않았기 때문에 submit 됨과 동시에 창이 다시 실행되서 초기..

Map에 대해 알아보자 [ Map ] Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 다음과 같은 차이가 있다. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값 이터러블 X O 요소 개수 확인 Object.keys(obj).length map.size [ Map 객체의 생성 ] Map 객체는 Map 생성자 함수로 생성한다. Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성된다. const map = new Map(); console.log(map); // Map(0) {} Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요..