맨 땅에 프론트엔드 개발자 되기

Promise, Fetch, Async, Await 에 대해 알아보자 Promise Promise는 JavaScript의 비동기 처리에 사용되는 객체로써 비동기로 처리되는 결과를 동기처럼 반환한다. 실제로 동기처럼 처리되는 것이 아니라 미래의 데이터 처리가 완료된 시점에 결과를 제공하겠다는 ‘약속(프로미스)’를 반환한다. - Promise 객체를 사용하는 이유 JavaScript에는 동기 작업과 비동기 작업이 있는데, 비동기로 처리되는 작업의 결과를 사용하기 위해 Promise 객체를 사용한다. 비동기 작업이 끝난 후의 결과를 이용해서 작업을 수행하려면 Promise 객체의 콜백함수로 작업을 지정해줘야 한다. 그래야 ‘순서를 보장’ 받을수 있다. 이러한 콜백함수가 너무 많아지면, 수정이 복잡해지고 코드의..

에러 내용 Vue3 Cli로 생성된 프로젝트에서 Router 연습을 하던 중 아래와 같은 에러를 만났다. Vue Router를 이용해 Home과 About 컴포넌트를 만들고 연결시켜주니 나타난 에러였다. 에러 내용을 보니 "Component name should always be multi-word => 컴포넌트의 이름은 항상 여러 단어로 되어야 한다." 라는 뜻이었다. 어리둥절 했다... 곧 바로 구글링!! https://eslint.vuejs.org/rules/multi-word-component-names.html

유튜버 코딩애플 님의 Vue 강의를 듣다가 이미지 경로를 변수로 설정해 불러오니 이미지에 엑박이 떴다. 나의 코드 {{menu}} {{product.name}} {{product.price}} 허위매물신고 신고수 : {{product.fakeReport}} 이를 해결하기 위해 v-bind 속성을 구글링했다. 이미지 경로에 require를 부여해줘야 한다고 했다. 수정 코드 {{menu}} {{product.name}} {{product.price}} 허위매물신고 신고수 : {{product.fakeReport}} 왜 require 를 부여해줘야 할까? require는 import와 비슷하게 파일 외부의 데이터를 가져올 때 사용하는 JavaScript 내장함수다. HTML에서 바로 이미지 경로를 불러오는 ..

오늘은 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..

시간 복잡도와 Big O 프로그램의 성능에는 다양한 변수들이 영향을 미친다. 하드웨어의 성능, 운영체제의 성능, 컴파일러 최적화, 비동기 로직 등등... 그래서 프로그램의 성능을 시간 단위(분, 초)로 표시하는 것은 실제적으로 효용성이 없다. 좋은 로직으로 프로그램을 구현했다하더라도 다양한 변수에 의해 결과가 달라지기 때문이다. 그래서 시간 복잡도는 시간 단위로 표시하지 않고, 데이터의 양(Input)에 따라 동작의 수(Number of Operations)가 얼마나 증가하는지 를 표기하는 Big O 표기법을 사용한다. Big O Big O 표기법은 데이터의 양(Input)을 X축에 놓고 X값이 증가함에 따라 동작의 수(Number of Operations)가 얼마나 증가하는 지 상관관계를 보는 함수다...