좌충우돌 개발자의 길

# 트러블 슈팅 ## 문제 사항 ... - 위 코드에서 handleRemove가 onClick 되지 않았는데도 자동으로 동작하는 현상이 나타남 ## 해결 방안 - onClick 이벤트에 함수를 전달하는게 아니라 바로 호출하는 코드였다. 또한, 리액트에서 onclick은 렌더링 때 실행됨. {handleRemove}}>... - type을 button으로 설정하고 onClick 안의 코드를 함수를 전달하는 방식으로 바꾸었다.

# 문제 상황 이번 프로젝트는 프론트만 개발하여 진행된다. 하지만 db를 사용하기 위해선 백엔드 서버로 접근을 해야 안전하게 db에 접속하게 된다. 그래서 백엔드를 공부해야하나 고민했지만 주변 사람들의 조언으로 백엔드 서버 코드를 짜지 않아도 db에 접근할 수 있는 도구들이 있다는 사실을 알게 되었다 # 백엔드 없이 DB 접속하는 방법 1. Firebase - firebase에서는 실시간 db를 무료로 제공해준다. - 심지어 간단하게 api 주소만 axios/fetch에 입력하면 db에 데이터를 보내거나 받아오거나 삭제하거나 수정할 수 있다 - 관련 주소 https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는..

# 트러블 슈팅 - styled component를 공부하면서 개발하고 있어서 구글 폰트 적용할 때는 어떻게 해야하는지 몰랐다 # 해결 방법 - global 파일을 만들어 적용해보라는 말도 있었지만 그렇게 개발해보니 폰트 적용이 전혀 안됐다. - 두번째 방법으로 index.css 파일을 만들어 그 안에 구글 폰트를 적용하는 방식이 있었는데, 전반적으로 폰트를 사용할 수 있게 되었다. - @font-face로 폰트를 정의하면 font-family로 어떤 파일이든 그 폰트를 사용할 수 있게 된다. // index.css @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300;1,400;1,500&display=swap'); @..

# 트러블 슈팅 초기 데이터로 bar chart가 잘 그려지는데 나중에 데이터가 추가적으로 입력되면 자동으로 차트에 반영되지 않는 현상이 발생했다. # 해결 과정 ## 원인분석 // 기존 코드 const dataset = useRecoilValue(datasetState); const filterDataset = dataset.filter( (value) => Number(value.year) === today.getFullYear() ); // monthData에 값 더하기 filterDataset.map((value) => { const month = Number(value.month)-1; if (value.accountType === "Deposit") { monthData[month].total..

# 트러블 슈팅 jsx에서 if - else if - else 문을 적용할 수 있을까? # 해결 과정 jsx에서 if문을 쓰려고 보니 if - else문은 지원하지 않았다. 보통, 삼항연산자로 사용한다! 그런데 else if를 써야하는 경우는 어떻게 해야하는지 몰라 구글링을 해봤다. switch - case가 있었지만 음수와 양수를 판별해줘야하는 내 코드에서는 적합하지 않는 문법이었다. # 해결 방안 다음과 같이 작성하면 else if문도 jsx에서 사용이 가능하다 return ( {dDay(data) === 0 ? ( '{data.alarmContents}' 당일 입니다! ) : dDay(data) > 0 ? ( '{data.alarmContents}'까지 {dDay(data)}일 남았습니다. ): (..

# 트러블 슈팅 기존 배열에 값을 추가할 때 useState를 이용해서 사용하고 싶어졌다 # 해결 방안 const [data, setData] = useState([]); // 기존 데이터인 data를 스트레드 연산자로 쓴 후, 새로운 데이터를 앞에 입력해준다. setData([newData, ...data]);

# 트러블 이슈 input창에 입력된 값을 useRef가 아닌 useState로 관리하고자 코드를 짰다. 하지만, input 입력 시 한글자만 입력되고 더이상 입력되지 않는 에러가 발생했다. # 해결 과정 useState를 잘못 사용하고 있다고 판단하여 관련 코드를 살펴봤지만 잘못된 부분은 없었다. 하지만 console 창을 열어본 순간 warning이 잔뜩 나왔다. The component styled.div with the id of "__" has been created dynamically. You may see this warning because you've called styled inside another component. To resolve this only create new Styl..

1. Recoil을 사용하는 이유 이전 레이아웃에서도 나와있듯이 위와 같은 방식으로 모달창을 띄우기로 결정했다. 헤더 부분에 아이콘을 누르면 모달창이 띄워진다. 하지만 나는 알람 모달, 목표 모달로 총 2가지의 모달을 구현해야 해서 이렇게 파일 구조를 짰다. 모달창 코드가 돌아가는 과정에 따라 파일을 정리를 하자면 1. Title.js : 이 프로젝트의 헤더 컴포넌트로, 목표 또는 알람 아이콘을 클릭한다. 2. AlarmModal.js (/GoalModal.js) : 알람 아이콘을 클릭했을 경우 동작하는 파일로 모달창의 공통적인 코드를 모아둔 GlobalModal 컴포넌트와 다른 모달창과 차이있는 부분은 SubmitForm(GoalForm) 컴포넌트를 불러와 알람 모달의 디자인을 구성하고 있다. 3. G..

1. 주제 선정 현장실습으로 일하고 있는 곳에서 간단한 미니 프로젝트를 한달동안 개발하라는 미션이 주어졌다. 그래서 내가 필요하고 관심있는 주제를 선정하기로 결심했다. 다양한 아이디어가 나왔다. 소금빵 맛집 추천 (요즘 소금빵에 빠졌다) 집중력 상승 뽀모도로 뉴스레터 보내주는 서비스 물 먹는 하마 (하루에 물을 얼마나 마셨는지 체크하는 서비스) 간단하지만 원하는 기능만 있는 가계부 나는 고심 끝에 가계부 어플리케이션을 만들기로 결정했다. 경제 습관을 형성해야겠다는 생각에 가계부 어플을 사용해봤지만 너무 많은 기능들에 휩싸여 본질적인 가계부 역할을 하는 어플이 거의 없었기 때문이었다. 그래서 정말 기본(입출금 내역)을 살리면서 내가 원하는 기능을 추가한 심플 가계부를 개발하기로 결정한 것이다. 2. 기획 ..