주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

지난 포스팅에서 만들었던 슬라이드를 수정하게되었습니다. 포스팅에서도 말했었는데, 기존 방식은 지정된 갯수의 이미지만으로 작업을 한 부분이었기에 문제가 없는데, 이미지 갯수가 동적으로 들어오게되면 스타일이 깨지게됩니다. 그래서 실제로.. 작업하다가 이미지 갯수를 늘리려하니 깨지게되고 이런게 너무 거슬려서 수정하게되었습니다. 다만 지난 포스팅과는 방식이 다릅니다. 지난 포스팅은 customPaging 옵션 방식으로 제작한 것이고 이번엔 AsNavFor 방식으로 제작하게되었습니다. AsNavFor 옵션 example 확인해보기 react-slick.neostack.com/docs/example/as-nav-for Neostack The last react carousel you will ever need re..

사진첩을 만들고 있는데, 그냥 정사각형으로 늘어놓으니.. 너무 안예쁘죠? 그래서 핀터레스트처럼 만들어보기로 했습니다. 핀터레스트에 사용한 레이아웃이름은 masonry layout이라고 하네요. 작업에 사용한 이미지들의 출처는 pixabay 입니다. 라이브러리로도 있는데, 어떠분이 css로 만들었더라구요! => darrengwon.tistory.com/569 이 분의 코드를 참고해서 react에 적용했습니다. 거의 다 가져왔지만, ㅎㅎ 그 중에서 수정 두가지를 했는데요. 상단에 마진이 생기는 버그? 부분과 hover 시에 흑백으로 보여지는 것을 반대로 수정했습니다. 라이브러리 => masonry.desandro.com/ Masonry Install Download CDN Link directly to Ma..

customPaging 옵션을 이용한 작업방식입니다. 슬라이드 2개로 페이징을 구현하려면 새로 작성한 글을 참고해주세요! 사진첩 작업을 하기위해 react-slick 라이브러리를 활용해보겠습니다. 그냥 slick을 쓴 경험은 있지만 react에서는 강의를 보고 예제 코드 만들어 본 이후 처음이네요.ㅎㅎ 라이브러리 설치를 먼저 해주시구요. npm i react-slick 대충 테스트해보기위해 slick 사이트에 있는 예제를 가져와서 간단히 뚝딱 만들어보겠습니다. 아래 사이트에서 docs를 확인해보세요. https://react-slick.neostack.com/ Neostack The last react carousel you will ever need react-slick.neostack.com 예제코드..

back작업01번에 이후 작업을 진행하겠습니다. 실제 api 요청과 응답 값 받아서 로그인 절차를 진행해보겠습니다. Front front 하위에 sagas 폴더를 생성한 후에 관리할 파일명으로 js파일을 생성합니다. 예를 들어 user 정보를 관리할 것이다라고 한다면 user.js가 되겠죠. 저는 user.js로 만들었습니다. sagas는 리덕스 생태계 패키지입니다. 비동기 작업을 세분화 시킬 수 있습니다. reducer는 리액트의 상태 생성자입니다. 액션이 오면 리듀서가 스토어의 상태를 변경시키는 방식으로 동작합니다. reducers와 sagas를 짝으로 사용하기때문에 동일한 파일명으로 작업했습니다. 두 파일모두 확인해보겠습니다. sagas/user.js api 호출 주소는 back의 서버 포트를 입력..