SocialGallery Project

SocialGalleryFront-End : 2명Back-End : 1명ReactSNS를 기반으로한 웹사이트이기 때문에 Virtual DOM은 렌더링 되지 않기 때문에 연산 비용이 적고 Virtual DOM을 통해 묶고 이를 실제 DOM으로 전달해 브라우저 전체를 새로

Sign upSign inSign up에서 Sign in으로 화면 전환JS Toggle버튼 활성화, Sign in 누를시 Sign up으로 화면 전환Boxicons cdnBack-End

Uncaught TypeError: Cannot read properties of null (reading 'classList')원인 : HTML이 모두 로드 되기 전에 자바스크립트 영역에서 HTML을 참조하고 있기 때문에 오류 발생.즉 addEventListener에

상단 Header부분 구성(SideBar, Logo, Login)1) Img부분은 Public 폴더에 관리 1) 상단 User 정보

1) UploadForm으로부터 데이터를 보내고 Main 게시글에 등록하는 작업데이터 불러오기2) map함수로 데이터를 반복3) 데이터 바인딩나중에 BackEnd와 변수명을 일치할 예정

1) Upload FormToggle 사용해서 background는 어둡게 css적용2) 파일 미리보기파일 미리보기는 DB에서 URL을 받아와 이미지를 다시 서버에 요청 후 뿌려주는 방식이 아닌 내 local 내 주소를 가져와서 보여주는 방식 사용onChange Eve

1) 디자인 요소만 추가 향후 게시글을 누르면 그 페이지에 맞는 Router설정1) 임시 데이터를 state에 저장후 map으로 반복

1) Swagger를 이용해 회원 가입 요청User가 로그인 했을때 파일을 업로드 할 수 있게 구현로그인 데이터와 token값 확인2) Postman에 초기값으로 데이터 저장3) Upload Toggle로 파일 업로드DB에 저장된걸 확인 가능

1) 댓글 Server로 Post 이벤트 설정2) 댓글 불러오기reply state에 값 저장3) filter후 map 돌리기mainImg state에 uplaod 사진,타이틀,내용,댓글 데이터가 저장되어있음.향후 변수명 변경할 예정4) DB에 저장

https://velog.io/@swch56/07-React-Redux-toolkitredux store값을 가져와 계산을해 redux가 적은 양의 필요한 데이터만 가지고 있게 도와준다.구조가 바뀌어도 연관된 컴포넌트를 바꿀필요없이 Seletor만 바꾸면 됨메

게시글 수정 1) 전체적인 폼은 업로드 폼과 동일 2) post를 put으로 변경 게시글 삭제 1) axios delete 2) delete form

1) UI2) Link3) Louter4) 카테고리별 페이지 기능category가 null이면 전체 게시글을 보여주고 category가 존재한다면 그에 맞는 api 맵핑5) 결과