지식을 남기고 쌓는 곳

Promise는 콜백함수 대신에 비동기적인 처리를 할 수 있는 것이다. 비동기가 무엇인지 모른다면 다음 글을 보자 자바스크립트 비동기 [클릭] Promise의 중요한 요소는 State와 Producer, Consumer가 있다. state는 자신의 일이 다 처리되었는지 아닌지의 현재 상태를 나타내 주는 것이고 Producer는 데이터를 제공하는 사람이며 Consumer는 데이터를 소비하는 사람을 일컫는데 개념만 보면 뭔 소리하는지 못 알아듣겠으니 코드를 보자 //1. Producer const promise = new Promise((resolve, reject) => { //여러가지 로직(네트워크 통신 및 파일 처리 등등) console.log('doing something...'); setTimeou..

callback 함수는 비동기 함수이다. 비동기 함수에 대해서 잘 모른다면 아래의 게시물부터 보고오자 자바스크립트 비동기[클릭] 콜백함수는 쉽게 말하자면 일을 다른 객체에게 시키고, 그 일이 끝날 때까지 기다리는 것이 아니라 그 객체가 나를 다시 부를 때까지 다른 할 일을 하고 있는 것이고, 정확히 말하자면 제어권을 객체에게 넘겨주는 것이다. 사용자가 계속 실행하기 귀찮으니 실행제어권을 객체에게 넘겨주는 것이다. 이 콜백함수는 비동기 처리를 하기 위한 패턴 중 하나이다. setInterval(() => { console.log('1초마다 실행될 겁니다.'); }, 1000); 콜백함수의 예시는 setInterval이 있다. setTimeout이 지정한 시간이 지나면 지정한 함수가 1회 실행된다면 setI..

자바스크립트는 동기적인 언어이다. 동기적인 것이 무엇이냐 하면은 동기 (Synchronous: 동시에 일어나는) 말 그대로 동시에 일어나는 뜻인데 프로그래밍적인 개념으로 말하자면 요청과 그에 대한 결과가 동시에 일어나는 것이다. function add(a,b){ return a + b; } let a = 3; let b = 6; let c = add(a,b);// add함수의 호출(요청)과 결괏값을 반환(결과)전까지 다음코드로 진행되지 않는다. console.log(c); 이러한 특성때문에 대부분의 프로그래밍 언어는 절차지향처럼 코드가 위에서 아래로 작동한다. 아래에 있는 코드는 위에 있는 코드보다 먼저 실행될 수 없다. 여기서 비동기라는 것은 무엇이냐하면 동기가 아닌 것들이다. 비동기(Asynchron..

자바스크립트의 함수도 다른 언어와 달리 신기한 특징을 갖는다. 자바스크립트 함수는 값(value)이 될 수 있다. const printFn = function(){ console.log('fn'); } printFn; // ƒ (){ // console.log('fn'); // } printFn(); // fn 그래서 이렇게 변수에 저장할 수 있으며, 변수에 () 을 붙이면 함수가 실행되고 변수만 적으면 함수 내용을 문자형으로 출력한다. 함수를 정의하는 데에는 함수선언문과 함수 표현식이 있다. // 함수 선언문 function printFn(){ console.log('fn'); } // 함수 표현식(anonymouns funciton) const printFn = function(){ console.l..

이번 시간에는 자바스크립트의 객체의 특징에 대해 설명해보겠다. 자바스크립트의 객체는 Object라 하며 선언은 다음과 같다. 객체의 선언 및 접근 더보기 const obj1 = {}; const obj2 = new Object(); const ablue = {name:'ablue', age: 26}; // 선언과 초기화를 동시에 하는 법 객체는 "key" : value로 이루어져 있다. c언어의 구조체와 자바의 해쉬 맵과 파이썬의 딕셔너리와 비슷하다. 그런데 여기서 key는 무조건 string형이며 value는 어떤 타입이든 상관없다. console.log(ablue['name']); //이렇게 배열형태로 데이터에 접근할 수 있다. 주의할 점은 배열의 인덱스는 String타입으로 줘야한다. name으로 ..

scope는 어떤 하나의 데이터가 어느 정도의 범위를 가져 영향을 주는지의 대한 개념이다. function fn(){ int a = 1; } fn(); system.out.println(a); 자바나 c++을 배웠다면 위의 코드가 이상하다고 생각할 것이다. 왜냐하면 함수 밖에서 함수 안에 있는 a를 접근하면 분명 오류가 일어나기 때문이다. 즉 함수 안에서 선언된 a는 밖에서 접근할 수 없는 것 a의 scope는 함수 fn 범위 안이라고 정의할 수 있다. 자바스크립트에서의 scope는 다양해서 헷갈릴 것이다. 이번 시간에 자세히 알고 가자. 자바스크립트 내에 데이터 타입은 크게 var, let, const로 나뉜다. 여기서 let과 const는 스코프가 같으니 var와 let, const 이렇게 설명하겠다..

요번 글에선 DOM요소를 DOM요소에 이어 붙이는 것을 설명하려 합니다. 일단 제가 옷을 살 때 자주 사용하는 웹페이지에 들어가봅시다. 무신사스토어 : https://store.musinsa.com/app/?gclid=Cj0KCQiA4NTxBRDxARIsAHyp6gDF6UTxQmna2A77XMA9JeSNZtczLL7Xaev-bSWiaxPChywmTTXoclAaApHOEALw_wcB 무신사 스토어 숏패딩,코트,스웻셔츠,스니커,반스,아디다스,커버낫,내셔널지오그래픽,인사일런스,라퍼지스토어 store.musinsa.com 여기서 스크롤을 밑으로 내려가보면 이렇게 스페셜 쇼케이스에 관한 문단이 나올 것입니다. 제가 요번 글에서 하고자 하는 건 DOM요소를 사용해서 이 스페셜 기간이 끝났다는걸 사진 속에 있는 "단..

CSS에는 선택자(id,class,tag) 개념이 있습니다. HTML 요소의 스타일을 선택하여 수정할 때 이 선택자를 이용해서 자신이 원하는 위치, 범위를 설정할 수 있습니다. 자바스크립트로 DOM(Document Object Model) 요소에 접근할 때도 주로 선택자를 사용합니다. DOM 요소를 id 선택자로 접근하는 함수 - getElementById() nice to meet you id 속성 값은 한 문서 안에서 유일하기 때문에 자주 사용한다. 우리가 css를 코딩할 때는 #hi 를 통해서 nice to meet you 텍스트를 수정했다. 자바스크립트에선 getElementById()을 통해 DOM 요소에 접근할 수 가 있다. document.getElementById("hi").onclick ..

자바스크립트에선 하나의 변수에 여러 가지 자료를 저장할려면 Array 객체를 이용합니다. Array 객체는 말 그대로 배열이라는 것인데 자바스크립트의 배열은 c언어나 자바의 배열과 비슷한 점이 있기 때문에 이미 알고 계신 분들이라면 쉽게 이해할 수 있을 것이다. 크롬을 키고 주소창에 about:blank 를 검색해보자. 그럼 아무것도 없는 빈 화면이 뜰 것인데 여기서 F12키는 누르면 이렇게 콘솔창이 나올 것이다. 굳이 vscode같은 개발환경의 도움없이도 여기서 손쉽고 코드를 짤 수 있고 간편하게 결과를 확인해 볼 수 있기 때문에 필자는 간단한 코딩을 할 것이라면 이 방법을 추천한다. 이제 Array 객체를 선언하는 방법부터 배워보자 Array 객체 선언과 초기화 var myArray = new Arr..

자바스크립트에는 수많은 내장 객체가 존재하지만 필요하다면 사용자가 직접 객체를 만들 필요가 있다. 이렇게 사용자가 직접 만든 객체를 '사용자 정의 객체'라고 한다. 사용자 정의 객체를 만드는 방법에는 몇 가지 있는데 그중 가장 많이 사용하는 객체 리터럴과 생성자 함수를 사용하는 방법을 알아보겠습니다. 리터럴 표기법을 사용해 객체만들기 리터럴(Literal)이란 프로그래밍에서 자료를 표기하는 방식입니다. 리터럴을 사용해서 표기한다는 것은 변수를 선언하면서 동시에 값을 지정해 주는 표기 방식을 말합니다. 다음과 같이 변수를 선언하면서 동시에 값 10을 지정하는 것이 바로 리터럴 표기법입니다. var a = 10; 그렇다면 '객체 리터럴 표기법'이란 객체를 선언하면서 동시에 값을 지정해 주는 것이겠죠? 객체 ..