# client

132개의 포스트
post-thumbnail

[vscode extension] Rest Client 사용법

오늘은 간단한 API 테스트 툴 사용법을 한 번 설명해볼까 합니다! 저는 개발하면서 필요한 거의 모든 작업을 vscode에서 해결하려는 경향이 있어요. API 테스트도 원래는 postman을 썼었는데, 찾아보니 vscode에서도 Rest Client를 쓰면 api 요청을 날릴 수 있더라구요.. 직접 써본 소감을 말하자면 > 자주 쓰는 api들을 vscode에 같이 두고 코드로 관리할 수 있는데다 요청 하나 날리려고 창 이동 안해도되서 저는 너무 편했어요. 아니 Rest Client가 나온지 한참 됐는데 너무 뒷북 치는거 아니야?? 라고 생각하실 수도 있는데 인터넷에 사용법 검색해보면 다들 그냥 GET 요청 하나 날려놓고 끝내셨더라구요,, 그것 때문에 사용법이 되게 쉬운데도 겁먹고 안 쓰시려는 분들이 계신것 같았어요. 그래서 오늘은 제가 어떻게 쓰고 있는지 한 번 공유하고싶어서 글을 써봅니다! 1. Rest Client 설치 ![](https://vel

약 6시간 전
·
0개의 댓글
·
post-thumbnail

React + Spring Boot + MySQL (13)

Login 기능 구현 Controller/AuthController AuthController에 login 메서드를 추가해준다 LoginDto와 LoginResponseDto를 구현해보자 Dto/LoginDto Dto/LoginResponseDto Service/AuthService Service를 구현하기 전에 LoginDto는 필수로 아이디와 비밀번호를 받아야 하기 때문에 build.gradle에 들어가서 dependencies를 추가하겠다 를 추가해준다 validation을 추가했다면 LoginDto의 userEmail, userPassword 값을 @NotBlank로 지정해서 필수 값으로 지정해준다 UserRepository에

약 7시간 전
·
0개의 댓글
·

[게임 서버] 몬스터 AI

몬스터 AI 싱글플레이게임에서의 몬스터 AI는 몬스터의 기능에 대한 연산을 몬스터 GameObject의 컴포넌트로 붙여 현재 상태를 계산함으로 구현할 수 있다. 스킬쿨타임이나 애니메이션같은 경우 코루틴을 이용한 시간계산으로 구현하였는데 온라인게임같은 경우 서버로부터 몬스터의 상태에 대한 패킷을 클라이언트에게 전송해 몬스터의 상태를 받은 클라이언트는 그저 랜더링만 하면 된다. > 싱클플레이게임의 몬스터 AI는 유니티시리즈에서 다루었다. 1. Update 몬스터의 상태변화나 판정은 플레이어 공격의 투사체를 구현했을 때와

2023년 9월 3일
·
0개의 댓글
·

[게임 서버] 플레이어 상태변화

플레이어 상태 플레이어의 상태정보는 서버가 가지고 있고 클라이언트는 서버로부터 상태정보를 받아 화면에 표시하는 구조를 가진다. 플레이어의 상태로는 플레이어의 위치, 체력, 마나와 같은 정보나 스텟과 관련된 정보가 될 수 있다. 서버에서는 플레이어의 정보를 Character와 같은 객체로 만들어 나타낼 수 있고 데미지를 받거나 버프를 받는상황 죽는 상황에 대한 반응을 함수로 나타낼 수 있다. 1. 패킷 서버는 클라이언트에게 '상태를 변화시키는 패킷'이나 '플레이어가 죽었음을 알리는 패킷'과 같은 상태변화를 알리는 패킷을 보내야 한다. 하지만, '~한 상태로 바꿔라'라는 패킷은

2023년 9월 1일
·
0개의 댓글
·

[게임 서버] 플레이어 공격

플레이어 공격 멀티게임에서 플레이어 공격을 구현할 때 어디까지 클라이언트가 담당하고 서버가 어디까지 처리해야 안정적인 공격환경을 만들 수 있을까? 가장 이상적인 방법은 클라이언트를 완전히 신뢰하고 클라이언트가 보낸 정보를 바탕으로 서버에서 처리하는 방법일 것이다. 하지만 서버는 클라이언트를 항상 의심해야 한다. 클라이언트가 보낸 정보(패킷)가 조작된것일수도 있다. 그렇기 때문에 서버는 플레이어들의 정보를 항상 가지고 있어야 하며 플레이어가 각자 가지고 있는 자신만의 정보와 동기화가 되어 있어야 한다. 플레이어의 공격을 구현할 때는 플레이어 이동을 구현할 때와 달리 서버에게 공격 요청을 보내고 서버가 공격을 허용하면 클라이언트가 공격 모션을 취하는 방식을 사용한다. 아래 그림은 PlayerA가 공격을 하는 상황을 나타낸 그림이며 PlayerA가 받는 OK응답에도 애니메이션을 재생하라는 정보가 포함되어 있다. <img src="http

2023년 8월 31일
·
0개의 댓글
·

[게임 서버] 플레이어 이동

플레이어 이동 이동기능을 구현할 때 나의 이동방식과 다른 사람의 이동방식은 비슷하지만 다른 사람의 이동방식은 서버의 정보를 바탕으로 움직인다는 것이 다른점이다. 만약, 싱글게임을 먼저 구현한 후 멀티게임으로 이식하는 과정을 거친다면 플레이어 이동을 구현하기 위해 가장 먼저 해야할 일은 나와 다른 플레이어를 구분하는 것이다. 내 플레이어의 이동방식은 주로 사용자의 입력값이다. 게임의 종류에 따라 다르겠지만 FPS의 경우는 WASD일 것이고 RPG인 경우는 마우스, 방향기가 이동을 위한 입력값이 될 것이다. 1. 패킷 이동을 위한 패킷을 설계할 때는 플레이어의 정보와 위치 정보를 분리 시키는 방법이 있다. 이동패킷은 총 두 종류로 클라이언트가 서버에게, 서버가 클라이언트에게 보내는 패킷이 존재한다. 클라이언트 --> 서버 클라이언트가 서버로 보내는 패킷은 '내가 [X,Y]로 이동함'을 의미한다. 그렇기 때문에 패킷에 포함

2023년 8월 30일
·
0개의 댓글
·

[게임 서버] 게임 입장

게임입장 한 플레이어가 게임에 입장할 때 클라이언트와 서버 사이에는 입장요청부터 다른 플레이어의 정보까지 여러가지 정보를 주고받는다. 새로운 플레이어가 게임에 입장하는 상황을 나타낸 그림은 아래와 같다. New Player는 서버에 게임에 입장한다는 요청을 보낸다. 서버는 기존에 있던 Player들에게 새로운 플레이어가 입장했다는 사실과 New Player에 대한 정보를 전송한다. New Player는 기존에 있던 Player의 정보들을 받는데 서버가 가지고 있는 Player Info를 받는다. New Player가 정보를 받는 상황을 나타낸 그림은 아래와 같다. <p align="

2023년 8월 29일
·
0개의 댓글
·

[게임 서버] 클라이언트와 서버

싱글컴퓨터 게임 1인용 게임인 싱글컴퓨터 게임에는 모든 게임의 입출력과 연산이 하나의 컴퓨터에서 일어나기 때문에 컴퓨터 사이의 통신이 필요하지 않다. 게임의 작업순서는 아래와 같은 단계를 반복한다. 입력받기 게임 로직 처리 렌더링 하지만 서버가 포함되는 온라인게임에서는 클라이언트-서버간의 통신을 통해 상대방의 정보, 현재상태에 대한 처리결과를 주고 받는 구조가 존재한다. 1. 상호작용 클라이언트와 서버간의 상호작용에는 4가지가 있다. 연결 클라이언트가 서버와 데이터를 주고 받기위한 환경을 설정하는 단계로 클라이언트에서 서버에게 연결을 요청하고 서버가 이를 수락하면 클라이언트-서버간의 연결이 완성된다. TCP연결의 3-way handshake가 이에 해당한다. 요청-응답 클라이언트가 서버에 어떤 데이터나 행동을 요청했을 때 요청에 대한 결과나 허락, 거절응답을 받을 수 있다. 하지만, 서버는 클라이

2023년 8월 23일
·
0개의 댓글
·
post-thumbnail

React Hooks (2) - useEffect

useEffect 기본형태 useEffect( function, deps ) function : 수행하고자 하는 작업(화살표 함수의 형태를 취한다) deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 useEffect() 불러오기 useEffect 조건 1. Component가 mount 됐을 때 (처음 렌더링 될 때) 컴포넌트가 화면에 가장 처음 렌더링 될 때 한 번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣는다. 2. 렌더링 될 때마다 실행 렌더링 될 때마다 실행하고 싶을 때는 deps 위치에 아무것도 넣지 않는다 3. Component가 upda

2023년 8월 14일
·
0개의 댓글
·

HTTP Client

클라이언트와 서버 클라이언트 (Client) 클라이언트는 사용자가 웹 브라우저를 통해 접속, 상호작용하는 기기 또는 소프트웨어를 의미한다. 사용자의 요청을 생성하고 서버에 전송하여 데이터를 요청하고 처리된 응답을 받는다. 서버 (Server) 서버는 클라이언트의 요청을 받아 처리하고, 요청에 따른 결과를 클라이언트에게 반환하는 컴퓨터 또는 소프트웨어를 의미한다. 요청을 받고 필요한 데이터베이스 조회, 계산, 파일 접근 등의 작업을 수행한 후 클라이언트에게 결과를 응답한다. RestTemplate Spring 프레임워크에서 제공하는 HTTP 클라이언트 라이브러리다. 웹 애플리케이션에서 서버와의 통신을 쉽게 처리할 수 있도록 도와준다. RESTful 웹 서비스와의 상호작용에 사용되며, HTTP Method 를 사용하여 원격 서버로부터 데이터를 요청하고 응답을 받을 수 있다. WebClient Spring 프레임워크에서 제공하는 비동기적인 H

2023년 7월 30일
·
0개의 댓글
·
post-thumbnail

Web과 HTTP를 알아보자!

Web CLIENT (Front-End) HTML, CSS, JavaScript Browser가 실행, 해석하는 언어 WEB SERVER (Back-End) PHP, JSP, ASP 등 SERVER가 실행, 해석하여 CLIENT에게 응답한다. 웹 서버와 브라우저 작동 방식 Client ← → Web Server ← → Web Application Server ← → DB Web Server 정적 페이지 변하지 않는 페이지 (html, img) Web Application Server 동적 페이지 사용자 요청에 맞게 동적으로 변하는 페이지 (PHP, JSP, ASP) Proxy Server 프록시 서버는 클라이언트에서 서버로 접속을 할 때 직접적으로 접속하지 않고 중간에 대신 전달해주는 서버를 의미한

2023년 7월 14일
·
0개의 댓글
·
post-thumbnail

인스타그램 게시물 연동하기 A to Z

인스타그램 콘텐츠를 웹에 연동할 수 있는 기능을 구현해보자! >공식 문서 >https://developers.facebook.com/docs/instagram-basic-display-api 우선은, https://developers.facebook.com 에 가입하고, 새로운 앱을 등록해주어야 한다. 1. 앱 만들기 기타로 선택 소비자로 선택 앱 이름 및 연락처 등록하여 앱 만들기 완성 ![](https://velog.velcdn.com/images/jiwonyyy/post/b158dcb6-7fab-43

2023년 7월 7일
·
0개의 댓글
·
post-thumbnail

브라우저의 동작 원리

웹 브라우저와 웹 서버 브라우저는 사용자 즉, 고객(Client)이 사용하는 도구를 말하며 클라이언트로 부터 받은 요청(Request)을 서버로 전달합니다. 그러면 서버에서는 요청에 따른 응답(Response)에 HTML, CSS등의 리소스들을 담아 전송하게 되며, 이를 브라우저에서 해석하는 과정을 거처 사용자가 보는 화면에 표시하게 됩니다. 브라우저가 서버로부터 받아오는 응답은 HTML, CSS, JavaScript, 이미지 등 웹 사이트를 이루는 여러가지 자원들로 이루어져 있으며, 브라우저 렌더링 엔진의 해석기(Parser)에 의해 해석(Parsing)되며, 해석된 자원들을 통해 DOM 트리를 생성하고 각 노드들을 배치하여 화면에 표시합니다. 해당 과정은 다음과 같습니다. Request

2023년 7월 4일
·
0개의 댓글
·

서버 상태 ❤️ 클라이언트 상태

리액트 쿼리 + 상태관리 라이브러리(zustand? RTK?)를 고민하며 먼저 어떤 상태가 있는지 정의하고 관찰해보겠다. 서버 상태 vs 클라이언트 상태 서버 상태와 클라이언트 상태는 웹 애플리케이션에서 데이터를 관리하는 두 가지 다른 개념이다. 각각의 개념은 역할과 책임이 다르며, 서로 다른 용도와 특징을 가지고 있다. 서버 상태(Server State) 서버 상태는 웹 애플리케이션의 백엔드에 저장되어 있는 데이터를 나타냄. 서버 상태는 데이터베이스, 파일 시스템, 캐시 등에 저장되어 관리. 다중 사용자 환경에서 공유되며, 모든 클라이언트에게 동일한 데이터를 제공. 주로 사용자 정보, 게시물, 상품 정보 등과 같은 영속적인 데이터를 저장. 서버 상태는 보안과 데이터 무결성을 유지하는 중앙 집중식 데이터 소스로 사용. 클라이언트에서 요청이 있을 때 서버로부터 데이터를 가져와 업데이트하거나 서버에 변경사항을 전송.

2023년 6월 29일
·
0개의 댓글
·
post-thumbnail

[WEB] 웹 서버 운영하기 - (2) 웹 서버 설치

⛳️ 오늘의 목표 이전 포스팅에서는 웹 서버를 운영하기 위해 '웹 호스팅'이라는 대행 업체를 사용해보았다. 이번에는 내 컴퓨터에 직접 '웹 서버'를 설치해서 내가 만든 웹 페이지를 다른 사람들이 볼 수 있도록 해볼 것이다. 웹 브라우저 => 제품 군 웹 서버 => 제품 군 우리는 오늘 웹 서버 중 하나인 'Live Server'라는 Visual studio code의 확장 기능을 사용할 것이다. Live server 설치 및 실행 1) vsc로 가서 확장버튼을 눌러보자. 2) 검색창에 live server을 쳐서 설치한다. 우측 하단에 Go Live 가 보인다면 성공적으로 설치된 것을 알 수 있다. 3) Go Live 버튼을 누르면 잠시 후에 Port : 5500이 뜨는데,

2023년 6월 5일
·
0개의 댓글
·
post-thumbnail

[WEB] 웹 서버 운영하기 - (1) 웹 호스팅

웹 서버를 직접 운영하는 것은 쉬운 일이 아니다. 그래서 이러한 일들을 대행해주는 회사들이 있다. 호스트 (Host) : 인터넷에 연결된 컴퓨터 호스팅 (Hosting) = 클라우드 (Cloud) : 호스트를 빌려주는 사업 웹 호스팅 (Web Hosting) 호스팅 중에서도 웹 서버와 같이 웹을 동작하기 위해서 필요한 소프트웨어까지 설치해서 빌려주는 사업 수많은 웹 호스팅 업체가 있지만 그 중에서도 무료이면서 가장 유명한 서비스인 'GitHub'에 대해 알아보자. ⏩ GitHub ⏪ 1. 새로운 저장소 생성하기 ** 레퍼지토리 (Repository) : 우리의 소스코드를 저장할 공간 1) Repository name에 생성할 저장소의 이름을 지정해 준다. 2) 작업물을 전체 공개하고 싶다면 Public, 혼자서만 보고 싶다면

2023년 6월 4일
·
0개의 댓글
·
post-thumbnail

[WEB] 서버 & 클라이언트

(이전 포스팅에 이어서) 팀 버너스 리는 두 대의 컴퓨터를 준비한다. 그리고 2개의 프로그램을 개발하게 되는데, 하나는 '웹 브라우저'라는 프로그램이고 다른 하나는 '웹 서버'라는 프로그램이었다. 2개의 프로그램은 '인터넷'으로 연결되어 있다. '웹 서버'가 설치된 컴퓨터는 http://info.cern.ch라는 주소를 갖고 있다. '웹 브라우저'가 설치된 컴퓨터에는 하드디스크가 있고, 그 안에 있는 특정 디렉토리에는 index.html이라는 파일이 저장되어 있다. '웹 브라우저'의 주소창에 http://info.cern.ch/index.html을 입력하고 접속하면 어떤 일이 일어날까? ![](https://

2023년 6월 4일
·
0개의 댓글
·
post-thumbnail

Next JS에서 컴포넌트의 구성(Server , Client Component)

🔴 NextJs에서의 컴포넌트 >NextJs에서는 13버전이 업데이트 되면서부터 모든 컴포넌트가 기본적으로 서버 컴포넌트다. NextJs에서는 서버 컴포넌트와 클라이언트 컴포넌트가 있으며, 이를 잘 이해하고 사용하는 것이 중요할 것 것아 정리하게 되었다. NextJs공식문서 &nbsp;위와 같이 NextJs에서 서버 컴포넌트와 클라이언트 컴포넌트의 차이점을 구분해주고 있다.

2023년 5월 24일
·
0개의 댓글
·
post-thumbnail

Execution Client와 Consensus Client의 연결 과정

Execution Client와 Consensus Client의 연결 과정 Execution Client와 Consensus Client는 모두 병렬로 동시에 작동한다. 두 클라이언트 간의 통신이 필요하다. 이 통신을 통해 Consensus Client는 Execution Client에 지침을 제공하고, Execution Client는 비콘 블록에 포함 시키기 위해 트랜잭션 번들을 Consensus Client에 전달할 수 있다. 두 클라이언트 간의 연결은 Local RPC 연결을 사용하여 설정되며, 두 클라이언트 간에 전송되는 명령은 엔진 API에 의해 정의된다. Proposer이 아닌 경우(Validator인 경우) Consensus Client(eth2)는 블록을 수신한다. Gossip Protocol(Consensus P2P Network)을 통해 받는다. 수신된 블록은 Consensus Client(eth2)에 의해 검증되어 올바른 메

2023년 5월 17일
·
0개의 댓글
·

Ethereum - erigon client 설치 및 sepolia testnet snapshot

개요 이더리움 생태계에서 사용하는 클라이언트가 Geth로 집중되어 있습니다. 이에 대해서 이더리움 재단도 심각성을 느끼고 있어서 (2023/05/17 링크 추가) https://ethereum.org/en/developers/docs/nodes-and-clients/client-diversity/, https://clientdiversity.org/ 에 관련 아티클을 작성해 주었습니다. 이를 위해 erigon 클라이언트를 사용해보려고 합니다. 문서가 github와 issues에 밖에 없는 것 같습니다.. 관련 자료가 많이 없어서 저도 헤매고 있습니다. 틀린점도 있을 수 있고, 잘못된 점이 있을 수 있다는 점 알아주시면 감사하겠습니다. 최대한 보완하겠습니다. erigon client 설치 [https://github.com/ledgerwatch/erigon](https://github.com/ledgerwat

2023년 5월 8일
·
0개의 댓글
·