codestates / codestates/FilmStorage

[DevLog] 김현규 / 2022-04-01

Open
#218 0 comments 0 reactions 1 assignee Claimed by @SsankQ View on GitHub
DevLog
Dominant language
JavaScript
Stars
5
Forks
5
PR merge metrics
No merged PRs in 30d

Description

### 오늘은 어떻게 프로젝트에 기여했나요?

- 데이터베이스로부터 필름토크 정보 불러와 페이지네이션으로 표현
- 필름토크 등록, 삭제, 조회 클라-서버 요청 부분 구현

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- React-Quill 사용 시, 이미지를 다루는 부분에서 DOM을 다루게 되어 많은 구글링 후에 구현이 가능했다

```jsx
const imageHandler = () => {
const input = document.createElement("input");

input.setAttribute("type", "file");
input.setAttribute("accept", "image/*");
input.click();

input.onchange = async () => {
console.log(input);
if (input.files) {
const file = input.files[0];
const formData = new FormData();
formData.append("image", file);

axios
.post(
`${process.env.REACT_APP_API_URL}/filmtalks/register/image/${userInfo.id}`,
formData,
{
headers: {
"Content-type": "multipart/form-data",
},
}
)
.then((res) => {
const { url } = res.data;
const range = quillRef.current.getEditor().getSelection().index;
if (range !== null && range !== undefined){
let quill = quillRef.current.getEditor();

quill.setSelection(range, 1);

quill.clipboard.dangerouslyPasteHTML(range, `미리보기`)
}
})
.catch((err) => console.log(err));
}
};
};
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] 필름토크 수정 클라-서버 요청 구현 및 부족한 부분 보충
- [ ] 취향 테스트, 추천에 필요한 정보 수집

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.