메모장 메모장

간단하게 NEXTJS에 대해서 알아보려고 합니다. 공식문서를 참고하여 작성하였습니다. ✔ NEXTJS란? React의 SSR를 쉽게 구현할 수 있게 도와주는 프레임워크 입니다. ✔ 특징 폴더 및 파일 기반으로 라우팅을 지원하여 직관적임 (동적 경로 라우팅 지원) 정적생성(Static Generation) 및 서버 사이드 랜더링 그리고 클라이언트 사이드 렌더링까지 각각의 페이지에 맞게 지원 코드 스플릿팅을 통해 Page의 빠른 로드 지원 컴파일과 번들링도 자동으로 진행 자동 리프레쉬 기능 지원 커스텀 API를 쉽게 구성 가능 static 파일 지원 - public 디렉토리 프리패칭 지원 - 서버에서 불러다가 오는것 설치 : create-next-app [정적생성] - 프로젝트를 빌드하는 시점에 html 파..

7장은 리덕스 입니다. ✔ 리덕스 란?

4장은 실습과정이어서 생략하고 5장부터 이어서 포스트 하려합니다. 5장은 하이어오더 컴포넌트입니다. ✔ 커링 쉽게 이야기 하면 함수의 재활용을 위해 사용하며 함수를 반환하는 함수입니다. 아래 소스를 보시면 일반 방식은 인자를 한번에 전달받고, 커링으로 구성한 함수를 인자를 나우어 받을 수 있습니다. 이때의 커링의 장점은 multiplyX(2)를 먼저 실행하고 필요에 따라 추가적인 연산 진행이 가능하다는 점입니다. function multiply(a, b) { return a * b; } function multiplyX(x) { return function(a) { return multiply(x, a); } } const result1 = multiply(2, 3) // 6 const result2 =..

이번 포스트는 3장 리액트 컴포넌트에 대해서 알아보도록 하겠습니다. ✔ 컴포넌트란? MVC 패턴의 뷰를 독립적으로 구성하여 재사용을 높인 방식으로 기존의 컴포넌트를 새로운 컴포넌트 생성에 활용 가능합니다. 기존의 MVC 패턴의 특징인 각 요소의 의존성이 높아 재상용이 어려웠던 단점을 보완하였습니다. ✔ Prop 란? 리액트에서 데이터는 상위에서 하위로 단방향으로 데이터가 흐르는 규칙을 가지며 이때 전달되는 값입니다. 버그 예방을 위해 아래처럼 prop의 자료형을 미리 선언하는 것을 추천드립니다. class a extends React.Component { render() { return ( {this.props.propValue} {this.props.propRequiredValue} {this.prop..

이번 포스트에선 React앱에서 GraphQL 클라이언트를 생성하는 방법에 대해 알아보겠습니다. ✔ 패키지 설치 $ npm install @apollo/client ✔ 클라이언트 생성 아래와 같이 ApolloClient 인스턴스를 초기화합니다. ApolloClient 생성자는 두 개의 인자를 받습니다. 첫번째는 'link'로 이전 포스트에서 세팅한 GraphQL 서버의 URL을 지정하면됩니다. 두번째는 'cache'로 가장 많이 사용되는 InMomoryCache를 사용했습니다. 다만 아래의 코드에는 초기화 과정에 토큰을 통해 인증하는 코드가 추가되어, 해당 코드 신경쓰지 마시고 URL만 넘기면 됩니다. ApolloProvider로 기존의 React App을 래핑하면 컨텍스트를 통해 각각의 모든 컴포넌트에..

이번 포스트는 freeCodeCamp의 GraphQL 코스를 진행하면서 정리한 내용으로 GrapghQL 서버를 구축해보겠습니다. GrapghQL을 처음 접하시는 분들은 많은 도움이 되길 바랍니다. ✔ 패키지 설치 저는 몽고 디비도 함께 활용했기에 몽구스도 설치했습니다. $ npm i -D apollo-server graphql mongoose ✔ 서버 코드 작성 ApolloServer는 GraphQL 서버 인스턴스를 생성합니다. 데이터를 정의하고 Fetch 된 데이터를 불러오는 역할을 합니다. typeDefs에서 GraphQL 스키마를 정의하며, resolvers는 데이터를 어떻게 활용할지를 쿼리를 정의합니다. PageSub는 뒤에서 subscription이 나올때 함께 이야기하겠습니다. 몽고 디비에 연..

유투브에서 리액트 그리고 리덕스 관련 자료를 찾다가 저자분께서 강연하신 내용을 보고 구입하게 된 도서입니다. 내용이 유익하여 공부하면서 한번 정리해보겠습니다~ 1장은 리액트 개발환경 구축이라 생략하고 2장부터 시작하겠습니다. ES6 문법 액기스 ✔ 템플릿 문자열 - 백틱(`)으로 문자열 표현하며 $를 사용하여 변수 또는 식 포함 ✔ 전개 연산자 - 나열형 자료를 추출하거나 연결할 때 사용 배열, 객체, 변수명 앞에 마침표 3개로 표현 (괄호 안에서만 사용 가능) var arr1 = ['1','2']; var arr2 = ['3','4']; const combined = [...arr1, ...arr2]; // ['1','2','3','4'] const [first, second, three='empty'..

이번 포스트에서는 6장 React의 Context에 대해서 알아보겠습니다. ✔ 관찰자 패턴이란? Context를 이야기하기 전에 관찰자 패턴에 대해서 먼저 이야기하겠습니다. 리액트는 기본적으로 데이터가 아래로 흐르는 단방향성의 특징이 있습니다. (Prop Drilling 패턴) Drilling 패턴으로 전송된 데이터는 모든 컴포넌트에서 사용되지 않을 수도 있고 누락될 수도 있습니다. 이를 해결하기 위해 데이터를 공급자가 관리하고 해당 데이터를 원하는 컴포넌트(소비자)가 직접 공급자를 구독하여 데이터를 얻는 관찰자 패턴을 활용합니다. ✔ Context이란? React에서는 Context를 활용하여 관찰자 패턴을 제공합니다. ✔ Context의 규칙 소비자는 공급자보다 낮은 계층에 있어야 한다. 소비자는 공..