codestates / codestates/FilmStorage

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

Open
#270 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

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

- 엔지니어 분들과 스몰토크 진행
- 필름로그 댓글 엔터 이벤트 추가
- 필름로그 수정 기능 서버 요청
- 필름로그 디테일 페이지 시 한번씩 렌더링 되지 않던 점 수정
- 필름스팟 페이지 검색 시 키워드 주변 장소로 지도 이동 및 확대될 수 있게 코드 수정

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

- 가끔씩 `setState`가 State를 즉각적으로 반영해주지 않던 오류가 있었는데, `useRef`를 통해 참조를 주는 것으로 코드 수정한 뒤로부터는 아직까지 렌더링 오류는 만나보지 못하고 있음
- 다만, `useRef`의 경우는 state를 변경하고 다시 렌더링 하지 못한다는 점이 있어서 좋아요 버튼과 같이 즉각적으로 state 변경을 반영해줘야하는 곳에서는 적절한 방법은 아니라고 한다

```jsx
await axios
.get(`${process.env.REACT_APP_API_URL}/filmlogs/view/${filmlog_id}`, {
headers: {
accept: "application/json",
},
})
.then((res) => {
const detailInfo = res.data.data;
if (detailInfo) {
setState(detailInfo) // 1. 렌더 오류 발생하던 부분
detailRef.current = detailInfo; // 2 . 렌더 오류 해결을 위해 useRef 사용한 부분
})
```

> [참조 블로그](http://daplus.net/javascript-usestate-%EC%84%A4%EC%A0%95-%EB%A9%94%EC%86%8C%EB%93%9C%EA%B0%80-%EC%A6%89%EC%8B%9C-%EB%B3%80%EA%B2%BD-%EC%82%AC%ED%95%AD%EC%9D%84-%EB%B0%98%EC%98%81%ED%95%98%EC%A7%80-%EC%95%8A%EC%9D%8C/) , React 공식문서

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

- [ ] 필름 취향 테스트 알고리즘 구현
- [ ] 주석 정리, `console.log` 삭제
- [ ] 불필요한 변수, 모듈 import 등 코드 전반적으로 깔끔하게 정리
- [ ] 서버 측 코드 정리 및 API 문서 수정
- [ ] 반응형 웹 구현 보조

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.