일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- async
- react
- TypeScript
- React Native
- 코딩독학
- http
- 리액트
- 리액트 네이티브
- 비동기
- 자바스크립트
- 코딩공부
- SasS
- JavaScript
- 코린이
- 깃
- 참조자료형
- redux
- 코딩초보
- react-router
- 타입스크립트
- scss
- 사용하는 이유
- 코딩기초
- 프론트엔드
- CSS
- 프론트엔드 개발
- 리덕스
- Vue3
- git
- html기초
- Today
- Total
목록자바스크립트 (16)
맨 땅에 프론트엔드 개발자 되기
전개구문 ES6 에 추가된 문법으로 '...' 으로 표시하며, 구조분해할당과 함께 사용할 수 있고, 배열과 객체 등에 할당된 값을 전개해서 사용한다. 참조 자료형과 얕은 복사 & 깊은 복사 - 얕은 복사 참조 자료형에 대한 내용은 이전 게시물에서 다뤘기 때문에 이전 게시물을 참고바란다. 원시 자료형과 참조 자료형 원시 자료형과 참조 자료형 원시 자료형(Primitive Data Type) 원시 자료형은 객체가 아니면서 동시에 메소드도 가지지 않는 자료형을 말하며, 다음의 자료형을 말한다. string, number, bigint, boolean, undefin babycoder05.tistory.com 배열, 객체 등 참조 자료형은 원시 자료형에 비해 메모리 공간을 많이 차지하므로 데이터의 효율적인 관리..
오늘은 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..
JavaScript 동기와 비동기, 콜백함수 JavaScript를 공부하다보면 자주 듣게 되는 용어인 ‘동기’와 ‘비동기’. 한자어로 되어 있어서 직관적으로 무슨 뜻인지 알기가 어려운데, 알고보면 쉽기도 하고 CS적으로 깊이 들어가다 보면 어렵기도 한 용어다. 일단 얕게 이해할 수 있을만큼 공부해본다. 동기(Synchronous)와 비동기(Asynchronous) 동기와 비동기를 간단하게 설명하자면, 동기는 순차적으로 이행되는 방식, 비동기는 비순차적으로 이행되는 방식이라고 할 수 있다. 순차, 비순차라는 말을 보면 무엇엔가 순서가 있다는 말이 된다. 자바스크립트는 싱글스레드 언어다. 그 말인 즉, 문서의 위에서부터 아래로 순서대로 스크립트를 읽어나가며 일을 처리하며, 하나의 순서대로 처리된다는 뜻이다...
호이스팅 (Hoisting) 호이스팅(Hoisting)의 뜻은 영어로 ‘끌어올리다, 게양하다’ 라는 뜻으로 자바스크립트가 실행될 때 끌어올려지는 현상을 말한다. 그렇다면 무엇이 끌어올려지느냐?!! var로 선언된 변수와 함수 선언문에만 호이스팅이 일어난다. 잠깐, 함수표현식과 함수선언문을 짚고 넘어가자. 함수표현식 const sayHello = function() { console.log('Hello!'); } 함수선언문 function sayHello() { console.log('Hello!') } 호이스팅은 유효범위 (전역 변수라면 최상단, 지역 변수라면 변수가 선언된 영역의 최상단) 안에서 최상단으로 끌어올려진다. 왜 호이스팅 현상이 일어나느냐고 묻는다면, 자바스크립트의 문법을 해석하는 parse..
배열 (Array) 배열은 연속적인 데이터의 집합이다. 자바스크립트를 처음 배웠을 때, 배열과 객체에 대한 개념을 그냥 배열은 대괄호이고, 객체는 중괄호이고 안에 콜론(”:”)이 있는 거라고 생각했다. 전혀 아무것도 몰랐던 것이다. 😱 배열은 자료구조의 한 형태로 스택이나 트리처럼 자료를 효율적으로 관리하기 위해 자료를 관리하는 구조의 한 형태이다. 순서대로 0부터 번호가 매겨져 있기 때문에 인덱스로 자료에 접근이 가능하다. 이 때, 데이터는 공중에 떠다니는 추상적인 개념이 아니라 실제로 컴퓨터 하드웨어에 데이터로 기록이 되어있는 것이기 때문에 물리적인 것이라고 할 수 있다. 새로운 배열을 만드는 방법은 아래와 같다. const fruits = new Array() const fruits = [a, b,..