Web 14

[Frontend] JWT

JWT : Json Web Token - Access Token, Refresh Token으로 이뤄져 있음 Access Token을 axios 헤더로 설정해 인증된 사용자임을 서버에 알려 api 통신함 (로컬 스토리지에 저장하지 않음) 만료 시간이 있기 때문에 만료 시, Refresh Token을 이용해 Access Token을 다시 발급 받음. 클라이언트(프론트)가 보낸 Refresh Token과 DB에 있는 Refresh Token 일치 시, 새 Access Token과 Refresh Token이 발급 됨 Access Token은 로컬스토리지, 쿠키 등에 저장하지 않았으므로 새로고침, 브라우저 종료 시 사라짐 Refresh Token은 로컬 스토리지/쿠키에 저장 (새로고침, 브라우저 종료 시에도 남아..

Web 2023.10.04

[Frontend] Node.js, Babel, Webpack

프론트엔드 프로젝트를 하다보면 자꾸 마주치는 것들 하지만 정확히는 모르던 것들 정리@! Node.js : Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경 왜 쓰는지? 1. JS를 브라우저 외의 환경에서도 실행할 수 있도록 해줌 - 기존의 JS는 브라우저에서 작동 --> OS 기능 사용 불가 (ex. 카메라, 파일 I/O, 네트워크 통신 등) 2. npm 제공 - node.js 에서 사용할 수 있는 모듈 패키지 제공 (ex. 웹팩, 바벨) Babel : Javascript Compiler 트랜스파일러 : 모던자바스크립트 (ES6+) -> 구 표준 코드 (ES5) 변환 - 구형 브라우저에서도 모던자바스크립트가 작동하도록 해줌 폴리필 : 기능을 지원하지 않는 웹브라우저 상..

Web 2023.05.19

[React] setState, props

지금까지 Vue.js 프로젝트만 해오다 React 프로젝트에 투입되어서 리액트 실습! React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기 | VELOPERT.LOG 이 포스트는 React 에서는 불변함 (Immutability) 를 지키며 상태 관리를 하는 것을 매우 편하게 해주는 라이브러리 Immutable.js 에 대해서 알아보겠습니다. 서론 리액트를 사용하신다면, Immutability 라는 velopert.com 윗 글에 나온 예시 코드를 활용했다 모든 변수명이 users인게 헷갈려서 변수명을 임의로변경했다 import React, { Component } from 'react'; import UserList from..

Web 2021.08.31

[Backend] JPA 정리

JPA(Java Persistent API) 자바의 클래스와 DB의 테이블을 매핑하는 기술 객체지향적으로 데이터를 관리 -> 비즈니스 로직에 집중, 객체지향 개발 가능 신기했던 작명==SQL 기능 1) find / select Article findByArticleid(int articleId); select * from article where articleid = articleId; 이 기능을 한다 여기서 또 얘가 이상한게 FindByArticleId 로 id의 i를 대문자 I로 쓰면 article_id로 인식함; 2) order by Article findFirstByEmailOrderByArticleidDesc(String email); findFirst -> limit 1과 같음 OrderByA..

Web 2021.08.20