개발하고 싶은 초심자

(자세한 설명은 mdn Date.prototype.toISOString()에서 확인 가능) new Date() 함수를 console.log()로 찍어보면 Fri Nov 25 2022 22:13:26 GMT+0900 (한국 표준시) 같은 형식으로 나온다. 하지만 대부분 사람들이(아닐 수도 있지만) 원하는 형태는 yyyy-MM-dd 처럼 년도-월-일의 형태일 것이다. 잘 몰랐을 때는 나도 그냥 new Date()만 사용했었는데, 우연찮게 유데미에서 리액트 관련 강의를 보다가 toISOString()함수를 사용하는 것을 보게 되었다. 바로 적용해보았다. const getDate = (date) => { return date.toISOString().slice(0, 10); } 이렇게 사용할 수 있다. 뒤에 붙..

react를 배울 때 항상 들었던 말. react를 배울 때 state&props 없이는 아무것도 못한다. 리액트의 꽃이다. 이번에 개발하면서 절실하게 느끼고 있다. 특히, 수강생 때 props라는 개념이 정확하게 뭔지 이해할 수가 없었는데, 이번에 실질적으로 내가 사용해보면서 알아가고 있는 것 같다. 내가 원하는 그림은 글을 수정할 때 등록했던 데이터가 게시판에 그대로 나오고, 그 내용을 바탕으로 수정할 수 있는 것이었다(사실 정확하게 게시판을 만든 것은 아니었으나, CRUD를 구현하는 것은 같기 때문에 제일 이해가 쉬울 것 같은 게시판으로 작성함). 그런데 등록한 데이터가 화면에 뜨지 않은 상태로 나왔다. 심지어 나는 날짜를 선택하는 기능도 있었기 때문에, new Date() 함수를 사용하는 과정에서..

1. add environment variables 제일 처음 vercel에 배포를 했을 때, 조회 화면이 제대로 뜨지 않고 request url의 형태가 http://나의vercel배포주소/undefined/내가지정한params 의 형태로 떴다. 처음엔 내가 지정해준 주소는 .env의 서버 주소인데, 왜 내가 vercel로 배포한 도메인이 앞에 나올까 감이 잡히지 않았다. 다행히 지금의 나에게는 도움을 요청할 사람들이 많이 생겼기 때문에, 물어봤다. 물론, 그 전에 구글링을 선행하긴 했지만 내가 원하는 대답은 제대로 나오지 않았다. 도움을 요청한 결과, 내가 처음 작성했던 코드는 axios.post(`${process.env.REACT_APP_URL}/post`, { ...이하 생략 }) ... 이하 ..

(레퍼런스 링크) Vercel로 배포를 시도해서, 도메인을 들어가 페이지를 들어가려 했을 때 하얀 화면이 뜨면서 콘솔에 찍힌 에러 메시지였다. 레퍼런스 링크를 참조하여 해결할 수 있었다. 나는 객체를 맵핑해주려고 map을 사용했기 때문에, Array.from()메소드를 사용하여 해결하였다. 해당 내용에 나오는 메소드들에 대해 다시 정리해보는 시간이 있어야 할 것 같다.

React에서 Select Box를 구현하려고 했을 때, select태그를 사용하는 방법도 있지만 mui를 활용하여 css도 깔끔하게 구현하는 방법을 사용해보았다. 먼저 select 태그를 활용하여 select box를 만든 예시이다. 1. select태그를 사용하는 방법 const fruit = ['grape', 'apple'] const A = () => { const [value, setValue] = useState(''); ... const handleChange = (e) => { setValue(e.target.value); } } return ( ... {fruit.map((el) => ( {el} ))} ... ) useState로 상태변경함수를 하나 지정해준 후, 배열의 요소에 맞추어 ..

(onKeyPress 이벤트도 있었으나 현재는 deprecated되어 권장하지 않는다고 한다) 보통 회원가입을 할 때 아이디가 중복되었거나, 혹은 입력하지 않았을 때 값을 입력하라고 나오는 메시지들이 있다. 그런 메시지들이 제대로 된 값을 입력했을 때에는 없어져야하는데, 이 부분을 키보드 이벤트로 구현할 수 있었다. 여러가지 키보드 이벤트들이 있지만, onKeyUp을 활용하였다. import React, { useState } from 'react'; const 내가하고싶은컴포넌트 = () => { const [입력값, set입력값] = useState(''); const [중복메시지, set중복메시지] = useState(''); const 키보드이벤트핸들러 = (e) => { if(e.key) { s..

(레퍼런스 링크) Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 개발을 하다가 상기와 같은 경고 메시지를 콘솔에서 발견했다. 솔직히 에러 메시지만큼이나 거슬리는게 Warning이지만, 구글링과 해석을 통해 하나씩 해결해나갔다. 해석) unmounted된 컴포넌트에 대해서는 상태 업데이트를 수행할 수 없다. 해당 작업은 수행되지 않지만 메모리 누수가..

페이지를 일일이 새로고침 해주어야지만 응답 데이터가 렌더링되는 것이 효율적이지 못하다고 생각해서 해결법을 찾아보다 나온 방법이다(실제로 해결이 되었다). const [state, setState] = useState(0); useEffect(() => { ... transState(); }, [state]); useState를 사용하는 방식으로 해결했다. useEffect 두 번째 인자에 값을 넣어주면 state라는 값이 변화할 때 마다 useEffect는 함수 호출을 하게 되는 식이다.