소주제 : 이미지 업로드

1. 이미지 업로드

  1. 게시물을 작성하기 위한 작성자, 비밀번호, 제목, 내용 4개의 입력창을 만들어 주세요.
  2. 이미지를 올릴 file 태그를 만들어 주세요.
  3. file 태그를 활용해 이미지가 변경되면 uploadFile API를 사용하여 이미지를 업로드 해 주세요.
  4. 업로드한 결과로 받은 url을 state에 저장하여 업로드된 이미지가 화면에 나타나도록 만들어 주세요.
  5. [저장하기] 버튼을 만들고, 해당 버튼을 클릭하면, createBoard API를 활용하여 작성자, 비밀번호, 제목, 내용, 이미지URL을 등록해 주세요.
  6. file 태그를 숨기고, 좋아요 아이콘을 누르면 file 태그가 눌리도록 연결해 보세요. ⇒ 힌트) useRef를 사용해 주세요. 힌트) 좋아요 아이콘은 ant-Design에 있습니다.

2. 고난도) 이미지 좌측 정렬 알고리즘

  1. 아래 버튼을 클릭하여 이미지를 넣을 수 있도록 만들어 주세요. ⇒ 어떤 칸을 클릭하던 상관 없이, 이미지는 좌측정렬 되어야 합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/53d0bc4d-1f22-4f57-b431-b133713df265/Untitled.png

📚 ref code (정답이 있는것은 아닙니다. 참고만 해주세요.)

추가학습 - useRef

<aside> 📖 useRef를 공부하고, 아래 퀴즈를 풀어보세요!

</aside>

useRef로 포커스 맞추기

  1. 비밀번호 입력창 1개를 만들어 주세요.
  2. 해당 페이지에 접속하면 자동으로 비밀번호에 커서가 깜빡이도록 만들어 주세요. ⇒ 힌트) useEffect에서 useRef를 사용해야 합니다.