IT도전기

로딩페이지 지난 번에 이어 계속 진행하고자 한다. 오늘은 jquery와 CSS를 이용하여 구현을 하고자한다. 1. div를 만든다. 2.css 속성을 만들어 준다. #loader { position : absolute; left : 0; top : 0; width : 100%; height : 100%; z-index : 10000; background : url('loader.gif') 50% 50% no-repeat rgb(249,249,249); } 3. jquery 를 설정한다. DOM이 모두 로드를 하게 되면 Loader를 천천히 안보이게 한다. $(window).on('load', function(){ $('#loader').fadeOut('slow'); }); 그리고 page를 떠날려할 때 ..

express js 란 node js를 조금 더 편리하게 사용할 수 있는 프레임 워크이다. node js 다운받기 terminal을 열어서 node -v node js 의 설치 유무를 확인한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 해당페이지에서 안정적인 LTS 버전으로 다운로드 받는다. 다운로드 후 node버전을 확인한다. express를 설치하기 위해 npm 이 필요하다. https://expressjs.com/ko/starter/installing.html Express 설치 설치 Node.js가 이미 설치되었다고 가정한 상태에서, ..

2009년 Ryan Dahl이 처음 개발했으며, 오픈소스 Javascript 엔진인 크롬 v8에 비동기 이벤트 처리 라이브러리인 libuv를 결합한 플랫폼이다. javascript로 브라우저 밖에서 서버를 구축하는 등의 코드를 실행할 수 있게 해주는 런타임 환경이다. 빈번한 I/o 처리에 있어서의 우수한 성능, 서버 확장의 용이성, 무엇보다도 javascript라는 프론트엔드 필수 언어로 백엔드까지 작성할 수 있다는 엄청난 장점 때문에 출시 이후로 빠르게 점유율을 높여가고 있다. 특히 넷플릭스 처럼 엄청나게 많은 양의 인풋 아웃풋 데이터를 처리해야 하는 서비스에 있어서 강점이 두드러진다. NodeJs 특징 자바스크립트를 활용하여 논 블럭킹(Non Blocking) I/O와 단일 스레드 이벤트 루프를 통한..

지난 글에서는 promise에 대해 알아보았다. 프로미스에 대해 알고 싶으면 아래에서 확인하자 2022.05.26 - [Cs] - 24. javascript - Promise (feat.콜백지옥) const f1 = () =>{ return new Promise((res, rej)=>{ setTimeout(()=>{ res("1번째") }, 3000); }); } const f2 = (message) => { console.log(message); return new Promise((res, rej) => { setTimeout(()=>{ res('2번째') },1000); }) } const f3 = (message) => { console.log(message); return new Promise((..

promise는 비동기 작업의 완료 또는 실패를 나타내는 객체이다. promise의 상태는 3가지이다. 1. 대기(pending) : 이행하지도 거부하지도 않은 초기 상태. 2. 이행(fulfilled) : 연산이 성공적으로 완료됨. 3. 거부(rejected) : 연산이 실패함. const pr = new Promise((resolve, reject) => { //수행한 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출합니다. setTimeout(()=>{ resolve('Ok') }, 3000) }) promise는 값과 함께 이행되거나 오류로 인해 거부될 수 있다. 그땐 then 메서드에 의해 처리된 값들을 호출할 수 있다. pr.then( functi..

function showName(name){ console.log(name); } showName('Tom') // Tom showName('Tom', 'Mike') // Tom?? showName이라는 함수가 있다. 이 함수는 name이라는 인자를 받는다. 하나 이때 name이 두 개가 들어온다면 어떻게 되는가?? Tom 하나만 받고 Mike는 받지 않는다.. 이럴 때 나머지 매개변수를 사용할 수 있다. function(...name){ console.log(name) } 이 함수는 정해지지 않은 개수의 인수를 받아 배열로 나타낼 수 있다. function showName(...name){ console.log(name); } showName(); //[] showName('Tom') // ['Tom'..

객체를 생성할 때는 아래와 같이 생성한다. let user = { name = 'Mike', age = 30 } 그런데 학급의 30명의 학생들이 있고 각 학생들의 객체를 생성하고자 하면 30번을 반복해야 하는 문제가 생긴다. 이럴 때 사용할 수 있는 게 생성자 함수이다. function User(name, age){ this.name = name, this.age = age } 생성자 함수를 사용할 때에는 함수명 앞에 new를 붙여준다. 그러하면 생성자함수에 빈 객체를 생성하고 그 객체에 특성을 담은 뒤 return을 하게 된다. function User(name, age){ this = {}; this.name = name, this.age = age return this; } 빈 객체를 생성하고 리턴..