[Dev Log] Node js 서버에서 image 가져오기 그리고 카카오맵api

### 오늘은 어떻게 프로젝트에 기여했나요?
+ multer로 올린 이미지를 node js 서버에서 가져오는 작업과 카카오맵 api를 사용해 지도를 가져오고 마커를 표시하는 작업을 했다.
### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
+ 이미지를 가져오는 방법은 여러가지가 있다. 하지만 크게 세가지 방식이 있는 것 같다. readfile로 읽어와서 로 해더로 콘텐트 타입과 버퍼 등와 같이 보내주는 방법과 바로 res.sendFile 로 보내주는 방법 그리고 express.static으로 클라이언트에서 접근 가능한 폴더만들어 줌으로써 서버에 있는 url 주소를 보내주는 방식이 있다. readfile로 읽어와서 보내주는 방법은 binary 코드로 불러온거를 보내주기 때문에 불편함이 있다. 그리고 res.sendFile로 보내주는 방식은 간편하게 파일은 보내줄 수 있지만 readfile 경우와 마찬가지로 res 를 두번 보낼 수 없어서 다른 데이터와 보내준다고 할 때 신경 쓸게 많아진다. 제일 간편한 것은 클라이언트에서 접근 가능한 정적 데이터 폴더를 expres.static 방식으로 만들어줘서 이미지나 파일 url 주소를 활용하는 것이다. 이때 중요한 것은 static으로 반드는 정적 폴더 가급적이면 src 하위폴더로 있어야 한다(multer에서 저장하는 위치를 src상위 폴더로 해놨는데 src 상위폴더에있는 것을 절대경로로 가져와서 설정하는 방법이 있을 것도 같아서 여러번 시도해본 결과 작동이 안됐었는데 아래처럼 절대 경로로하고 http://localhost:8081/download1641800053750.jpeg 로 접근하니까 작동했다.). express.static 은 노드가 동작하는 디렉토리로부터 상대적인 경로를 요구한다. 만약 다른 폴더를 사용한다면 적대경로를 사용하는 것이 안전하다.
+ {카카오맵api 관련 다른건 간단하지만 react만 사용할때는 지도가 안불어와지는 에러가 발생 찾아보니 map.relayout() 를 해줘야한다고하는데 해줘도 해결이 안됐다. 그리고 useEffect를 사용해서 변화가 있을때 자동적으로 랜더링이 되도록 했지만 효과가 없었다. 임시방편으로 map component에 있는 내용을 다시 불러옴으로서 해결 됐했데 이상한점은 같은 컴포넌트에서 props가 작동된다는 사실이다?!?!. 심지어 map component를 불러오는 import를 지워도 작동한다. 근데 값을 props가 아닌 state값으로 주면 작동이 안됐다...아마 리엑트는 state 등 복잡해지므로 redux 스토리지를 사용해서 해결할 수 있을 것 같다.} ==> 해결: useEffect를 사용해서 해결해줬다. 공부한걸 다시 복습하자면 useeffect는 컴포넌트 안에서 사용되며 useEffect(function, deps)여기서 deps 에는 배열이 들어가야하며 배열 안에는 바뀌는 값(props 등) 을 넣어준다 빈 배열 []을 넣으면 가장 처음 랜더링 될때 한번반 사용된다는 의미고
배열을 넣지 않았을때는 리랜더링 될때 마다 사용된다는 의미이다.

```jsx
app.use(
express.static('/home/dh/Desktop/34/final project/Memory-It/server/dummy/uploads')
)

// app.use(
express.static('/home/dh/Desktop/34/final project/Memory-It/server/src/images')
)
// 위에 랑 아래랑 같은거
// app.use(express.static(__dirname + '/images'))
// console.log('어디경로임?', __dirname)
// 어디경로임? /home/dh/Desktop/34/final project/Memory-It/server/src
//http://localhost:8081/download1641800053750.jpeg

//kakaoapi 해결
useEffect(() => {
const container = document.getElementById('map')
const options = {
center: new kakao.maps.LatLng(props.postInfo.lng, props.postInfo.lat),
level: 3,
}
const map = new kakao.maps.Map(container, options)
....
}, [props.postInfo])
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- [ ] todo 형식으로 기록해 주세요.
- [ ] todo 형식으로 기록해 주세요.
[레퍼런스링크](https://expressjs.com/ko/starter/static-files.html)
[레퍼런스링크](https://gingerkang.tistory.com/65)
[레퍼런스링크](https://xiubindev.tistory.com/100)
[레퍼런스링크](https://reactjs.org/docs/hooks-effect.html)