본문 바로가기

전체 글

(31)
가을 초입의 산여울 캠핑장 안녕하세요 devport입니다. 제가 작년부터 차박으로 캠핑을 시작해서 오토캠핑을 하면서 1-2년여간 캠핑에 빠져들었었는데요. 좋은 추억과 경험을 하였지만 어디에 기록해두거나 사진을 많이 찍는 그런 습관이 없어서 아쉽다는 생각을 하게 되었습니다. 캠핑을 다니면서 이제 부터라도 포스팅을 하나둘씩 해보는건 어떨까라는 생각으로 부족한 글 솜씨이지만 느낀바를 최대한 포장해서 포스팅 해봅니다. 2022년 10월 1일부터 3일까지 … 이전에는 포스팅하진 않았지만 이번에도 어김없이 캠핑을 하기위하여 집을 떠났습니다. 와이프 지인의 추천으로 가게된 산여울 캠핑장으로 떠납니다 이곳은 강원도에서도 캠핑 핫스팟으로 유명한 영월에 무릉도원면에 위치해있습니다. 지도에서 보는것과 같이 오는길 내내 많은 캠핑장들이 있었습니다. 예..
P2E에 대해서 알아보자. 요새 메타버스, NFT, P2E 이런 이야기들이 많이 나오고 있습니다. 저도 처음 알게된 계기가 미르의 전설에 블록체인 기술을 도입하여 주식의 주가가 폭등 하였다는 소식을 듣게 되면서 부터 관심을 가지게 되었습니다. 미르의 전설을 개발한 위메이드 뿐만 아니라 다른 게임회사들에서도 너도나도 이런 블록체인 기술들을 접목한다는 뉴스만 실어도 주가가 폭등하는 어마어마한 마법의 가루와 같은 핫한 키워드입니다. 여기서 제가 알아보고 싶은 P2E는 Play to Earn으로 플레이 하면서 번다. 요새 흔히 저희가 말하는 '쌀먹'이라는 영역입니다. 게임하면서 쌀 사먹는다는 이미지는 굉장히 부정적인 단어였는데 이제는 그렇지만도 않은 세상이 되어버린것 같습니다. P2E? Play to Earn NFT로 가장 큰 시장을 형..
[개발] GraphQL - Interface와 Union에 대한 이해 안녕하세요 devport 입니다. 이번 포스팅에서는 graphql의 interface와 union 타입에 대해서 알아보도록 하겠습니다. interface Type interface type은 지정된 타입에서 특정 필드를 구현할 것을 약속하는 추상형식의 타입입니다. 그렇기 때문에 인터페이스에서 선언된 필드들은 정확히 유사하게 구현되어야 합니다. interface Human { id: ID! name: String guildId: ID } Type Knight implements Human { id: ID! name: String guildId: ID energy: Int } Type Wizard implements Human { id: ID! name: String guildId: ID mana: Int ..
[개발] GraphQL - DataLoader로 최적화 하기 안녕하세요 devport 입니다. 이번 포스팅에서는 GraphQL을 운영할 시에 필연적으로 발생하는 N+1문제를 해결 할 수 있는 DataLoader에 대해서 알아보도록 하겠습니다. GraphQL을 사용하고 어느정도 규모의 서비스를 운영하실 계획이라면 DataLoader 기법을 적용하는 것은 필수라고 생각합니다. GraphQL의 구조적인 문제로 인한 "N+1 문제" GraphQL은 데이터베이스로 데이터를 처리할때에 편리한 기능들을 제공하고 있습니다. 하지만 대량의 데이터를 가져오는데에 연쇄 리졸버로 연관된 데이터를 쿼리를 하게된다면 어떻게 될까요? 쿼리에 대한 데이터가 N개이고 또 내부의 리졸버가 N번 만큼 발생하여 데이터베이스에 쿼리를 하게되면 발생하는 쿼리의 수는 N번 만큼 발생하게 될겁니다. 이러한..
[개발] GraphQL - 관련 Tools 안녕하세요 devport 입니다. 이번 포스팅에서는 GraphQL에서 사용하는 Tools에 대해서 알아보도록 하겠습니다. Apollo extension for VS Code Visual Studio Code 에디터를 사용하시는 분들은 Apollo GraphQL Extension을 설치 할 수 있습니다. 확장모듈을 설치하게 된다면 다음과 같은 기능들을 제공하여 줍니다. js파일 내부의 gql 템플릿에 대한 Syntax-highlight표시 필드, 인자, 유형, 변수 입력시에 intelligent autocomplete가 피드백 쿼리 정의와 성능 정보 필드 및 인자 사용시 유효성 검사 점프 및 미리보기 기능 지원 등의 다양한 기능을 지원 해주기 때문에 VScode 사용자는 사용해보는 것도 나쁘지 않을 것 같..
[개발] GraphQL - Apollo Link 제어 안녕하세요 devport 입니다. 오늘은 Apollo Link 라이브러리를 이용해서 GraphQL로 CRUD시에 매칭되는 로딩 및 완료 팝업 문구를 띄울수 있는 방법에 대해서 알아보도록 하겠습니다. Apollo Link? Apollo Link 라이브러리는 Apollo Client와 GraphQL 서버 사이의 데이터 흐름을 사용자가 정의 할 수 있습니다. GraphQL의 Query 또는 Mutation을 수행할때에 사용자가 정의한 Link가 순차적으로 실행되며 Link를 통해 해당 데이터를 제어할 수 있도록 구현도 할 수 있습니다. Apollo Client는 기본적으로 사용되는 Apollo Link 중 HttpLink를 통해서 원격서버에 요청 작업을 전달합니다. HttpLink 뿐만 아니라 다양한 Link..
[개발] GraphQL - Apollo Client Cache 안녕하세요. devport 입니다. Apollo Client에서는 다양한 방법의 Cache 전략을 가지고 있습니다. 이번 포스팅에서 알아보도록 하겠습니다. Cache? 캐쉬는 임시로 데이터를 보관하는 장소입니다. 브라우저에서 같은 데이터 및 파일을 매번 네트워크를 거쳐서 요청한다는 것은 불필요할 수도 있습니다. 이럴때 매번 요청을 할 필요가 없는 경우에 한번 요청한 정보를 Cache에 저장하고 이곳에서 가져온다면 불필요한 네트워크 요청을 줄일 수 있게 됩니다. Apollo client cache Apollo Client는 쿼리를 하였을때에 결과물을 정규화하여 InMemoryCache에 저장을 하게 됩니다. 정규화 된 캐시를 통해서 GraphQL의 쿼리 성능을 크게 높일수 있게 됩니다. 이렇게 될 경우 G..
[개발] GraphQL - Vue + Apollo + GraphQL 안녕하세요 devport 입니다. 이번 포스팅에서는 지난 포스팅에서 작성한 Apollo 서버와 통신하는 클라이언트 웹페이지를 만들어 보려고 합니다. github 프로젝트로 등록되어 있는 vue-apollo-graphql-boilerplate 기반으로하여 저자와 책의 목록을 추가, 삭제, 검색할 수 있는 프로젝트를 구현해 보겠습니다. vue-apollo-graphql-boilerplate 설치 기본적으로 git이 설치가 되어 있어야 보일러플레이트를 가져올 수 있습니다. 쉘에서 아래 명령어를 실행합니다. git clone https://github.com/guillaumeduhan/vue-apollo-graphql-boilerplate.git vue-apollo-graphql-boilerplate의 폴더가 ..