전체 글

React | Axios란? (feat. Fetch API)

# Intro React는 효율적인 UI 구현을 위한 라이브러리입니다. HTTP Client(HTTP 상에서 커뮤니케이션 하는 자바기반 컴포넌트) 를 내장하고 있는 Angular와 다르게, 리액트에는 따로 내장하는 내장클래스가 존재하지 않습니다. 따라서 리액트에서 AJAX(비동기 웹 애플리케이션) 를 구현하기 위해서 Javascript 내장 객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 합니다. 그렇다면 어떤 HTTP Client 라이브러리를 사용하는게 좋을까요? React와 함께 쓰면 좋은 HTTP Client라이브러리는 많지만, 여기서는 현재 리액트에서 가장 많이 사용하고 있는 Fetch API를 비교하면서 Axios라이브러리가 무엇인지 알아봅시다. # 짚고 넘어가기 ..

오직 React 만을 위한 라이브러리 - recoil-TodoList 만들어보기

이번 시간에는 Recoil을 좀더 알아보기 위해서 Recoil 튜토리얼에 있는 TodoList를 참고해서 만들어보겠습니다. src 밑에 recoil이라는 폴더를 생성해주고 그안에 todo.js를 만들어줍니다. 그리고 우리가 사용할 state를 작성해주면 됩니다. src/recoil/todo.js import {atom} from "recoil"; export const todoListState = atom({ key: 'todoListState', default: [], }); 그리고 todo폴더를 만들어서 그안에 TodoList.js파일을 추가해주세요 src/todo/TodoList.js import React from "react"; import TodoItemCreator from "./TodoIt..

오직 React만을 위한 상태관리라이브러리 - Recoil

Recoli 이란 ? recoli은 페이스북에서 개발한 새로운 상태관리 라이브러리입니다. React에서는 자체적으로 상태관리를 할 수 있는 Hooks이나 ContextAPI를 제공합니다. 그러나 내장 상태관리 프로그램은 다음과 같은 몇가지 단점이 있습니다. 컴포넌트의 상태는 공통된 상위요소에서 공유될수 있지만, 이 과정에서 거대한 트리가 다시 렌더링 되는 효과를 야기함 Context는 단일 값만 저장할수 있고, 여러 값들의 집합을 담을 수 는 없다. 이 두가지 특성이 트리의 최상단(state가 존재하는 곳) 부터 트리의 잎(state가 사용되는 곳) 까지의 코드 분할을 어렵게 만듦 그래서 사람든은 보통 이러한 단점들 때문에 Redux나 MobX를 더 선호합니다. 그리고 페이스북에서 새로운 상태관리 라이브..

[REACT 개발 필수]CRA(create-react-app)에 ESLint, Prettier 적용, 설정하는법

React 개발 CRA(Creact-React-App) 시 기본적 아니 필수적으로 설정하면 제일 좋은 Prettire & EsLint를 배워 보겟습니다. Prettier & ESLint란 ?? 1. Preiiter 란 ?? Prettier는 Code Formatter입니다. 개발자들이 코딩을 입력하고 완성시에 좀더 코딩 스타일을 세련되게 세팅해줄수있게 도와주는 툴인데요 Visual Studio Code Extentsition 으로 정해진 규칙 내에서 자동으로 코드 스타일을 정리해주는 쉽게말해 커스터마이징 할수있는 툴입니다. 1-1 .Preitter를 사용하는 이유 일반적으로 코드를 짜거나 개발시 코드 라인을 신경쓸시간보다 어떤 기능을 구현하는지에대한 시간을 쓰게됩니다. 코드라인만 일정하게 조절하는 시간을..

GraphQL 따라잡기 2탄 - query와 mutation

이번시간에는 GraphQL을 직접 적용시켜보자 GraphQL 만들기 실습 1.실습할 폴더에 GraphQL을 만들 폴더하나 생성 2.package.json 생성 npm init -y 3.npm install --save-dev graphpack 설치하기 4.package.json 아래에 script요소 추가하기 "scripts": { "dev": "graphpack", "build": "graphpack build" } 5.src 폴더 추가 -> schema.graphql , resolvers.js, db.js 파일 생성 (여기서 주의! resolvers안에 s 안붙이면 에러뜬다) 6.schema.graphql 파일에 아래 코드 입력 type Query { hello: String } 7.resolvers..

GraphQl 따라잡기 1탄 - GraphQL 개념에 대해 알아보자.

ㅎGraphQL.. 도대체 너 뭐니 ??~~ Apllo를 배워보기전에 GraphQL부터 마스터 해보자~~ 그전에... gql은 database 기술 인가?? No..!! API에 접목시킬수 있는 query형 언어다. gql은 React나 js 개발시에만 가능한가?? 그렇지 않다. API기술이기 때문에 어느 한정으로 사용하지 않는다. 에러 핸들링 (try & catch) 는 어떻게하는가 ?? root filed 바로 밑에 두번째 root field로 erros를 추가한다. ★ GraphQL이란? facebook에서 만든 새로운 API 표준언어 필요한 데이터 구조조정 || 데이터 주고 받기 가능 Graph + Query Language GraphQL을 페이스북이 2012년도에 개발했고 총 3년 에 시간이 지..

[Typescript & React & Webpack 환경설정 3편] Webpack 설정을 해보자

Webpack 설정하기 Webpack을 설치해봅시다. npm i -D webpack webpack-cli webpack-dev-server Webpack 셋팅 파일은 webpack.config.js 파일을 사용하지만 develop, production 상황에 맟춰 빌드해보자 필요한 파일 webpack.config.common.js : dev, prod 에 공통적으로 세팅해야 하는 것 webpack.config.dev.js : develop 환경에서 사용할 설정 webpack.config.prod.js : production 환경에서 사용할 설정 package.json : dev, build에 따른 config 를 설정한 script를 작성 webpack.config.common.js const HtmlW..

[Typescript & React & Webpack 환경설정 2편] Babel 설정

Babel 이란 ? Babel is a Javascript compiler Babel은 Javascript 컴파일러이다. 정확히 Babel은 Javascript로 결과물을 만들어주는 컴파일러이다. 왜 Javascript로 변환 과정이 필요할까? 현재 프론트엔드는 너무나도 빠르게 발전하고 있다. 이 때 발생하는 새로운 문법, 여러 기술들이 생기면서 호환성의 문제를 갖게 된다. 오래된 버전의 브라우저는 이러한 새로운 문법, 새로운 기술들을 적용하기 위해 변환되는 과정, 즉 Babel이 필요하다. 이제 Babel을 설정해보자 우선 필요한 패키지를 설정해보자 npm i -D @babel/core @babel/plugin-proposal-optional-chaining @babel/preset-env @babel..

[TypeScript & React & Eslint 환경 설정 1편] tsconfig 설정을 해보자

tsconfig 란 ? Typescript로 짜여진 코드는 Javascript로 변환해 줄 트랜스파일러(컴파일러)가 필요하다. 이러한 컴파일 과정에서 사용자가 필요한 여러 옵션을 설정할 수 있다. 그러한 파일이 tsconfig.json이다. npx tsc --init 커맨드를 통해 기본형태를 생성할 수 있다. tsconfig.json 컴파일 옵션 정리 옵션에 대한 자세한 정보는 여기에서 확인할 수 있다. 사용한 옵션 tsconfig.json { "compilerOptions": { /* 기본 옵션 */ "target": "es5", /* 사용할 특정 ECMAScript 버전 설정: 'ES3' (기본), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', ..

Typescript && Webpack && Babel이란 무엇일까 - 웹개발 필수 라이브러리

Webpack이란 ? 여러개의 파일이 브라우저에 로딩되는 것은 많은 네트워크 비용을 사용하게되면서 결국 반응속도가 느려지는 현상이 발생하게 되고 이외에도 수많은 문제점을 나타냅니다. 이러한 문제를 해결하기위해 존재한 모듈러가 바로 Webpack입니다. 쉽게말하자면 많은 파일들을 필요한 형태의 하나 또는 여려개의 번들 파일로 만들어준다. Webpack을 사용하는 이유? 모듈 번들러를 사용해야 하는 이유를 먼저 알아보자. 1. 네트워크 병목현상을 해결 할 수 있다. 너무 많은 자바스크립트 파일을 로드하게 된다면, 네트워크 병목현상에 빠질 수 있다. 이때의 해결방법으로 하나의 자바스크립트 파일만을 사용할 수 있지만 이 방법에는 문제점이 있다. ◎ 문제점 : 가독성과 유지보수 효율성이 떨어진다. 해결방법으로 W..

React Redux 상태관리 - 장바구니 만들기

지난 시간에는 React Redux 상태관리 라이브러리를 간단하게 사용해보았고 이번에는 좀더 파고들어서 어떤 기능이 있는지 알아보자 Redux 예제 - 장바구니 컴포넌트간 값의 전달을 props 로만 하다보면 복잡도가 상승하여 머리가 지끈해지게 됩니다. 이럴 때 redux 를 도입하면 이러한 복잡성을 해결핼 수 있습니다. 작업 파일 Redux 를 공부하기 위해 간 velog.io 본 글은 Redux 예제 - 장바구니 만들기를 참고해서 만들었습니다. 폴더 구조 src | | -store | | -actions | | | | - index.js | |-reducers | | - index.js | - cartReducer.js 기본 설치 먼저 라우터를 구현해야합니다 yarn add react-router-d..

[Jest] Mock Function

mock 이란 무엇인가 ? Mock Test는 테스트 대상 코드가 다른 시스템 모듈과 상호 작용하는 방식에 대해 주장(assertions)할 수 있는 단위테스트에 대한 접근 방식입니다. mock test에서 의존성은 실제 객체의 동작을 시뮬레이션하는 객체로 대체된다.mocking의 목적은 외부 종속성의 동작이나 상태가 아니라 시험 중인 코드를 분리하고 초점을 맞추는 것이다. 출처 : https://devopedia.org/mock-testing mocking은 주로 유닛 테스트에서 사용됩니다.테스트의 대상 객체는 다른(복잡한) 객체에 종속성이 있을 수 있습니다.객체의 동작을 분리하기 위해 실제 객체의 동작을 시뮬레이션하는 'mocks'로 대체합니다.이는 실제 객체가 유닛 테스트에 통합되지 않은 경우 유용..