전체 글

세상을 선하게 바꾸는 노력을 합니다
· DEV/Backend
로그인 방식의 분류 로그인(인증) 방식은 크게 토큰 방식과 세션 방식으로 구현 된다 세션 방식(Session) 세션은 시스템 관리자가 일정 기간 서비스를 이용하는 것을 허락하는 구조이다. 세션 동안 사용자는 허락된 범위 안에서 서비스 자원 사용이 가능하다 세션 기반 인증에서는 서버는 사용자가 로그인하면, 사용자를 위한 세션을 생성한다 세션 ID는 사용자 브라우저 쿠키에 저장되어, 세션 유지하는 동안 사용자는 저장된 세션 ID와 요청을 서버에게 전송한다. 서버는 전송된 된 세션 ID와 메모리에 저장된 세션 정보를 비교하여 사용자의 신원을 확인 후 응답한다 토큰 방식(token) 토큰은 사용자가 자신을 인증하고, 고유한 액세스 토큰을 받는다. 해당 토큰은 웹페이지나 앱 등에 저장되어 토큰이 유효한 동안 자격..
· DEV/Backend
What is JWT(Json Web Token) JWT는 Peer 간 JSON 개체를 안전하게 전송하기 위한 개방형 표준이다. JWT 사용의 핵심은 Peer 간의 비밀성을 제공할 수도 있지만, 서명된 토큰을 제공한다는 것에 있다. 서명된 토큰은 그 자체로 무결성을 확인할 수 있기 때문이다. 공개/개인 키 쌍을 사용하여 토근에 서명할 때 서명 된 토큰은 당사자를 인증 할 수 있다 JWT 형식 JWT의 토근 구조는 .으로 구분된 세 부분이다. Header Payload Signature Header에는 토큰의 타입이 JWT인지, 어떤 알고리즘으로 암/복호화가 되는지를 알려준다 Payload에는 암호화 된 데이터 가 들어간다. Payload는 Base64로 인코딩 된다 Signature는 secret 등이 ..
· DEV/Backend
TypeORM Releation 다루기 기본적인 사용 방법 import { Entity, PrimaryGeneratedColumn, Column, ManyToOne } from "typeorm" import { User } from "./User" @Entity() export class Photo { @PrimaryGeneratedColumn() id: number @Column() url: string @ManyToOne(() => User, (user) => user.photos) user: User } 관계는 @ManyToOne, @ManyToMany, @OneToMany처럼 어노테이션으로 join 하는 컬럼을 선언한다 관계를 표현하는 기준은 자기 자신이다. 즉 Many(현재 Entity) To ..
· DEV/Backend
MySQL 설치 맥북 처음 사고 MySQL 설치 했다가 삭제 한 후 재설치 과정에서 겪은 에러 및 설치 방법을 기록 합니다 MySQL 설치 : brew install mysql MySQL DB Serveer 시작 : mysql.server start MySQL Server 자동 시작 : brew services start mysql MySQL root 계정 접속 : mysql -u root MySQL 서버 중지 : brew serivces stop mysql MySQL 서비즈 중지 확인 : `brew serivces MySQL 삭제 : brew uninstall mysql MySQL 삭제 확인 : brew services list 에러가 계속 발생하면 그냥 맘 편하게 지웠다가 다시 설치하자 Error E..
· DEV/Backend
향후 지식이 쌓여 감에 따라 수정 및 보완 할 예정입니다 잘못된 점이 있다면 댓글로 알려주시면 감사하겠습니다 TypeORM TypeORM은 javascript 진영에서 사용할 수 있는 ORM이다. TypeORM의 장점은 현재 존재하는 다른 모든 Javascript ORM과 달리 Active Record 및 Data Mapper 패턴을 모두 지원한다는 점에 있다 ORM이라 함은 Object Relational Mapping 즉 객체 관계 맵핑 객체와 관계형 데이터베이스를 맵핑해준다 개발자 입장에서 프로그래밍 언어를 통해 간접적으로 데이터베이스를 다룰 수 있고, 재사용 유지보수에 용이하다 프로젝트에 typeorm은 추가하는 명령어는 아래와 같다 yarn add typeorm 특징 어노테이션 기능 import..
· DEV/Backend
tsconfig.path.json에서 절대 경로를 명시해줬음에도 불구하고 경로를 인식하지 못하는 상황을 마주 했다 api 와 routes를 왜 인식하지 못했는지 기록하려 한다! 해결 방법 언어에 대한 이해도가 부족해서 생긴 문제였다 타입스크립트에서 모듈 import를 하려면, export를 해줘야 하는데 해주지 않았기 때문이다 그냥 export default 하면 바로 경로를 인식해 온다. 지식 보충 Export 와 Export Default 의 차이는 무엇인가 export는 js 모듈에서 함수, 객체, 원시 값을 내보 낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 imort 문으로 가져가 사용할 수 있습니다 크게 export 방식은 2가지로 나누어집니다. named와 default이죠 named 방..
· DEV
Nodemon 사용 방법 nodemon은 노드가 실행하는 파일이 속한 디렉터리를 감시하고 있다가 파일이 수정되면 자동으로 노드 애플리케이션을 재시작한다. 즉 개발자 입장에서 재시작 없이 코드를 자동 반영 할 수 있다 nodemon 설치 yarn add nodemon nodemon 설정 root 디렉터리에 nodemon.json을 만들고, 아래 스크립트를 입력한다. { "watch": ["src"], "ext": "ts,json", "ignore": ["src/dev.ts"], "exec": "ts-node -r tsconfig-paths/register ./src/index.ts", "env": { "PORT": "4000" } } exec : 실제 실행 명령어 ext : 파일 변경을 감지할 확장자 ig..
· DEV
Cross-env는 무엇인가 cross-env는 환경 변수를 설정하는 도구입니다. 이 도구의 주요 목적은 운영 체제 간의 환경 변수 설정에 대한 일관성을 제공하는 것입니다. 다양한 플랫폼에서 실행되는 Node.js 프로젝트의 경우, cross-env는 환경 변수를 설정하는 데 도움이 됩니다. 예를 들어, Windows와 macOS, Linux에서 실행되는 프로젝트에서 동일한 환경 변수를 사용할 수 있도록 합니다. Cross-env 설치 방법 yarn add cross-env { "scripts": { "local": "cross-env NODE_ENV=local nodemon", "dev": "cross-env NODE_ENV=development nodemon", "prod": "cross-env NO..
· DEV/Frontend
문제 상황 Box 컴포넌트 출력은 되는데 Each child in a list should hava a unique “key” prop. 에러가 발생 했다 해결 방안 해결 방안은 단순하다. li 컴포너트에서 unique한 키 값을 원하는데 아래 코드로 생성할 경우 unique한 키 값이 없다. 아래와 같이 들어오는 데이터의 index 등으로 key 값을 만들면 문제 해결! {products.map((value, index) => { return {value.brand}; })}
· DEV/Frontend
React(리액트)란 2011년 페이스 북에 의해 만들어졌다. 2013년들어 페이스북이 리액트가 오픈 소스화 되고, 시간이 흐르면 리액트 네이티브도 오픈소스가 되었다 또한 componecnt-centric approach에 개발자들이 열광하기 시작하며 요즘은 모르는 사람을 찾기 어렵다 왜 리액트를 사용해야 하나 리액트는 유연하다! 리액트 하나 배우면 여러 플랫폼에 걸쳐서 인터페이스를 개발 할 수 있다. 또한 리액트는 컴포넌트 기반 웹 개발을 목적으로 만들어 졌기 때문에 리액트 컴포넌트는 무엇이든 될 수 있다. 리액트가 유명해지며 생태계가 넓어진 것도 한 몫하였다! 뜨거운 커뮤니티 커뮤니티가 활성화 되어 있고, 많은 사람들이 쓰다보니까 레퍼런스나 관련 라이브러리 등이 많다 레퍼런스 freeCodeCamp
berom
봄수의 연구실