framer-motion 애니메이션 NPM Install > npm i framer-motion 사용법 import { motion, AnimatePresence } from "framer-motion" import { useRouter } from "next/router" const component = ({children}) => { const router = useRouter(); return( {children} ) } const WrapStyled = styled.div` position: relative; max-width: 978px; padding: 0 0 30px 0;` const animate = { initial :{ transform : `translateY(50px)`, opaci..
2021.09.01
1. 에러 페이지 생성 const Error = ({statusCode}) => { return( { statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client' } ) } Error.getInitialProps = ({res, err}) => { const statusCode = res ? res.statusCode : err ? err.statusCode : 404 return { statusCode } } export default Error 해당 경로에 ./project/pages/_error.js 에러를 표시할 페이지를 생성해 주자. -> 업데이트돼서 404.js 이름으로 생성해준다. 2. getS..
2021.08.31
이전 리액트로 SPA(Single-Page-Application) 형태의 간단한 텍스트 게시판을 만들어 봤었다. CSR(Client Side Rendering)은 서버로부터 첫 로드 시 모든 자원을 다운로드하여 브라우저에서 랜더링을 진행하는 방식이기 때문에 초기 로드 시간을 제외하고는 사용자는 부드럽게 이용할 수 있다. 직접 만들어본 간단한 게시판이다. 처음 접속 했을 때, 잠깐의 로딩 애니메이션이 보이고 첫 페이지가 랜더링 된다. 로딩 중에는 자바스크립트 파일과 게시판 데이터가 브라우저에 다운로드된다. 로딩이 완료됐다면 이때부터 서버와의 연결은 필요 없다. 페이지에서 게시판 글을 모두 읽을 수 있을뿐더러 인터넷 접속이 끊기더라도 글 읽기도 가능했다. Simple Forum This website is ..
2021.08.30
타입스크립트(TypeScript) 타입스크립트는 기존의 자바스크립트 언어에 타입을 추가한 언어다. 자바스크립트에서 좀 더 확장된 언어라 표현할 수 있고 기존 SASS/SCSS가 CSS파일로 변환되어 브라우저가 읽듯이 타입스크립트 또한 다시 자바스크립트로 변환되어 브라우저가 실행한다. 타입스크립트를 사용하는 이유는? 자바스크립트는 아래 코드가 실행 가능하다. const Add = (num1, num2) => { console.log(num1+num2); } Add(1,2); Add(1, "text"); Add('1', true); Add 라는 함수의 매개변수 num1, num2 둘 다 타입이 들어올것으로 예상해서 코드를 작성했지만 다른 문자열이나 불리언 타입이 들어와도 자바스크립트는 정상적으로 작동한다. ..
2021.08.26
Sass를 사용해야할 일이 생길것 같아 미리 공부해보려고 글을 작성해봅니다. Sass는 CSS 전처리기로 SCSS, Less, Stylus 등이 더 존재합니다. 이 CSS 전처리기들은 기존의 CSS 보다 더 나은 가독성과 유지보수를 편리하게 만들어주는 도구로 생각하면 좋습니다. 기존의 CSS는 중복될 수 있는 코드 작성이 가능하기 때문에 유지보수의 불편함이 생길 수 있습니다. 그러므로 이런 부분들을 해소시켜주는 SASS와 SCSS를 사용하면 좋습니다. 그리고 마지막에는 전처리 도구로 작성한 코드들은 CSS파일로 변환해서 사용하게 됩니다. CSS .wrap{ width: 200px; height: 200px; } .wrap .inner{ color: #fff; border: 1px solid #000; }..
2021.08.25
Express - Multer 라이브러리 multer는 Node Express 서버에서 파일 업로드를 위한 미들웨어이다. HTML에서 Form데이터를 처리하거나 Ajax를 통해 클라이언트에서 서버로 파일을 업로드할 수 있다. 1. multer 설치 > npm i multer 2. multer(opts) const multer = require("multer"); 속성 설명 dest or storage 파일이 저장될 위치 fileFilter 어떤 파일을 허용할지 제어하는 함수 limits 업로드 된 데이터의 한도 preservePath 파일의 base name 대신 보존할 파일의 전체 경로 3. 업로드 규칙 1) strage / dest const storage = multer.diskStorage({ d..
2021.08.22
텔레그램 가상화폐 시세 알림봇 만들기 1편을 안보신 분은 아래 게시글을 확인해주세요. 가상화폐 시세 알리미 - 텔레그램 봇 만들기 - 1편 텔레그램 봇 만들기 오늘은 가상화폐 시세를 알려주는 텔레그램 봇을 만들어보려고 합니다. 가상화폐를 보유하고 있으면 스마트폰으로 하루에도 수십 번 시세를 확인할 텐데요. 본격적으로 코 juni-official.tistory.com 텔레그램 가상화폐 시세 알림봇 1편에 이어 2편에서는 서버에 배포하는 코드를 작성해보도록 하겠습니다. 매일2시간씩 하루에 12번 메시지를 보내야 하기 때문에 24시간 돌아가는 서버가 필요합니다. 다행히도 저는 포트폴리오 배포를 위한 AWS ec2 Linux 서버를 돌리고 있어 텔레그램 봇이랑 같이 배포해보도록 하겠습니다. Node Expres..
2021.08.21
텔레그램 봇 만들기 오늘은 가상화폐 시세를 알려주는 텔레그램 봇을 만들어보려고 합니다. 가상화폐를 보유하고 있으면 스마트폰으로 하루에도 수십 번 시세를 확인할 텐데요. 본격적으로 코인판에 불장이 왔을 때는 정말 5분마다 시세를 확인하고 밤을 지새우며 시세를 봤던 때가 생각나네요. 지금은 그 정도는 아니지만 하루에 여러 번 시세를 확인하곤 합니다. 하지만 이렇게 시세를 보고 있으면 다른 급등 코인들에 쓸데없이 시간을 뺏기기도 하고 잘못 된 판단을 할 수 있게하는 불필요한 정보를 피하기 위해 텔레그램 봇으로 필요한 시세만 조회할 수 있도록 만들어보겠습니다. 우선 간단하게 제가 필요로 하는 요구사항을 나열해보겠습니다. 요구사항 1. 2시간 단위로 텔레그램을 통해 가상화폐 시세를 전달받는다. (12시 -> 2시..
2021.08.20
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev