![[GraphQL/React] Apollo Hooks 소개/사용법](https://img.daleseo.com/cdn-cgi/image/width=800,height=450,fit=cover,format=auto,onerror=redirect/7q4oTYVT.webp)
지난 달, Apollo Client에서 공개되어 현재 뜨거운 반응을 얻고 있는 Apollo Hooks에 대해서 알아보겠습니다. Apollo Client가 생소하신 분들은 아래 포스팅를 먼저 보시고 이 포스팅로 돌아오시는 것을 추천드립니다. [GraphQL] Apollo Client 사용법 Apollo Hooks? Apollo Hooks는 Apollo Client로 React 앱을 개발할 때, GraphQL API를 호출할 수 있는 새로운 방법입니다. 기존에는 react-apollo 패키지에서 제공하는 <Query/>나 <Mutati
지난 포스팅에서 SchemaLink를 이용하여 서버 없이 클라이언트에서 GraphQL API를 호출하는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 로컬에서 직접 스키마를 작성하지 않고 원격 서버로 부터 스키마를 가져오는 몇 가지 방법에 대해서 알아보겠습니다. 패키지 설치 예제 프로젝트에서 필요한 GraphQL과 Apollo Client 관련 패키지를 설치하고 시작하겠습니다. 여기서 graphql-tools 패키지가 가장 중요한데, 스키마 생성을 위해 makeExecutableSchema(), introspectSchema(),
GraphQL 서버 없이도 클라이언트에서 GraphQL API를 호출할 수 있도록 도와주는 Aollo Client의 SchemaLink에 대해서 알아보겠습니다. 일반적인 Apollo Client 생성 일반적으로 Apollo Client를 사용할 때는 다음과 같이 GraphQL 서버로 HTTP 요청을 보내기 위해서 HttpLink를 사용합니다. 이렇게 HttpLink를 사용할 때는 반드시 연동할 GraphQL API의 endpoint를 가진 GraphQL Server가 어딘가에 떠 있어야 합니다. Apollo Client를 이용해서
GraphQL API를 호출할 때 사용하는 클라이언트 라이브러리인 Apollo Client에 대해서 알아보겠습니다. 기본적으로 HTTP 기반으로 동작하는 GraphQL API를 호출할 때 반드시 Apollo Client와 같은 전용 클라이언트 라이브러리가 필요한 것은 아닙니다. GraphQL API를 별다른 라이브러리 없이 최대한 간단하게 호출하는 방법에 대해서 관련 포스팅를 참고바라겠습니다. 패키지 설치 프로젝트에 Apollo Client를 사용할 때 필요한 5개의 패키지를 설치합니다. pacakge.json 이 중, apollo
지난 포스팅에서 React Router로 기본적인 라우팅 방법을 다루었습니다. 이번 포스팅에서는 React Router로 중첩 라우팅을 구현하는 방법에 대해서 알아보겠습니다. 중첩 라우팅이란? 중첩 라우팅(Nested Routing)이란 라우팅 맵핑을 최상위 컴포넌트 뿐만 아니라 여러 개의 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법입니다. 예를 들어, 브라우저의 주소 창에 https://www.your-site.com/users라고 입력되었을 때, 유저 목록 페이지가 표시되고, https://www.your-site.com/a
Apollo Client를 사용하여 GraphQL API를 호출하는 React 컴포넌트를 테스트하는 방법에 대해서 알아보겠습니다. 예제 컴포넌트 작성 Apollo Client를 사용하여 GraphQL API를 호출하는 매우 간단한 React 컴포넌트를 작성해보겠습니다. 아래 PingPong 컴포넌트는 GraphQL 서버에 ping이라는 쿼리를 호출합니다. 서버로부터 응답이 올 때까지는 Loading...라는 메시지를 렌더링합니다. 만약에, 서버로 부터 에러가 응답되면 Error!라는 메시지를 렌더링합니다. 마지막으로 서버로 부터 정
![[HTML] 시멘틱 마크업](https://img.daleseo.com/cdn-cgi/image/width=800,height=450,fit=cover,format=auto,onerror=redirect/Ls0cPZ7C.webp)
HTML5가 등장한지 몇년이 흘렀음에도 불구하고, 아직까지도 <div> 태그로만 마크업된 웹사이트를 많이 접하곤 합니다. 하지만 이렇게 오로지 <div> 태그로만 마크업된 웹페이지는 시각적으로는 아름다울지 몰라도 여러 가지 측면에서 문제가 있을 수 있습니다. 시멘틱 마크업이란? <div> 태그는 보통 웹페이지에서 화면의 특정 영역에 스타일을 적용하거나, 전체 화면 레이아웃을 잡는데 자주 사용이 됩니다. 그래서 웹사이트에서 다음과 같은 <div> 태그가 사용되는 것을 어렵지 않게 접할 수 있습니다. 사실 HTML5에서 이러한 화면 레
PropTypes는 React에서 타입 체크를 위해서 사용되는 라이브러리입니다. 이 번 포스팅에서는 PropTypes를 이용해서 React 컴포넌트의 prop에 대한 타입 정의와 기본값 설정을 하는 방법에 대해서 알아보겠습니다. 패키지 설치 PropTypes 라이브러리는 prop-types이라는 패키지 이름을 가지고 있는데요. 기본적으로 react 패키지에 내장이 되어 있기 때문에, React만 설치되어 있다면 별도로 설치할 필요가 없습니다. 예제 컴포넌트 PropTypes를 어떻게 사용하는지 보여드리기 위해서 먼저 예제 컴포넌트를
지난 포스팅에서 외부 라이브러리 없이 CSS 만으로 React 컴포넌트를 스타일링하는 방법을 알아보았습니다. 이번 포스팅에서는 대표적인 CSS-in-JS 라이브러리인 Styled Components를 사용해서 React 컴포넌트를 스타일링하는 방법을 살펴보겠습니다. CSS in JS? 먼저 CSS in JS의 개념을 짚고 넘어가겠습니다. CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다. 기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는
Apollo Client는 GrpahQL API를 호출하기 위해 사용되는 라이브러리입니다. 이번 포스팅에서는 React 앱에서 Apollo Client를 사용하여 GraphQL API를 호출하는 방법에 대해서 알아보겠습니다. 사실, GraphQL API를 호출할 때, 반드시 Apollo Client와 같은 전용 클라이언트가 필요한 것은 아닙니다. GraphQL API를 별다른 라이브러리 없이 최대한 간단하게 호출하는 방법에 대해서는 아래에 따로 포스팅해놓았으니 참고바랍니다. 관련 포스팅: GraphQL API 간단하게 호출하기 그리
React 공식 레퍼런스에 따르면 React에서는 명확한 스타일링 가이드를 제공하지 않는데요. React does not have an opinion about how styles are defined. 그도 그럴 것이 현재 CSS 기술 자체가 사용되는 방식이 워낙 다양하기 때문에 React에서 꼭 찝어 어느 방식을 따르라고 얘기하기가 조심스러울 것입니다. 그래서 이번 포스팅에서는 React 컴포넌트를 별도의 CSS-in-JS 라이브러리 없이 순수하게 CSS로만 스타일하는 가장 기본적인 방법을 알아보겠습니다. Inline Style
GraphQL 서버를 개발할 때도 여느 Rest API 서버와 마찬가지로 테스트의 중요성의 아무리 강조해도 지나치지 않습니다. 이번 포스팅에서는 Apollo Server로 개발된 GraphQL 서버에 대한 테스트를 작성하는 방법에 대해서 알아보도록 하겠습니다. 기존에 Apollo Server를 이용해서 GraphQL 서버를 개발하신 적이 없으신 분들은 관련 포스팅를 먼저 보시고 GraphQL 서버 프로젝트를 생성하시기 바랍니다. 프로젝트 설정 Apollo Server에서는 GraphQL 서버의 테스트를 돕기 위해 apollo-ser
Testing Library는 웹 프론트엔드 테스트에서 사실 상 표준으로 자리잡은 라이브러리입니다. React 뿐만 아니라 Vue, Svelte, Angular 등 거의 대부분의 자바스크립트 프레임워크를 지원하고 있죠. 이번 포스팅에서는 Testing Library를 사용해서 React 컴포넌트에 대한 테스트 코드를 어떻게 작성하는지 함께 알아보겠습니다. React Testing Library 소개 React Testing Library는 Behavior Driven Test(행위 주도 테스트) 방법론이 대두 되면서 함께 주목 받기
React를 이용해서 SPA(Single Page Application)을 개발할 때 흔히 겪는 어려움 중에 하나가 웹페이지 라우팅입니다. 이번 포스팅에서는 React Router라는 라이브러리를 사용해서 SPA에서 라우팅을 하는 방법에 대해서 알아보겠습니다. 간단한 라우팅 구현 기본적으로 SPA는 index.html 파일에 div 엘리먼트만 하나 두고, 자바스크립트로 모든 부분을 동적으로 랜더링하는 구조를 취합니다. 그리고 화면의 전체 또는 일부를 브라우저에서 발생하는 이벤트에 따라서 동적으로 갱신할 수 있기 때문에 인터랙티브 한
가장 널리 알려진 알고리즘 중의 하나인 피보나치(Fibonacci) 알고리즘에 대해서 알아보겠습니다. 알고달레에서 코딩 테스트/인터뷰 준비에 좀 더 특화된 컨텐츠를 만나보세요! 📝 피보나치 수열 피보나치 수열에서는 첫 번째 항은 0, 두 번째 항은 1, 그 다음부터는 바로 전 두 항의 숫자의 합이 현재 항의 값이 됩니다. 따라서 피보나치나 수열은 다음과 같은 모습을 가지게 됩니다. 재귀 알고리즘 피보나치 수열을 구현하는 가장 흔한 알고리즘은 재귀(recursion)를 사용하는 것입니다. 이 재귀 알고리즘의 시간과 공간 복잡도는 모
Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다. 이번 포스팅에서는 React 앱에서 Font Awesome을 사용하는 방법에 대해서 알아보도록 하겠습니다. React와 무관한 Font Awesome 자체에 대한 설명은 관련 포스팅를 참고 바랍나다. Font Awesome 5의 SVG 지원 Font Awesome 4 대비 Font Awesome 5의 가장 강력한 부분은 SVG 기반 아이콘을 지원한다는 것입니다. 즉, 기존에 웹폰트를 기반으로 하는 <i/> 태그 대신에 SVG 기반인
쇼핑 사이트에 로그인한 상태로 다른 탭에서 별 생각 없이 열어본 기사 링크 하나가, 내 계정에서 100만 원짜리 상품 주문을 자동으로 날려버릴 수 있다면 믿어지시나요? 바로 이게 CSRF(Cross-Site Request Forgery) 공격의 본질입니다. "사이트 간 요청 위조"라는 이름 그대로, 공격자가 내 브라우저를 통해 내 이름으로 요청을 보내는 공격이에요. 이 글에서는 CSRF가 왜 가능한지, 공격이 실제로 어떻게 성립하는지, 그리고 이를 막는 네 가지 방어 기법(Synchronizer Token, Double Submit
Side Effect 처리를 위해 React Hooks에서 제공되는 setEffect() 함수에 대해서 알아보도록 하겠습니다. Side Effect란? React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컽습니다. 대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장됩니다. 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이
로컬에서 혼자 웹 앱을 개발하던 사람이 회사 운영 환경을 처음 만지면 꼭 듣게 되는 말이 있어요. "앞단에 nginx를 둘 거예요"라든지, "프록시 통해서 바깥으로 나가야 해요" 같은 문장인데요. 두 쪽 다 "프록시"라는 단어가 들어가는데, 가리키는 대상이 아예 반대입니다. 앞의 것은 리버스 프록시, 뒤의 것은 포워드 프록시예요. 이 글에서는 두 프록시가 어떻게 다른지, 왜 같은 이름을 쓰면서 역할은 서로 반대인지, 실무에서 어디에 어떻게 배치되는지를 차근차근 풀어보려 합니다. 프록시가 대체 뭐였죠? 프록시(proxy)라는 단어는
컴포넌트의 상태 관리를 위해 React Hooks에서 제공되는 setState() 함수에 대해서 알아보도록 하겠습니다. this.state - 클래스 기반 상태 관리 React Hooks가 나오기 전에는 컴포넌트의 상태 관리를 하려면 클래스 기반 React 컴포넌트를 작성해야 했습니다. 대표적으로 상태 관리가 필요한 경우인, 사용자 입력 양식을 위한 컴포넌트를 작성한다고 생각해보겠습니다. 아래 예제 코드는 사용자의 이름과 이메일을 입력받기 위한 전형적인 React 컴포넌트입니다. 클래스 컴포넌트의 this.state 필드에 이름과