[GraphQL] Apollo Client로 React 앱 개발하기

Apollo Client는 GrpahQL API를 호출하기 위해 사용되는 라이브러리입니다.이번 포스트에서는 React 앱에서 Apollo Client를 사용하여 GraphQL API를 호출하는 방법에 대해서 알아보겠습니다. 사실, GraphQL API를 호출할 때, 반드시 Apollo Client와 같은 전용 클라이언트가 필요한 것은 아닙니다.GraphQL

React 컴포넌트 CSS 스타일링 기본

React 공식 레퍼런스에 따르면 React에서는 명확한 스타일 가이드를 제공하지 않습니다. React does not have an opinion about how styles are defined. 그도 그럴 것이 현재 CSS 기술 자체가 사용되는 방식이 워낙 다양하기 때문에 React에서 꼭 찝어 어느 방식을 따르라고 얘기하기가 조심스러울 것입니다

GraphQL 서버 테스트 방법 (Apollo Server Testing)

GraphQL 서버를 개발할 때도 여느 Rest API 서버와 마찬가지로 테스트의 중요성의 아무리 강조해도 지나치지 않습니다.이번 포스트에서는 Apollo Server로 개발된 GraphQL 서버에 대한 테스트를 작성하는 방법에 대해서 알아보도록 하겠습니다. 기존에 Apollo Server를 이용해서 GraphQL 서버를 개발하신 적이 없으신 분들은 관련

React Testing Library 사용법

React Testing Library(RTL)라는 테스팅 라이브러리가 React 개발자들의 입소문을 타고 점점 인기가 올라가고 있습니다.이번 포스트에서는 최근 React에서 테스팅 트랜드와 패러다임을 바꾸고 있는 React Testing Library에서 다뤄보도록 하겠습니다. React Testing Library 소개React Testing Libra

React Router로 라우팅 하기

React를 이용해서 SPA(Single Page Application)을 개발할 때 흔히 겪는 어려움 중에 하나가 웹페이지 라우팅입니다.이 번 포스트에서는 React Router라는 라이브러리를 사용해서 SPA에서 라우팅을 하는 방법에 대해서 알아보겠습니다. 간단한 라우팅 구현기본적으로 SPA는 index.html 파일에 div 엘리먼트만 하나 두고, 자

React에서 Font Awesome 사용하기

Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다.이번 포스트에서는 React 앱에서 Font Awesome을 사용하는 방법에 대해서 알아보도록 하겠습니다. React와 무관한 Font Awesome 자체에 대한 설명은 관련 포스트를 참고 바랍나다. Font Awesome 5의 SVG 지원Font Awes

[알고리즘] Generate Parentheses 풀이

Leetcode의 Generate Parentheses 문제를 풀어보도록 하겠습니다. 문제n 쌍의 괄호가 주어졌을 때, 괄호로 이루어진 유효한 문자열의 조합을 만들어내는 함수를 작성하라.예를 들어, n = 3 이면, 함수의 리턴 값은 다음과 같다. 1234567[ "((()))", "(()())", "(())()", "()(())", "()()()

[알고리즘] Merge Two Sorted Lists 풀이

Leetcode의 Merge Two Sorted Lists 문제를 풀어보도록 하겠습니다. 문제두 개의 정렬된 링크드 리스트를 병합하라. 병합된 링크드 리스트는 두 개의 링크드 리스트를 꼬아놓은 형태로 만들어져야 하고 역시 정렬되어 있어야 한다. 예시 12Input: 1->2->4, 1->3->4Output: 1->1->2

React Hooks: useEffect 사용법

Side Effect 처리를 위해 React Hooks에서 제공되는 setEffect() 함수에 대해서 알아보도록 하겠습니다. Side Effect란?React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컽습니다.대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단

[알고리즘] Valid Parentheses 풀이

Leetcode의 Valid Parentheses 문제를 풀어보도록 하겠습니다. 문제(, ), {, }, [, ] 만으로 이뤄진 문자열이 주어졌을 때, 다음 조건을 만족하면 true 만족하지 않으면 false를 리턴하라. 같은 종류의 괄호로만 열고 닫혀야 한다. 괄호들은 등장한 순서대로 닫혀야 한다. 단, 빈 문자열은 무조건 true로 간주한다. Ex