on
[항해99 3기] D+52
[항해99 3기] D+52
오늘은 2021년 11월 4일 수요일이다.
오늘두 오전에 피부과를 다녀왔다~ 간만에 버스를 타고 가서 기분이 좋았다!
햇살도 넉넉히 받고 아침에 몸을 움직이니까 컨디션이 더 좋아진 것 같았다
저번과 마찬가지로 팩을 하고 주사를 맞고 약을 처방받았다! 이제 안 와도 된다고 하셨다.
어제 적어놨던 오늘 해야할 일들을 거의 다 했다!
- AWS에 사진을 올리고 사진 url을 받아서 저장하기
- 게시글 저장/수정/삭제 기능 서버와 연결하기
이 두가지를 모두 끝냈다~~ 사실 기능은 구현했지만 관리자 페이지가 완벽하지는 않다! 아직....
그 미리보기에서 뒤로오면 저장/수정 하려고 했던 그 데이터를 다시 불러와야 되는데
핳... 그걸 아직 못하고 있다. 그것을 제외하고는 다 잘 작동된다.!
오늘의 사투
- AWS에 사진 올리기 & 사진 url 가져오기
[주말에 꼭 정리해서 따로 올리기!!!ㅠㅜ]
1. 버킷을 만들 때 퍼블릭으로 만들어야 하고 버킷의 권한에 들어가서 버킷정책을 바꿔야한다. (이건 강의 보고 한거라 주말에 추가로 정리해서 올리기)
CORS정책은 편집버튼을 누르고 아래 코드를 넣어줘야 한다.
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "HEAD", "GET", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [ "ETag" ] } ]
2. 패키지는 yarn add aws-sdk 명령어를 사용해서 설치했다. (이 패키지만으로도 충분했다! 찾아볼 때 다른것들도 있었지만.. 저거만 설치해도 업로드 되고 사진 url 받아오는데 문제가 없다.)
3. 아래 코드를 참조해서 하면 된다!! 앨범에 사진 추가하기 부분을 참고해서 사진 업로드를 만들었다.
https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v3/developer-guide/s3-example-photo-album.html
4. 아래 글을 참고해서 자격 증명 풀을 생성했다! (congnito가 자세하게 설명되어 있음)
https://medium.com/@hozacho/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-%EB%B0%94%EB%A1%9C-aws-s3%EC%97%90-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-637dde104bcc
아래 글을 보고서 accessKey와 scretAccessKey를 노출하면 안된다는 것을 알게 되었다.
https://myunji.tistory.com/m/386
4번의 글을 참고하면서 어떻게 해서 업로드까지는 성공을 했다. 그런데 !!! url을 가져오니까 다운이 되버리는 것이다...
핳... 그래서 구글에 "s3 이미지 업로드된 이미지 다운로드" 요런 그냥 머리에서 나온대로 검색을 했더니 바로
아래 글이 나오면서
https://kosaf04pyh.tistory.com/333
아항 ContentType을 지정해줘야 하는 구나~~ 깨달았다. 지정을 해주니 바로 적용되었다~
- 게시글 작성/수정/삭제 기능 완료
이제 이미지도 저장되고 제대로 게시글 내용을 DB로 보낼 수 있게 되었다.
작성한 코드가 너무 많아서 정리를...해야할 것 같다......ㅋㅋㅋㅋㅋ
지금 잘 생각이 안난다.
이게 미리보기에서 뒤로 올 때 저장하거나 수정할 내용을 그대로 보여줘야 하는데 지금은 그렇지 않다.
수정이라면 그냥 수정되지 않은 원래 게시글의 내용을 보여주고 새로 작성하는 거라면 미리보기 페이지에서 다시 뒤로갔을 때 빈 내용이 보여진다.. post를 기본으로 주면 될 것 같다는 생각이 든다.. 내일 해봐야지.....
axios 오랜만에 하니까 헷갈렸다.ㅋㅋㅋㅋ 사실 다...ㅋㅋㅋ지난 소스도 다시 봐가면서 api추가하고 미들웨어에서 서버에 값 넘겨주고 액션실행하구..ㅎㅎ
- 왜인지 뭘 고쳤는데 post 컴포넌트의 하트가 커져서...핳..ㅋㅋㅋㅋㅋ 일단 관리자페이지는 css 추가해서 괜찮아졌는데
아니!! home 페이지의 하트도 맛이 가버렸어~~~ 그러면 내가 post 컴포넌트의 css를 만졌냐? 차라리 그랬으면 좋겠지만 아니라서 환장할 노릇이야~~ 이것두 오늘 못 풀어서.. 내일 풀꺼 같아...
- 파일을 올리는 기능을 하나의 컴포넌트로 뺐어 ImageUpload로 만들었다.
근데 사실 이렇게 컴포넌트로 빼니까 처음에 여기에 값 전해주고 받아오는게 으아...ㅋㅋㅋㅋ그래서 저장한 url을 리덕스의 postImg에 저장해서 컴포넌트 부모에서도 접근할 수 있게 했다. (이렇게 해도 되는거 겠지???? 아니 오늘정말 코드를 많이 고쳐섴ㅋㅋㅋㅋ 핳... 머리에 정리가 안된다. 게시글 작성과 수정을 나눠서 보여줘야되는 부분에서 오늘 추가한 이미지도 그것에 맞게 프리뷰 보여줘야 하니까 코드 추가하고... )
이런저런 신경을 써야되는 부분들이 있어서 코드를 다시 보면서 정리해야 한다.. 지금 그 과정이 안되어 있어서 머리가 넘 복잡해ㅎㅎ
내일 할 것
1. 미리보기에서 뒤로 넘어와도 저장/수정할 데이터 그대로 보여주기!
게시글 작성/수정 페이지의 textarea의 defaultvalue를 post로 저장하면 될 것 같다. 미리보기에서 최종으로 DB에 저장
되는 미들웨어 실행에 post 값을 초기화 하는 것도 넣어주기! 그러면 post를 기본으로 해도 이전에 완료된 post의
데이터가 남아있지 않아서 잘 작동될 것 같은 생각이 든다.
2. 이미지 업로드 컴포넌트 잘 수정하기
(사실상 프로필 업로드도 가능하도록 해놓기!! 동건님이 만든 뷰를 가져오면 될듯. 이미지 업로드 컴포넌트에 만들어
놓은 profile props를 사용해서 관리자 페이지에서 사용하는 업로드인지 유저 프로필 수정에 쓰이는 업로드인지 구분
할 수 있다. 그리고 사진을 1차로 postImg에 저장해 놓는데 profile 프롭스를 받은 경우에는 user 모듈의 initialState에
userImg를 만들어서 1차로 저장해놓고 최종으로 프로필저장을 누를 때 리덕스에 저장해놓은 userImg를 가져와서
저장할 수 있도록 만들기! => 이렇게 만들어도 되는 것일까... 하하......핳..... 모르겠다 정말. 우선 지금은 저 생각밖에
나질 않아서 아마 내일도 저렇게 할 듯 싶닼ㅋㅋㅋㅋ)
3. 채팅 페이지 추가하기
오늘듀... 고생했다..ㅎㅎ 파이팅~~ 파이야~~! 내일도 위에 써놓은 3가지를 다 했으면 좋겠다!!!
잘하고 있어!!!! 할 수 있어!!! 자신감을 가지고 부딪혀서 해내자! 잘 못하는건 어쩌면 당연한거자나! 계속하면 결국 잘 될거야. 실망하지말고 좌절하지 말고 의기소침하지 말자. 잘하고 있어 앞으로 더 잘할 수 있어.
오늘 사진 저장도 성공했자나@!!!ㅎㅎㅎ 기능도 성공했구!!ㅎㅎ>.< 내일도 힘내자~~
from http://happykale.tistory.com/26 by ccl(A) rewrite - 2021-11-04 03:01:43