인프런 React 강의 듣고 사이트 만들기 _ back작업 01. 노드로 서버구성, express로 라우팅, MySQL과 시퀄라이즈를 사용해서 모델만들고 관계 설정하기(DB작업)
이쪽 분야는 거의 갓난아기 수준이라 강의에서 가르쳐준대로 진행했습니다. (따로 제가 검색해서 개선하거나 추가한 부분이 없다는 의미) 제가 만들고자한 테이블은 강의보다 단순해서리..ㅎㅎ; ++ back/app.js에서 라우터 연결할때 첫번째 인자 app.use('/guestbook', GuestbookRouter); 처럼 '/'가 있어야합니다. ++ back 폴더를 생성 front 폴더를 만들어 작업한 것처럼 root 폴더 하위에 back 폴더를 생성합니다. front 와는 별개로 서버를 돌리기 때문에 back 폴더에 들어가서 npm init을 해줍니다. npm init front 서버, back 서버 모두 run 시켜줘야 사이트를 정상 작동시킬 수 있습니다. express를 통해 라우팅을 진행 할 것이기..
인프런 React 강의 듣고 사이트 만들기 _ Front 작업 07. 메모창 만들기 (마우스로 움직일 수 있게 만들기)
기본 스티커 메모를 아시나요? 헤더 부분을 드래그하면 이동되는 것과 메모 입력하는 기능을 흉내내보았는데요. 제 사이트에는 딱 저 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..