일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- CSS
- 리액트 네이티브
- SasS
- 참조자료형
- 코딩공부
- 리액트
- 코딩기초
- 사용하는 이유
- 깃
- http
- 리덕스
- 비동기
- scss
- async
- git
- 프론트엔드 개발
- react
- 코딩독학
- 프론트엔드
- redux
- Vue3
- 자바스크립트
- html기초
- JavaScript
- 타입스크립트
- React Native
- react-router
- 코딩초보
- 코린이
- TypeScript
- Today
- Total
목록코딩 공부 일지/JavaScript (19)
맨 땅에 프론트엔드 개발자 되기
이벤트 바인딩(Event Binding)이란? 바인딩은 '연결하다, 묶다' 라는 뜻으로, 웹페이지 접속 시에 HTML 문서가 로드될 때 JavaScript에 작성된 대로 요소와 이벤트를 연결하는 것을 이벤트 바인딩이라고 한다. 브라우저는 요소와 이벤트를 바인딩하고 있다가 사용자가 요청하는 순간에 이벤트를 발동한다. (클릭, 마우스엔터, 스크롤 등) 이벤트를 바인딩 하는 방법에는 세 가지가 있다. 1. HTML 이벤트 핸들러 HTML 요소의 속성값으로 이벤트를 바인딩하는 방법이다. 클릭 버튼을 클릭하면 doSomething이라는 이벤트가 발동하도록 이벤트를 바인딩한 것이다. HTML 문서에 JavaScript 코드를 작성하는 것은 보안 또는 다양한 이유에서 권장되지 않는 방법이다. 2. DOM 이벤트 핸들..
Promise, Fetch, Async, Await 에 대해 알아보자 Promise Promise는 JavaScript의 비동기 처리에 사용되는 객체로써 비동기로 처리되는 결과를 동기처럼 반환한다. 실제로 동기처럼 처리되는 것이 아니라 미래의 데이터 처리가 완료된 시점에 결과를 제공하겠다는 ‘약속(프로미스)’를 반환한다. - Promise 객체를 사용하는 이유 JavaScript에는 동기 작업과 비동기 작업이 있는데, 비동기로 처리되는 작업의 결과를 사용하기 위해 Promise 객체를 사용한다. 비동기 작업이 끝난 후의 결과를 이용해서 작업을 수행하려면 Promise 객체의 콜백함수로 작업을 지정해줘야 한다. 그래야 ‘순서를 보장’ 받을수 있다. 이러한 콜백함수가 너무 많아지면, 수정이 복잡해지고 코드의..
오늘은 firebase realtime database를 사용하다가 겪은 에러에 대해 기록해보려고 한다. 참고로, 아래 내용은 리액트의 환경이다. 1. 에러 내용 firebase realtime database를 이용해서 todo list 앱의 데이터를 저장했다. 저장된 데이터는 다시 불러와 화면에 뿌려줘야 했는데, 여기서 받은 데이터는 key와 내용이 있는 객체로 반환되었다. (key는 데이터의 ID, value는 데이터 였다.) 객체를 불러와 map을 이용하여 자식 컴포넌트에 내용을 뿌려주려고 하니 에러가 났다. 에러의 내용은 map을 이용할 수 없다는 내용이었고, 대충 Object is not iterable 이라는 내용이었다. 그렇다. 객체는 iterable Object가 아니다. 그래서 map,..
오늘은 firebase storage를 사용하다가 겪은 에러에 대해 기록해보려고 한다. 참고로, 아래 내용은 리액트의 환경이다. 1. 에러 내용 내가 구현하려고 했던 것은 firebase storage에 이미지 파일을 업로드 한 이후, 그 이미지 파일 경로를 불러와 화면에 출력하는 것이었다. firebase 공식문서를 통해 아래와 같은 내용을 확인할 수 있었고, listAll을 통해 불러와진 이미지 파일들을 forEach문 반복문을 활용해 useState로 상태 변경을 하고 화면에 출력하려고 했다. 나의 코드 listAll(listRef) .then((res) => { let url = []; res.items.forEach((itemRef) => { url.push({ name: itemRef._loc..
원시 자료형과 참조 자료형 원시 자료형(Primitive Data Type) 원시 자료형은 객체가 아니면서 동시에 메소드도 가지지 않는 자료형을 말하며, 다음의 자료형을 말한다. string, number, bigint, boolean, undefined, symbol, null 문자열의 경우, 컴퓨터와 더 가까운 언어(low level language)인 C언어의 경우에는 조합형의 자료형으로 취급하지만, 일반적으로는 원시 자료형이라고 한다. 원시 자료형은 배열, 객체와 달리 하나의 데이터만을 가지고 있다. 그리고 값 자체의 변경은 불가능한 immutable 데이터다. 참조 자료형(Reference Data Type) 원시 자료형이 아닌 모든 자료형이 참조 자료형이다. 대표적으로, 배열, 객체, 함수가 ..
객체와 객체 지향 프로그래밍 객체(Object) 객체는 키(Key)와 값(Value)으로 이루어진 정보들의 집합이다. 값에는 데이터가 들어올 수도 있고, 함수가 들어올 수도 있는데, 일반적으로 데이터는 프로퍼티, 함수는 메소드라고 부른다. 자바스크립트에서는 숫자, 문자열, 불리언과 같은 원시 데이터 타입(Primitive Data Type)을 제외하고는 모두 객체라고 볼 수 있다. 함수도 객체다. 객체의 형태 const dog = { name: '흰둥이', family: '말티즈', age: 1, eat: function() { alert('Feed Me!') }, love: function() { alert('Hug Me!') } } 위의 객체에서 객체의 값을 꺼내 쓸 때는 아래와 같이 표현할 수 있다..