프로젝트 중에 해당 서비스 회원가입은 카카오 소셜 로그인 + 추가 정보 받아오기 방식으로 진행하기로 했다.  처음 해보는 방식이라 경험이 있던 백엔드 분께 방법을 물어보니, 1. 프론트 → 카카오한테 인가코드 받아오기 → 인가코드 전송해서 카카오한테 엑세스 토큰 받아오기 → 백엔드한테 엑세스 토큰 전달하기 (프론트 복잡도 ↑)2. 프론트 → 카카오한테 인가코드 받아오기 → 백엔드한테 인가코드 전달하기 (프론트 복잡도 ↓)  2가지 방법 중에 선택하라고 하셨는데, 한 번 할 거 프론트가 해야할 게 많은 걸 해보고 싶었기에 1번을 선택하였다. 우선 카카오 소셜 로그인은 kakao developers에서 애플리케이션을 추가해야한다. https://developers.kakao.com/ Kakao Develop..

개발인턴 1주차 React, TypeScript로 프로젝트를 진행하고 있다.S3는 이전에 토이 프로젝트에 적용한 경험이 있는데, 정리를 안해놔서 그런지 구글링을 해야 했다.다음에는 더 잘 적용할 수 있게, [AWS S3로 프론트엔드 배포] 한 과정을 정리하고자 작성한다.AWS 접속 후 로그인을 하고, S3 메뉴로 접속한다.  1. S3 버킷 생성 [버킷 만들기] 버튼을 누르고 나서 버킷 이름을 입력한다. 나는 엑세스 차단 설정을 제외하고 나머지 항목 다 default 값으로 설정하였다.나중에 필요한 부분은 편집하여 수정하면 되기에.. 2. permission 설정 권한 칸에 접속한다. 추후 별도로 필요한 것들만 설정해두면 된다. 버킷 정책 칸에서 [편집] 버튼을 누른다. [정책 생성기] 버튼을 누른다. ..

리액트에서 useState, useEffect를 주로 다루다보니, 다른 Hook도 잘 활용하고 싶은 마음에 여러 가지를 시도하고 있는 요즘은 useContext로 '다크모드'를 다루는 와중에.. ThemeContext 파일을 따로 생성하여 전역 객체로 다룰 수 있도록 설정해주고,useContext 훅을 사용하여, styled-component에 다크모드를 적용하고 있었다.뒷배경에도 다크모드를 적용해야 했기에, 초기에 설정해둔 GlobalStyle 수정 중에 에러가 발생했다. Cannot read properties of undefined (reading 'body')The above error occurred in the component  다크모드로 설정해둔 객체를 읽지 못하여, 컴포넌트 렌더링이 안..

드디어 chart.js를 적용해보았다.이미 기본 스타일, 애니메이션이 적용되어 있어 너무 만족스럽게 적용하였다.다른 프로젝트에 적용할 땐 헤매지 않도록 말끔하게 정리해보자. 1. 터미널에서 chart.js 다운받기 npm install chart.js react-chartjs-2 2. ChartComponent.js 컴포넌트 작성하기나는 제목, Bar, Grid 스타일을 수정했다. return은 Bar 태그에 props만 전달하면 되었기에 매우 간단하다.import {  Chart as ChartJS,  CategoryScale,  LinearScale,  BarElement,  Title,  Tooltip,  Legend,  ChartOptions,} from "chart.js";import { Bar..