무료 요금제에선 하나의 개인 저장소만 사용할 수 있음.Public ⇒ 누구나 다운로드 할 수 있음.(보안 관련 데이터나 개인정보가 유출되지 않도록 주의해야 함) 개인 저장소 생성 완료.아직 push 한 것이 없으므로, 비어있음. 터미널에 command를 입력하면 위와 같이 이미지가 로컬에 존재하지 않는 저장소를 참조하고 있다는 에러가 나온다. 위를 해결하기 위해선 이미지에 node-hello-world라고 이름을 지정해주면 된다. 즉, 우리가 업로드하려는 이미지를 도커 허브에 푸시하는 이미지로 바꾸면 된다.방법은 2가지인데, 1. 새로 빌드하기 docker build -t 도커 레포지토리 이름/node-hello-world .2. 존재하는 이미지를 재사용하기(이름 다시 붙이기!) ..
축구팀 관리 프로젝트에서 토너먼트를 구현중에 있다.토너먼트의 경우 선착순으로 입력을 받도록 구현했다. 여기서 걸리는 부분은 동시성 문제였다. 여러 사람이 동시에 신청을 하게되면 다음과 같은 문제가 생길 것 같았다. 1. 동시에 참가하는 경우 - 두 팀이 거의 동시에 신청을 하고, 토너먼트에 자리가 하나만 남아있다면, 신청된 팀의 수가 토너먼트 참가 제한 수보다 많아질 수 있다. 2. 동시에 취소하는 경우- 동시에 여러 팀이 참가를 취소하는 경우, 참가 팀의 수가 올바르게 바뀌지 않을 수 있다. 3. 동시에 토너먼트 정보 수정- 현재 우린 어드민만 수정을 할 수 있도록 변경했다. 만약 여러 어드민이 토너먼트 정보를 수정할 경우, 마지막 쓰기만반영이 되고, 이전 수정 사항은 무시될 수 있다. 동시성 문제를 ..
에러가 발생하면 Slack으로 알림이 가도록 Slack WebHooks를 설정했다.잘 되고 있었는데, 어느 순간부터Error: An HTTP protocol error occurred: statusCode = 403에러가 발생했다. `HTTP 403` 에러는 서버가 요청을 이해했지만, 접근 권한이 없을 때 발생하는 에러이다. Slack Webhook URL이 잘못되었을 가능성이 있기에, 확인을 해보았다. 먼저 아래와 같은 순서로 클릭한다. 그럼 다음과 같은 페이지로 이동하는데 설치 된 앱이 없는 것을 볼 수 있다. 아무 앱도 설치되지 않은 것을 볼 수 있다. Incomming WebHooks를 검색하고, 슬랙에 추가하면 된다. 내가 알림을 주고 싶은 채널을 선택하고, Add를 클릭! 위와 같이 Webh..
채팅을 구현하는 도중 문제가 생겼다.한글을 입력하면 한글 끝이 2번씩 입력되는 현상이 있었다.영어나 특수문자를 입력하면 한번만 입력이 되는데, 한글만 입력하면 글자가 2번 입력되는 현상이었다. 먼저 문제의 원인은 한글이 조합문자라는 것이었다. 한글을 입력하면 마지막 글자 아래 검정색 줄이 있는것을 볼 수 있다.한글을 제외한 경우밑줄이 없는 것을 볼 수 있다. 해당 문제는 IME composition 때문에 발생한다.IME란 한글, 중국어, 일본어 등 언어를 브라우저에서 지원하도록 언어를 변환하는 OS 단계의 어플리케이션이다.IME를 하는 중 keydown 이벤트가 발생하면 OS와 브라우저에서 이벤트를 모두 처리하기에 keydown이 중복으로 발생한다.즉, 비영어권 언어를 표현하는 과정에서 이 값은 t..
아래 글로 리뉴얼 되었습니다.https://securityinit.tistory.com/248 토큰을 재발급 받는 로직은 다음과 같다.백엔드에선 단순히 토큰을 던져주고, 토큰 재발급을 위한 엔드포인트를 만들어주기만 하면 됐다.프론트에선 꽤 많은 어려움이 있었다.리액트에서 axios를 활용해 토큰을 재발급 받는 로직을 작성했다. axios엔 interceptors가 있다.axios의 intercpetors는 then 또는 catch로 우리 응답이 처리되기 전에 요청과 응답을 가로챌 수 있도록 해준다.현재 우리는 accessToken 관련 에러가 발생했을 때 catch로 처리되기 전, 가로채 accessToken을 재발급 받은 뒤 다시 요청을 보내려 한다. axios.interceptors.response...
아래 글로 리뉴얼 되었습니다.https://securityinit.tistory.com/248 React 에서 로그인을 관리하는 방법이번 프로젝트에서 프론트엔드로 리액트를 선택했다.리액트는 처음이었기에 많은 어려움을 겪었다.오늘은 그 중 로그인 관리를 어떻게 하고 있는지 적어보려 한다.인증을 jwt 토큰을 활용하기로 했고, 로그인에 성공하면 백엔드에서 accessToken을 보내준다.프론트엔드에서 로그인을 유지하기 위한 방법을 생각해봤다.백엔드에서 accessToken을 받았다면 로그인에 성공한 것으로 간주해, “로그인 성공 상태”를 저장한다.받은 AccessToken을 local stroage에 저장한다.추후 로그인이 필요한 요청을 보낼 땐 local Storage에 저장되어 있는 accessToken..
Documentation | NestJS - A progressive Node.js frameworkNest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Readocs.nestjs.com Pipe란?Pipe란 @Injectable() 로 데코레이팅된 클래스로, PipeTransform 인터페이스를 impleme..
To Do(버전 및 환경 정리하기!)1. resource 생성** app.module.ts에 AuthModule이 잘 추가됐는지 확인해야함!(아래와 비슷한 느낌으로!)import { Module } from '@nestjs/common';import { AppController } from './app.controller';import { AppService } from './app.service';import { TypeOrmModule } from '@nestjs/typeorm';import { AuthModule } from './auth/auth.module';@Module({ imports: [ TypeOrmModule.forRoot({ ... }), AuthModule,..
펫시터 프로젝트를 진행하면서 이메일 인증을 통한 회원가입을 구현했다.심심한 회원가입을 좀 더 특별하게 만들어주고 싶었기에 시작했다.먼저 사용자에게 mail을 보내야하기에 Nodemailer 모듈을 사용했다. Nodemailer :: NodemailerNodemailer Nodemailer is a module for Node.js applications to allow easy as cake email sending. The project got started back in 2010 when there was no sane option to send email messages, today it is the solution most Node.js users turn to by default. npm i..
1. 실행시킬 프로그램이 있는 폴더로 이동 2. pm2 설치npm install pm2@latest -g (babel을 사용하고 있다면 https://securityinit.tistory.com/149 참고해서 스크립트 변경하기) 3. pm2로 실행하기pm2 --name api-server start npm -- run dev --watch 4. pm2 startup 명령어를 통해 재부팅돼도 프로그램이 자동으로 실행되도록 설정pm2 startup 5. command 복붙하기 6. pm2 save 명령어를 통해 현재 상태 동기화- 만약 서버가 재부팅되어도 실행되고 있던 상태를 그대로 유지하는 명령어 성공!
1 . EC2 들어가기 2 . 로드밸런서 클릭 3 . 로드 밸런서 생성 클릭 4 . 사용 용도에 맞게 클릭우린 http/https를 사용할 것이므로 Application Load Balancer 클릭.\ 5. 값 입력 *** 새로운 보안 그룹 생성하기 ***새로운 AWS 창을 띄우고 EC2 들어간 뒤 보안 그룹 생성 설명을 입력하지 않으면 보안그룹 생성이 안되므로, 입력해주기. 인바운드 규칙 설정 보안 그룹 생성 클릭 *** 새로운 보안 그룹 생성하기 끝*** 대상 그룹 생성 선택 필요에 따라 대상 유형 선택 개발 시 연결한 포트 입력 다시 로드밸런서로 돌아가서... 로드밸런서 클릭하기. EC2 로드밸런싱 메뉴의 대상그룹으로 이동. 클릭하면 성공! Ec2 로드 밸런싱 / 로드밸런서에 들어가 확인하고 ..
function sameFrequency(str) { let strObj = {}; for (let i of str) { strObj[i] = (strObj[i] || 0) + 1; } return strObj;} 은근히 문자열 요소의 빈도수를 활용하는 문제가 많이 나와서 따로 정리!
await User.findOnd({id}).exec()위와 같은 코드를 보았다. .exec()이 없어도 결과는 똑같았는데 왜 exec()을 사용하는지 궁금해 공식문서를 찾아보았다. 몽구스 오퍼레이터인 .save()와 queries는 thenables한 값을 리턴해준다고 나와있다..then() 을 사용할 수 있다는 뜻인데, 마치 프로미스처럼 보인다. .save()는 promise를 리턴한다. 그러나 query는 프로미스를 리턴하지 않는다. 갑자기 query는 뭐지? 라는 생각이 들 수 있다.Model.findById() 위 메서드는 몽구스를 사용한다면 정말 많이 쓰게 되는 메서드이다. Return이 Query 임을 볼 수 있다. 공식 문서를 보면 query는 프로미스가 아니지만, async/awa..
