인프런 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..
마우스로 창을 움직여보자!
폴더창이나 인터넷 창 등..... 보통 상단부 부분을 마우스로 꾹!누르고 움직이면 창을 이동시킬수 있잖아요? 이렇게요 ↓↓↓ 오늘은 이 기능을 만들어 보도록 하겠습니다.! ^^ 먼저 움직일 객체를 만들기위한 작업을 합니다. HTML 이곳을 드래그 하세요. 대충 모양을 꾸며줄게요. CSS .wrap{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; border: 1px solid #ddd; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); overflow: hidden; } .header{ padding: ..
인프런 React 강의 듣고 사이트 만들기 _ Front 작업 03. 배터리 만들기(dayjs)
이번 작업은 배터리 만들기입니다. 핸드폰들 보면 몇 % 남았는지 보이는 것있쬬? 기능은 약간 다르지만 흉내내보겠습니다. 제가 원하는 기능은 하루를 기준으로 시, 분을 통해 얼마나 지났는 지를 체크하는 것입니다. 즉 24시가 되면 100%, 오후 12시면 50% 겠죠? 로직을 수정하면 거꾸로도 할 수 있겠죠? (지금 중요한건 이런 기능에 대한 설명은 아니니깐요.) 제로초님 강의에서는 moment를 사용해서 날짜를 구해 사용했는데요, 잠깐 다른 라이브러리에 대해서도 설명해주십니다. 그 중 구글 트렌드를 보시고 요즘 많이 사용한다는 dayjs에 대해 간단한 소개를 해주시는데요. 용량이 가볍기 때문에 많이들 쓴다고 합니다. 저는 dayjs를 통해 만들어보겠습니다. (사실 moment나 dayjs나 문서보면 비슷..