F.E/JavaScript

[JavaScript] 리스트 순회, for문, for of문, for in문, for each문

리스트 순회란 리스트(배열)에 있는 값을 전부 돌린다는 것을 의미한다. 기존의 ES5에서는 for문을 이용한 리스트 순회를 하였지만, ES6가 생기면서 다양한 방법이 생겼다. For 문을 이용한 리스트 순회 가장 기본적인 순회 방법이다. //ES5 var list = [1,2,3,4,5] for (var i = 0; i

[JavaScript] JS 표준 내장 객체, Map

Map이란? Map은 JavaScript의 표준 내장 객체로, 키와 값이 쌍으로 이루어진 콜렉션이다. Map 객체의 특징 객체를 포함한 모든 값을 키로 사용 할 수 있다. 객체는 이터러블이 아니지만, Map은 이터러블이다. 키 값이 고유하다. Map 생성 const map = new Map([["key", "value"], ["key1", "value1"]]) console.log(map) // Map(2) {'key' => 'value', 'key1' => 'value1'} set()를 이용한 요소 추가 const map = new Map([["고기", "삼겹살"], ["물고기", "금붕어"]]) map.set("해산물", "오징어") map.set("캐릭터", "짱구").set("물고기", "금붕어"..

[JavaScript] JS 표준 내장 객체, SET

SET이란? SET은 JavaScript의 표준 내장 객체로, 중복되지 않은 유일한 값의 콜렉션(집합)이다. SET 객체는 수학적 집합을 구현하기 위한 자료 구조로, 교집합, 합집합 등을 구현 할 수 있다. SET 객체의 특징 동일한 값을 중복하여 포함 할 수 없다. 요소 순서의 의미가 없다. 인덱스에 요소로 접근 할 수가 없다. 자료형에 관계 없이 원시 값과 객체 참조등 모두 저장 가능하다. SET 생성 const set1 = new Set() console.log(set) // Set(0) {} const set2 = new Set([1, 2, 3]) console.log(set) // Set(3) {1, 2, 3} const set3 = new Set("Hello") console.log(set) ..

[JavaScript] 비동기 처리 - Promise

JavaScript에서 비동기 처리는 전 게시글에 나온 콜백 함수를 통해서 처리를 했지만, 콜백 함수가 중첩 되어서 계속 호출해야하는 복잡한 코드의 경우는 계속 들여쓰기를 사용을 하여도, 코드의 가독성이 현저하게 떨어지게 되는 콜백 지옥이 발생이 됩니다. 해당 문제를 해결하기 위해 Promise를 사용하게 되었습니다. Promise란? Promise는 현재에는 당장 얻을 수 없지만 가까운 미래에 얻을 수 있는 데이터에 접근하기 위한 방법을 제공한다. Promise 생성 방법 아래와 같이 Promise 객체를 생성하는 데, 보통은 변수에 할당 하는 것이 아닌, 함수의 리턴 값으로 사용하는 경우가 많다. const promise = new Promise((resolve, reject) => {}) Promi..

[JavaScript] 평가와 일급, 고차 함수

평가란? 코드가 계산 되어 값을 만드는 것을 의미한다. 일급이란? 아래의 항목에 해당 되는 것을 의미한다. 일급은 값으로 다룰 수 있다. 일급은 변수에 담을 수 있다. 일급은 함수의 인자로 사용이 가능하다. 일급은 함수의 결과로 사용 될 수 있다. // a와 10은 변수에 담을 수도, 값으로 다룰 수 있어 일급이다. const a = 10 // abc()와 a, def는 모두 일급이다. const abc = a => a + 10 const def = abc(a) 일급 함수란 일급으로 다뤄지는 함수로, 값으로 다룰 수 있다. JavaScript에서 함수가 일급인 것은 조합성과 추상화의 도구로 사용 할 수 있다는 것이다. // 함수 a => a + 5는 변수 add에 저장 할 수 있기에, 1급이다. cons..

[JavaScript] 비동기 내장 통신 Fetch

FrontEnd는 디자인과 이벤트 등으로 화면 구성을 하는 것도 중요하지만, 서버와의 통신을 통해 원하는 데이터를 가져오는 것도 중요하다. 이 때 서버와의 통신을 위한 기능인 fetch()가 있다. //비동기 함수 httpRequest const httpRequest = async () => { //fetch("url", {method, body, header 설정}) 요청 후 응답을 res에 저장 const res = await fetch("http://3.39.32.181:8080/api/auth/login", { method: "post", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: inputId, pw: ..

[JavsScript] 비동기처리 - Callback Function

JavaScript는 비동기적 언어다. 비동기(Asynchronous)란 하나의 작업이 끝나지 않아도 다음 작업을 실행하는 방식을 의미한다. 동기(Synchronous)란? 하나의 작업이 끝나야 다음 작업을 실행하는 방식을 의미한다. 예를 들어 카페에 가서 커피를 구매한다고 생각하자. 동기적 처리의 예시 카페에 가서 커피를 주문할려고 한다. 카페에 도착한 나는 점원에게 아이스 아메리카노를 주문하였고, 점원은 주문을 받은 후 커피를 만드는 중에 다른 손님이 왔지만, 커피를 만들고 나에게 건네주기 전까지는 다른 손님의 주문도 받지 않고 그 사람이 원하는 커피를 제작하지 않았다. 이처럼 동기적 처리에서는 하나의 작업이 끝나기 전까지는 다른 작업을 실행하지 않는 것이 특징이다. 비동기적 처리의 예시 카페에 가서..

[JavaScript] ES6 문법(1)

ES6란? ECMAScript 2015 혹은 ECMAScript 6는 ECMAScript의 표준 버전이다. 문법의 해당 사항으로는 아래와 같다. 변수 선언, const & let 화살표 함수, Arrow Function 템플릿 리터럴, Template Literals 기본 매개 변수, Default parameters 배열, 객체의 비구조화, Array & object destructing 가져오기 및 내보내기, import & export 프로미스, promise 클래스, Class 나머지 매개 변수 및 확산 연산자, Rest parameter & Spread operator 변수 선언, const & let const와 let은 변수 선언을 위한 새로은 ES6의 키워드다. //기존 변수 선언 var ..

[JavaScript] 배열과 객체

JavaScript의 자료형은 Number, String, Null, Boolean, Undefinded ...가 있는 데, 그 중 배열(array)와 객체(object)에 대해서 알아보자. 배열 Array 배열은 여러가지의 값을 한 번에 저장할 수 있는 자료형이며, 형태는 아래와 같다. //배열 생성 let ary1 = [1,2,3] //빈 배열 생성 let ary2 = [] 배열은 자료의 순서가 중요한 자료형이며, 배열에 속한 값을 꺼낼 때는 아래와 같다. let ary1 = [1,2,3] ary[0] //1 ary[1] //2 ary[2] //3 아래와 같은 방법으로 배열에 값을 넣거나, 수정할 수 있다. //ary1 let ary1 = [1,2,3] ary1[0] = 6 console.log(ar..

[JavaScript] 함수

JavaScript에서 함수란 코드의 집합을 의미하며, 아래와 같이 작성한다. /* function 함수명(매개변수){ 실행 코드 } */ function MyFunction() { } 추가로 아래와 같이 함수를 선언 할 수 있다. //익명 함수 : 함수에 이름을 짓지 않고 선언하고, 변수에 저장한다. const myFunction = function(){ } //화살표 함수(Arrow Function) : 익명 함수의 ES6 표기 방법 /* function 키워드 대신 소괄호 뒤에 '=>'를 적어 선언 */ const myFunction = () => { } //콜백 함수 : 매개 변수로 넘어가는 함수를 의미하며 익명 함수(혹은 화살표 홤수)와 같이 작성한다. myFunction(() => {}) 함수..