일단 Doit

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

React/TDD 2023. 2. 10. 14:55

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 2023. 2. 9. 17:59

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 2023. 2. 7. 10:20

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

React/Recoil 2023. 2. 1. 22:21

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 2023. 2. 1. 22:04

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/Recoil 2023. 1. 27. 18:21

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

React 2023. 1. 27. 17:53

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 } ..

Typescript 2023. 1. 26. 16:20