체유의 IT일지

프로젝트에서는 가장 처음엔 토큰을 생성해서 '로그인을 유지' 시키기 위해 브라우저의 로컬 스토리지에 저장을 했다. 그러나 최종 프로젝트에서는 쿠키와 토큰을 사용했다 쿠키로 바꾼 이유는 ? 로컬 스토리지는 브라우저를 종료해도 데이터가 남아있다는 특성을 지니기 때문에 보안에서 취약하다. 쿠키와 토큰을 사용함으로써 만료 기간을 설정해 보안성을 높이고자 했다. 구현한 Flow를 요악하면, 첫 로그인 시 JWT 토큰을 쿠키에 담아서 클라이언트로 보내고 유저가 페이지를 접속할 때마다 클라이언트는 헤더에 쿠키정보를 담아서 서버로 보내면 서버는 JWT 토큰을 검증하고 유효하다면 요청값을 보내주는 방식으로 인증 과정을 거쳤다. 모든 데이터를 서버에서 저장해야한다는 부담과 (물론 소규모 프로젝트라 서버거 터질일은 절대절대..

"우리도 CORS에서 자유롭지는 못했다." 프로젝트를 진행하면서 그전에는 CORS 오류가 나지 않았지만 배포한 후에 CORS 에러가 발생 했고, 그 원인으로는 배포하면서 출처가 다른 url에 대한 설정이 없었기 때문으로 이해를 했었다. 📍CORS란? Cross origin Resource Sharing (교차 출처 리소스 공유) " 다른 출처로의 리소스 공유 및 사용 가능 "하도록 하는 메커니즘 출처 : 프로토콜(Protocol), 호스트(Host), 포트번호(Port) -> 서버 위치를 찾기 위해 필요한 가장 기본적인 것들 출처를 비교하는 로직은 브라우저에서 이루어진다. 브라우저가 CORS 위반 등을 분석한다. 📍CORS 이해를 위한 SOP 개념 관련한..

데이터 조작어(DML) : DB에 저장된 데이터 조회, 수정, 삭제 ex. select, insert, delete, update 함수 종류 및 형식 INSERT INSERT INTO 테이블명(컬럼명) VALUES 값 ex. INSERT INTO fashion(name, size, color) VALUES ("면바지", 90, "블루"); UPDATE UPDATE 테이블명 SET col = value WHERE (col = value); ex. UPDATE fashion SET size = 105 WHERE (size = 100 AND name="카고바지"); DELETE DELETE FROM 테이블명 WHERE (col = value); ex. DELETE FROM fashion WHERE name =..

제약조건 테이블에 잘못된 데이터가 입력되는 것을 방지하기 위한 규칙 제약 조건을 통해 무결성을 지킬 수 있음 제약조건의 종류 NOT NULL NULL 값 비허용 데이터 입력하지 않으면 에러 공백(“”) 입력해도 에러 X UNIQUE 중복되는 값 비허용 똑같은 값 있으면 에러 NULL은 비교가 불가능해서 중복되어도 에러 발생 X DEFAULT 기본값 설정 CHECK 값의 범위를 제한해서 특정 값만 허용. 제한한 값 아닌 경우 에러 발생 ENUM('A', 'B') A와 B, 두 가지 값만 받을 수 있음 등등.. 제약조건 추가 방법 1. 처음 테이블을 구성할 때 추가 2. 이미 만들어져 있는 테이블에 추가 1. 처음에 추가하는 방법 CONSTRAINT 제약조건이름 제약조건 (적용할 속성) 단, NOT NULL..

📍Project 개요Subject: 포트폴리오 공유 웹 서비스My Role: Back-endProject Duration: 23.10.16 - 23.10.27  📍사용 Tool & Library 요약Node js와 프레임워크인 Express를 기반으로 개발MongoDB와 MongoDB를 Node.js로 사용할 수 있도록 하는 mongoose 라이브러리 사용cors 에러 방지를 위한 cors 라이브러리 사용이미지 업로드 및 aws s3에 저장을 위해 multer, aws-sdk 라이브러리 사용JWT 토큰 발급을 위한 jsonwebtoken 라이브러리 사용 📍파일 구조▶️ DB     ▶️ modelsMVP 별로 구분User.js가장 최하단에서 모델의 메서드(create, findOne 등)를 통해 c..

운영체제(OS)등장배경처음엔 하드웨어의 종류가 적어 통제가 가능했으나 점차 하드웨어의 종류가 많아지고 다양한 용도로 사용되면서, 개발자가 모든 하드웨어의 구조와 회로를 배우는 것이 불가능하게 되었다. 프로그램이 하드웨어 위에서 잘 실행될 수 있도록 도와주기 위해서 등장한 것이 운영체제. : 하드웨어를 포함한 리소스를 제어하고 프로그램을 실행해주는 시스템 소프트웨어시스템 리소스: 시스템 자원컴퓨터에서의 자원: 어떤 목적에 이용할 수 있는 하드웨어를 포함한 모든 것‘리소스’의 99% → 메모리를 의미각 응용프로그램마다 할당된 리소스가 존재응용프로그램은 다른 응용프로그램의 리소스를 강제로 사용할 수 없음⇒ 응용프로그램이 실행되기 위해 누군가 리소스를 정해주고 각 프로그램이 다른 프로그램의 리소스를 강제로 사용..

컴퓨터 구조의 큰그림컴퓨터 구조는 컴퓨터가 이해하는 정보와 컴퓨터의 네 가지 핵심 부품으로 이루어져 있다. 컴퓨터가 이해하는 정보는 다시 데이터와 명령어로 이루어져 있다. "전원을 켜라"라고 할 때, "전원"이 데이터이며, "데이터를 켜라"가 명령어이다. * 인코딩: 컴퓨터가 이해할 수 있는 형태로 데이터를 변환하는 것* 디코딩: 사람이 이해할 수 있는 형태로 변환하는 것 컴퓨터의 네 가지 핵심 부품에는 중앙처리장치(CPU), 주기억장치(메모리), 보조기억장치, 입출력장치가 있다. 메인보드의 구조메인보드 (혹은 마더보드): 부품들을 장착하는 토대가 되는 보드 시스템버스: 핵심 부품 간 정보(데이터, 명령어) 이동은 모두 시스템 버스를 통함 입출력장치: 마우스, 키보드, 모니터와 같이 입력 받고 출력 보여..

https://ul0511.tistory.com/25 [JavaScript] 핵심 개념(1) 동기·비동기 | 이벤트 루프 | Promise 동기, 비동기 요청 작업을 순서를 지켜서 순차적으로 처리를 하는지 여부에 따라 동기와 비동기로 나눌 수 있다. 동기 처리 방식은 직렬적으로 작업을 수행하고 비동식 처리 방식은 병렬적으로 ul0511.tistory.com 위 글에서 언급은 했지만, 자바스크립트는 싱글 스레드로 비동기 작업을 처리해 주는 작업이 필요하다 비동기 작업을 처리해 주는 객체이자 패턴 중 하나는 Promise이며 이와 유사하게 async와 await도 있다 async, await 마찬가지로 비동기 처리 패턴 중 하나로 동기 처리처럼 동작하도록 구현할 수 있다. ES8에서 나온 문법으로서 비동기 ..

clearTimeout : setTimeout으로 생성한 타이머의 실행을 취소하는 기능 clearTimeout(취소할 타임아웃의 식별자) 디바운싱 빈번하게 발생하는 이벤트를 '특정 시간 이후에 한번만' 실행 시키는 최적화 기법 예를 들어 사용자가 300밀리초 동안 버튼을 5번 클릭 했다고 하면 디바운싱은 클릭에 의한 이벤트 실행이 바로 되지 않는다. 디바운싱 시간이 300밀리초로 설정되어 있다면, 사용자가 클릭을 멈추고 300밀리초가 지나고 나서야 해당 함수가 한번 실행된다. 디바운싱은 성능뿐 아니라 요청 하나하나도 모두 돈인 유료 API를 사용할 때 큰 효과를 볼 수 있다. 디바운싱은 주로 연이어 발생하는 이벤트를 단일 이벤트로 만들고 싶은 곳, 즉 빈번하게 발생하는 타이핑 이벤트의 결과 표시(검색 결..

동기, 비동기 요청 작업을 순서를 지켜서 순차적으로 처리를 하는지 여부에 따라 동기와 비동기로 나눌 수 있다. 동기 처리 방식은 직렬적으로 작업을 수행하고 비동식 처리 방식은 병렬적으로 작업을 수행한다. 비동식 처리 방식에는 네트워크 요청 작업이나 이미지 의 작업들이 해당된다. 비동기 작업을 처리하기 위한 패턴으로 콜백 함수를 이용해서 동시에 작업을 처리할 수 있도록 해준다. 자바스크립트는 싱글 쓰레드로 작동하는 언어이다. 하나의 쓰레드 = 하나의 콜 스택 = 한 번에 하나의 작업 수행 즉, 쓰레드가 하나만 있기 때문에 한 번에 하나의 작업만 수행할 수 있다. 그러나, 비동기 작업 처리를 가능하게 해주는 것이 있는데 바로 이벤트 루프이다. 이벤트 루프 기본적으로 자바스크립트가 실행되는 과정에 메모리 할당..