Web Front-end/JavaScript
[JS/비동기/프로미스] JavaScript Promise에 대해서
오늘은 Front-End의 중요한 영역인 Data Fetching 에서 사용되는 Promise 문법에 대해서 알아보겠습니다. Promise 프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. - MDN promise는 ES6에서 나온 새로운 기능으로, 어떤 "문제점"을 해결하기 위해서, 나온 기능입니다. 즉, 그 문제점이 뭐냐를 이해하면 Promise의 정체를 밝힐 수 있을 것 같습니다. Promise의 등장배경 작은 규모의 웹에서는 비동기 요청이 많지 않아서, 각 비동기 요청간의 의존성이 크지 않았다고 합니다. 웹이 발전하고, 다양한 플랫폼으로 진출하면서 , 단순히 callback만으로는 모든 상태를 통제하기 어려웠다고 합니다. 예를들어, 로그인 과정에서 서버와 통신과정이 필요합니다...
[JS/객체/프로토타입] JS의 프로토타입
JavaScript는 프로토타입형 객체지향 언어이기도 하고, 함수형으로 쓸 수도 있고, 뭐 다양한 측면을 가진 언어입니다. (non-blocking , single-Thread,concurrency ,asynchronized 언어이기도 하죠) 자바스크립트의 빼놓을 수 없는 특징 중 하나인, 프토로타입에 대해서 적어봅시다! 프로토타입 현실에서 "프로토타입" 이라는 말 많이 쓸 일이 없지만 , 프로토타입에 대해서 먼저 알아봅시다. 종종 영화같은데나 게임버전 같은데서는 Prototype이라는 용어를 씁니다. 아이언맨에서 "프로토타입"이라는 말이 나오는데요 , 구글링을 해보겠습니다. 아이언맨 1에 나오는 초기 슈트입니다! 감은 잡힙니다. "프로토타입"이라고 하면, 뭔가 초기버전 , 근본이 되는 1.0ver같은 ..
[JS/호이스팅/실행 컨텍스트/이벤트 루프] JS 코드의 흐름
저는 var을 한번도 써본적이 없지만, JS는 오래동안 써왔던 언어이므로 ,var를 마주칠 가능성이 높습니다. (var은 호이스팅을 하기 때문에, 선언하지 않아도 접근이 가능해지며 재할당을 해도 아무런 상관이 없는 문제가 있었습니다) JS의 코드의 흐름중에 하나인, 호이스팅부터 짚고 넘어가볼까요! 호이스팅(Hoisting) 아래의 코드를 보시죠! 어떤 문제가 있어보이나요? var a=5 console.log(a) 아뇨, 없습니다! a=5 라는 결과가 나올겁니다. 아래의 코드를 보시죠 . 문제가 있을것 같나요? console.log(b) var b=5 놀랍게도, 아래의 코드도 "실행"은 됩니다. 의도치 않은 결과인 "undefined"를 뱉을 뿐, 에러는 발생하지 않습니다. C언어,Java와 같은 정적인 ..
[JS/this/호출스택] JS의 This 정리 (호출스택,This)
이제 JavaScript에 대해서 조금 깊게 다루어볼까 합니다. JS를 다룬지 벌써 꽤 되었습니다. 하지만, 여전히 익숙하지 않은 부분이 많고, "JS"만의 특징들이 몇개 있습니다. 그 점을 다루어보려고 합니다! JavaScript에서는 함수의 매개변수로 함수를 넘길 수 있다는 점입니다. 심지어, "함수"그 자체가 변수가 되기도 하였습니다. JS에서 함수(Function)은 1급 객체이다. 자바스크립트에서 함수는 1급 객체입니다. 함수가 "값"처럼 취급이 됩니다. 대표적인 형태가 callback 함수입니다. "값"처럼 취급 된다는 이야기는, JavaScript에서는 함수를 변수로 담을 수 있고, 함수를 매개변수로 전달도 할 수 있다는 이야기입니다. const calc = (callback,a,b) => ..
[JS/Array/Basic] Array를 잘 다루어보자- 2
결국 우리는 직접 조건을 작성하여, 배열을 처리하는 경우가 많다. 하지만, 이 조건을 메서드를 이용해서 for문 작성없이 깔끔하게 한 문장으로 처리할 수 있다면, 생산성이 아주 좋을 것이다. 그러기 위해서, 나오게된 ES6 문법들을 알아보자. 정확히는 "iterable"하면 쓸 수 있는 메서드지만, Array는 iterable하기 때문에, 아래의 메서드들이 다 사용이 가능하다. 배열을 조건에 맞게 탐색, 만나는 첫번째 원소값을 반환 어떤 요소가 배열안에 있는지 ,없는지 찾고 싶을 때가 있다. 그럴 때 유용하게 쓸 수 있다. const arr=[1,2,3,4,5,6,7] find() 주어진 판별 함수 (콜백)를 만족하는 첫번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefinded를 반환합니다. ..
[JS/배열/Method/Array] Array를 잘 다루어보자!
JavaScript에서는 Array를 다룰 일이 많았다. React에서도 Map,filter,find 같은 메서드는 자주쓰기 때문에, 한번 쯤은 정리를 해야겠다 싶어, 이번 기회에 10개정도를 연습해보려고 한다! 배열을 문자열로 변경하기 (Join) 처리를 할 때는 배열형태가 좋지만, 마지막에 출력할 때는 결국 String형태로 바꿔야하는 경우가 자주있다. 즉 , 특정 배열을 모두 문자열로 나타내어, 출력하는 상황이 자주 발생한다. // make a string out of an array const Target = ["i","love","you"] join() 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. 반환: String을 반환합니다. 사용방법: array.join([seperator]) ,..
[JS/Basic/배열/Array] 자바스크립트의 배열
자바스크립트에는 "key - value"쌍을 이루는 강력한 객체리터럴이 있습니다. 하지만, 개발을 하다보면 첫 번째, 두 번째, 세 번째 등 "순서"가 중요한 순간이 있습니다. 그리고, 정렬을 위해서도 순서는 중요하게 됩니다. 순서가 있는 데이터들의 집합을 다룰 때, 객체를 이용하면 손해입니다. 왜냐하면, 객체는 순서를 보장하지 않고 순서와 관련된 메서드가 보장되어있지 않습니다. 그리고, 배열은 프로그래밍 언어라면 무조건 갖고있다고 생각해도 무방합니다. 배열 (Array) 배열은 선언방법은 기본적으로 2가지 입니다. new 연산자를 이용하는 방법 대괄호를 이용하는 방법 const arr = []; const arr1 = new Array(); 배열의 접근방법 배열은 "인덱스"를 통해서 , 접근이 가능합니..
[JS/Event/Pattern] 자바스크립트 이벤트 버블링(Event Bubbling)과 이벤트 위임(Event Delegation)
자바스크립트의 이벤트 자바스크립트는 사용자와의 "상호작용"을 이벤트로 정의하여 가지고 있습니다. 대표적으로 "마우스 이벤트" , "키 이벤트", "폼 이벤트", "스크롤 이벤트" 등등 이 있습니다. 대표적인 이벤트들은 아래 예제코드로 간단하게 작성해봤습니다. // 마우스 이벤트 중 ,하나인 클릭 $root.addEventListener("click",() =>{}); // 키보드 이벤트 중 하나인, 키다운 $keyBoard.addEventListener("keydown",()=>{}); //폼 이벤트 중 하나인 submit $loginButton.addEventListener("sumbit",()=>{}); //폼 이벤트 중 하나인 , change $result.addEventListener("chang..