728x90 전체 글66 NestJS에서 클라이언트로 쿠키 보내기 (왜 내 쿠키는 안받아줘요?) 쿠키(Cookie)란? 쿠키는 서버에서 클라이언트에게 보내는 작은 데이터 조각이다. 일반적으로 브라우저에서 웹 사이트를 방문할 때 쿠키를 사용하여 사용자의 활동을 기록하고, 이후에 그 사용자가 같은 웹 사이트를 방문할 때 이 정보를 사용해 그에 맞게 동작하게 해준다. 하지만 쿠키는 당사자뿐만 아닌 제 3자가 조회하는 것도 가능하기 때문에 개인 정보를 담는 등 보안상 민감한 정보를 저장하는 데에는 적합하지 않기 때문에 탈취되거나 사용자에 의해 조작되어도 크게 문제 되지 않을 정보를 주로 저장한다. (ex. 다크 모드, 장바구니 목록 등) 서버에서 클라이언트로 Cookie 전송 예제 모듈 설치 yarn add cookie-parser @types/cookie-parser # 쿠키 관리 모듈 모듈 적용 // .. 2023. 4. 13. Nestjs에서 bcrypt 사용하기 bcrypt란? 비밀번호 등을 안전하게 암호화하여 저장하고 검증하는 라이브러리로, 랜덤한 salt를 생성하고 이를 비밀번호와 함께 암호화하여 저장한다. 이후 비밀번호 검증 시에도 같은 salt를 사용하여 입력받은 비밀번호를 암호화한 후, 저장된 암호화된 비밀번호와 비교하여 일치하는지 검증한다. bcrypt는 암호화 강도를 선택할 수 있는 기능을 제공한다. 기본값은 10으로, 숫자가 클수록 강도가 높아지며 암호화에 소요되는 시간이 늘어난다. 보안을 위해 기본값 이상의 값을 권장한다. 사용법 yarn add bcrypt @types/bcrypt # nestjs는 타입스크립트가 기본이기 때문에 타입으로 설치 따로 module이나 main에 등록할 필요 없이 사용하고자 하는 파일에 불러오면 된다. import .. 2023. 4. 13. React 공통 컴포넌트 제작 (input, button) 공통 컴포넌트 제작의 필요성 하나의 사이트를 제작할때 비슷한 input이나 button을 사용해야 하는 상황이 자주 있는데, 공통된 컴포넌트를 만들어 놓으면 코드 중복을 줄이면서 상황에 맞춰 적절하게 사용할 수 있게 된다. 컴포넌트 제작 Input import React from "react"; // element 속성을 가져오기 위해 import import styled from "styled-components"; // CSS 적용 // 컴포넌트의 props 타입을 InputElement의 속성과 내가 설정하고자 하는 타입을 포함한다. type Props = React.HTMLAttributes & InputProps; interface InputProps { type?: string | undefi.. 2023. 4. 13. React Form event type (feat. 타입 단언 as) Form Event type 우리는 로그인이나 포스팅 등의 화면을 만들어줄 때 클라이언트가 입력하는 데이터를 입력받는 방법 중 하나로 onChange 등의 FormEvent를 이용해 원하는 값을 추출할 수 있다. 이때 이벤트 타입은 아래와 같이 사용될 수 있다. import { FormEvent } from "react"; export type FormEvents = FormEvent; export type InputEvent = FormEvent; export type LabelEvent = FormEvent; react에서 FormEvent 타입을 받아오고, 해당되는 element를 제네릭 타입으로 넣어주면 된다. onChangeHandler const [formData, setFormData] = .. 2023. 4. 13. Markdown 문법 정리 1. headers # 으로 시작하는 텍스트로 1-6개 가능 (h1 ~ h6) # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 2. 구분선 --- 이나 *** 를 통해 구분선 생성 가능 *** --- 3. 줄바꿈 줄을 바꿈 4. 강조 기울여쓰기(italic) : * 또는 _로 감싼 텍스트. 두껍게 쓰기(bold) : ** 또는 __로 감싹 텍스트 취소선 : ~~로 감싼 텍스트 _기울여쓰기 1_ *기울여쓰기 2* **두껍게 1** __두껍게 2__ 5. 인용 > 로 시작하는 텍스트로 >>>와 같이 3개까지 사용 가능 > 인용문 > > 3개까지 > > > 사용 가능 6. 리스트 리스트는 Tab을 통해 목록 안의 목록 생성 가능 순서가 없는 목록 *, +, -를 통해 순서가 없.. 2023. 3. 31. 이전 1 2 3 4 5 ··· 14 다음 728x90
