일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 리액트
- 백준
- js
- axios
- 에러해결방안
- 백준 #코딩테스트 #코테 #알고리즘
- 혼공챌린지
- 혼자공부하는머신러닝딥러닝
- 코딩테스트
- clipboardapi
- 구조분해할당
- 알고리즘
- reactmemo
- 혼자공부하는머신러닝
- TS
- 초기값 설정하기
- 유니티 #게임개발
- 백준 #코딩테스트
- REACT
- useEffect
- CSS
- 딥러닝
- error맛집
- 혼공머신
- typeScript
- 타입스크립트
- styledcomonents
- 혼공단
- 머신러닝
- Redux
- Today
- Total
목록전체 글 (131)
좌충우돌 개발자의 길
# 트러블 슈팅 초기 데이터로 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. 기획 ..
hook hook 불면 기능이 넘치는 커다란 리액트 훅~ 1. hook은 리액트에서 제공하는 내장 hook과 내가 직접 만든 custom hook으로 나뉜다 - 리액트에서 제공해주는 내장 hook : useState, useEffect, useParams,.... 등등 - custom hook : use___ 이렇게 작성! (여태 나는 반대로 알고 있었다 머쓱~) 2. hook 사용 시, 꼭 지켜야 할 규칙들 - 최상위에서만 hook 호출하자 (반복문, 조건문, 중첩된 함수 내에서 실행 금지!) - React 함수 컴포넌트 내에서만 hook 호출하자 3. 내장 hook - 기본 hook 1) useState 2) useEffect => 이 두 hook은 다른 글에서 자세히 다루었으므로 생략! 3) use..
문제점 - 이전 글에서 말했듯이 또다른 복병이 생겨났다. 바로 초기화면에서 댓글이 아예 보이지 않는 것이다. 원인을 파악했더니 useState에 초기값을 아무것도 설정하지 않아서 발생한 것이었다. 내가 생각한 해결방안 - 그래서 이전에 댓글 불러오는 컴포넌트를 따로 만들었었는데 그 컴포넌트를 재활용해서 초기 댓글 불러오기 위한 용도로 사용했다. const commentsInit = useAxios(`/api/comment/${userId}`); //이렇게 먼저 db에 저장된 초기 댓글을 가져와 commentInit에 담고 const [comments, setComments] = useState(commentsInit); //그 commentInit을 초기값으로 설정하자고 생각했다. 문제점 발생 - 하지만..
- 구현 목표 : 댓글을 쓰면 새로고침없이 댓글창이 바로 나올 수 있도록 바꾸는 기능 구현하기 (카톡처럼!) - 내가 생각한 방법 : useEffect를 써서 comment가 새로 들어올 때마다 업데이트할수 있도록 짜자 import { useEffect, useState } from "react"; import axios from 'axios'; export default function useAxios(url) { const [data, setData] = useState([]); useEffect(() => { axios.get(url) .then(res => { return res.data.body; }) .then(data => { setData(data); }) .catch(error => { ..
문제상황 ... 위의 코드로 user 데이터를 withDraw함수에 전달하려 했다. 하지만 드롭박스를 여는 버튼을 누를 때 withDrawl함수도 같이 실행되는 기이한 현상이 벌어졌다.. 회원탈퇴 버튼을 눌러야 withDrawl함수가 나와야하는데 말이다... 그래서 파라미터를 전달하는 방식에 문제가 있는 것으로 판단하여 구글링을 해봤다. 해결방안 에러가 났던 이유 : onClick에 함수 자체를 전달해야하는데 나는 withDawl(user)로 결과값을 전달한 것이었다!!! 해결 코드 : 다음과 같은 방식으로 전달하면 된다 withdrawal(user)}> React onClick함수로 파라미터를 전달하는 방법 Hiring Assessment에서 리액트로 이미지를 클릭했을 때 해당 이미지가 변경되는 페이지..