일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 자바스크립트
- e.stopPropagation()
- mysqlclient
- 카카오 로그인
- code-server
- React
- s3
- ci/cd
- riotapi
- 배포
- route53
- AWS
- typeorm
- docker
- 전역스타일
- Python
- Github Actions
- nestjs
- ACM
- styled-component
- e.preventDefault()
- Recoil
- liunx
- Django
- 리액트
- CloudFront
- GlobalStyle
- Object.freeze()
- requests
- 롤
- Today
- Total
목록웹 개발/백엔드 (9)
군붕이의 메모장
여러명이서 프로젝트를 진행하다보면 환경변수 관리가 불편해진다. 이 때 도입할수 있는 방식이 AWS에서 제공하는 Parameter Store 이다. Parameter Store를 사용하면 환경변수를 관리를 중앙화 할 수 있다. ● AWS Parameter Store 우선 AWS 공식문서에 따르면 아래와 같은 서비스로 소개하고있다. AWS Systems Manager의 기능인 Parameter Store는 구성 데이터 관리 및 암호 관리를 위한 안전한 계층적 스토리지를 제공합니다. 이러한 서비스를 통해서 중요한 데이터를 중앙화하여 관리가 가능하다. https://docs.aws.amazon.com/ko_kr/systems-manager/latest/userguide/systems-manager-paramet..
● Nest.js의 body-parser Nest.js의 경우 기본적으로 bodyparser 라이브러리를 사용해서 json 데이터를 변환한다. nest new [name]을 통해서 nestjs 프로젝트를 생성하면 아래 사진처럼 node_modules 내부에 bodyparser가 설치되어있다. 자바스크립트는 기본적으로 UTF 인코딩을 지원하기때문에 실제 bodyparser 내부를 들여다보면 UTF를 제외한 인코딩 방식은 에러로 처리하는것을 확인할 수 있다. body-parser/lib/types/json.js // assert charset per RFC 7159 sec 8.1 var charset = getCharset(req) || 'utf-8' if (charset.slice(0, 4) !== 'ut..
실제 배포된 프로덕션 환경에서는 일반 유저가 API 문서에 접근하면 보안적인 문제가 발생할수 있다. API 문서에 접근하는것을 차단하기위해서 로그인, 토큰인증 등 다양한 방법이 존재한다. 그 중에서도 아주 간단하게 express-basic-auth를 활용한 로그인된 유저에게만 API 문서에 접근권한 부여가 가능하다. 해당 라이브러리 이외에 요구사항에 따라 미들웨어를 제작해서 /api 요청에 대한 접근 컨트롤이 가능할것이다. ● express-basic-auth 설치 npm i express-basic-auth ● express-basic-auth 활성화 import * as expressBasicAuth from 'express-basic-auth'; async function bootstrap() { ..
● Nest.js 에서 로그인 구현하기 Nest.js의 경우 일반적으로 인증을 처리할 때 Passport 미들웨어를 사용하여 구현한다. ● Passport 란? Passport는 Local, Oauth, Jwt 등을 다양하게 지원해주는 Node.js용 인증 미들웨어 이다. 보통 로그인 전략(Strategy)과 가드(Guard)를 생성하여 처리한다. Passport : https://www.passportjs.org/ Passport.js Simple, unobtrusive authentication for Node.js www.passportjs.org ● 필요한 패키지 우선 필요한 패키지는 아래와 같다. @nestjs/passport : nest.js에서 passport를 사용하기 위한 패키지 pass..
● AWS IAM 유저 추가하기 우선 AWS 콘솔에서 iam을 검색해서 들어가준다 좌측 사용자를 누르고 사용자 추가를 눌러준다 사용자 이름을 적절하게 지정해준다 다음 권한설정에서 "직접 정책 연결" 을 눌러주고 "s3" 를 검색해서 "AmazonS3FullAccess" 를 선택한다 사용자 생성 이후에 해당 사용자를 눌러준다. 보안 자격 증명 탭에서 사용자에 대한 Access key를 생성해준다. 사용할 환경에 체크하면 되며 우선 나는 기타로 체크했다. 설명 태그를 적절하게 작성해준다 유저에 대한 액세스 키가 발급된다. 해당 키는 외부에 노출되지 않도록 주의하자 ● AWS S3 버킷 생성하기 IAM과 마찬가지로 AWS 콘솔에서 S3를 검색하여 들어간뒤 버킷 생성을 눌러주면 된다. 적당한 버킷이름과 AWS ..
Django 에서 DB로 Mysql을 사용하려면 mysqlclient 가 필요하다. pip install mysqlclient 하지만 위 명령어를 입력하고나면 쉘에서 OSError 와 함께 에러가 발생한다. 이때 에러를 해결하려면 아래 패키지를 설치해주면 된다. # Debian, Ubuntu 계열 sudo apt-get install python3-dev default-libmysqlclient-dev build-essential # Redhat, CentOS 계열 sudo yum install python3-devel mysql-devel 그리고 나서 pip install mysqlclient 를 실행하면 정상적으로 설치가 진행된다. 출처 : https://stackoverflow.com/questio..
● 증상 위 코드처럼 DTL 태그를 사용하여 이미지를 불러오는 코드를 작성했다. 하지만 화면에서 사진이 깨지는것으로 보여 개발자도구를 확인하니 아래처럼 출력되었다. ● 해결방법 위 처럼 {{ match.master.perk_2 }} 가 encode 되버리는 것은 static 태그 내에는 변수가 존재할 수 없기 때문이다. 그래서 static 태그 내에서 변수를 활용할려면 아래 예제처럼 {% get_static_prefix %}/경로/파일명.확장자 를 입력해줘야 한다.
디렉토리 구조 ├─django_noobgg │ └─__pycache__ ├─static │ └─summonor │ ├─css │ └─js ├─summonor │ ├─migrations │ │ └─__pycache__ │ └─__pycache__ └─templates └─summonor settings.py import os # static 폴더의 최상위 URL 경로 - noob.gg/static/ STATIC_URL = '/static/' # static 파일이 위치한 경로를 지정 STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ] index.html {% load static %} Welcome to Noob.GG script.js let h1 = do..