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

사진첩을 만들고 있는데, 그냥 정사각형으로 늘어놓으니.. 너무 안예쁘죠? 그래서 핀터레스트처럼 만들어보기로 했습니다. 핀터레스트에 사용한 레이아웃이름은 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 예제코드..

기본 스티커 메모를 아시나요? 헤더 부분을 드래그하면 이동되는 것과 메모 입력하는 기능을 흉내내보았는데요. 제 사이트에는 딱 저 2가지 기능만 필요하여 저 부분만 작업했습니다! Memo.js import React, { useCallback, useRef, useState } from 'react'; import styled from 'styled-components'; const Wrap = styled.div` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; background: yellow; border: 1px solid #c0c0a4; box-sizing: border-box; `; c..

Modal 팝업 작업을 진행했습니다. 일단 공식문서에서 useRef, useImperativeHandle, forwardRef를 확인해보세요! (저는 useRef로만 작업 했습니다.) ko.reactjs.org/docs/hooks-reference.html#useref ko.reactjs.org/docs/hooks-reference.html#useimperativehandle ko.reactjs.org/docs/react-api.html#reactforwardref useImperativeHandle과 forwardRef... 사용해서 해보려고도 하다가.. 이것저것 하느라 시간이 걸렸습니다. 컴포넌트 형식 작업도 약간 헷갈리기도 하고^^; 그러다가 블로거님의 코드를 보고 짜잔 해결했습니다. 아래는 참고한..