로그인, 회원가입 만들기Login, SignUp 뷰 페이지 만들기리덕스 모듈 만들기(덕스구조 만들기)action, action creators, reducer 먼저 만들어주기(미들웨어는 나중에 만들기)axios 파일 만들기axios를 좀더 편하게 사용하려면 파일을 만들
\-> data.json이나 서버데이터를 받게되면 default props에서 데이터를 쓸일이 없어지긴 한다...EsLint를 사용하기 때문에 defaultProps들의 type들을 맞춰줘야한다. yarn으로 prop-types를 설치해주고 각각 요소들의 PropTyp
모달 적용하기 모달은 mui를 통해 만들어진 모달 사용 modal에서 필요한 값들은 useSelector에서 가져오기! -> modal open을 리덕스로 관리했는데 꼭 그렇게 안해도 된다. 오히려 불필요 할 수 있다는 얘기를 듣고 useState에서 관리할 수
파일업로드 파일업로드 작업할때 axios에서 headers를 'Content-Type': 'multipart/form-data'로 보내야해서 그전에는 리덕스로 따로 안나누고 작성페이지에서 한번에 작성했는데 나누는게 맞는거같아서 이번엔 리덕스파일로 나눴다.
CardAdd 컴포넌트 조건부 렌더링 적용 > 'if (cardListCheck.length === 0)'라는 조건을 통해 카드가 하나도 없으면 +가 있는 상자를 보여주며 카드가 하나라도 있을 경우 CardPortfolio 컴포넌트를 보여주게 했다. 아래 이미지를
마이페이지 뒷면 카드 마우스 오버시 아이콘 보이기 onMouseEnter() 와 onMouseLeave() 이벤트를 통해, 마우스가 해당 div 영역에 놓여있을 때와 없을 때 display의 상태를 useState를 사용해 변경해준다.
클릭이벤트를 리덕스로 관리 오늘 알게된 새로운 사실이 많은데.. 먼저 뷰 데이터도 리덕스로 관리 할 수 있다는 점이다. 그리고 리듀서를 뜯어보다가 우연히 알게된 새로운 사실은... action.payload뒤에 actionCreater에서 보낸 파라미터 명이 붙어야
카드 프로필을 수정 했을때 사진도 변경이 됐었다면 헤더에 있는 프로필 사진도 변경이 되야하는데 그부분을 전혀 고려하지 않았었다. 헤더 프로필 사진은 새로고침을 해야 변경되서 리덕스가 필요하다는걸 뒤늦게 알게되어 적용하게 됐다. 😂 위에 사진처럼 프로필 사진을 수정할때
카드 작성 안했을 시 링크 보지 못하게 처리 > 처음에는 카드 작성을 했는지에 대한 여부를 알 수 있는 리덕스를 만들었다. > 이미 카드 작성을 했는지에 대한 여부가 canOtherRead로 만들어져 있어서 더 편하게 사용자가 카드가 있는지 없는지를 조회하고 경고창
카드와 아이콘이 겹칠 때 CSS 처리 > 고민할 문제. 동그라미 아이콘이 생기면서 수정하기 버튼이 잘 눌리지 않음 문제가 발생 한 이유 위 사진에서 보면 동그라미 아이콘이 빨간색 테두리처럼 크게 자리잡혀있어서 화면에서는 티가 안났지만 프로필 div보다 앞에 있어
삭제 버튼 기능 추가 props.is_me : 삭제 버튼을 게시글 작성자에게만 보여주기e.preventDefault(); : html에서 a태그나 submit 태그는 고유동작이 있는데 preventDefault()는 고유동작을 중단시킨다.e.stopPropagation
1주차 과제를 무사히 마치고 배운 내용들 전체적으로 정리해보자..