뇌 채우기 공간

react router에 tansition을 주고 싶어! 그래서 찾아봤던 것이 react-transition-group이다. React-Router는 현재 경로가 바뀌면 즉이 DOM에서 제거하기 때문에 화면을 겹쳐서 애니메이션을 주려면 history가 바뀌기 전에 애니메이션을 실행시켜야한다. 공식적으로는 react-transition-group 사용을 권장한다. 리액트 공식 라이브러리이다. 공식문서가기 모든 페이지에 트랜지션 주기 일단 모든 페이지에 트랜지션을 주는 것은 쉽다. TransitionGroup태그와 CSSTransition 태그를 Switch위에 감싸주면 된다. 라우터는 각각의 key를 갖게 되는데 그것을 pathname으로 준다. key를 가진 라우터에게 classNames가 pageSli..

이번주는 MVP발표를 위해서 매우 바쁘게 달렸다. 갑자기 디자인, 기능이 나와서 프론트에서 정말 할게 쏟아졌다. 그동안 미루지않고 나오는 족족 만들어놓았었는데 대체 왜 이렇게 한꺼번에 몰아서 바쁜걸까? MVP발표에서 튜터님들이 질문을 하시는데 마침 내가 만들었던 페이지에서 질문이 들어왔다. 그러나 그때는 내가 그 페이지를 정확하게 이해하고 만든게 아니다보니 갑자기 머리가 새 하얘져서 아무말 대잔치를 해버렸다. 앞으로는 내가만드는 페이지를 정확하게 이해하도록 노력해야겠다.

북 컬렉션 설명 1. 제목있음 2. 이미지 넣을 수 있음 3. 설명 넣을 수 있음 4. 책을 선택하고 책 마다 추천 이유를 적을 수 있음 5. 선택한 책 삭제 할 수 있음 6. 서버로 form data로 보냄 기존의 로직 1. 책을 하나 선택하면 리덕스에 저장됨 selected_Books 라는 배열에 title, image, author, isbn이 저장되고 collection_contents라는 배열에 isbn, book_description이 저장됨. 위의 배열은 화면에 책 정보들을 뿌려주기 위해 저장해놓은 것들이고 collection_contents는 서버에게 보낼 형식으로 만들어준것임. 2. 책 더 추가하기를 누르면 리덕스에 있는 more_select라는 변수를 true로 바꿔주고 책을 더 추가할..

컬렉션 수정하기 문제 발생 수정하기할때는 서버에서 값을 받아온 것을 뿌려주고 있음 그러므로 사용자가 x표시를 눌러서 저 책 하나를 없애고 싶어도 서버에서 삭제가 안되기 때문에 바로바로 화면에서 사라지지 않음 즉 리덕스에서 관리를 해야하는데! 여기서 고민은 이미 리덕스에 액션이 많고 이것을 게시하기 까지 여러가지의 액션을 호출하게 되는데 괜찮을까? 였다. 하지만 지금 리덕스에 액션들은 하나의 액션에서 딱 특정한 행위를 위한 액션을 하고 있었다. 나중에 리팩토링할때 점검을 해봐야겠다. 그래서 내가 결정한 방법은 1. 서버에서 컬렉션 디테일을 받아와서 contents(책들)을 리덕스에 저장한다. (1) 저장할 값은 책이미지, 제목, 저자, 사용자가 쓴 추천글 그리고 서버에 보낼 내용인 책 고유번호, 사용자 추..

https://kutar37.tistory.com/entry/%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%8B%9C-Fade-In-%ED%9A%A8%EA%B3%BC%EC%A3%BC%EA%B8%B0 페이지 스크롤시 Fade In 효과주기 페이지 스크롤시 Fade In 효과주기 1. 단순 Fade In 스크롤되면 스르륵 하고 나타나는 형태의 가장 단순하고 기본적인 Fade In 방식입니다. HTML 1 2 3 4 5 6 7 8 9 Fade In Fade In .. kutar37.tistory.com https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scr..