React(159)
-
4-4. 프로젝트 & npm (프로젝트를 생성하고 외부 모듈을 사용해 보기)
npm 이란? Node Package Manager(Node.js의 패키지 관리 도구) npm init을 하여 초기설정을 한다. start로 node index.js를 실행시키려하지만 error가 난다. -- index.js가 없기 때문 index.js파일을 생성하면 정상적으로 실행이 된다. https://www.npmjs.com/ 접속 (node.js 계의 쇼핑몰) npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, prod..
2022.06.29 -
4-3. Node.js 기초 (Hello World부터 Common JS Module System까지)
require라는 내장함수로부터 calc.js에 있는 모듈을 index.js에서 사용할 수 있다.
2022.06.28 -
4-1. Node.js란 (자바스크립트 런타임)
자바스크립트 코드는 브라우저 내장 자바스크립트 엔진을 이용하여 실행 Node.js 자바스크립트를 브라우저가 아닌 어디에서도 사용하게 해주는 프로젝트 (자바스크립트의 실행환경(Javascript's Runtime)) >> 브라우저 아닌 우리 컴퓨터 내에서도 실행할 수 있게 되었다. JS로 카카오톡이나, 파워포인트, 웹서버 어떤것도 만들 수 있게 된것이다. 웹서버, 클라이언트인 브라우저로부터 웹을 요청받으면 웹을 반환하는 것 웹 서버 URL(웹서버의 주소)이라는 주소로 요청 받아서, 요청받은 주소에 알맞는 웹사이트(HTML, CSS, JAVASCRIPT로 이루어진 웹파일들을 전달) Node.js를 이용해 웹서버를 만들 수 있고, 도메인을 통해 알맞는 웹파일을 주고받음 React간의 관계 브라우저에서 동작하는..
2022.06.28 -
3-10. API & fetch (Promise/async&await/fetch/API)
API(Application Programming Interface) - 응용 프로그램 프로그래밍 인터페이스 - 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상처리, 문자 제어등을 위한 인터페이스를 제공한다. JSONPlaceholder - OPEN API https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of ..
2022.06.28 -
async & await - 직관적인 비동기 처리 코드 자성
async와 await는 Promise를 더 쉽게 이용할 수 있도록 도와준다. 1. Async Promise를 반환하면, 결과 값은 Promise 값을 반환한다. 그리하여 helloAsync()함수는 Promise를 반환하는 비동기 함수가 된다. >> 그래서 console.log가 아닌 then을 사용해서 출력도 가능함을 알 수 있다. >> Async는 return 값을 Promise로 만든다. 2. Await // 비동기 함수는 Promise를 return한다. // 이 함수는 실패가 없다. function delay(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); } // 이렇게 해도 되지만 // function delay(m..
2022.06.27 -
3-8. Promise(콜백 지옥에서 우리를 구원하다)
비동기 작업이 가질 수 있는 3가지 상태 function isPositive(number, resolve, reject) { setTimeout(() => { if (typeof number === "number") { // 성공 -> resolve resolve(number >= 0 ? "양수" : "음수"); } else { // 실패 -> reject reject("주어진 값이 숫자형 값이 아닙니다."); } }, 2000); } isPositive( 2, (res) => { console.log("성공적으로 수행 됨 : ", res); }, (err) => { console.log("실패 하였음 : ", err); } ); 이렇게 callback함수를 통해 비동기처리로 성공 및 실패를 내보았다. ..
2022.06.21