혼자 적어보는 노트

이전 프로젝트에서 JWT토큰을 사용한 방식으로 로그인을 구현했었는데 주는대로 사용만 했지 JWT토큰에 제대로 알고있지 못하다고 생각하여 cookie와 session과 함께 간단하게 정리해보기로 했다. Cookie 쿠키는 클라이언트가 웹사이트에 접속할 때 그 사이트가 사용하게 되는 일련의 작은 기록 파일과 같다. 쿠키는 서버가 클라이언트에 정보를 전달 할 때 저장하려는 정보를 응답 헤더에 저장하여 전달하고 key-value 형태의 문자열 형태로 저장하게 된다. 쿠키를 로그인에 사용하면 set-cookie로 반환받은 쿠키값(id,password)을 토대로 인증이 필요한 요청을 할 때마다 다시 쿠키와 함께 요청을 하여 사용자가 일일이 id/password를 입력해야하는 번거로움을 줄일 수 있었다. 하지만 이렇..

대충은 알고 있었으나 설명이 잘 안되는 것 같아서 OOP에 대해 따로 정리를 해보려고 한다. 객체지향 프로그래밍(Object Oriented Programming) 컴퓨터 프로그래밍의 패러다임중 하나로 프로그램을 객체 단위로 나누고 객체들간의 상호작용을 통해 로직을 구성하는 것이다. 객체 지향 프로그래밍이라는 패러다임이 등장하기 전에는 순서대로 처리하는 방식인 절차지향 프로그래밍 방식을 사용했다. 하지만 프로그램의 크기가 커졌을 때 코드가 복잡해지게되어 동작보다는 데이터를 중심으로 코딩을 하는 방식으로 발전했고 데이터와 처리 방식을 하나의 모듈로 관리를 하며 조립하는 개발 방식으로 확장이 되었다. 객체지향 프로그램의 원리는 객체의 관점에서 작은 문제를 해결할 수 있는 객체들을 만들고 이 객체들을 조합하여..

Vanilla JS로 작업한 프로젝트를 netlify에 배포를 하려던 중 API의 env설정을 위해 webpack을 사용하여 처리를 해보기로 했지만 꽤나 오랜 시간 삽질을 해서 기록을 하기로 했다. 1. Build setting 그냥 Javascript 파일을 등록할 땐 build setting 부분을 빈 값으로 해도 되지만 build를 진행할 것이기 때문에 build setting을 해주어야 했다. 배포 폴더는 public으로 지정했다. 2. failed된 결과는 배포되지 않음 처음 배포를 했을 때는 build과정 없이 진행했고 정상적으로 나타났었고 webpack 및 package.json 설정을 하고 push를 했는데 제대로 나타나길래 나는 정상적으로 잘 한줄 알았다..ㅎ 하지만 deploys에서 로..

tab, 스페이스, 엔터 체크 & 제거 const reg = /\s/g; const str = "a b c" if(str.match(reg)){ alert("공백이 존재합니다."); } str.replace(reg, ""); // 모든 공백 제거 특수문자 체크 & 제거 const reg = /[^\w\sㄱ-힣]|[\_]/g; const str = "a b c" if(str.match(reg)){ alert("특수문자가 존재합니다."); } str.replace(reg, ""); // 특수문자 제거 // 제외할 특수문자 직접 지정 const reg2 = /[`~!@#$%^&*()_|+\-=?;:'",.\{\}\[\]\\\/]/gi; const str2 = "!@#!@$123"; if(str2.match(r..

Create React App의 경우 root의 .env파일에서 환경변수를 쉽게 설정할 수 있었지만 Vanilla JS로 만든 프로젝트에 환경 변수를 설정하려니 다른 절차가 필요했다. 아무 절차 없이 그냥 .env 파일을 만들고 process.env.SOMETING_KEY와 같은 형태로 불러오면 당연하게도 ReferenceError가 발생한다. 1. dotenv 설치 npm i dotenv 2. webpack.config.js에 플러그인 추가 // webpack.config.js const webpack = require('webpack'); const dotenv = require('dotenv').config(); module.exports = (_, argv) => { return { //.. 일부..

webpack-dev-server를 사용할 때 index.html에서 태그로 js파일을 불러올 경우 2번 실행된다. 왜?? 빌드 시 HtmlWebpackPlugin이 번들링된 js파일을 index.html 의 body 태그 아래에 불러오기 때문에 html 내부에 작성된 script 태그가 있다면 2번 실행이 되는 것이다. html 안에 script 태그를 지워주면 해결이 되지만 script 태그가 필요하다면 injext 옵션을 변경하여 해결할 수 있다. plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", inject: false }) ], 참고 블로그 : https://tesseractjh.tistory.com/181

이전 프로젝트에서 CSR로만 구성되어 있던 유저 페이지를 SSR을 통해 일부 데이터를 미리 받는 방식으로 변경을 하기로 했다. export const getServerSideProps = async (context: NextPageContext) => { const { id } = context.query; const userId = Number(id); if (Number.isNaN(userId)) { return { notFound: true }; } try { const user = await UserApi.getUser(userId); return { props: { user, userId } }; } catch (e) { return { notFound: true }; } }; 이렇게 미리 받으..

🔗 고양이 사진첩 애플리케이션 고양이 사진첩은 이전에 데브코스 강의에서 한번 다룬 적이 있었어서 한번 로딩된 데이터를 메모리에 캐시하는 부분 빼고는 전부 구현했다. 한번 해봤기 때문에 4개의 연습 과제중 가장 수월하게 구현하긴 했지만, 기억을 더듬으며 했던 것 같다 ㅎㅎ 💡 알게된 점 Cache Storage LocalStorage나 SessionStorage에서 메모리를 캐시하면 되겠다 라고 생각했는데 cache API가 있다는 것을 알게 되었다. Cache API를 활용하면 웹 캐시에 복사된 데이터를 제어할 수 있다. 저장된 캐시를 확인하려면 개발자도구-애플리케이션-cacheStorage에서 확인할 수 있다. 몇 가지 테스트 해보며 사용해보니 local, session Storage랑 비슷하게 사용 ..