본문 바로가기

전체 글

(33)

JavaScript (ES6) - 서버 통신의 시작 JSON 글을 작성하기에 앞서 이 게시글의 모든 글은 유튜브 드림코딩 by 엘리님의 동영상이 출처임을 알려드립니다. https://www.youtube.com/watch?v=yOdAVDuHUKQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=8 JSON JavaScript Object Notation JSON 이란 웹 브라우저와 웹 서버 간 비동기 통신, 웹 서버 간의 데이터 교환 등에 주로 사용된다 또 브라우저뿐만 아니라 모바일에서 서버와 주고받을 때, 또는 서버와 통신을 하지 않아도 오브젝트를 파일시스템에 저장할 때도 JSON을 이용한다! JSON은 key와 value로 이루어져 있다 오브젝트를 직렬화 ( serialize ) 해서 어떻게 JSON으로 변환할지, 직렬..

JavaScript (ES6) - Array APIs 총정리 - ( 유용한 10가지 배열 함수 ) 글을 작성하기에 앞서 이 게시글의 모든 글은 유튜브 드림코딩 by 엘리님의 동영상이 출처임을 알려드립니다. https://www.youtube.com/watch?v=yOdAVDuHUKQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=8 자바스크립트 배열의 유용한 함수들을 알아보자 ! Join Join은 배열에 존재하는 데이터들을 하나의 문자열로 만들어 주는 API이다 ! 바로 코드로 알아보자 const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(); console.log(result); 우선 fruits 배열 안에 있는 세 개의 데이터를 result 변수에 하나로 만들어 주기 위해 join 을..

JavaScript (ES6) - Prototype 자바스크립트는 기본 타입을 제외한 모든 것을 객체로 분류한다. 즉, number, string, boolean, null, undefined 와 같은 기본 타입을 제외한 모든 값은 객체다. 따라서 배열, 함수, 정규 표현식 등도 모두 자바스크립트 객체로 표현됩니다! 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. 즉, 객체는 객체지향의 상속 개념과 같이 부모 객체의 프로퍼티를 자신의 프로퍼티로써 사용할 수 있다 객체가 생성이 되면서 자동적으로 가지게 되는 부모 객체를 프로토타입 객체 ( Prototype ) 라고 부른다 예를 통해 살펴보자 Prototype let song = { name: 'song', age: 25, }; let choi = new Object(); choi..

리덕스란 무엇인가 ? 내가 리덕스를 공부하는 이유 처음 리액트 공부를 할 때 리액트를 배우고 나서 리덕스를 배우는 과정이었는데 리액트를 배우고 리액트 만으로 이루어진 프로젝트를 만든 이후에 리덕스 공부를 해야지 라고 생각했었는데, 그 때는 리덕스가 무엇인지, 개발에서 어떤 역할을 하는지 전혀 모르는 상태였다. 리액트 공부를 하다보니 하위 컴포넌트에게 State를 전달하는 것이 무척이나 귀찮은 일이라고 생각했었는데 이를 해결할 만한 도구가 없나 찾아봤더니 리덕스였고 이제 리덕스를 배워보려 한다 😉 🔍 리덕스 소개 리덕스는 가장 사용률이 높은 상태관리 라이브러리이다. 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로 충분하지만, 프로젝트의 규모가 커지면 상태 관리가 굉장히 번거로워질 수 있다. 리액트에서 리덕스..

JavaScript (ES6) - Array 개념과 APIs 글을 작성하기에 앞서 이 게시글의 지식은 유튜브 드림코딩 by 엘리님의 동영상이 출처임을 알려드립니다. https://www.youtube.com/watch?v=yOdAVDuHUKQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=8 Declaration 배열을 선언하는 방법에 대해 알아보자 const arr1 = new Array(); 첫 번째로 위와 같이 new를 사용하여 배열 오브젝트를 선언하는 방식이고 두 번째로 더 흔하게 쓰이는 방법이 있다 const arr2 = [1, 2, 3, 4]; 대괄호 안에 데이터를 삽입하여 배열을 생성할 수 있다 배열은 Index를 기준으로 데이터가 저장이 된다 배열의 첫 번째 Index는 0번째부터 시작하기 때문에 1이 삽입된 ..

JavaScript (ES6) - Object 글을 작성하기에 앞서 이 게시글의 지식은 유튜브 드림코딩 by 엘리님의 동영상이 출처임을 알려드립니다. https://www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=7 Object 생성하는 방법 const obj1 = {name: 'song' , age: 25}; 이런 식으로 만들 수도 있다 이 방법을 'object literal' 이라고 하며 const obj2 = new Object(); 클래스를 이용하여 new 키워드로 생성하는 방법도 있다 이 방법을 'object constructor' 이라고 한다. 자바스크립트에서는 클래스가 없어도 괄호 {} 를 사용하여 오브젝트를 생성할 수 있다. 자..

JavaScript (ES6) - class 와 object 객체지향프로그래밍 글을 작성하기에 앞서 이 게시글의 지식은 유튜브 드림코딩 by 엘리님의 동영상이 출처임을 알려드립니다. https://www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=7 Class와 Object 개념 정리 Java를 배우면서 객체지향에 대해 조금이나마 배운 적이 있는데 이번에 자바스크립트를 배우면서 다시 한번 정리할 필요성이 있다고 느껴졌다 class 란 생성하고자 하는 물체의 종류 또는 틀이라고 생각하면 편하겠다 class person { name; age; spaek(); ] 위는 person 이라는 클래스를 만들었는데 사람은 이름과 나이라는 프로퍼티를 가지고 있고 spaek() function이 있..

JavaScript (ES6) - 함수의 선언과 표현 ( Arrow Function ) 글을 작성하기에 앞서 이 게시글의 지식은 유튜브 드림 코딩 by 엘리님의 동영상이 출처임을 알려드립니다. https://www.youtube.com/watch?v=e_lU39U-5bQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=5 변수의 이름은 명사 함수의 이름은 동사로 작명하는 것이 기본적이다 (ex. do-something) 자바스크립트에서 Function은 Object이다. Function의 예시 function printHello() { console.log('hello'); } printHello(); 위와 같은 function을 작성하게 되면 아래와 같은 'hello'가 출력이 된다 hello 하지만 위의 function은 매우 쓸 일이 없다 보통 아래와..

이전 1 2 3 4 5 다음

티스토리툴바