<TIL> 4th day of React project (change title to '방구석 요리킹')

Chaewon Yoon (Jamie)·2022년 8월 30일
0

inovation camp for frontend

목록 보기
20/30

9AM) 오전 회의
Book_review 프로젝트의 주제를 요리로 바꿨다.
new project title '방구석 요리킹'
요리법 공유 웹페이지

바꾸면서 이미지 부분은 날리기로
다음 프로젝트 할 때 참고해야지~

이미지 업로드 + 미리보기 구현

const [imageSrc, setImageSrc] = useState("");

  const imageUpload = (fileBlob) => {
    const reader = new FileReader();
    reader.readAsDataURL(fileBlob);
     return new Promise((resolve) => {
      reader.onload = () => {
        setImageSrc(reader.result);
        resolve();
      };
    });
  };
        <p>이미지를 업로드해주세요</p>
        <input
          type="file"
          accept="image/*"
          onChange={(e) => {
            imageUpload(e.target.files[0]);
          }}
        />
        <div className="preview">
          {imageSrc && (
            <img
              src={imageSrc}
              alt="preview-img"
              width="200px"
              height="250px"
            />
          )}
          
        </div>

중간회고 1) 1pm
json-server를 이용해야 하므로
코드를 갈아엎고 있다.
학습자료 보면서 도움 받아가며 서버에서 데이터 받아오는 거로 바꾸는데
Form 내에서는 데이터가 잘 받아지는데
다른 페이지에서는 undefined가 뜬다.
왜 그럴까... 또잉

중간회고 2) 7pm
해결 완료!!!
db.json 서버에 데이터 저장되고 리스트에서 데이터 잘 받아오는 것 확인!
이제 상세페이지랑 코멘트만 남았당 ㅎㅎ

  • 만능버튼 사용하기

야자반 시작) 9-11pm
오늘부터 본격적인 야자반이 시작됐다.
목표는 CRUD 완벽 구현
Redux Toolkit 자유롭게 사용하기!

나도 귀한 리덕스 개발자가 되자 ㅎㅎ
담당 매니저님이 너무 잘 이끌어 주실 것 같아 기대가 많이 된다.
매일 2시간은 무조건 개인 공부하는 시간으로!
다음주 월요일까지 이번 한 주는 리액트 숙련주차 때 했던 Todo List를 Redux Toolkit을 써서 만드는 것!

profile
keep growing as a web developer!🧃

0개의 댓글