분류 전체보기 (81) 썸네일형 리스트형 헤드퍼스트 디자인패턴 - 커맨드패턴 요청 리시버 Light.javapackage ch01.sec01; // 리시버 public class Light { String location =""; public Light(){ this.location = location; } public void on() { System.out.println(location + " light is on"); } } 커맨더 인터페이스 package ch01.sec01; public interface Command { public void excute(); } 커맨더 인터페이스를 구현한 "LightOnCommand" 클래스가 가지고 있는 "execute()" 메서드 내에서 "Light" 객체의 메서드를 호출하고 있다. 이렇게 "execute()" 메서드 내에서 호출되.. FASTAPI OAUTH2.0 인증, 인코딩 디코딩을 통한 JWT 생성과 검증, 리프레시 토큰 생성 먼저 OAUTH2.0인증을 위한 변수를 만든다.# 엑세스 토큰검증을 위한 의존성 주입 oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token") jwt를 생성하는데는 헤더.페이로드.시그니처가 필요하다 헤더는 자동으로 생성된다 { "alg": "HS256", "typ": "JWT" } 페이로드는 서비스에서 공통적으로 사용하는 클레임으로, 만료시간 exp를 설정했다. 그리고 시그니처는 jwt.encode함수안에 자동으로 생성된 헤더(알고리즘 HS256)와 사용자 정보가 담긴 페이로드, 시크릿키를 합쳐져서 만들어진다 = 헤더+ 페이로드+ 시크릿키 인코딩(Encode) 과정에서는 사용자 정보가 담긴 데이터 페이로드와 클레임을(여기서 토큰 만료시간을 나타내는 exp를 설정).. FASTAPI 정적 토큰헤더를 통한 인증 동적토큰 JWT가 아닌 정적토큰 X-Token에 고정된 값을 사용하여 토큰헤더인증을 구현해 보겠다. POST, PATCH, GET에 대한 토큰 헤더를 넣음으로써 토큰헤더인증을 통해 요청을 완료한다. 1. 토큰 생성 fake_secret_token = "hongsun" 2. 질문생성 POST요청 # 질문 생성 @app.post("/questions/", response_model=QuestionCreate) async def create_question(question: QuestionCreate, x_token: Annotated[str,Header()]): if x_token != fake_secret_token: raise HTTPException(status_code=400, detail="유효하지.. FASTAPI와 mongoDB ODM을 활용한 CRUD , SEARCH 엔드포인트 구축 fastapi엔드포인트에 mongodb 비동기 ODM으로 사용할 beanie CRUD 구축 1. Question모델의 answers필드가 Answer의 모델을 참조하고 빈객체를 넣어 질문에 답변들을 달수 있게 구성하였다. # 모델 정의 class Answer(Document): id:str content: str class Question(Document): id:str title: str description: str answers: List[Answer] = [] 1-1. pydantic의 BaseModel을 상속받아 데이터 유효성검사를 위해 모델의 스키마를 정의한다. 생성스키마, 업데이트 스키마를 따로 구분하였다. 여기서 스키마란 데이터의 구조와 명세를 의미한다. # Pydantic을 이용한 질문,.. 리액트 노드 socket.io를 활용한 실시간 영화예매시스템 구축 서버에서 socket.emit 이벤트함수를 발신하고 클라이언트에서 이벤트를 발생시켜 socket.on 함수로 수신하면 실시간으로 양방향 통신이 가능하다. server.jsio.on("connection", (socket) => { console.log("A user connected"); // 클라이언트가 'requestData' 이벤트를 보내면 데이터베이스 조회 socket.on("requestData", () => { const query = "SELECT * FROM seats"; // 데이터베이스 조회 실행 db.query(query, (err, results) => { if (err) { // 에러가 있다면 클라이언트에 에러 전송 socket.emit("dataResponse", { status.. react-query 실무 백엔드에 저장된 데이터를 변경하면 Tanstack쿼리는 자동으로 변경이 이루어진다. 리액트쿼리는 응답 데이터를 캐시 처리한다 이전 useEffect와 fetch를 이용할때는 새요청을 전송해서 모든 데이터를 다시 가져왔어야 했는데(화면에 로딩 스피너가 뜨면서 1초후에 데이터를 보여준다.) 리액트 쿼리를 사용하면 그전에 했던 수고를 덜고 데이터를 즉각적으로 제공되면서 로딩중 로딩 스피너가 뜨지 않고 바로바로보여준다. slow 3g로 설정을 하고 화면에는 업데이트된 데이터가 즉각 표시된다. import { useRef, useState } from "react"; import { useQuery } from "@tanstack/react-query"; import { fetchEvents } from "../.. 리액트 불필요한 랜더링 방지 1. 변경전 const AdditonalInfo = () => { return Some Information }; const Component1 = ({count, setCount}) => { return ( {count} {() => setCount((c) => c+1)} Increment Count1 ); }; const Component2 = ({ count, setCount }) => { return ( {count} setCount((c) => c + 1)}>Increment Count2 ); }; const Parent = () => { const [count, setCount] = useState(0); return ( ); }; 버튼 카운트가 발생할때 마다 AdditonalInfo컴포넌트도.. 장고(DRF) + 리액트 REACT.JS 포트폴리오 2 이전에 이어지는 내용들입니다. https://devttaemppang.tistory.com/2 장고(DRF) + 리액트 REACT.JS 포트폴리오 1백엔드 Django rest framework + 프론트 React.js 그리고 디자인은 부트스트랩5를 사용하여 서점 사이트를 구현해 보았다. 또 찜하기 기능도 만들어보았다 (Context API를 통해 전역 값으로 데이터를 뿌려주devttaemppang.tistory.com 장고 API 데이터 요청을 리액트 비동기로 받아오려면 async-await를 사용해야하고 try-catch로 묶어줘야 에러핸들링이 되면서 콘솔로 에러원인을 파악할 수 있다. 상세페이지 동영상 이전 1 2 3 4 5 6 ··· 11 다음
