230522 TIL_개인 프로젝트3 (개인 지출 관리 사이트 제작) > React(input), 알고리즘(split, push, replaceAll), 프로젝트 세팅
우당탕탕 개발 일기
강의 막 끝내고 개인 과제 첫 진행 중...
개인 프로젝트3
개인 지출 관리 애플리케이션
각 월별로 지출 내역을 추가, 조회, 수정, 삭제할 수 있으며, 월별 총 지출과 항목별 지출 비율을 시각적으로 확인할 수 있습니다-(선택사항) 로컬 스토리지를 활용하여 사용자가 마지막으로 작업하던 월을 기억...
먼저 필수 사항부터...
선택 사항까지 처음부터 구현하는 건 성격에 안 맞음 🦕
필수 사항 1
- 지출 CRUD 구현 (작성, 조회, 수정, 삭제)
- 월별 지출 조회 기능 구현 (Home - Read)
- 월별 지출 항목 등록 구현 (Home - Create)
- 지출 상세 화면 구현 (Detail - Read)
- 상세화면에서 지출 항목 수정 구현 (Detail - Update)
- 상세화면에서 지출 항목 삭제 구현 (Detail - Delete)
필수 사항 2
- styled-components 를 이용하여 스타일링
- 인라인 스타일링이나 일반 css 파일을 이용한 스타일링 방식 지양 (이번 과제 한정)
- 모든 태그를 styled-components 화 할 필요는 없으나 스타일링이 들어가는 경우는 styled-components 화 할 것
- styled-components에 props를 넘김으로 인한 조건부 스타일링 적용
- 월 선택 탭에 적용해 보세요
- react-router-dom 을 이용해서 페이지 전환을 합니다.
- 지출을 수정하기 위한 페이지 이동 시에 사용해주세요.
- useState, useEffect, useRef 사용
- 과제 안내 순서에 각각 어디에서 사용되면 좋을지 가이드를 드렸습니다. 해당 부분에서 위의 기능들을 각각 사용해주세요
- 지출 항목 등록 시 id는 uuid 라이브러리를 이용 (npm i uuid) or (yarn add uuid)
- Props Drilling → Context API → Redux 순으로 각각 별도의 브랜치를 만들어 제출
알고 있는 게 하나!! 😌
이걸 지나면 또 조금은 성장할까? 아니면 이제 대신 다른 걸 JS 까먹어서 플러스마이너스제로가 되는 게 아닌가 걱정이다. 🤣
개인 프로젝트 기본 세팅
세팅할 게 너무 많아서 앞으로도 한참은 헷갈릴 것 같아 미래의 나를 위해 정리해놓는다.... MAC + yarn + VS code 씀
터미널 열자...
-
폴더 만들기
0-1. mkdir 원하는폴더명 으로 폴더 만들기 mkdir이 처음엔 뭐야 싶지만 make a directory의 약어로 추정...
만약, 폴더 미리 만들어놨으면 터미널에서 cd 폴더명으로 쳐서 위치 잡기 -
리액트 프로젝트 생성
yarn create vite 프로젝트이름폴더 --template react
cd 프로젝트이름폴더
yarn
이렇게 하면 보통 원하는폴더명 -> 프로젝트이름폴더 -> 리액트 플젝 와르르
나는 이렇게 정리하는 게 좋아서 하는데 혹시 아닐 경우에는 폴더 생성 잘 보고 하길 바람... (*깃&깃헙을 알지도 못한다 하면 그냥 바탕화면에 만드는 거 추천. 타고타고타고 들어가면 헷갈려서 이게 왜 이래 🙃 소리 나온다... )
( yarn은 미리 설치해야 내가 편해서 한다. 터미널 열고 해도 됨 )
- VS Code 오픈
vs code 들어가서 폴더 열고 그래도 되지만 그냥 터미널에
code .
하면 알아서 오픈된다.
그러니까 리액트 프로젝트 다 만들고 나면,
cd 프로젝트이름폴더 -> yarn -> code . 으로 한 번에 설치 + 열기 추천한다. (yarn 은 이후에 깔아도 되지만 미리 셋업 추천함)
- 리액트 라우터 설치 (*상세 페이지가 있을 경우)
yarn add react-router-dom
4-1. src 폴더 아래에 pages, share 폴더 만들기
4-2. pages 폴더 안에 대충 페이지 파일 추가 (난 일단 home.jsx만 만든다. 필요하면 이후에 추가하는 거는 문제 없다. export 하기 스니펫 쓰셈)
4-3. share 폴더 안에 Router.jsx 파일 추가
import Home from "../pages/Home";
import { BrowserRouter, Routes, Route } from "react-router-dom";
const Router = () => {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
</>
);
};
export default Router;이렇게 셋업. BrowserRouter랑 Routes는 따로 jsx 파일을 안 만들어도 된다. 그런데, route를 쓰기 위해서는 저 둘을 감싸는 게 필요하다. 그냥 두 개로 래핑해줘야 함.
난 여기서 전체 레이아웃을 사이에 끼워넣는 거 선호한다.
- Layout 만들기
src 폴더 아래에 components 폴더 만들기
components 폴더에 Layout.jsx 만들기 헤더 푸터 있음 여기다 넣어도 되고... 칠드런을 사이에 두고 위에 헤더 아래에 푸터 두면 된다.
Layout.jsx 파일
function Layout({children) {
return (
<div>
<div>{children}</div>
</div>
);
}5-1. Router.jsx에 레이아웃 파일 끼워넣는다. import 잊지 말기(오토 스니펫 사용하는 거 추천)
Router.jsx 파일
<>
<BrowserRouter>
<Layout>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Layout>
</BrowserRouter>
</>- 스타일 컴포넌트 설치 (아니면 테일 윈드? 🙃)
yarn add styled-components
사용하는 해당 파일에 임포트하면 된다. 나는 지금 안 사용하니까 임포트는 안 했다~~
import styled from 'styled-components';
- 이제 App.jsx에 연결해~!
App.jsx파일
import Router from "./shard/Router";
function App() {
return (
<>
<Router />
</>
);
}
export default App;
여기서 중요한 거는 Router 연결할 때 form의 위치다.... 그냥 {} 이걸로 들고왔다가 안 된 경험이 있다! 오토로 연결할 때도 주의~
- 이정도 했으면 git에 연결하자.
이 정도면 리본 세팅은 다 했다고 볼 수 있다.
gitub 가서 레포지토리 생성하기. 초록색 <>code 버튼에서 http url 복사
vs code 터미널 열기. 내가 지금 있는 폴더 위치 정확한지 확인. (code .으로 들어왔으면 안 확인해도 된다. 이후 다시 폴더 열 때만 확인하면 됨)
git init
하면 이제 옆에 (git) 예쁘게 떠있음.
git remote add origin url붙여넣기
8-1. 연결됐는지 확인하기
git remote -v
자기 레포지토리 주소 나오면 된다.
8-2. 브랜치 생성 및 이동
그냥 냅다 메인에 올리지 말자. 그래도 되긴 하는데 브랜치 만들어서 올리면 좋다~
git switch -c 브랜치이름
만들어짐과 동시에 브랜치로 이동했을 것이다. (main) -> (브랜치이름) 으로 바뀌었을 거임
8-3. 초기 버전 푸쉬하기
git add .
git commit -m "하고싶은말"
git push origin 브랜치이름
초기 세팅 끝~!
이제 코딩 시작하기...ㅎㅎ
[개인 과제에서 알게 된 것]
input type
text: 일반적인 텍스트 입력 필드
password: 비밀번호 입력 필드 (입력 값이 마스킹됨)
email: 이메일 주소 입력 필드
number: 숫자 입력 필드
tel: 전화번호 입력 필드
url: URL 입력 필드
date: 날짜 선택 필드
time: 시간 선택 필드
datetime-local: 날짜와 시간을 함께 선택하는 필드
month: 월 선택 필드
week: 주 선택 필드
color: 색상 선택 필드
file: 파일 선택 필드
checkbox: 체크박스
radio: 라디오 버튼
range: 범위 선택 필드 (슬라이더)
submit: 폼 전송 버튼
reset: 폼 초기화 버튼
찾아봐야지 찾아봐야지 하다가 결국 오늘까지 왔군... 🙃
알고리즘
특정 문자 제거하기
문자열 my_string과 문자 letter이 매개변수로 주어집니다. my_string에서 letter를 제거한 문자열을 return하도록 solution 함수를 완성해주세요.
나의 문제 풀이
function solution(my_string, letter) {
let answer =[];
let nextMyStr = my_string.split('');
for (let i=0; i<nextMyStr.length; i++) {
if (nextMyStr[i] !== letter) {
answer.push(nextMyStr[i])
}
}
return answer.join('');
}split으로 나누고 -> 그걸 for 반복문을 돌려 letter랑 또 비교했는데 다른 사람의 문제 풀이 보니까 그럴 필요가 없었다!!!
(nextMyStr.length에 - letter.length 해도 됐겠다. 이 경우에는 한 글자라 소용이 없었겠지만~)
[알고리즘_더 공부해야 할 다른 사람의 문제 풀이]
split
을 계속 사용하고 싶다면...
나의 문제 풀이의 경우 split 사용법을 제대로 몰랐기 때문에 for문까지 돌렸던 것.
split();
split(separator);
split(separator, limit);
separator
원본 문자열을 끊어야 할 부분을 나타내는 문자열을 나타냅니다. 문자열 유형의 separator가 두 글자 이상일 경우 그 부분 문자열 전체가 일치해야 끊어집니다. separator가 생략되거나 str에 등장하지 않을 경우, 반환되는 배열은 원본 문자열을 유일한 원소로 가집니다. separator가 빈 문자열일 경우 str의 각각의 문자가 배열의 원소 하나씩으로 변환됩니다.
문자열에서
separator가 등장하면 해당 부분은 삭제되고 남은 문자열이 배열로 반환됩니다.
=> 즉, 구분자(separator) 자체는 결과 배열에 포함되지 않는다.
function solution(my_string, letter) {
const answer = my_string.split(letter).join('')
return answer;
}근데 이것보다 더 쉬운 방법이 있다.
replaceAll
replaceAll(pattern, replacement)
MDN 문서에 정규표현식이 너무 많다... 👀
쉽게 말하면 pattern -> replacement로 대체한다.
function solution(my_string, letter) {
return my_string.replaceAll(letter, '');
}이것도 역시 한 줄로 끝~! 도약반에서 MDN 문서보기에 익숙해지는 게 목표라고 말씀하셨는데, 조금정도는 익숙해진 듯 하다. 좋다~~
