안녕하세요 RyuWoong입니다. graphQL이 뭔지 전 글로서는 감이 안잡히시죠? 이제 직접 쿼리를 날려봅시다. 접속하기. SWAPI GraphQL API graphql.org 위 사이트에 접속하면, Query 입력을 해보고 결과 값을 볼 수 있습니다. 앞 선 포스팅에서 REST API와 비교하면 된다고 말씀 드렸었는데요. 이번에 쿼리를 입력하면서 REST API와 비교하면 어떻게 다른지 조금 비교해보겠습니다. 입력하기. 왼쪽 메뉴에 책 아이콘을 선택하면, Docs를 볼 수 있습니다. query라고 되어 있죠? Root를 눌려서 query 안에 어떤 내용이 있는지 살펴볼까요? 선택하면, 정말 많은 Field가 있습니다. 그럼 한번 왼쪽 에디터에 입력해봅시다. { allFilms{ totalCount ..

안녕하세요! RyuWoong입니다. Web Perfomance를 위해서는 브라우저에서 웹페이지를 보여줄때 어떠한 과정을 거치고, 무엇 때문에 Web Perfomance에 영향을 주는지 알 필요가 있겠죠? Web Perfomance를 위해서는 빠른로드, 상호작용이 원활한 콘텐츠로 이루어진 웹 경험 두 가지의 목표 달성이 중요합니다. 실제 성능 및 체감되는 성능을 향상 시키는 방법을 이해하기 위해서는 브라우저가 어떻게 동작하는지 알아봅시다! 개요. 빠른 사이트는 더 좋은 사용자 경험을 제공합니다. 사용자는 로드가 빠르고 상호작용이 원활한 콘텐츠로 이루어진 웹 경험을 원합니다. 웹 성능에 있어서 두 가지 주요한 문제는 지연시간과 브라우저가 대부분 싱글 스레드로 동작한다는 것입니다. 이를 다른 말로 한다면 빠른..

안녕하세요. RyuWoong 입니다. 이번 포스팅부터 Web Perfomance에 대해 알아보고자 합니다. 그 첫번째 주제는 Latency입니다. 대기시간(Latency)는 하나의 데이터 패킷이 출발지에서 도착지까지 가는 데 걸리는 시간을 뜻합니다. 성능 최적화에 있어서 대기 시간의 원인을 줄이는 것과 연결 상태가 좋지 않은 사용자를 고려하여 대기 시간이 긴 환경에서 사이트 성능을 테스트하는 것은 중요하죠. 이번 글에서 대기시간이 무엇인지와 어떤 영향을 미치는 지, 어떻게 측정하며, 어떤 방법으로 최적화 할 수 있는지 알아보겠습니다. Latency? 대기 시간이란 일반적으로 사용자가 요청을 한 시점부터 해당 사용자에게 요청에 대한 응답을 받기까지 걸리는 시간을 말합니다. 첫 번째 요청에서 14KB 만큼의..

안녕하세요. RyuWoong 입니다. 이번에 포스팅 할 내용은 Web Performance입니다. JS와 React를 공부하며 내부 로직을 최적화 하는 것 외에, 신경 써야할 것들이 더 있다는 걸 알게모르게 눈치 채고 있었습니다. 우리가 React를 다루면서 re-Rendering이라던지, CSS IN JS를 사용하면 어떤 장단점이 있는지 등에 대해 알아가다 보면, 근본적인 무언가가 연관이 있어서 성능에 영향을 미치고 있다는 느낌을 받게 됩니다. 새로운 방법론이나, 도구가 등장하는 것은 기존의 문제나 불편함을 해소하기 위해 등장한 것이니까요. 이번에는 근본적인 것을 찾아 여정을 떠나 볼까 합니다. 저 같은 Junior 개발자들이나 입문자들에게 도움이 되었으면 합니다. Web Perfomance? Web ..

안녕하세요. RyuWoong입니다. 이번에 해볼 이야기는 GraphQL 입니다. React Query와 Component에 대한 공부를 하다보니 한번씩 접했던 단어인데요, GrapQL이 뭔지, 어떤 용도로 쓰이는지 한번 알아보도록 하겠습니다. GraphQL? GraphQL은 Meta(구 FaceBook)에서 만든 Query Language(이하 QL) 입니다. QL이지만, 기존에 우리가 사용하던 SQL과는 꽤 차이가 있습니다. 사용하는 방법부터 용도, 목적이 다릅니다. 한번 살펴볼까요? SQL은 DB에 저장된 데이터를 효율적으로 불러오기위해 사용하는 언어이며 주로 BackEnd에서 사용하고 GraphQL은 Web Client가 서버로부터 효율적으로 데이터를 가져오기 위해 사용하는 언어로 주로 FrontE..