그래도 해야지. 어떡해

2월에 날씨 앱을 만들다 중단된 프로젝트를 진행하면서 깃허브에 당당히 노출된 내 소듕한 Api Key를 숨기려고 한다. 1. dotenv 패키지 설치 // with yarn yarn add dotenv // with npm npm install dotenv 2. .env 파일 생성 💡 프로젝트의 루트 디렉토리에 생성해야한다! 3. 생성한 파일에 API Key 추가 접두사 REACT_APP를 꼭 써줘야 환경 변수가 제대로 인식되니 주의 REACT_APP_API_KEY=your_API_KEY 4. .env 파일을 .gitignore에 추가 .gitignore 파일은 Git 저장소에서 버전관리를 원하지 않는 파일을 명시하는 파일이다. 이 파일에 기록된 파일은 Git으로 관리되지 않으며, 커밋에 포함되지 않는다..

이전 글 [React] Todo List 만들기 (#1 개선사항 정리) [React] Todo List 만들기 (#2 필터링 개선하기) 🔧 목표 • 로컬 스토리지(Local Storage)를 사용하여 데이터를 저장한다. 리스트에 추가한 데이터는 새로고침/재접속을 할 때마다 초기화 된다. 이는 별도의 데이터베이스를 사용하지 않고 브라우저 내에서만 데이터가 처리되기 때문이다. 이번 포스팅에서는 이러한 문제를 해결하기 위해 로컬 스토리지를 활용하여 데이터를 저장하는 방법을 다룰 것이다. 💡 Tips - Local storage : 브라우저를 종료하고 재시작해도 데이터가 유지된다. (ex. 자동 로그인) - Session storage : 브라우저 세션이 종료되면 데이터는 자동으로 삭제된다. Local Stor..

[React] Todo List 만들기 (#1 개선사항 정리) 문제점 ‘active’ 필터링 후, 체크된 리스트가 다시 체크해제되는 오류 수정 Component 패널을 열어 확인해 보니, 리스트 첫 줄(좌측 사진)을 보면 check가 풀려있다. 그런데(우측 사진) class는 -completed가 들어갔고 checked: true로 되어있었다. #1. 기존 코드 1.1 Header.jsx handleFilter('all')}>All handleFilter('active')}>Active handleFilter('completed')}>Completed 1.2 TodoList.jsx const [filter, setFilter] = useState('all'); // 1. 체크 const toggleChe..

[ yarn 설치하기 ] 1. 터미널을 열어 아래 명령문을 입력한다. yarn create react-app "폴더명" 1-1. 프로젝트가 생성되면서 터미널창에 yarn 명령법이 나온다. yarn start 실행 yarn build 배포하기 위한 프로젝트 빌드 yarn test 테스트 스크립트 실행 yarn eject 설정 변경 (원본 변경) + 기본적으로 git도 함께 설치된다. [ Error 해결하기 ] 최신 Yarn 설정하기 react에서 yarn start를 실행했을 때, 에러가 발생하는 경우가 있다. 원인은 create-react-app과 yarn에서 충돌이 일어나서 그렇다. eslint 관련하여 수동적으로 수정이 필요하다. 2. 터미널을 열어 아래 명령문을 입력한다. yarn add eslin..

[React] Todo List 만들기 (#2 필터링 개선하기) 이틀 동안 React로 투두리스트를 만들었다. 리스트 추가하는 것부터 다크모드까지 구현하는 데에 시간이 많이 걸렸다. 강의를 듣고나서 내가 만들었던 투두리스트를 수정해보려고 한다. 1. 목표 무작정 리액트로 만든 투두리스트 개선사항을 정리하고 하나씩 해결해본다. 1.1 프로젝트에 사용할 기술 React useState, useEffect, useContext 등 리액트 훅을 사용한다. PostCSS creact-react-app으로 기본 탑재되어 있는 PostCSS를 사용하며 활용법을 익힌다. 1.2 완료 목록 리스트 추가하기 리스트 삭제하기 다크모드 구현 2. 개선할 사항 2.1 컴포넌트 정리 하나로 작성된 파일에서 컴포넌트를 분리한다. ..