innovatorwhy의 등록된 링크

 innovatorwhy로 등록된 티스토리 포스트 수는 52건입니다.

[Recoil] AtomFamily - typescript [내부링크]

Recoil에서 atom은 상태(state)를 나타내고 이렇나 atom을 관리합니다. 그럼 동일한 atom을 여러개 생성하고자 하면 어떻게 할까요? 그때 atomFamily를 사용합니다. atom은 key에 따라서 상태가 관리됩니다. 즉, key 변경된다면 동일한 atom도 다른 상태값을 가지게 됩니다. atomFamily를 이러한 key를 전달하여 atom을 생성할 수 있습니다. 예를 들면, InfiniteScroill과 같은 component에서는 component마다 page 번호, 도달여부(hasMore)를 가지고 있게 됩니다. 먼저, 아래와 같은 atom을 생성할 수 있습니다. interface ScrollInfo { page: number; hasMore: boolean; } atom({ ke..

[React] Infinite scroll(2) - React query + Recoil + 최적화 [내부링크]

구현 방법은 아래와 같습니다. atomFamily를 이용하여 state 관리 useQuery를 사용하여 server data 관리 ref array를 이용하여 각 element를 관리하여 최적화 관리 최적화 Rendering 여부 판단 atomFamily를 이용하여 state 관리 atomFamily를 이용하여 scroll 정보와 리스트 item 정보를 관리합니다. const todoGroupListSelector = atomFamily({ key: 'todoGroupList', default: (key: string) => atom({ key: `todoGroupList_${key}`, default: [] }), }); interface ScrollInfo { page: number; hasMore:..

[React] Infinite scroll (1) - React query [내부링크]

Infinite scroll은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 리스트입니다.사용자는 페이지 이동없이 Scroll을 하게되고 Scroll에 따라 컨텐츠가 로드 됨으로써 지속적인 컨텐츠를 보여주게 됩니다. 특히 모바일에서 많이 사용합니다. 구현 방법 IntersectionObserver 사용 Event에서 페이지 번호 증가 추가 컨테츠 로딩 1. IntersectionObserver https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API Intersection Observer API - Web API | MDN Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 documen..

[React] Recoil Selector [내부링크]

React와 같은 SPA는 여러 컴포넌트간의 관계, 즉 state관리가 가장 중요한데, Recoil을 사용하면 State(Recoil Atom)를 관리할 수 있다. https://recoiljs.org/ko/docs/basic-tutorial/selectors/ Selectors | Recoil Selector는 파생된 상태(derived state)의 일부를 나타낸다. 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각할 수 있다. recoiljs.org 그러면, selector는 무엇일까? 단순하게, 정의하면 state를 다양한 형태로 조회하게 해주는 방법이다. - state관리를 위해 recoil을 사용하고 화면과 분리하여 state를 관리하고자 recoi..

React Query - useQuery 맛보기 [내부링크]

React Query는 Ract에서 네트워크 데이터를 처리하며 cache 및 관리까지 지원해주는 라이브러리 입니다. 이전에는 Redux 및 Recoil와 같은 상태 관리 라이브러리에 네트워크 처리를 작성하여 처리하는 경우가 많았지만 React-query를 사용하면 Recoil에서는 상태관리를 하고 React-query에서 제공 하는 훅을 사용하여 데이터를 캐싱 및 관리합니다. 따라서 상태관리와 데이터 처리를 분리함으로써 훨씬 직관적이며 사용법도 쉽고 많은 기능을 제공하기 때문에 개발자도 쉽게 사용할 수 있습니다. Recoil에서 데이터 처리는 아래와 같은 절차가 필요합니다. 1. atom 생성 const todoAtom = atom({ key: '@todo', default: [], }); 2. sele..

React 조건부 Rendering시 주의점 [내부링크]

조건부 사용시 가장 주의해야 할 점은 반드시 조건부 Rendering이 발생하는 컴포넌트가 아니 해당 컴포넌트를 사용하는 곳에서 조건부를 결정해야 한다는 것입니다. 말이 어려운데 간단한 샘플을 보겠습니다. 1. 동적 로딩이 불가합니다. - 먼저 동적로딩에 대해 알아봅시다. https://ko.reactjs.org/docs/code-splitting.html 코드 분할 – React A JavaScript library for building user interfaces ko.reactjs.org 해당 컴포넌트를 초기 로딩하지 않고 사용할때 로딩하여 초기 속도를 향상시키는 목적으로 사용합니다. 하지만, 해당 컴포넌트에 대한 조건부 Rendering을 안에 두면 무조건 초기 로딩해야 합니다. const Po..

[Typescript] for loop (for in)구현하기 [내부링크]

javascript에서 object 요소를 가져올때 for in loop를 많이 사용하는데, typescript에서는 해당 문법에서 eslint type 오류가 발생합니다. key, value 타입 정의가 없어서 그런데요, type을 [key:string]:unkown으로 설정하는 방법도 있겠지만, 그보다는, javascript Object 문법을 사용하면 type정의 필요없이 구현이 가능합니다. Object.entries() Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. Object.assign() Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 ..

React + immer 를 사용한 불변성 관리 (feat. recoil) [내부링크]

React 에서 useState hook 및 Recoil Atom을 사용하여 React state를 관리 할 수 있습니다. https://blog.naver.com/innovatorwhy/222996259195 React Recoil Atom으로 팝업 관리하기 Recoil Atom 공식 문서를 보면 상세하게 알 수 있습니다. 단순하게, Recoil은 상태를 관리하는 라이브러... blog.naver.com 따라서 관리할 때 state 변경(set)이 발생하게 되는데, 그때 사용하는 불변성관리 라이브러리가 immer입니다. recoil을 사용할때 아래와 같은 방법으로 해당 state를 변경할 수 있습니다. const alertAtom = atom({ key: 'common/alert', default: {..

React Typescript 함수 type 정의시 eslint 오류 해결 [내부링크]

Typescript 에서 props를 전달 받는 함수를 정의할 때 아래와 같이 사용합니다. export interface IAlert { title?: string; content?: string; showAlert(title: string): void; } 이때 아래와 같은 warning 혹은 error가 발생합니다. 해당내용은 title이랑 변수가 사용되지 않았다는 것인데, interface정의라 사용할 이유가 없으므로, 특정 패턴으로 무시하는 eslint rule을 적용하면 해결 됩니다. eslintrc.js rules: { '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], ... }

React TDD 테스트 케이스 별 구현 방법 [내부링크]

주로 사용하는 케이스만 작성하였습니다. 테스트 대상 조회 getByTestId : data-testid로 조회 ... // test.ts screen.getByTestId('title') 2. geByText : text로 조회 제목 ... // test.ts screen.getByText('제목') 3. geByRole : role로 조회 제목 ... // test.ts screen.getByRole('제목') 4. getAllByText, getAllByTestId, getAllByRole... : 해당 요소들을 전부 조회 - 결과값은 배열입니다. 제목 두번째 제목 세번째 제목 ... // test.ts screen.getAllByTestId('제목') 데스트 케이스 구현 1. toBeInTheDoc..

Styled-components props 전달 [내부링크]

Styled-components를 사용하면 React에서 쉽게 css를 적용한 component를 생성할 수 있습니다. https://blog.naver.com/innovatorwhy/222962662913 CSS in JS : styled-components https://styled-components.com/ 1. styled-components 사용하기전에 Template Literal에 대해 먼저 알아... blog.naver.com 예를 들어 아래와 같이 Title이란 컴포넌트를 styled-components를 만들었다고 가정한다면, 아래와 같습니다. import styled from 'styled-components'; export const Title = styled.div` line-h..

React Typescript TDD Mock 사용시 오류 해결 (Property 'mockResolvedValue' does not exist on type) [내부링크]

Rest API 테스트를 위해서는 jest의 mock Function을 사용합니다. 또한 Rest API는 async로 동작하기 때문에 mockResolvedValue 사용하여 결과값을 의미로 설정합니다. const getTodo = jset.fn(); getTodo.([ { id: 2, title: '할일', subTitle: '부제목', percent: 70 }, { id: 3, title: '할일', subTitle: '부제목', percent: 50 }, ]) Typesciprt에서 위와 같이 사용하면 아래와 같은 오류가 발생합니다. Property 'mockResolvedValue' does not exist on type getTodo가 mock function으로 변경된 것을 인지 하지 못해..

Front-End TDD [내부링크]

Front-end 에서 TDD의 중요성이나 필요성은 그동안 많은 블로그나 유투브 영상에서 많이 접하셨을텐데요. 여기서는 TDD를 어떻게 적용해보면 좋을까에 대한 이야기를 하고자 합니다. 개발은 기획서 또는 만들고자 하는 화면 정의서등에 따라서 진행됩니다. 그럼 기획자는 해당 화면에서 보여주고자 하는 결과등을 기획서에 작성하는데요. 여기서 그 결과가 바로 Testcase가 된다고 보시면 됩니다. 예를들면, 일반적인 얼럿 팝업에 대한 기획서가 있고, 기획에서 원하는 결과가 아래와 같다고 가정한다면. 1.팝업이 열려야 한다. 2. 제목이 나와야 한다. 3. 내용이 나와야 한다. 4. 닫기 또는 확인을 누르면 팝업이 닫혀야한다. 그러면 개발자는 위 내용 그대로 Testcase로 만들면 됩니다. 처음에는 Test..

[React] Back 버튼으로 Modal 제어하기(2) [내부링크]

https://innovatorwhy.tistory.com/40 [React] Back 버튼으로 Modal 제어하기(1) Android에서는 물리적인 Back 버튼이 존재합니다. 따라서, Hybrid Web 개발시 해당 버튼의 액션을 고려해야 합니다. 고려해야하는 경우는 팝업이나 Toast UI 같은 화면 위에 뜨는 팝업 즉, Layer 팝업이 열 innovatorwhy.tistory.com 위와 달리 window history의 api와 recoil을 활용하면 코드를 간결하게 사용하여 modal을 back버튼으로 제어 할 수 있습니다. 주요 개념은 아래와 같습니다. Modal과 같은 Layered Element들을 배열로 관리합니다. 해당 Modal을 관리하는 화면에서 사용할 수 있는 custom ho..

[React] Back 버튼으로 Modal 제어하기(1) [내부링크]

Android에서는 물리적인 Back 버튼이 존재합니다. 따라서, Hybrid Web 개발시 해당 버튼의 액션을 고려해야 합니다. 고려해야하는 경우는 팝업이나 Toast UI 같은 화면 위에 뜨는 팝업 즉, Layer 팝업이 열렸을 경우 입니다. Android Native앱에서는 Layered UI에 대한 Back 버튼 기능을 제공하나, Hybrid Web에서는 개발자가 직접 구현해야합니다. 이때 onpopstate Event를 사용하여 해당 기능을 구현할 수 있습니다. Layered UI는 history의 잡히지 않습니다. 따라서 history back키의 동작이 이전 history 즉, 팝업을 띄운 페이지 전페이지로 돌아갑니다. 그래서 LayeredUI를 강제적으로 history.forward를 실행..

React Recoil vs Context [내부링크]

Recoil과 Context 모두 React에서 여러 컴포넌트사이에 상태를 관리 하는 라이브러리입니다. Context는 Props drilling을 해소하고자 만들어진 React에 Built-in된 라이브러리이며, React는 좀더 모던하고 향상된 기능을 지원하는 상태관리를 위한 라이브러리 입니다. Recoil이 대중화되기전에는 Context를 활용하여 상태관리를 하는 프로젝트도 많았지만, 최근에서 Recoil을 많이 사용하는 추세입니다. 그럼 간단한 코드로 두 가지 기능을 비교해보겠습니다. 1. 속성 정의 Recoil : 전역으로 설정되기 때문에 키 값을 가지며 키값은 유일해야 합니다. export const PopupTodoState = atom({ key: 'PopupTodo/show', defau..

React forwardRef - (feat. 공통 팝업) [내부링크]

forwardRef는 component간 ref를 전달하기 위해 사용하는 Function 입니다. React에서는 ref를 props로 직접전달하지 않고 fowardRef를 통하여 해당 ref를 전달합니다. DOM 엘리먼트로 ref 전달하기 고차 컴포넌트(Higher Order Component)로 ref 전달하기 그러면, 일반적으로 사용될 수 있는 공통 팝업을 통해 구현해보겠습니다. 팝업은, - Transition 효과가 적용되어야 하며 - close 함수를 제공하여햐 합니다. 1. forwardRef를 사용하여 component 생성 - 인자로 props, ref 전달받는 component를 생성합니다. - ref는 해당 팝업의 close함수를 "상위 컴포넌트에서 사용하고자 참조하기 위해서" 사용합니..

React Recoil Atom으로 팝업 관리하기 [내부링크]

Recoil Atom 공식 문서를 보면 상세하게 알 수 있습니다. https://recoiljs.org/docs/basic-tutorial/atoms/ Atoms | Recoil Atoms contain the source of truth for our application state. In our todo-list, the source of truth will be an array of objects, with each object representing a todo item. recoiljs.org 단순하게, Recoil은 상태를 관리하는 라이브러이며, Atom은 상태단위 RecoilState입니다. 간단하게 사용법을 알아보자면, 사용방법은 아주 쉽습니다. key, default 설정만 하면 끝입니다..

React Transition Modal 적용 [내부링크]

CSSTransition을 사용하면 팝업에서 Transition 효과를 적용 할수 있습니다. https://reactcommunity.org/react-transition-group/transition React Transition Group A function child can be used instead of a React element. This function is called with the current transition status ('entering', 'entered', 'exiting', 'exited'), which can be used to apply context specific props to a component. {state => ( )} reactcommunity.org ..

type vs interface [내부링크]

Typescript에서 객체 타입을 만드는 방법 중에 type과 interface가 있습니다. 사용방법이나 사용 이유가 거의 비슷한데요. 많은 프로젝트에서 2가지 방법중에 고민하는 경우가 많이 있습니다. 간략하게 비교해보면 아래와 같습니다. type과 interface의 유사한 기능 1. 선언 type BirdType = { wings: 2; }; interface BirdInterface { wings: 2; } const bird1: BirdType = { wings: 2 }; const bird2: BirdInterface = { wings: 2 }; 2. 확장 - type은 & 사용 - interface는 extends를 사용하여 확장 type Robin = { nocturnal: false } ..

React + Recoil [내부링크]

React와 같은 SPA(Single Page Application) 에서는 상태관리는 필수가 됐습니다. 요즘 React 프로젝트에서는 상태관리 라이브러리로 Recoil을 많이 사용합니다. Recoil 사용이유나 방법등은 Recoil 공식 문서에 설명이 잘되어있습니다. 시작전, 반드시 문서를 읽어보기를 권합니다. 사용동기 https://recoiljs.org/ko/docs/introduction/motivation 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. recoiljs.org 주요개념 Atom 및 Selector https://recoiljs.org/ko/docs/introduction/..

React Popup(팝업) 생성하기 [내부링크]

1. 팝업 Component 생성 - props로 해당 Component에 값을 전달 - 여기서는 onClosed 함수를 전달하여 뒤로가기 버튼을 눌렀을때 이벤트를 전달해줍니다. export default function PopupTodo(onClosed) { return ( 팝업 Todo 할일1 할일2 ); } 2. 부모 Component에서 팝업 제어 - state를 사용하여 팝업 Component를 제어 합니다. - true : mount, false : unmount - onClosed 이벤트를 전달받아 해당 state를 false로 변경합니다. export default function HomePage() { const [isShowPopup, setShowPopup] = useState(fal..

git template 등록 [내부링크]

git commit 시 commit message는 정말 중요합니다.! commit은 프로젝트 진행 중 많게는 수백번이상 수행되는데, 잘못된 커밋 메시지나 기본 커밋메시드 (예를드면, 브랜치명 아이디, merge to ...)등 으로 커밋이나 푸시가 이루어지게 된다면, 향후 히스토리 관리가 정말 어렵습니다. (history 상세에서 파일비교를 일일히 해야 하는 참사가..) 따라서, 프로젝트내 규칙에 따라서 commit Message template을 등록하여 사용하는 것이 좋습니다. 1. Project root에 .gitmessage.txt 파일을 생성합니다. 프로젝트 특성에 따라 자유롭게 변경합니다. # : 의 형식으로 작성 # 50자 이내 / 변경사항이 "무엇"인지 정확하게 작성해야 함 # 예) fe..

VSCode 확장 프로그램 [내부링크]

VSCode 실행후 Extension으로 이동 후 해당 Extension 검색 후 설치 필수 설치 Vetur Vue개발에 필요한 코드 하이라이트를 위해 사용 ESLint 자바스크립트 문법 검사 및 자동 수정 선택 설치 Vue VSCode Snippets 코드 자동 생성을 위한 확장팩. Java와 같은 효과를 기대하긴 어렵지만 잘 사용한다면 코드 작성시 유용할 수 있다. vscode-icons 아이콘 보기 쉽게 표시 폴더 및 파일 아이콘을 구분지어 표시 Git History

v-model 커스텀 Component 만들기 [내부링크]

커스텀 Component를 만드는 경우가 종종 생기는데, 그때 props로 전달해도 되지만 v-model로 변경된 값을 사용하고자 하는 경우가 있다. props로 전달했을 경우는 변경된 값을 event로 전달 받아야 하지만, v-model은 바로 변경된 값을 사용할수 있다. 예를 들어 input을 가지고 있는 공통 input을 만들어보자. 만드는 절차는 간략히 보면 아래와 같다 . 1. 공통 Component 생성 2. v-model로 받을 인자를 props로 설정 : - Vue2에서 v-model 선언 export default { model: { prop: 'title', }, props: { // 다른 목적을 위해 'value' 사용이 가능 합니다, model을 지정하지않을때 'value' 사용 v..

컴포넌트 import 없이 사용하기 - 전역등록 [내부링크]

컴포넌트를 사용할때는 import를 이용해서 component를 등록하여 사용한다. 하지만, 공통 컴포넌트는 어디서나 사용할 수 있기때문에 전역으로 등록하면 각각 import를 하지 않고 사용할 수 있는 장점이 있다. 하지만 주의해야 할점은, 그렇다고 많은 컴포넌트를 전역으로 등록하면, 초기 로딩시 무수히 많은, 사용하지도 않을 컴포넌트를 미리 로드하여 리소스 낭비가 발생한다. 따라서, 매우 Common한 컴퍼넌트 예를들면, Check, Input, Select와 같은 컴퍼넌트만 미리 등록해야 한다. 먼저 등록하는 방법은 아래와 같다. components/common/index.js import upperFirst from 'lodash/upperFirst' import camelCase from 'lo..

Vue Router v4.x [내부링크]

1. Vue Router 설치 npm install vue-router@4 2. Vue Router 사용 main.js import { createApp } from 'vue' import App from './App.vue' import CommonComp from '@comp/common' import Store from '../store' import Router from '../router' createApp(App) .use(CommonComp) .use(Store) .use(Router) .mount('#app') router/index.js import { createRouter, createWebHashHistory } from 'vue-router' import routes from '...

Vuex [내부링크]

"Vuex는 Vue.js 상태관리 패턴 입니다." 사실 모든 SPA 프로젝트에서는 상태관리 패턴을 기본으로 사용중이거나 고려중일 것입니다. 사용을 고려하는 이유들은 간단히 보면 아래와 비슷합니다. 1. 각 Components 간의 데이터를 공유하고 처리 가능 2. 화면 구현과 이터 처리하는 로직을 구분함으로서 유지보수가 용이 1. 설치 npm i --save vuex@next 2. Vuex 구조 namespaced를 사용하여 아래와 같이 각 업무 별로 구분해준다. 3. vuex 사용 : Namespaced를 사용할 경우 실제 vuex를 사용하고자 하는 component에서 아래와 같이 사용한다. createNamespacedHelpers(moduleName) 그런데 이 경우 moduleName이 정확해야..

Vue Application Package 구조 [내부링크]

나같은 경우는 보통 Vue Application Package 구조를 잡을때 아래와 같이 잡는편이다. 그리고 각 폴더 밑으로 업무레벨로 폴더구조화 한다. api # Backend API 정의 : *.js config # 빌드설정 public router # 라우터 설정 src assets components # 각 Vue Component : *.vue constants # 상수값 정의 : *.json mixins page # 라우터에 정의한 Vue Component : *.vue store

Vue Component 쉽게 debug 하기 [내부링크]

Vue Component에서 해당 데이터를 확인하거나 함수를 Chrome에서 테스트 하고 싶을때, 바로 접근 할수가 없어서 테스트가 어려운 경우가 있다. debugger 코드를 사용할 수도 있지만, 간단하게 사용할 수 있는 방법도 있다. created(){ window.test = this } 이제 window 변수로 test가 생성되었으니 크롬 console에서 바로 접근이 가능하다. 변수, 함수, 라우터, vuex까지 모두 테스트 해보자. Doit 주의 : 단, 테스트 끝나고 반드시 지우자. window 전역 변수라 메모리에서 사라지지 않으며, 누구나 접근할 수 있다.

eslint 적용 - vue3 [내부링크]

ESlint는 잘못된 코드나 권장하지 않는 코드를 자동으로 검출하고 자동으로 수정해주는 반드시 필요한 도구다. 무조건 사용하자. 1. VS Code extension 설치 2. npm으로 eslint 설치 3. .eslintrc.js 생성 4. autofix 설정 1. VS Code extension 설치 사진 삭제 사진 설명을 입력하세요. 2. npm으로 eslint 설치 npm i --save-dev eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise 3. eslintrc.js 생성 root 경로에 .eslintrc.js 파일 생성 module.exports = { env: { browser: true..

Bundle 용량 최소화(2) [내부링크]

1. UglifyJsPlugin사용 : js minify 설치 npm i --save-dev uglifyjs-webpack-plugin webpack설정 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { productionSourceMap: false, lintOnSave: false, configureWebpack: { optimization: { minimizer: [new UglifyJsPlugin()] } }, css: { sourceMap: false } } 2.lodash 삭제 또는 필요 Function만 import - javascript에서 제공하는 기본 method로 변경 - method 직접 구현 3..

Bundle 용량 최소화(1) - 분석 [내부링크]

먼전 각 Bundle의 용량을 분석하여 어느곳에서 많은 용량을 차지하고 있는지 확인해야 합니다. https://www.npmjs.com/package/webpack-bundle-analyzer webpack-bundle-analyzer Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. Latest version: 4.7.0, last published: 3 months ago. Start using webpack-bundle-analyzer in your project by running `npm i webpack-bundle-analyzer`. T www.npmjs..

Vue Webpack 설정 - vue.config.js [내부링크]

Vue Cli 3.x 부터는 config파일이 없습니다. 직접 vue.config.js 파일을 만들어야 합니다. vue.config.js가 필요한 이유는, 개발, 운영등 빌드 환경과 빌드 옵션을 추가하기 위해 사용합니다. 구성은 아래와 같습니다. 기본 빌드 환경 + 각 빌드 환경 + 각 빌드 환경 변수 1. 기본 빌드 환경 파일 : vue.config.js 2. 각 빌드 환경 파일: dev.config.js, prd.config.js... 3. 각 빌드 환경 변수 : .dev.env, .prd.env ... vue.config.js const path = require('path') const merge = require('webpack-merge') const buildConfig = process.e..

Git 연결 [내부링크]

Git은 형상 관리 툴이다. 즉, 내가 만든 소스를 버전 별로 관리하고 다른 사람과 협업하여 소스를 합치고 관리하는등 소스를 관리 해주는 역할은 한다. Git을 연결하는 절차는 아래와 같다. 1. gihub 계정 생성 2. Repository 생성 3. Project와 git 연결 1. gihub 계정 생성 https://github.com/ 이동 후 회원 가입 GitHub: Let’s build from here GitHub is where over 94 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review cod..

Vue.js 셀프 학습 [내부링크]

Vue.js는 한국어로 제공되는 공식 문서가 있으므로 해당 공식 사이트를 정독한다면 Vue.js 어느정도 개발하는 것이 가능합니다. 특히 Vue3.0, Compotistion API를 공부하는 것이 좋습니다. https://v3-docs.vuejs-korea.org/guide/quick-start.html 빠른 시작 | Vue.js v3-docs.vuejs-korea.org https://v3-docs.vuejs-korea.org/ Vue.js - The Progressive JavaScript Framework | Vue.js 접근성 HTML,CSS, 자바스크립트 표준을 기반으로, 쓰기 편한 API와 최고 수준의 문서를 제공합니다. v3-docs.vuejs-korea.org https://v3-docs..

Vue.js - 개발 Tool 설치 : Visual Studio Code [내부링크]

Vue.js 개발을 위해서는 아래와 같은 준비단계를 거칩니다. 1. Node 설치 2. Vue Cli 설치 3. 개발 Tool 설치 : Visual Studio Code 3. 개발 Tool 설치 : Visual Studio Code 이제 실제 개발하기 위해서는 개발을 할수있는 환경 즉, 개발 Tool이 필요합니다. 여기서는 Visual Studio Code를 사용합니다. 이유는, 1. Microsoft(미국 IT 대기업)에서 만들었음 2. 여러 플로그인들이 많음 3. 속도 빠름 4. 무료!! https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and ..

Vue.js - Vue Cli 설치 [내부링크]

Vue.js 개발을 위해서는 아래와 같은 준비단계가 필요합니다. 1. Node 설치 2. Vue Cli 설치 3. 개발 Tool 설치 : Visual Studio Code 2. Vue Cli 설치 Vue Cli : Vue를 개발하기 위해 기본 세팅을 친철하게 해주는 환경 구성이라고 보면 됩니다. 절차는 아래와 같습니다. 1. npm으로 vue cli 설치. 2. 만들고싶은 project명으로 vue project 생성. 3. vue project 실행 1. npm으로 vue cli 설치 먼저 이전의 설치한 npm을 이용하여 vue cli 설치 커맨드 실행후 아래와 같이 입력 * -g는 전역으로 여기저기서 사용할 수 있게 해주는 옵션입니다. npm install -g @vue/cli 실행하면 아래와 같은 ..

Vue.js Node 설치 [내부링크]

Vue.js 개발을 위해서는 아래와 같은 준비단계가 필요합니다. 1. Node 설치 2. Vue Cli 설치 3. 개발 Tool 설치 : Visual Studio Code 1. Node.js 설치 - npm을 사용하기 위해 설치 - npm : node.js package manager로서 간단하게 말하면, Javascript 개발 플랫폼이라고 대략적으로 이해하면 됩니다.(그냥, 수많은 오픈라이브러리를 쉽게 설치하고 사용할 수 있게 해줍니다. 심지어, javscript로 구현 가능한 서버까지...) https://nodejs.org/ko/ Node.js Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 접속..

React Typescript 적용 [내부링크]

적용 단계는 다음과 같습니다. 1. tsconfig.json추가 하여 typescript 설정 2. 라이브러리 type 설치 3. eslint 설정 1. tsconfig.jon 추가 : 기존 jsconfig.jscon 파일이 있다면 삭제 { "compilerOptions": { "target": "es6", "lib": [ "dom", "dom.iterable", "esnext" ], "incremental": true, "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, ..

React Router Transition 효과 적용 [내부링크]

Router 이동시 마다 모바일과 같이 Transition 효과를 적용할수 있습니다. TransitionGroup, CSSTransition 활용하여 2개 Layout이 움직이는 것처럼 효과를 주는 것이 가능합니다. 적용 순서 TransitionGroup 정의 CSSTransition 정의 CSS 정의 : Route 및 Transition Class router back 감지 1. TransitionGroup className : TransitionGroup CSS class명을 지정 ... 2. CSSTransition key : 해당 Key로 해당 Route를 찾아서 Transition 효과를 적용함 useLocation을 이용하여 현재 path를 key 로 설정 className : 실제 Trans..

React Routes, Route 사용시 배열로 관리하기 [내부링크]

재귀함수를 사용하여 배열로 부터 Route를 생성하자. 는 로 정의하며 부모와 자식간의 관계로 나타냅니다. 하지만, Array등으로 정의해서 관리하지않으면 복잡하고 보기 어려운 코드로 변질됩니다. 나쁜예) App.jsx {/*자식 Route 정의 */} ..... 그래서, Data API를 사용하는 Router는 Array로 Route 정의를 관리합니다. 좋은예) routes.js const routes = [ { path: '/', element: , }, { path: '/first', element: , }, { path: '/second', element: , }, { path: '/styled', element: , }, ]; 따라서 아래와 같은 방법으로 를 동적으로 생성하는 방법으로 위와 같이..

React Router [내부링크]

React Router 설정하는 방법은 크게 2가지 입니다. Data API를 사용하는 지원하는 Router (v6.4) Data API를 지원하지 않는 Router Components 공식문서에서는 Data API를 사용하는 지원하는 새 Router를 사용하는 것을 권장합니다. 사용법은 어렵지 않으나, 아직 Transition 효과를 적용하는 예제가 많지 않습니다. 따라서, 2가지 방법에 대해 알아보고자 합니다. https://innovatorwhy.tistory.com/10 React Router - Data API를 사용하는 Router Router 사용하는 순서는 아래와 같습니다. App.js - router 생성 및 RouterPrivder 정의 routes 배열 정의 - path 및 eleme..

React alias 설정시 Code Hint 설정 [내부링크]

alias 설정이 아래와 같이 끝났다면 https://innovatorwhy.tistory.com/7 React Path alias 절대경로 설정 React에서 import를 할때 상대경로를 사용하는 경우가 많은데, 아래와 같이 상대경로가 복작한 경우가 많다. import { Page } from '../../components/Container'; import UserPopup from '../../../components/popup/UserPopup'; 이 innovatorwhy.tistory.com 별다른 설정을 하지 않으면 import문 작성시 code hint가 뜨지 않는다. 따라서 vscode에서 인식하도록 설정이 필요하다. jsconfig.json { "compilerOptions": { "..

Data API를 지원하지 않는 Router Components [내부링크]

사용방법은 단순합니다. 1. 정의 2. 정의 3. 정의 - Route 및의 자식 Route 정의 4. 지정 - 부모Route와 자식Route간의 연결 App.js import { Routes, Route, BrowserRouter } from 'react-router-dom'; import HomePage from '@/pages/HomePage'; import FirstPage from '@/pages/FirstPage'; import SecondPage from '@/pages/SecondPage'; import ChildPage from '@/pages/ChildPage'; function App() { return ( {/*자식 Route 정의 */} ); } export default App; ..

React Router - Data API를 사용하는 Router [내부링크]

Router 사용하는 순서는 아래와 같습니다. App.js - router 생성 및 RouterPrivder 정의 routes 배열 정의 - path 및 element 각 컴포넌트 정의 App.js - router 생성 - createBrowserRouter를 통한 Router 생성 - RouterPrivder 정의 import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import routes from '@/routes/routes'; const router = createBrowserRouter(routes); function App() { return ; } export default App; routes.js - path 및..

React Path alias 절대경로 설정 [내부링크]

React에서 import를 할때 상대경로를 사용하는 경우가 많은데, 아래와 같이 상대경로가 복작한 경우가 많다. import { Page } from '../../components/Container'; import UserPopup from '../../../components/popup/UserPopup'; 이때 사용하는 것이 alias craco, react-app-rewire-alias등 오픈 라이브러리가 있으니 골라서 사용하면된다. 다운수가 좀 더 많은 react-app-rewire-alias 사용 설치 npm install --save-dev react-app-rewire-alias 2. config-overrides.js 파일 생성 const { alias } = require('react..

React Rendering이 두번씩 실행되는 경우 [내부링크]

React로 Page를 개발하는데, Rendering이 두번씩 실행되는 경우가 있다. 한참을 코드 분석해도 원인을 알수 없다가, 우연히 해결했는데... 바로 Strict 모드 !! const StyledPage = () => { console.log('Rendering'); return ( styled-components 버튼1 버튼2 ); }; export default StyledPage; console을 찍으면 두번씩 호출 index.js - Strict 모드 주석처리 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // // ); console이 한번으로 줄었다. 그렇다고, Strict Mode를 사용하..

CSS in JS : styled-components [내부링크]

https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress c styled-components.com 1. styled-components 사용하기전에 Template Literal에 대해 먼저 알아야 한다. const name = 'template literal'; const message = `string text ${name}`; console.log(message); //string text template literal 간단히 말해서 string에 변수를 조합해서 사용하는 방..

Import Style CSS [내부링크]

예전부터 사용하던 CSS 나 SCSS와 같이 Style을 정의해서 사용합니다. 파일 구성 SamplePage.jsx import './style/SamplePage.css'; const SamplePage = () => { return ( {}} /> 제목 ); }; export default SamplePage; 장점 - 기존 퍼블리셔와 역할은 분리할 수 있다. - Style CSS로 파싱하는 작업이 없기 때문에 React Style 보다 속도가 빠르다.

Inline Style CSS [내부링크]

html Inline Style과 마찬가지로 Html 코드상에 Style을 정의하는 방식입니다. 단, Style을 정의할떄 Object형태로 정의해야 합니다. 작성 예제는 아래와 같습니다. const title = { color: '#000', fontWeight: '700', fontSize: '1.5rem', marginBottom: '40px', marginTop: '20px', display: 'inline-flex', width: '100%', marginLeft: '25px', } const App = () => { return ( ); } export default App; 장점 1) 한 소스에서 Html과 Style 정의가 가능하기 때문에 소스하나만 유지보수 하면 된다. 단점 1) 유지보수..

React Style 적용 방법 [내부링크]

3가지 방법을 소개하고자 합니다. 1. Inline Style CSS https://blog.naver.com/innovatorwhy/222962568833 Inline Style CSS html Inline Style과 마찬가지로 Html 코드상에 Style을 정의하는 방식입니다. 단, Style을 정의할떄 ... blog.naver.com 2. Import Style CSS https://blog.naver.com/innovatorwhy/222962581967 Import Style CSS 예전부터 사용하던 CSS 나 SCSS와 같이 Style을 정의해서 사용합니다. 파일 구 SamplePage.jsx ... blog.naver.com 3. CSS in JS : styled-components htt..