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

기본 스티커 메모를 아시나요? 헤더 부분을 드래그하면 이동되는 것과 메모 입력하는 기능을 흉내내보았는데요. 제 사이트에는 딱 저 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... 사용해서 해보려고도 하다가.. 이것저것 하느라 시간이 걸렸습니다. 컴포넌트 형식 작업도 약간 헷갈리기도 하고^^; 그러다가 블로거님의 코드를 보고 짜잔 해결했습니다. 아래는 참고한..

라이브러리를 사용할때, 보통 class나 id는 지정되있기 마련이죠. 또한 이런 것을 수정해야하는 경우도 종종 생깁니다. 이때 css를 수정하는 방법을 알아보도록 하겠습니다.! (next, styled-components 사용 방법입니다.) 첫번째 방법은 css 파일을 import하는 방법입니다. 즉 전체 페이지에 대한 스타일시트를 가져오는 방법입니다. 먼저 pages/ 폴더 하위에 _app.js 파일을 생성한 후 스타일시트를 import해주면 됩니다. import '../styles.css'; export default function MyApp({ Component, pageProps }) { return } https://nextjs.org/docs/basic-features/built-in-css..

react에서 리다이렉션 시키려면 모듈을 설치하여 작업해주어야합니다. 하지만 next에서는 따로 설치 없이 간단히 사용할 수 있습니다. 로그인하지 않았다면 로그인 화면으로 보내는 작업을 하겠습니다. next/router 를 통해 작업하기 위해 import를 해줍니다. import Router from 'next/router'; 컴포넌트가 생성될 때 실행되어야하기 때문에 useEffect를 통해 작업합니다. import React, { useEffect } from 'react'; 코드는 아래와 같습니다. useEffect(() => { if(!nickname){ Router.replace('/login'); } }, [nickname]); if문을 통해 해당 state 값이 없으면 Router.repla..