개발이 취미인 사람

- 개요 안녕하세요. 이번 시간에는 React TypeScript 환경에서 ESLint와 Prettier 설정하는 방법에 대해 알아보겠습니다. 지난 시간에는 JavaScript 환경에서 적용하는 방법에 대해 알아봤습니다. 개념 설명을 제외하고 설정 방법에 대해 알아보겠습니다. ESLint와 Prettier 개념 또는 JavaScript 환경에 대해 알고 싶으신 분들은 아래 링크를 통해 설정하시는 걸 추천드리겠습니다. [React] ESLint Prettier 설정 방법 1부 (JavaScript) [React] ESLint Prettier 설정방법 1부 (JavaScript) - 개요 안녕하세요. 이번 시간에는 React에 ESLint와 Prettier를 설정하는 방법에 대해 알아보겠습니다. 1부와 2부..

- 개요 안녕하세요. 이번 시간에는 React에 ESLint와 Prettier를 설정하는 방법에 대해 알아보겠습니다. 1부와 2부로 나눠 JavaScript 환경에서 설정하는 방법과 TypeScript 환경에서 설정하는 방법에 대해 알아보겠습니다. React 프로젝트를 생성하는 방법을 모르시는 분들은 아래 링크를 참고해 프로젝트를 생성하고 오시는 걸 추천드리겠습니다. [React] 개발환경 설정 [React] 개발환경 설정 - VS Code 설치 개발 환경 IDE는 VS Code를 사용하겠습니다. 본인 PC OS에 맞게 설치해주시면 되겠습니다. VS Code 다운로드 공식 홈페이지 : code.visualstudio.com/download Download Visual Studio Code - Mac,....

-개요 안녕하세요. 이번 시간에는 React 프로젝트에 TypeScript 적용 방법에 대해 알아보겠습니다. 프론트 앤드 개발 시 협업에 있어 기업에는 "Hot!" 하게 TypeScript를 적용해 사용하는 것 같아요. 실제 사용하면서 JavaScript를 사용할 때 보다 지켜야 할 규칙들이 많이 생겨 불편하기도 하고 귀찮기도 했지만, 실제 여러 사람들과 협업을 진행할 때 직관적이고 규칙이 장점도 많다는 걸 느꼈습니다. - 설정 1. 새로운 React TypeScript 프로젝트 만들기 처음 React 프로젝트를 생성할 때 TypeScript를 적용해서 프로젝트를 생성할 수 있습니다. 명령어 npx create-react-app 프로젝트이름 --template typescript 위 명령어를 통해 Rea..

- 개요 안녕하세요. 이번 시간에는 React에서 사용되는 useMemo와 useCallback에 대해 알아보겠습니다. React Hook에 대해 모르시는 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다. (: [React Hook] 함수형 Component 선언 및 useState 사용법 [React Hook] 함수형 Component 선언 및 useState 사용법 - 개요 안녕하세요. 이번 시간에는 React 16.8 버전부터 새롭게 추가된 Hook에 대해 알아보겠습니다. React Hook이 나오기 전까지는 Class 방식을 사용했습니다. State, Life Cycle 등등 Function Component 에는.. any-ting.tistory.com - 개념 우리는 React로 ..

- 개요 안녕하세요. 이번 시간에는 개발 환경과 배포 환경에 대한 환경 변수 선언 방법에 대해 알아보겠습니다. Node.js로 개발을 해보셨다면 어떤 느낌인지 팍 오실 거예요. 보통 Node.js에서는 모듈을 사용해 환경 변수를 설정하거나, package.json 파일에 명령어에 직접 선언하는 방식으로 사용하셨을 거예요. React에서도 비슷한 방법으로 사용할 수 있습니다. - 환경변수 선언 저는 .env 파일을 생성해서 환경변수를 선언하겠습니다. 기본적으로 리액트에서는 REACT_APP_ 을 반드시 붙여서 선언해야 됩니다. .env : 기본 .env.local : test 환경 외에 모든 환경에서 로드할 때 사용 .env.development : 개발환경 / npm run start & yarn sta..

- 지난 시간 안녕하세요. 지난 시간에는 useEffect를 사용하는 방법에 대해서 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 확인하고 와주세요. :) any-ting.tistory.com/23 [React Hook] useEffect 사용 (Function Life Cycle) - 지난 시간 안녕하세요. 지난 시간에는 Function Component를 만들고 useState를 사용하는 방법에 대해서 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 확인하고 와주세요. :) any-ting.tistory.c any-ting.tistory.com - 개요 이번 시간에는 Context API를 사용하는 법에 대해 알아보겠습니다. 일단 Context API란 무엇일까요? 공식 홈페이지에..

- 지난 시간 안녕하세요. 지난 시간에는 Function Component를 만들고 useState를 사용하는 방법에 대해서 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 확인하고 와주세요. :) any-ting.tistory.com/22 [React Hook] 함수형 Component 선언 및 useState 사용법 - 개요 안녕하세요. 이번 시간에는 React 16.8 버전부터 새롭게 추가된 Hook에 대해 알아보겠습니다. React Hook이 나오기 전까지는 Class 방식을 사용했습니다. State, Life Cycle 등등 Function Component 에는.. any-ting.tistory.com - 개요 Class Component에는 기본적인 Life Cycle 생명주기가 있..

- 개요 안녕하세요. 이번 시간에는 React 16.8 버전부터 새롭게 추가된 Hook에 대해 알아보겠습니다. React Hook이 나오기 전까지는 Class 방식을 사용했습니다. State, Life Cycle 등등 Function Component 에는 없습니다. 하지만 16.8부터는 이런 기술을 제어할 수 있게 됐습니다. 그러면서 객체지향에 대한 언어를 잘 몰라도 기본 자바스크립트 문법을 아신다면 React 개발하는데 문제가 없어졌습니다. :) React 16.8 버전부터는 Hook이라는 기술이 추가되어 Component 만들 때 Class 방식보다는 Function 방식으로 만들어 사용합니다. - 사용법 1. Component 선언 선언방식 (1) import React from 'react'; ..

- 개요 이번 시간에는 React에서 서버와 통신을 할 때 사용되는 Axios 라이브러리에 대해서 알아보겠습니다. - 설치 npm 사용 npm install axios yarm 사용 yarn add axios npm 또는 yarn 패키지 매니저를 사용해서 설치를 할 수 있습니다. ES5 => const axios = require('axios') ES6 => import axios = require('axios') 위 방법으로 모듈을 불러와 사용할 수 있다. - 사용법 RESTFul API 통신을 할 때 CRUD가 중요합니다. C : Create(생성) R : Read(읽기) U : Update(수정) D : Delete(삭제) 자원을 생성하고 조회하고 그리고 수정할 수 있으며 삭제도 할 수 있습니다. ..

- 지난 시간 안녕하세요. 지난 시간에는 Class Component Life Cycle(생명주기)에 대해서 알아봤습니다. 혹시 이해 못 하신 분들이나 놓치신 분들은, 아래 링크를 통해 지난 시간 글을 학습하고 오시는 걸 추천드리겠습니다. any-ting.tistory.com/10 [React Class] Class Component Life Cycle(생명주기) - 지난 시간 지난 시간에는 하위(자식) -> 상위(부모) Comonent에게 값을 전달 방법에 대해서 알아봤습니다. 혹시 이해 못 하신 분들이나 놓치신 분들은, 아래 링크를 통해 지난 시간 글을 학습하고 any-ting.tistory.com - 개요 이번 시간에는 지난 시간까지 알아본 React 기술들을 활용해서 간단한 메모 앱을 만들어 보도..