본문 바로가기

javascript

 (26)
[JS중급] 서드파티모듈과 npm 모듈 검색 순서require() : 함수 안 인자를 보고 알맞은 모듈을 로드함reuqire()에 경로 표시가 없음 → node_modules 디렉토리 내에 그런 파일이 없음 → node_modules 디렉토리 내에 그런 디렉토리가 있음 → 디렉토리 안에 package.json 파일이 있음 → main 필드에 적힌 파일 로드(main 필드가 없다면 index.js 파일 로드)package.json이라는 파일을 가진 디렉토리가 패키지다 | 하나의 서드파티모듈은 하나의 패키지다 | 서드파티모듈을 관리할 때 쓰는 npm은 node package manager의 줄임말이다package.json 파일에서 알아야할 필드name: 패키지 이름 | require 함수 인자로 넣는 것version: 패키지 버전 | nam..
[JS중급] 초간단 웹서버 만들기 서버와 클라이언트클라이언트: 서비스에 관한 요청을 서버에 보냄서버: 클라이언트 요청에 응답함웹서버 만들기http://127.0.0.1:3000127.0.0.1 → 개발용 테스트 IP | 외부 다른 컴퓨터가 아닌, 컴퓨터 자기 자신을 나타냄3000 → 코드에서 지정한 포트 번호const http = require('http'); // 통신규약// 서버 객체 생성// request: 클라이언트 요청에 관한 객체// response: 서버 객체가 할 응답에 관한 객체let server = http.createServer(function(request, response){ response.end('Hello Wolrd!');}); server.listen(3000); // 클라이언트 요청을 3000..
[JS중급] Node.js 기본 개념 REPL : 사용자가 입력한 내용을 읽고(Read), 그 결과값을 구한 다음(Eval), 결과값을 출력(Print), 이 과정을 반복(Loop) | 짧은 코드 테스트 시 유용모듈이란? 전체를 이루는 부품 하나하나경로에 파일 이름만 적어도 됨 | 모듈 경로는 정확히 적어야 함 | require함수가 리턴하는 객체는 상수로 대입하는게 좋음(let → const) | 변수, 객체, 함수 모두 공개 가능// math-tools.jsfunction add(a, b){ return a + b;}// add함수를 외부로 공개exports.add = add;// main.js// require(): 모듈을 로드하는 함수let m = require('./math-tools');console.log(m.add(1, ..
[JS중급] async/await을 활용한 비동기 코드 async/await란? async(asynchronous) : 함수 안에 비동기적으로 실행할 부분이 있다는 것을 알림 → await이 있는 코드 & 함수에 Promise객체를 리턴하는 부분이 있다는 뜻await : 그 뒤에 코드를 실행하고, 그 코드가 리턴하는 Promise객체가 fulfilled/rejected 상태가 될 때까지 기다림... 해당 객체가 fulfilled 상태가 되면 그 작업성공결과를 추출해서 리턴함 | async 안에서만 사용 가능async 함수 안의 코드가 실행되다가 await을 만나면, 일단 await 뒤에 코드가 실행되고, 코드의 실행 흐름이 async 함수 바깥으로 나가서 나머지 코드를 실행 → 그 이후엔 await 뒤에 있던 Promise객체가 fulfilled 상태가 되기..
[JS중급] 비동기 실행과 Promise 객체 fetch함수와 비동기 실행비동기 실행: 특정 작업을 시작(리퀘스트 보내기)하고, 완벽하게 다 처리(리스폰스를 받아서 처리)하기 전에, 실행 흐름이 바로 다음 코드로 넘어가고, 나주에 콜백이 실행되는 것 | 동기 실행에 비해 한 작업을 더 빠른 시간 내에 처리 가능동기 실행: 한번 시작한 작업은 다 처리하고 나서 다음 코드로 넘어가는 것비동기 실행 출력 순서: Start! - End - fetch함수fetch함수의 then메서드는 콜백을 단지 등록만 함(바로 실행 X)그래서 End를 실행하고, 서버에 리스폰스가 도착하면 그 내용이 출력됨동기 실행 순서: Start! - fetch함수(리퀘스트보내기) - 리스폰스가 오기 전까지 코드 실행 일시 정지되고 오면 필요한 처리 수행 - Endconsole.log(..
[JS중급] Web API 배우기 JSON이란? JavaScript Object Notation - 정보 교환을 하기 위해 만들어진 데이터 포맷... JS 기반이라 문법 유사하지만 좀 다름각 프로퍼티의 이름을 반드시 큰따옴표로 감싸줘야 함값이 문자열인 경우, 큰따옴표를 사용해야 함JSON에서 표현할 수 없는 값 : undefined, NaN, Infinity 등주석 추가 X{ "name":"Yamdurian", "height":164, "age":25,}JSON 데이터를 객체로 변환하기 : JSON 데이터 타입은 stringfetch('https://www.google.com') .then((response) => response.text()) // JSON: JSON을 다루기 위해 사용되는 JS 기본 객체 /..
[JS중급] JS 모듈 모듈이란? 파일을 분리해서 연관된 코드들을 묶어두는 것 | 한 파일에서 구현하고자 하는 게 더 명확해짐 | 코드 재사용 가능모듈파일의 조건모듈 스코프 : 모듈 파일들이 가지는 독립적인 스코프 | 모듈 내에서 선언한 변수, 함수는 그 모듈 안에서만 사용되어야 함 // html에서 모듈 선언: type="module" 지정 모듈 문법 // sub.jsexport const title = 'hello!';export function print(value){ console.log(value);}// main.js - 모듈 문법import {title, print} from './sub.js'print(title);이름 바꾸기// import {변수이름 as 바꿀변수이름} from 파일명import..
[JS중급] JS배열 메서드(forEach, map, filter, find, some, every, reduce, sort, reverse, set) 배열 메소드 ① - forEach와 map : for of문처럼 각 요소를 살펴보면서 반복적인 행동 가능map : 메서드 결과로 새로운 배열 리턴forEach : 리턴값이 없기 때문에 변수에 담았을 때 항상 undefined따라서 배열의 단순 반복 작업은 forEach, 새로운 배열이 필요하다면 map을 사용최대 반복 횟수는 메서드 호출 당시 요소의 개수const members = ['짱구', '맹구', '유리', '훈이'];for(let member of members) { console.log(`${members}님이 입장하셨습니다.`);}// forEachmembers.forEach(function (member) { console.log(`${member}님이 입장하셨습니다.`);});// for..

티스토리툴바