Cookie / Session 최근 Nextjs와 파이어베이스를 사용해서 개인 블로그를 하나 만들고 있습니다. 그런데 기본 지식들에 대한 부족함이 하나둘씩 생기기 시작하면서 기초 지식의 중요성을 느꼈습니다. 저는 라이브러리나 프레임워크를 사용하는 것보다 직접 하드코딩을 해야 속이 풀리는 성격이기 때문에 뭔가 하나 애매한 게 생기면 찜찜함이 오래가는 편입니다. 아무튼 여태 공부를 하지 않았던 쿠키에 대해 기초를 튼튼하게 쌓아보겠습니다. HTTP 쿠키란? HTTP에 쿠키는 서버에서 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 1. 사용자 로그인 성공 :: 서버는 로그인 성공한 클라이언트에 쿠키를 전송 2. 로그인 완료 :: 브라우저는 서버에서 받은 쿠키 데이터를 저장해 놓고 필요할 때 마다 서버로..
2021.09.02
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
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev