I T H

install을 하다가 다음과 같은 에러가 날 경우가 종종 있다. 이 에러는 해석 그대로 의존성 tree 충돌 에러로, 버전을 맞추라고 나와있다. 해결책 : 밑에서 명시된 바와 같이 --force or --legacy-peer-deps를 설치하는 문구 뒤에 넣어주면 된다. npm install --save @toast-ui/react-grid --save --legacy-peer-deps [ 결과화면 ] - package.json에 정상적으로 들어가 있다. - 이것보다 좋은 방법은 버전에 맞는 라이브러리 사용하는 것이 가장좋다.

이번 챕터는 마이페이지의 이미지 파일 업로드에 대해 다뤄보고자 한다. 마이페이지에서 사용자가 원하는 이미지를 등록할 수 있고, 이미지를 제거 할 수 있다. Frontend [ pages / Mypage / index.tsx ] - 아래 코드를 추가해준다. - "이미지 업로드 컴포넌트 UserImageFile"에 props로 myData의 userImage와 함수 handleUmageChange를 보내준다. //이미지 업로드 함수 const handleImageChange = (updatedImage: string) => { setMydata((prevState) => ({ ...prevState, userImage: updatedImage, })); }; 이미지 [ pages / Mypage / User..

이번 챕터는 사용자의 개인정보를 수정 및 조회 할 수 있는 마이페이지의 로직이다. 마이페이지 로직의 챕터(1)은 리덕스 스토어에 저장된 데이터를 불러와서 화면에 출력시켜주고, 수정된 데이터를 db로 보내 업데이트 시켜주는 과정까지 할 것이다. 다음 시간(2)에는 마이페이지의 이미지 업로드에 대해서 다뤄보겠다. Frontend [ types / mypage.ts ] - 먼저 마이페이지에서 쓸 타입들을 정해놨다. - 리덕스에서 불러온 데이터들을 useState의 값에 넣을 것이므로, 타입은 리덕스의 userData 타입들과 일치시켜준다. export interface mypageValue { userId: string; userPassword: string; userPasswordCheck: string; ..

styled-components 는 javaScript나 typeScript 환경에서 스타일을 작성하기 위한 CSS-in-JS 라이브러리다. 1. 설치 npm install styled-components@latest npm install --save react-toastify 2. import import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import styled from "styled-components"; 3. styled components를 이용한 스타일이 적용된 컴포넌트를 생성. export const StyledToastContainer = styled(ToastCo..

- 파일 업로드를 하다가 다음과 같은 에러가 떳다. - 이 에러는 파일의 size를 못 읽어와서 뜨는 에러다. - 처음 파일 업로드시에는 에러가 뜨지 않았다. 처음엔 파일을 잘 읽어와서 if문의 file의 size의 조건이 성립되기 때문이다. - 하지만 위의 에러가 난 시점을 보면 파일을 한번 클릭하고 나서 if문 실행후 다시한번 파일업로드를 클릭하고 나서 취소버튼을 눌렀을때 에러가 뜨는 경우였다. - 이유는 파일 업로드시 취소 버튼을 누르게 된다면 파일이 불러오는 것은 초기화가 되기때문에 값이 뜨지 않는다. 즉, 파일의 사이즈 역시 읽어들일 수 없기 때문에 (if문의 조건식인 file.size를 읽어들일수 없기에) 위와 같은 에러가 뜨는 것이다. - 에러 수정 전 코드 - 에러 수정 완료 후 코드 해결..