[week_06] Node.js 기초 | Node.js의 이해, 특징, ES6, 비동기 코딩, 이벤트 루프

1. Node.js란 자바스크립트를 어느 환경에서나 실행할 수 있게 해주는 실행기 Browser의 JavaScript 브라우저에서 실행 웹 내부의 제한된 동작 웹 프론트 개발자의 언어 Node.js 크로스 플랫폼 실행 (어느 환경에서든 실행 가능) 제한 없는 동작 다양한 어플리케이션 개발 2. Node.js의 특징 싱글 쓰레드 - 비동기 - 이벤트 기반 2-1. 싱글 쓰레드 쓰레드(Thread): 명령을 실행하는 단위, 한 개의 쓰레드는 한 번에 한 가지 동작만 실행 가능 싱글 쓰레드: 한 번에 한 가지 동작만 수행함 멀티 쓰레드: 동시에 여러 동작 수행 가능 장점 쓰레드 생성 비용이 없다 쓰레드가 늘어나지 않기 때문에 CPU 리소스 관리에 효율적 단점 쓰레드 기반의 작업들의 효율이 떨어짐 ex) CPU..

→2022.02.12

elice/study

[CS] local storage vs session storage vs cookie

local storage, session storage 그리고 cookie는 모두 클라이언트 상에서 key/value 쌍을 저장할 수 있는 메커니즘으로, value는 반드시 문자열이어야 한다. 또한, 모두 동일 출처 정책(SOP)을 따르기 때문에 다른 도메인에서 접근할 수 없다. 동일 출처 정책(Same-Origin Policy) 어떠한 문서나 스크립트가 다른 프로토콜/포트/호스트에 있는 리소스를 사용하는 것을 제한하는 정책 예를 들어, 다음과 같은 사이트에서 리소스를 다른 곳으로 요청한다고 하자. http://website.com/ex/ex.html 그러면 리소스 요청 결과는 다음과 같다. 1️⃣ http://website.com/ex/ 👉 성공 2️⃣ http://website.com/ex1/ 👉 성..

→2022.02.10

elice/study

[CS] data- 속성

DOM에 데이터를 저장할 수 있는 사용자 정의 데이터 속성 data- 다음에 오는 값이 데이터가 된다. 사용하고자 하는 용도에 적합한 소성이나 요소가 없을 때 사용 해당 웹페이지가 독자적으로 사용하는 값 즉, 웹페이지와 독립적인 소프트웨어가 이 속성을 사용해서는 안된다. 예를 들어, 음악 사이트에서 앨범 트랙의 음악을 리스트 형식으로 나타내는데 그걸 시간 순으로 정렬하기 위해서 data- 속성으로 음악 시간을 삽입한다고 하자. 빨간맛 ... 만약 이 음악사이트와 전혀 상관이 없는 외부에서 음악 시간을 알아내기 위해 사용한다면 목적에 부합하지 않는 것이다. 따라서, data- 속성은 해당 사이트만의 자체 스크립트를 위한 속성이라고 할 수 있다. 좀 더 자세한 사용 방법은 여기에 정리해두었다. 참고 http..

→2022.02.10

elice/WIL

[week_05] async/await과 API

1. async/await Promise를 활용한 비동기 코드를 간결하게 작성하는 문법 async/await 문법으로 비동기 코드를 동기 코드처럼 간결하게 작성 가능 await 키워드는 반드시 async 함수 안에서만 사용해야 함 async로 선언된 함수는 반드시 Promise를 리턴 async function asyncFunc() { let data = await fetchData(); let user = await; fetchUser(data); return user; } async 함수는 function 키워드 앞에 async를 붙여 만든다. fetchData, fetchUser는 Promise를 리턴! await 키워드는 then 메서드 체인을 연결한 것처럼 순서대로 동작 async functio..

→2022.02.09

elice/WIL

[week_05] 비동기 통신과 Promise

1. 자바스크립트 제어 흐름 자바스크립트는 다른 멀티스레드 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리한다. 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행 console.log('1'); setTimeout(() => {console.log('2');}, 1000); console.log('3'); 다른 멀티스레드 언어에서의 결과: '1'출력 → 1초 후 '2' 출력 → '3'출력 자바스크립트에서의 결과: '1'출력 → '3'출력 → 1초 후 '2' 출력 자바스크립트 엔진 하나의 메인 스레드로 구성 (즉, 단 하나의 Call stack을 사용) 메인 스레드는 코드를 읽어 한 줄씩 실행 브라우저 환경에서는 유저 이벤트를 처리하고 화면을 그린다 1-1. 동기적 제어..

→2022.02.07

elice/study

[DB] HTTP Method | GET, POST

0. HTTP Method 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식 클라이언트가 웹 서버에게 사용자 요청의 목적이나 종류를 알리는 수단 서버에 요청을 보내는 방법 GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS, CONNECT 1. GET 클라이언트 ➡ 서버 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 메서드 데이터를 읽거나(Read), 검색(Retrieve)할 때 사용 URL Parameter를 통해 정보를 넘기는 방식 요청 전송할 때, URL 주소 뒤에 이름과 값이 결합된 쿼리 스트링(query string)을 포함 www.example-url.com/resources?name1=value1&name..

→2022.02.07

elice/study

[DB] 웹 서버(Web Server)와 WAS(Web Application Server)

1. Static Pages와 Dynamic Pages Static Pages 서버에 미리 저장된 파일(HTML, CSS, JS, 이미지 등)이 그대로 전달되는 웹 페이지 서버는 사용자의 요청에 해당하는 저장된 웹 페이지를 보낸다. 어떤 사용자의 요청이든 항상 동일한 컨텐츠 반환 Dynamic Pages 서버에 있는 데이터들을 스크립트에 의해 가공처리한 후 생성되어 전달되는 웹 페이지 서버는 사용자의 요청을 해석하여 데이터를 가공한 후 생성되는 웹 페이지를 보낸다. 요청 인자에 따라 바뀔 수 있는 컨텐츠 2. 웹 서버(Web Server) HTTP 프로토콜을 기반으로 클라이언트의 요청을 서비스 웹 브라우저 클라이언트로부터 HTTP 요청(request)을 받아 정적인 컨텐츠(.html .jpeg .css ..

→2022.02.07

language/javascript

[JavaScript30] 7. Array Cardio Practice (2) | .some(), .every(), .find() and [...SPREADS]

📃 요구사항 주어진 data들을 가지고, 조건에 맞는 결괏값을 console 창에 띄운다. 💻 소스코드 먼저, 주어진 data는 다음과 같다. const people = [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 } ] const comments = [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, { text: 'You are the best', id: 2039842 }, { text: 'Ramen is my fav food ever', id: 123523 }..

→2022.02.05

티스토리툴바