(더 추가)

내가 구현한 것

헤더,사이드바,푸터
게시물 전체조회
게시물 업로드(그림,영상 파일 포함)
게시물 삭제

해결한 문제들

파일 전송 버튼을 커스텀 아이콘으로 변경
받은 date 날짜 순 정리
select-option 태그에는 아이콘,그림을 넣거나 커스텀의 한계가 있어 ul-li형태로 해결

알게 된 점

localstorage의 사용

axios로 서버와 통신 시 form data를 이용해서 사진,영상 등을 전송할 수 있다.

blob
buffer

인코딩(encoding)은 파일에 저장된 정보의 형태나 형식을 데이터 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태로 변환하는 처리 혹은 그 처리 방식을 말합니다. 이메일 등의 전송, 동영상이나 이미지 영역에서 많이 사용되며, 반대말은 디코딩(decoding)입니다.
base64-wiki

background이미지로 jpg 등을 쓸때는 괜찮지만 다른때는 public을 이용해야 한다.

아쉬웠던 점

JSX :

유효성 검사
포스팅 업로드 시 감정,글 선택이 완료되지 않으면 전송되지 않고 경고창이 뜨고 기준이 충족되면 경고창이 사라지는 것(or 모달)을 나타내고 싶었는데 하지 못했다.

CSS :

화면의 비율이 작아지면 헤더에 비해 바디의 width 비율이 더 커서 바디가 더 삐져나오는 느낌이었다.

margin과 padding의 차이를 알고 있다고 생각했는데,
margin의 경우 부모 밖에서 외곽선이 더 생기므로 부모모다 덩치가 커질 수가 있다
padding은 부모 안에서 자기 자신에 여백을 주는 것
부모의 width를 무조건 주고, (100% 든 뭐든) 콘텐츠 정리가 필요할때는 차라리 padding을 주자.
---> 개발자 도구 화면을 적극 활용하며 체크

부모 요소(element) 속 이미지 크기 맞추기

svg의 활용

마이페이지의 줄 넓이를 줄이고 싶었는데 svg의 width변경을 제대로 하지 못했다.

svg 속성의 fill, width, heigh 등에 current를 주고 컴포넌트로 불러와 속성을 바꿀 수 있지만 어째서인지 적용이 되지 않았다
참고

---> 라고 생각했는데 지금 해보니 된다. fill이 d부분 밑에도 있으니 어디에 해당 색상이 존재하는지 제대로 좀 참고하자. width,heigh도 설정되는데,, 꼼꼼히 체크해보지 않았다.

인피니트 스크롤을 구현하지 못함

다짐

세세한 디자인에 너무 집착하진 말자 일단 하고, 수정하자