개발이 취미인 사람

-개요 안녕하세요. 이번 시간에는 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 기술들을 활용해서 간단한 메모 앱을 만들어 보도..

- 지난 시간 지난 시간에는 하위(자식) -> 상위(부모) Comonent에게 값을 전달 방법에 대해서 알아봤습니다. 혹시 이해 못 하신 분들이나 놓치신 분들은, 아래 링크를 통해 지난 시간 글을 학습하고 오시는 걸 추천드리겠습니다. any-ting.tistory.com/9 [React Class] 하위(자식) -> 상위(부모) Component 데이터 전달 - 지난 시간 지난 시간에는 Component Props와 State 사용 방법에 대해서 알아봤습니다. 혹시 놓치고 오신 분들은 하단 링크를 통해 지난 시간 글을 학습하고 오시는 걸 추천드립니다. :) any-ting.tistory.co any-ting.tistory.com - 개요 이 글에서는 React 생명주기, 즉 Class Component ..

- 지난 시간 지난 시간에는 Component Props와 State 사용 방법에 대해서 알아봤습니다. 혹시 놓치고 오신 분들은 하단 링크를 통해 지난 시간 글을 학습하고 오시는 걸 추천드립니다. :) any-ting.tistory.com/8 [React Class] Component Props와 State 사용방법(데이터 전달) - 지난 시간 지난 시간에 React라는 기술에 대해서 간단하게 설명을 하고, 프로젝트 component를 활용하는 시간을 갖었습니다. 혹시 Component에 대한 개념에 익숙하지 않으시면 제가 올린 글을 한번 읽 any-ting.tistory.com - 개요 이번 시간에는 하위(자식) 컴포넌트에서 상위(부모) 컴포넌트에게 데이터를 전송하는 부분에 대해서 알아보겠습니다. 지난..