프론트 엔드/React

Js와 tsx,ts의 차이점

이번시간에는 개발시에 가장 중요한 파일 설정에 관해서 알아보겠습니다. 1. 파일 구성 우선 React 개발시에는 3가지의 구성된 파일 규칙이 있는데요 먼저 가장 기본인 JS 부터 JSX, ts , TSX 로 구성되어있습니다. 1. Javascript 우선 자바스크립트는 객체 지향 프로그래밍으로 브라우저 내에서 주로 사용되며, 다른 응용 프로그램 내장 객체에도 접근 가능한 언어입니다. 또한 Node.js라는 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있습니다. 자바스크립트 기반으로 된 언어들도 많은데요 대표적으로 뽑자면 가장 핫한 React를 뽑을 수 있습니다. React에 가장 장점인 유지보수 모바일 개발이 가장 좋은점인데요. 이런것과 JS와 합친것이 가장 큰 장점입니다. JS의 장점은 가장 효율적..

[REACT]CORS 란 무엇인가?

리액트 Express를 두번째를 이해하기 위한 CORS를 알아보도록 하겠습니다. - 리액트 영화앱을 만들기 위한 TMDB(The Movie API)에 API키를 사용해보겠습니다. PostMan에서 데이터가 들어오는 것을 확인하고 react에서 axios를 이용해 데이터를 불러오겠습니다. import React, { useState, useEffect } from 'react'; import './App.css'; import axios from 'axios'; import SingleMovie from './SingleMovie'; const REACT_TMDB_API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxx" function App() { const [movies, setMovie..

[React + Express] Node.js, Express란 무엇인가

안녕하세요?? 이번시간에는 React를 개발할때 프론트와 백엔드를 구축해주는 서버-클라이언트 React+ Express JS에 대해 알아보겠습니다. 이번 시간에는 가장 중요한 서버를 연결하는 부분이기에 좀더 자세히 복잡한것을 좀더 간편하게 알아보도록 하겠습니다. 제가 분석한 날짜는 최근 ~ 1년전 까지의 포스트를 분석하며 만들었으며 가장 중요한 라이브러리 이기때문에 업데이트에 맟춰 포스팅 해드리도록 하겠습니다. 먼저 Express의 대한 개념부터 살펴보도록 하겠습니다. 1.Express 란 ? - Express.js 또는 간단한 익스프레스는 Node.js를 위한 웹 프레임워크 중 하나로, MIT허가서로 라이선스되는 자유-오픈 소스 소프트웨어 입니다. 웹 어플리케이션, API 개발을 위해 설계되었습니다. ..

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', ..