Act99 기술블로그

클래스형 컴포넌트 vs 함수형 컴포넌트 현재 리액트 공식문서에서는 함수형 컴포넌트와 훅을 사용하는 것을 권장하고 있다. 컴포넌트란 템플릿 기능 뿐만 아니라 데이터가 주여졌을 때 이에 맞추어 UI를 만들어주는 기능을 하며, 라이플 사이클 API 를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변화할 때 작업들을 사용할 수 있다. 물론 클래스형 컴포넌트와 함수형 컴포넌트는 하는 일은 동일하지만, 코드 구조에서 약간의 차이가 있으며, 엄밀히 말하면 클래스 컴포넌트는 라이프 사이클 기능과 state 관리 기능이 코드에 구현되며, 함수형 컴포넌트는 hook 을 통해 라이프 사이클 기능과 state 관리 기능 코드를 짤 수 있다. 또한, 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하고, 메모리 자..

React 에서 Firebase Auth 를 사용하기 위해 다음과 같은 코드를 짰다가 에러가 발생했다. - firebase.js import firebase from "firebase/app"; import "firebase/auth"; const firebaseConfig = { apiKey: process.env.REACT_APP_apiKey, authDomain: process.env.REACT_APP_authDomain, projectId: process.env.REACT_APP_projectId, storageBucket: process.env.REACT_APP_storageBucket, messagingSenderId: process.env.REACT_APP_messagingSenderId, ..

이 글은 회고록입니다. 항해99 3주차가 시작되었다. 다시 팀이 바뀌었으며, 새로운 마음으로 주특기를 배우는 주이다. 이번주 과제는 이렇다. - 한 주의 기분 상태가 어떤지 별점으로 나타내는 페이지 만들기 나는 더 나아가 캘린더를 누를 시 누른 날짜의 일기와 기분을 나타내고 한 주의 일기를 요약한 데이터를 Accordion 형식으로 나타내는 캘린더 사이트를 만들 예정이다. 현재까지 구현한 것은 이렇다. 캘린더를 클릭 시 => Redux 상태관리를 통해 클릭한 날짜 State를 관리한다. 이유는 부모 Props를 자식 컴퍼넌트에게 전달하는 방식은 과거 너무 많이 사용했으며, Redux 사용 방식에 더 친숙해지기 위해서도 있으며, 한 페이지에 컨테이너와 컴퍼넌트들로 구성할 예정인데, 컨테이너 Prop을 자식..

가지고 온 코인 API는 현재 코인의 시세와 거래량, 전일 변화율 등이다. 이것을 홈 화면에 하나의 표 형태로 만들어 볼 예정이다. 먼저 React-table 모듈을 설치해주었다. `npm install react-table` `npm i @types/react-table` 다음으로 home.tsx 파일에 다음과 같은 코드를 구현했다. import React from "react"; import LoadingComponent from "../components/loader"; import { CoinTable } from "../components/table/cointable"; import { useGetCryptosQuery } from "../services/cryptoApi"; type Colum..

다음은 볼린저 밴드를 만들 차례이다. 볼린저 밴드란 존 볼린저의 주가 기술적 분석 도구이며, 이동평균선을 추세중심선으로 사용하고, 상하한 변동폭은 추세중심선의 표준편차로 계산한 밴드이다. 볼린저 밴드의 상한선: 20일 이평선 값 + ( 20일 동안의 주가 표준편차 값 ) * 2 볼린저 밴드의 하한선: 20일 이평선 값 - ( 20일 동안의 주가 표준편차 값 ) * 2 볼린저 밴드 구름대 형성 -> 상한선과 하한선 갭 => (상한선 – 하한선) / 중심선 이다. 이를 이용해 볼린저 밴드를 만들 것이다. 먼저 20일간의 주가 표준편차 값을 구해야 한다. ** 밑그림** 평균값 clo20ArrayBol = clo20Array.slice(index, (index+20)) -> 20개씩 추출 clo20ArrayB..