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

사이트에 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..

이쪽 분야는 거의 갓난아기 수준이라 강의에서 가르쳐준대로 진행했습니다. (따로 제가 검색해서 개선하거나 추가한 부분이 없다는 의미) 제가 만들고자한 테이블은 강의보다 단순해서리..ㅎㅎ; ++ back/app.js에서 라우터 연결할때 첫번째 인자 app.use('/guestbook', GuestbookRouter); 처럼 '/'가 있어야합니다. ++ back 폴더를 생성 front 폴더를 만들어 작업한 것처럼 root 폴더 하위에 back 폴더를 생성합니다. front 와는 별개로 서버를 돌리기 때문에 back 폴더에 들어가서 npm init을 해줍니다. npm init front 서버, back 서버 모두 run 시켜줘야 사이트를 정상 작동시킬 수 있습니다. express를 통해 라우팅을 진행 할 것이기..