프론트엔드/ReactJS React + Apollo Tutorial (4) - Routing 이 글은 다음 페이지를 번역한 글입니다. https://www.howtographql.com/react-apollo/4-routing/ React Router with GraphQL and Apollo Tutorial Learn how to use React Router 5 together with GraphQL and Apollo Client to implement navigation in a React app. Each route will be represented as a `Link`. www.howtographql.com Routing 이번 글에서는 Apollo와 함께 React Router를 사용하여 탐색을 구현하는 방법을 살펴보겠습니다! Install dependencies 필요한 의존성을 추.. 프론트엔드/ReactJS 2021. 12. 26. React + Apollo Tutorial (3) - Mutations: Creating Links 이 글은 다음 페이지를 번역한 글입니다. https://www.howtographql.com/react-apollo/3-mutations-creating-links/ GraphQL Mutations with React and Apollo Tutorial Learn how to use GraphQL mutations with Apollo Client. Use Apollo's `` component to define and send mutations. www.howtographql.com Mutations: Creating Links GraphQL에는 쿼리와 뮤테이션라는 두 가지 최상위 작업 유형이 있습니다. 쿼리는 데이터를 읽고 싶을 때 사용합니다. 뮤테이션은 데이터를 변경하고자 할 때 사용합니다. 레코드.. 프론트엔드/ReactJS 2021. 12. 17. React + Apollo Tutorial (2) - Queries: Loading Links 이 글은 다음 페이지를 번역한 글입니다. https://www.howtographql.com/react-apollo/2-queries-loading-links/ Fetching Data using GraphQL Queries with React and Apollo Tutorial Learn how you can use GraphQL queries with Apollo Client to load data from a server and display it in your React components. www.howtographql.com Queries: Loading Links Preparing the React components 앱에서 구현할 첫 번째 기능은 Link 엘리먼트의 목록을 로드하고 표시하는.. 프론트엔드/ReactJS 2021. 12. 17. React + Apollo Tutorial (1) - Getting Started 이 글은 다음 페이지를 번역한 글입니다. https://www.howtographql.com/react-apollo/1-getting-started/ Getting Started with GraphQL, React and Apollo Tutorial Start building a Hackernews clone. Create the frontend with create-react-app and the backend with Prisma. www.howtographql.com Getting Started 이것은 프론트엔드 튜토리얼이므로 백엔드 구현에 시간을 할애하지 않을 것입니다. 대신 Node 튜토리얼에서 구현한 서버를 사용할 것입니다. React 애플리케이션을 만들고 나서 백엔드에 필요한 코드를 가져올 .. 프론트엔드/ReactJS 2021. 12. 16. React + Apollo Tutorial (0) - Introduction 이 글은 다음 페이지를 번역한 글입니다. https://www.howtographql.com/react-apollo/0-introduction/ Fullstack Tutorial with GraphQL, React & Apollo Learn how to build a Hackernews clone with GraphQL, React and Apollo Client. Use create-react-app for the frontend and Apollo Server with Prisma for the backend. www.howtographql.com Introduction 참고: 이 자습서의 최종 프로젝트는 GitHub에서 찾을 수 있습니다. 다음 장을 진행하는 동안 길을 잃을 때마다 항상 참고 자료로.. 프론트엔드/ReactJS 2021. 12. 16. useEffect와 생명주기 (1) - 클래스형 컴포넌트의 State와 Lifecycle 이전 글 : useEffect와 생명주기 (0) - 주절주절 다음 글 : 매 초 시간이 흐르는 시계를 렌더링한다고 생각해봅시다. (자식 컴포넌트에 props로 데이터를 넘기는 법은 알고, state는 모른다고 가정) 그럼 다음과 같이 setInterval()을 통해, 매초 tick() 함수를 호출해야 합니다. 하지만 시간이 흐르는 것, 즉 타이머를 설정하고 매초 UI를 업데이트 하는 것은 Clock 컴포넌트가 하는 게 좋을 것 같습니다. 이것을 구현하기 위해 Clock 컴포넌트에 추가해야하는 것이 바로 "state"입니다. props와 state의 주요 차이점은 다음과 같습니다. state는 내부에 있고 컴포넌트 자체에 의해 제어됩니다. 반면 props는 외부에 있고 구성 요소를 렌더링하는 상위 컴포넌트.. 프론트엔드/ReactJS 2021. 12. 15. useEffect와 생명주기 (0) - 주절주절 다음 글 : useEffect와 생명주기 (1) - 클래스형 컴포넌트의 state와 lifecycle 항상 글을 시작하는 건 어렵네요. 공부한 내용을 정리하는 것도.. https://github.com/VoiceSpaceUnder5/VoiceSpace GitHub - VoiceSpaceUnder5/VoiceSpace: 피로감은 덜하지만, 더욱 현실감 있는 음성채팅을 위한 프로젝트 피로감은 덜하지만, 더욱 현실감 있는 음성채팅을 위한 프로젝트. Contribute to VoiceSpaceUnder5/VoiceSpace development by creating an account on GitHub. github.com 주절주절 7월 초에 공개SW 개발자대회에 참가하기로 결정하고, 웹 기반 음성채팅 서비스를.. 프론트엔드/ReactJS 2021. 12. 15. Redux vs. React Context (2) - 왜 Context는 "상태 관리"가 아닌가 이 글은 다음 페이지 일부를 번역했습니다. https://blog.isquaredsoftware.com/2021/01/context-redux-differences/#why-context-is-not-state-management Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) Definitive answers and clarification on the purpose and use cases for Context and Redux blog.isquaredsoftware.com 왜 Context는 "상태 관리"가 아닌가 "상태"는 애플리케이션의 동작을 설명하는 모든 데이.. 프론트엔드/ReactJS 2021. 12. 13. 이전 1 2 다음
