본문 바로가기

전체 글277

[React] React에서 레이아웃 만들 때 쓰는 JSX 문법 3가지 JSX 문법 1 : css를 주려할땐 class가 아닌 className -> css를 주려고 할 때, class가 아닌 className으로 해야 한다. -> 이유 : 저 공간은 원래 자바스크립트 코드 작성하는 공간이기 때문에 class라고 쓰면 자바스크립트 class 문법과 겹치기 때문에 className으로 해야 한다. JSX 문법 2 : 변수를 JSX 내에서 값 출력할땐 {}문법 -> href, id, className, src 등 여러가지 html 속성들에도 가능하다. -> 데이터 바인딩이라고 한다. JSX 문법 3 : className 말고도 style을 넣을때 style={}도 가능 -> style={{스타일명: 값}}으로 object 자료형으로 넣어야 한다. -> 스타일명은 카멜 케이스(C.. 2023. 12. 12.
[React] React 설치와 개발 환경 세팅 하기 1. https://nodejs.org/en에서 node.js LTS 버전 설치 2. vscode(visual studio code) 에디터 설치 3. 작업용 폴더 원하는 곳에 생성 후 Shift+우클릭 여기에 PowerShell 창 열기 클릭 4. 터미널에 npx create-react-app 프로젝트명 실행 5. vscode로 해당 폴더 열고 터미널에 npm start 실행하면 완료 2023. 12. 12.
JWT에 대해서 (구성 요소, 인증 절차 등) JWT(JSON Web Tokens)란? 두 개체에서 JSON 객체를 사용하여 가볍고 정보를 안전성 있게 전달하는 방식 JWT의 구성 요소 Header Payload(Claim) Signature Header { "alg": "HS256", // 사용된 해싱 알고리즘 "typ": "JWT" // 토큰의 유형 } Payload(Claim) { "sub": "1234567890", // subject, 토큰의 주제 (일반적으로 사용자 ID) "name": "John Doe", // 사용자 이름 "admin": true, // 관리자 여부 "iat": 1516239022 // 토큰 발급 시간 (issued at) } -> Payload(Claim)은 주로 세 가지 종류의 클레임으로 나뉜다. Registered.. 2023. 12. 12.
[AWS] Git Actions를 이용한 Lambda에 배포 자동화(CI/CD) 하는 방법 이전 글 참고 https://dongsu96.tistory.com/121 -> 수작업 배포를 해봤으니 git actions를 이용한 자동 배포 하는 법을 알아보자. 자동 배포 하는법) github에서 해당 repository 들어간 후에 actions 탭 클릭 name: Deploy sls app on: push: branches: - main jobs: deploy: runs-on: ubuntu-latest env: SERVERLESS_ACCESS_KEY: ${{ secrets.SERVERLESS_ACCESS_KEY }} AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCE.. 2023. 12. 12.
[AWS] Lambda에 수작업 배포 하는 방법 배포 하려는 작업 모두 개발을 완료하면, -> cmd창에서 원하는 경로로 이동 후 serverless(배포용) 실행 하면 배포할수있는 폴더가 만들어진다. 그 후 vscode로 생성된 폴더에 들어간 후, -> serverless.yml의 provider 부분에 runtime = aws lambda가 지원하는 언어와 버전 입력, region엔 aws에서 서울에 해당하는 값을 넣고 저장한다. 그 후에는, flask run으로 실행 Postman 실행 후 테스트 문제 없다면 터미널에 sls deploy 실행해서 배포 endpoint의 주소로 다시 Postman에서 실행 문제가 없다면 git repository(private) 생성 터미널에 git init 후 git remote add origin [해당 rep.. 2023. 12. 12.
[Restful API] [Error] Object of type Decimal is not JSON serializable 에러 해결 방법 Object of type Decimal is not JSON serializable -> (Decimal 유형의 객체는 JSON 직렬화가 가능하지 않습니다) 위 오류는 select 쿼리인 경우에, cursor에서 execute 후 cursor.fetchall()로 결과 리스트를 가져올 때 주로 발생했다. 결과리스트를 json 형식으로 클라이언트에게 보내야 하는데 그러기 위해선 데이터의 타입이 문자열이나 숫자여야 한다. datetime 타입이거나 decimal 타입일 경우 문자열이나 숫자타입으로 변환해서 클라이언트에게 보내야 한다. 해결 방법) i = 0 for row in result_list : result_list[i]["year"] = row["year"].isoformat() result_lis.. 2023. 12. 12.
[AWS] AWS의 Lambda에 배포 테스트하기 먼저, Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org (https://nodejs.org/en/) 들어가서 node.js 설치한다. 설치가 잘 되었는지 확인) -> cmd(명령 프롬프트)창 들어간 후 node 검색 후 저렇게 뜨면 설치가 잘 된것이다. -> npm install -g serverless 해서 serverless 프레임워크 설치한다. 그 후, AWS Credentials 만들기) -> AWS(https://aws.amazon.com) 들어가서 로그인 - 검색 창에 iam - 좌측 사용자 클릭 - 사용자 생성 클릭 - 사용자 이름 쓰고 다음 클릭 -> 직접 정책 연결 체크 후.. 2023. 12. 11.
[Restful API] Query String(Query Parameter) 페이징 처리하는 방법 -> Postman에서 URL의 query string 부분에 변수명=값&변수명=값 형식으로 쓰거나, Params 탭에 Key엔 변수명 Value엔 값을 넣어준다. 두 가지 방식 다 가능. @jwt_required() def get(self) : user_id = get_jwt_identity() # 쿼리스트링(쿼리 파라미터)에 있는 데이터를 받아온다. offset = request.args.get("offset") limit = request.args.get("limit") try : connection = get_connection() query = ''' select id, title, date, content from summary where userId = %s order by date asc .. 2023. 12. 8.
[Restful API] 로그아웃 API 만드는 방법 from resources.user import jwt_blocklist # 로그아웃된 토큰으로 요청하면, 실행되지 않게 처리하는 코드 @jwt.token_in_blocklist_loader def check_if_token_is_revoked(jwt_header, jwt_payload) : jti = jwt_payload['jti'] return jti in jwt_blocklist -> 첫 실행 파일인 app.py 파일에 작성한다. from flask_jwt_extended import get_jwt, jwt_required jwt_blocklist = set() class UserLogoutResource(Resource) : @jwt_required() def delete(self) : jti =.. 2023. 12. 7.
[Restful API] 로그인한 유저만 처리할 수 있는 API에 토큰 적용하는 방법 -> 로그인 API에서 로그인 시 JWT 토큰을 발급 받고 클라이언트에게 response 했을 때 모습이다 -> access_token 값을 복사한다. -> 그 후 Postman에서 Headers의 Key에는 Authorization을, Value에는 Bearer 복사한 토큰값을 적고 체크한다. from flask_jwt_extended import get_jwt_identity, jwt_required @jwt_required() def get(self) : user_id = get_jwt_identity() try : connection = get_connection() -> (일부만 빼낸 코드) -> @jwt_required() = jwt토큰이 Headers에 필수로 있어야 한다는 뜻이다. 토큰이 .. 2023. 12. 7.

티스토리툴바