자바스크립트7 [Javascript] JSON ✨ JSON 이란? Javascript Object Notation 의 약자로, XML (Extensible Markup Language) 이나 YAML 과 같은 데이터 형식 (객체) 중 하나이다. 용량이 작고 직관적으로 읽고 쓸 수 있다는 장점 덕분에 대부분의 웹 API 나 Configuration 파일에 활용된다. Javascript 와의 호환성도 높으며, 대부분의 프로그래밍 언어에 JSON 데이터를 파싱할 수 있는 내외장 모듈이 존재한다. (ex: python 의 json 모듈) XML vs JSON // xml Tove Jani Reminder Don't forget me this weekend! // JSON { "squadName": "Super hero squad", "homeTown": ".. 2021. 6. 5. [Javascript] Promise (프로미스) ✨ Promise 란? 향후 사용하게 될 비동기 연산의 결과값을 처리하도록 도와주는 JS 객체이다. 비동기 메서드에서 동기 메서드처럼 값을 반환할 수 있다. 예제) const testing = new Promise((resolve, reject) => { if (something) resolve(something) else reject(error message) }) testing .then(() => return something2) .catch(() => return error) .finally(() => return final) ✨ Promise 의 3가지 상태: Fulfilled: 연산이 성공적으로 완료된 상태이다. Rejected: 연산이 실패한 상태이다. Pending: Resolve 나 Re.. 2021. 5. 27. [React] React 의 생명주기(Life Cycle) 란? ✨ Life Cycle 이란? 컴포넌트가 브라우저상에 나타나고(Mount), 업데이트 되고(Update), 사라지는 일련의 과정을 칭한다. 이러한 과정에서 호출되는 메서드를 Life Cycle Method 라고 부르며, 클래스형 컴포넌트에서만 사용할 수 있다. (함수형 컴포넌트는 React 16.8 버전부터 도입되었으며, 현재는 useState 나 useEffect로 더욱 많이 활용된다) 각 단계별로 호출되는 메서드의 순서와 종류가 다르다. ✨ 1. Mount : DOM 에 엘리먼트를 넣는 작업 constructor: 컴포넌트 클래스의 생성자 함수이자, 컴포넌트가 생성될 때 호출되는 함수이다. State와 다른 값들의 초기값을 지정할 때 사용한다. 또한, props 를 매개변수로 받고, super(pro.. 2021. 5. 27. [React] React 에서 이미지(Image) 첨부하기 ✨ Img tag 란? 이미지를 불러올 수 있는 HTML 태그를 의미하며, DOM을 통해서도 작동 가능하다. React 에서의 img 태그는 기본적으로 HTML 태그와 동일한 attribute 를 가지며, class 만 className (리액트 문법) 으로 변경하여 지정해주면 된다. ✨ React 에서 이미지 불러오기: 웹 url 을 통해 이미지를 불러오고자 한다면 src='###' 안에 url 을 문자열로 작성해주면 된다. 로컬 디렉토리에 저장되어 있는 이미지를 불러오기 위한 방법으로는 두 가지가 있다. 1. React App 의 Public 폴더 내에서 불러오는 방법 2. 상대 경로와 import문을 활용하여 불러오는 방법 ✨ 1. Public 폴더 내에서 불러오기 React App 최초 생성 시 .. 2021. 5. 9. [React] React 의 상태 (State) 와 이펙트 훅(Effect Hook) ✨ State 란? 컴포넌트 내에서 동적으로 변경되는 값이다. ✨ State 의 특징은? 컴포넌트 내부에서 제어(관리)된다. State 업데이트는 비동기적(Asynchronous)이다. DOM 은 State 가 변경될 때마다 re-rendering 되지 않으며, 여러 차례의 setState 가 있다면 전부 통합하여 한 번에 re-rendering 한다. State 를 props 로 자식 컴포넌트에 전달할 수 있다. (캡슐화 되었기 때문이다.) ✨ State 를 사용하는 방법은? 함수형 컴포넌트에서는 useState 라는 훅(Hook)을 통해 사용할 수 있다. useState 를 활용하여 state 의 초기값을 지정해줄 수 있으며, 초기값은 어떠한 자료형이든 될 수 있다. (문자열, 배열, 객체 등) se.. 2021. 5. 9. [React] 리스트의 Key ✨ React 에서 Key란? 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트이다. React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. function NumberList(props) { return ( 1 2 3 ) } Key 의 특징은? 고유한 값이어야 하며, 형제 노드인 다른 아이템과의 중복된 키 값은 허용되지 않는다. 또한, 컴포넌트의 구성요소로 전달되지 않는다. (따라서 props 에 key 가 포함되었다 해도 props.key 로 사용 불가하다) 주의할 점 컴포넌트 하나를 여러 차례 반복해서 나열할 경우 컴포넌트 자체가 하나의 list 가 된다. 이 경우, 컴포넌트 자체의 key 값을 변경해주어야 한다. function ListItem(props) { .. 2021. 5. 9. [Javascript] 함수 : Currying (커링) ✨ Curry 함수란? 함수를 반환(return)하는 고차함수의 일종이다. 이때, 반환되는 함수를 클로저(Closure)라고 칭하기도 한다. function curry(func) { // curry() 는 커리함수이다 return (function closure(something){ // callback() 는 클로저이다 return (console.log(something)) }) } ✨ Currying(커링)이란? 여러 개의 매개변수를 단일 호출에 처리하는 함수를, 각각의 매개변수가 개별로 호출될 수 있도록 변환하는 작업을 커링(Currying)이라고 한다. function sum(a, b) { // 일반 함수 sum() 을 커링하여 변환해보도록 한다. return a + b; } function c.. 2021. 5. 9. 이전 1 다음