기로그 기로그

date처리를 하는데 에러가 발생했다. 제대로된 date값이 전달되지 않아서 발생한 에러. 파이어베이스로부터 전달받은 Timestamp객체를 자바스크립트 Date 객체로 변환해야한다. 따라서 데이터를 가져올 때 toDate()메서드를 사용하여 자바스크립트 Date객체로 변환하도록 한다.

hook선언 전에 조건문을 통해 처리를 하면 해당 에러가 발생

리액트 라우터 URL을 입력하면 URL에 맞는 페이지를 보여주는것을 라우팅이라고한다. 리액트 라우터는 SPA에서 페이지 이동 기능을 수행하기 위해 사용되는 대표적인 라이브러리다. 설치 yarn add react-router-dom npm i react-router-dom //types yarn add -dev @types/react-router-dom npm i -dev @types/react-router-dom 라우터 구성하기 구성하는 방식은 BrowserRouter방식(6.4v이전)과 createBrowserRouter방식(6.4v이후) 으로 나뉜다. BrowserRouter function App(){ return( ) } createBrowserRouter function App() { const..

Math.abs() 숫자의 절대값을 반환한다. Math.abs(3-5); // 2 Math.abs(5-3); // 2 Math.abs(1.23456-7.89012); //6.6555599999999995 Math.abs(''); // 0 Math.abs([]); // 0 Math.abs(null); // 0 Math.abs(undefined);// NaN Math.max() 최대값을 반환한다. Math.max(1,2,3,4,5,6) //6 //배열의 최대값 구하기 const arr = [1,2,3,4,5,6,7,8,9]; const max = Math.max(...arr) // 9 Math.min() 최소값을 반환한다. Math.random() 0부터 1미만의 부동 소수점을 반환한다. Math.rando..

1.프로퍼티 객체는 프로퍼티의 집합이다. 프로퍼티는 key와 value 쌍으로 이루어진 객체의 상태를 나타내는 값이다. const obj = { 프로퍼티 키 : 프로퍼티 값 } 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 프로퍼티 값 : 모든 값 프로퍼티 키는 일반적으로 문자열이 온다. 문자열이므로 " "로 묶어야 한다. 하지만 식별자 네이밍 규칙을 준수한 이름이라면 따옴표를 생략하고 작성 가능하다. 하지만 네이밍 규칙을 준수하지 않은 이름이라면 따옴표를 사용해야한다. 식별자 규칙을 어긴 " - " 가 들어간 프로퍼티 키는 오류가 발생하지만, 프로퍼티 키를 따옴표를 붙여주면 에러가 발생하지 않는다. 따옴표를 생략하면 -를 연산자로 인식한다. 프로퍼티의 값은 자바스크립트에서 사용 가능한 모든 값을 사..

요약 1.객체는 프로퍼티를 갖는다. 2.프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 나뉜다. 3.각각의 프로퍼티는 프로퍼티 어트리뷰트라는 프로퍼티의 상태를 나타내는 내부 슬롯을 가진다. 1.내부 슬롯과 내부 메서드 프로퍼티 어트리뷰트를 알아보기 전에 이를 구성하는 내부 슬롯과 내부 메서드에 대해서 알아본다. 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 이중 대괄호([[ ]])로 감싸져 있는 이름들이 내부 슬롯과 내부 메서드이다. 내부 슬롯과 내부 메서드는 외부로 공개된 객체 프로퍼티는 아니다. 하지만 일부 내부 슬롯은 간접적으로 접근할 수 있는 수단을 제공한다. 예를 들어 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는데 원칙적으로는 접근할 수 없..

리액트의 대표적인 특징인 가상 DOM을 사용하는데 있어서브라우저가 렌더링되는 과정을 이해하는게 중요하다. 브라우저 렌더링 과정을 통해서 가상 DOM이 어떻게 생겨났는지 알아본다. 브라우저 렌더링과 DOM 1.사용자가 어떤 웹 페이지를 방문한다. 브라우저는 사용자가 요청한 주소의 HTML 파일을 다운로드한다. 2.브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구성된 DOM트리를 만든다. 3.DOM을 생성하다 CSS 파일을 만나면 해당 CSS파일도 다운로드하여 CSS도 파싱하고 트리를 생성한다(CSSOM) 4.브라우저는 DOM노드를 2번에서 생성된 DOM트리를 순회하며 사용자 눈에 보이는 노드만 방문한다. (* 분석과정을 조금이라도 줄이기 위해서 display:none과 같은 화면에 보이지 않는 ..

1.SASS란 CSS는 규모가 커지면 복잡해지고 유지관리가 어려워지는데 이때 CSS 전처리기가 도움이 될 수 있다. CSS전처리기는 CSS의 확장된 기능을 제공하여 보다 간단하고 효율적으로 CSS를 작성하게 도와주고 이를 CSS로 변환하여 웹페이지에 적용한다.Sass(Syntactically Awesome Style Sheets)는 css의 대표적인 전처리기로 css를 더 쉽게 작성하고 쉽게 유지보수 할 수 있도록 도와주는 도구이다. SASS와 SCSS Sass는 두 가지 확장자(scss/sass)를 지원한다. Sass가 처음 나왔을 때 sass만 지원하였다. 즉 Sass는 Scss의 문법을 포함하는 상위 집합이라고 할 수 있다. 이 둘의 가장 큰 차이점은 문법에 있다. Sass Sass는 중괄호와 세미..