개발이 취미인 사람

- 개요 안녕하세요. 이번 시간에는 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..

- 개요 안녕하세요. 이번 시간에는 Mixin에 대해 알아보겠습니다. 우리는 프로그램을 만들다 보면 공통적인 기능들이 많이 있습니다. 예를 들어 첫 페이지에 특정 애니메이션 기능이 있고 두 번째 페이지에도 동일한 애니메이션 기능이 있다고 하면, 우리는 이 기능을 모듈화를 하고 싶다는 생각이 듭니다. 모듈이란 무엇일까요? 사전에서 소개하는 단어 뜻은 아래와 같습니다. 여러 뜻이 있지만, 우리는 규격화된 부품이라는 단어를 잘 이해야 합니다. (IT 용어는 참 어려워요... ㅠㅠ) 규격은 기능을 만들어 놓을 수 있는 "틀"이라고 할 수 있으며, 그 규격 안에 기능을 정리해 놓은 걸 하나의 부품이라고 할 수 있습니다. 그러면 Vue 인스턴스들은 해당 부품을 찾아서 사용하면 됩니다. 재활용이 가능하며 관리면에서도..

- 지난 시간 안녕하세요. 지난 시간에는 Vue Router를 활용해서 데이터를 전달하는 방법에 대해 알아봤습니다. 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다. any-ting.tistory.com/46 [Vue] Vue Router 데이터 전달하기 - 지난 시간 안녕하세요. 지난 시간에는 Vue Router 개념 및 설치 방법에 대해 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다. :) any-ting.tistory.com/45 any-ting.tistory.com - 개요 이번 시간에는 라우트 중첩과 리다이렉트에 대해 알아보겠습니다. 라우트 중첩은 무엇일까요? 사실은 라우트 중첩보다는 컴포넌트 중첩이라고 생각하는 게 이해될 ..

- 지난 시간 안녕하세요. 지난 시간에는 Vue Router 개념 및 설치 방법에 대해 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다. :) any-ting.tistory.com/45 [Vue] Vue Router 개념 및 설치 - 개요 안녕하세요. 이번 시간에는 Vue Router에 대해 알아보겠습니다. Router란 무엇일까요? 사전을 검색해보면 네트워크에서 데이터의 전달을 촉진하는 "중계 장치"라고 설명하고 있습니다. 위 그 any-ting.tistory.com - 개요 이번 시간에는 Vue Router에서 데이터 전달하는 방법에 대해 알아보겠습니다. 기본적으로 데이터를 전달하는 방식은 두 가지 방식이 있습니다. Query Params 그리고 프로그래밍..

- 개요 안녕하세요. 이번 시간에는 Vue Router에 대해 알아보겠습니다. Router란 무엇일까요? 사전을 검색해보면 네트워크에서 데이터의 전달을 촉진하는 "중계 장치"라고 설명하고 있습니다. 위 그림과 같이 로그인 페이지와 메인 페이지가 있다면, 사용자에 요청에 맞는 페이지를 보여주는 중계 역할을 할 수 있는 기술은 Vue Router입니다. Router와 항상 함께 묶어 사용되는 개념인 Route라는 용어도 있습니다. Route를 사전에서는 "한 곳에서 다른 곳으로 가기 위해 따라가는 길(경로/루트)"라고 설명하고 있습니다. 위 그림을 보면 화살표가 route가 될 수 있습니다. 두 개념을 혼돈하지 않으셔야 개발할 때와 커뮤니케이션할 때 좋습니다. (기억하세요!! :>) - 설치 설치는 아래 공..

- 지난 시간 안녕하세요. 지난 시간에는 Computed와 Watch 그리고 Method에 대해 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다. any-ting.tistory.com/43 [Vue] Computed vs Watch vs Method 사용법 및 비교 - 지난 시간 안녕하세요. 지난 시간에는 Vue.js 생명주기, LifeCycle에 대해 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다. any-ting.tistory.com/42 [Vue] C any-ting.tistory.com - 개요 이번 시간에는 vue에서 많이 사용하는 상태 관리 라이브러리 vuex에 대해 알아보겠습니다. 상태 관리? 무슨 말..