전체 글 88

Express로 app 만들기 -> 쿼리선택자까지

npm으로 express를 설치한 다음 해당 index.js에 코드를 작성한다. const express = require("express"); const app = express() app.use(() => { console.log("WE GOT!") }) // localhost:3000 페이지에서 요청을 하면 callback 실행 app.listen(3000, () => { console.log("LISTEN!") }) 이후 localhost:3000 페이지에 접속하면 접속은 되지 않지만, 터미널로 요청은 들어온다. const express = require("express"); const app = express() app.use((req, res) => { // request, respond co..

NPM, Package.json

npm 은 노드 패키지를 위한 저장소로 패키지는 다른 사람이 쓴 코드를 우리가 쓸 수 있게 해준다. 터미널에 npm i give-me-a-joke npm i colors 등을 입력해서 폴더에 해당 npm을 설치하고 npm의 설명에 따라 해당 npm을 require 한 다음 js를 작성 할 수 있다. var giveMeAJoke1 = require('give-me-a-joke'); var colors = require('colors'); giveMeAJoke1.getRandomDadJoke(function (joke) { console.log(joke.rainbow); }) 해당 index.js의 코드이다. 이후 터미널로 index.js를 실행하면 두개의 npm이 작동한다. npm를 로컬설치가 아닌 글로벌..

Node js 모듈과 NPM

Require 기존에 있던 fs 모듈이 아닌 다른 모듈을 require로 가져올때는 const math = require('./math'); // math라는 js파일을 가져온다 console.log(math); console.log(math.add(1, 2)); // 강의와는 다르게 앞에 math를 붙혀야지 add 변수를 인식한다 `./math`처럼 ./를 붙혀서 정확하게 명시해야한다. 하지만 저렇게 해도 파일이 비어있다고 에러가 나는데, 그 이유는 import를 사용해서 무엇을 보내 줄 것인지 정확한 명시가 필요하기 때문이다. const { add, PI } = require('./math'); console.log(add(1, 2)); console.log(PI); 위의 const { add, PI..

Node js 비동기화,동기화, FS 모듈

const fs = require('fs'); 비동기화 node.js의 메소드를 사용하기 위해 fs 변수가 필요하니 js에서 선언을 한다. const fs = require('fs'); console.log(fs) fs.mkdir('Dogs', { recursive: true }, (err) => { console.log("In the callback!!") if (err) throw err; }); 이후 해당 js를 node js로 실행시 Dogs라는 폴더가 생성된다. 동기화 const fs = require('fs'); console.log(fs) fs.mkdirSync('Cats'); console.log("I come after mkdir in the file!!") 위 코드는 동기화 코드이며 C..

터미널 명령어

ls : list를 의미하며 터미널에 입력할 때마다 현재 있는 디렉토리의 콘텐츠를 나열함 pwd : 내가 있는 디렉토리의 위치를 알려줌 cd : chage directory 이며 cd asd/ 를 입력하면 asd 폴더(direcory)로 이동한다. cd .. : 뒤로간다. (.. 자체가 뒤로 가는 명령어 즉, cd ../../Users 도 됨 ( 우분투에서의 로컬디스크 C, D를 보여주는 경로는 mnt 즉 cd /mnt/c 는 c드라이브 cd /mnt/d 는 d드라이브 절대경로 : cd /mnt/c 절대경로는 컴퓨터의 어느 폴더에서 가능 내 지금 위치가 root 폴더인데 여기엔 mnt가 없음 그렇다면 mnt에 가기 위해선 cd mnt/ 가 아닌 cd /mnt/ 인 절대경로 코드를 입력해야 mnt로 이동 ..

JS Class Super, Extend

class Cat { constructor(name, age) { this.name = name; this.age = age; } eat() { const { name } = this; // name객체를 this에서 추출해옴 return `${name} is eating!` // this에서 추출해온 name을 사용한 return } meow() { return 'MEOWWW'; } } const blue = new Cat('blue',9) // blue는 object class Cat이며 name blue, age 9 class Dog { constructor(name, age) { this.name = name; this.age = age; } eat() { const { name } = this;..

JS 프로토타입과 클래스, new

String.prototype 을 사용하면 문자열에 사용할 수 있는 모든 프로토타입 메서드가 배열로 나온다. String.prototype.yell = function () { console.log(this.toUpperCase()); } 이렇게 새로운 yell이라는 메소드를 만들어서 "hi".yell() 입력시 출력값으로 HI가 나온다. 존재하고 있는 메소드를 같은 이름을 써서 대체할 수도 있다. class Color { // class 로 새로운 객체를 만들때는 앞에가 대문자, 밑의 new도 동일 constructor(r, g, b, name) { this.r = r; // this는 자동으로 새로운 객체를 참조 ( new를 사용하면 자동으로 빈 객체가 생기는데 그것을 참조한다. ) this.g = ..

TV 프로그램 API 응용

const form = document.querySelector('#searchForm'); form.addEventListener('submit', async (evt) => { // api를 불러올때 실패할 수 있으니 async를 사용 evt.preventDefault(); // submit의 기본 이벤트를 막아준다. const searchTerm = form.elements.query.value; // form 변수의 속성중 이름이 query인 value값을 변수로 사용 const config = { params: { q: searchTerm } }; // ?q=searchTerm과 같은 의미 (params 을 써야함) const res = await axios.get(`https://api.tvm..

API AXIOS 이용한 TV 프로그램

const form = document.querySelector('#searchForm'); form.addEventListener('submit', async function (e) { e.preventDefault(); // form 이라 submit 막음 const searchTerm = (form.elements.query.value); // 입력한 값을 변수로 const config = { params: { q: searchTerm } } // parms 안에 있는 키-값 쌍이 쿼리 문자열(아래 config )로 입력됨 const res = await axios.get(`https://api.tvmaze.com/search/shows`, config); // async에서 resolve시 axi..