WEB

[Spring Boot] TDD - JUnit?

JUnitJUnit은 Java의 표준 단위 테스트 프레임워크 입니다.JUnit은 어노테이션을 기반으로 테스트를 지원합니다.JUnit 5는 크게 Jupiter, Platform, Vintage 모듈로 구성됩니다. JUnit LifeCycle AnnotationJUnit은 아래와 같은 테스트 라이프 사이클을 가지고 있습니다.@Test  -  테스트용 메소드를 표현하는 어노테이션@BeforeEach  -  각 테스트 메소드가 시작되기 전에 실행되어야 하는 메소드를 표현@AfterEach  -  각 테스트 메소드가 시작된 후 실행되어야 하는 메소드를 표현@BeforeAll  -  테스트 시작 전에 실행되어야 하는 메소드를 표현 (static 처리 필요)@AfterAll  -  테스트 종료 후에 실행되어야 하는 ..

[Spring Boot] Spring Boot에서 TDD 방법론

이전에 스프링을 사용하여 개발을 진행했을 때는 테스트를 거의 하지 않았습니다.딱히 필요하다고 느끼지 못했습니다.하지만 많은 팀에서 채택하는 것을 보고TDD 방법론과 조금은 친해지면서 새롭게 시작할 프로젝트에는 적용해서 개발해보고 싶어졌습니다. TDD?먼저 TDD란??Test Driven Development, 테스트 주도 개발입니다.말 그대로 테스트 코드를 먼저 작성하고 테스트를 통과하기 위해 개발을 이어가는 방법입니다. Why TDD?그렇다면 TDD를 채택하는 이유는 무엇일까요?TDD의 장점은 다음과 같습니다.객체 지향적인 코드 개발, 설계 수정시간의 단축, 유지보수(리팩터링)의 용이성, 테스트 문서의 대체 가능 저는 이중에서 객체 지향적인 코드 개발, 유지보수의 용이성, 테스트 문서의 대체 가능이 세..

[FastAPI] Fast API 시작하기

설치 pip install fastapi pip install "uvicorn[standard]" 아래에 있는 uvicorn은 Fast API를 웹 서버에 올려주는 역할을 한다. 만약 CLI앱을 구현하고자 한다면 Typer를 설치하자. https://typer.tiangolo.com/ Typer Typer, build great CLIs. Easy to code. Based on Python type hints. typer.tiangolo.com 구현 main.py 파이썬 파일을 만들어보자. from fastapi import FastAPI app = FastAPI() @app.get("/") def read_root(): return {"Hello": "World"} 이러면 엔드포인트에대한 구현은 끝났..

[React - Trouble Shooting] state 값이 변경되지 않는 문제

이번 포스트에서는 state와 setState는 간단하게만 보고 넘어가자. 배경 지식 state state 값은 setState()를 통해서만 변경이 가능하다. setState useState로 만든 useState는 비동기적 특성을 갖는다!! 문제점 useEffect 훅 안에서 이벤트 리스너가 실행되면서 state 값이 변했다. 이 state 값이 의존성배열에 들어가있는 다른 useEffect 훅을 실행시켜 state 값을 확인해보면 값이 잘 나온다. 하지만 이벤트 리스너의 처리가 모두 끝나지 않았고, 변한 state 값을 통해 다른 로직이 실행되도록 구현되어 있었다. 여기서 문제가 발생한다!! 원인 앞서 말했듯이 React의 setState는 비동기적으로 실행된다. 정확히는 현재 setState는 이..

[Trouble Shooting] 미디어 스트림 오류 ->> TypeError: Cannot read properties of undefined (reading 'getUserMedia')

AWS S3에 React 클라이언트를 배포하고 테스트를 진행했다. const constraints = { audio: true, video: true }; navigator.mediaDevices.getUserMedia(constraints) .then((stream) => { setLocalStream(stream); }) .catch((error) => { console.error(error); }); 미디어 스트림 데이터를 localStream 에 저장하는 코드에서 오류가 생겼다. 미디어 스트림에 접근할 수 없었고, 이를 해결하기 위해서는 https로 ssl 인증서를 발급받아 적용시키는 법이 있었다. 하지만 이거슨.... 이 프로젝트의 목적은 상용화가 아니기 때문에 다음 방법을 사용했다. 해결 방법..

[Trouble Shooting] CORS 에러 ->> The request client is not a secure context and the resource is in more-private address space `private`.

React 클라이언트를 AWS S3에 배포하면서 로컬 상황에서는 없었던 CORS 오류가 생겼다. 서버에 CORS 허용 헤더를 넣었지만 생기는 오류이다. 브라우저 설정을 통해 해결할 수 있다. ( 크롬 ) chrome://flags/#block-insecure-private-network-requests 이 설정을 disabled 해준다.

[React - Trouble Shooting] 불필요한 렌더링으로 인한 문제

하나의 페이지에 속해있는 컴포넌트에서 서버에 소켓 통신을 보내는 코드를 구현했다. 하지만 서버에 한 번의 소켓 연결이 이루어지는 것이 아니라 여러번의 연결이 이루어졌다. 불필요한 렌더링이 일어난 것이다. 이렇게 연결이 여러번 이루어지면서 서버에서는 여러 클라이언트가 연결되었다는 것으로 인식한다. 어떻게 해결할 수 있을까? 렌더링 자체를 제어할 수 있는 방법도 있지만 이번에는 그런 방법이 아니다. useEffect 훅을 사용할 수 있다. useEffect(() => { // 부수 효과 작업을 수행하는 콜백 함수 // ... return () => { // 정리(clean-up) 함수 // 컴포넌트가 언마운트되거나 의존성이 변경될 때 호출됨 // ... }; }, [/* 의존성 배열 */]); 의존성 배열 ..

[Web] WebRTC를 활용한 화상통화 서비스의 서버 구성

WebRTC를 사용해서 1:1 화상통화 서비스가 포함된 프로젝트를 진행중이다. 이 때 필요한 서버는 1. Signaling Server 2. STUN Server 3. TURN Server 만약 1:1 방식의 화상통화가 아닌 1:N 혹은 N:M 방식이라면 Media Server를 추가하는 것이 좋다. Signaling Server 양쪽의 클라이언트를 연결시켜주는 역할을 하는 서버이다. 각 클라이언트들의 연결을 위해서는 먼저 정보의 전달이 필요한데, 이 정보를 SDP(Session Description Protocol)이라 하고 Siganling Server가 이 정보를 중계해주는 역할을 한다. Spring Boot를 사용한다면 일반적으로 WebSocket을 사용하여 통신하게 된다. 그 순서를 알아보면 1..