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

사이트에 Form을 만들고 이것을 통해 '사이트 주인에게 메일 발송'하는 기능을 작업해보도록하겠습니다. EmailJS - http://www.emailjs.com/ Send email from Javascript - no server code required | EmailJS Send email directly from your client-side Javascript code – no server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier! www.emailjs.com - 무료는 텍스트만 가능, 파일전송 X 1. 가입 2. Em..

지난 포스팅에서 만들었던 슬라이드를 수정하게되었습니다. 포스팅에서도 말했었는데, 기존 방식은 지정된 갯수의 이미지만으로 작업을 한 부분이었기에 문제가 없는데, 이미지 갯수가 동적으로 들어오게되면 스타일이 깨지게됩니다. 그래서 실제로.. 작업하다가 이미지 갯수를 늘리려하니 깨지게되고 이런게 너무 거슬려서 수정하게되었습니다. 다만 지난 포스팅과는 방식이 다릅니다. 지난 포스팅은 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 예제코드..