키자드에 등록된 innovatorwhy의 네이버 블로그 포스트 목록

innovatorwhy의 등록된 링크

innovatorwhy로 등록된 네이버 블로그 포스트 수는 66건입니다.

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

javascript에서 object 요소를 가져올때 for in loop를 많이 사용하는데, typescript에서는 해당 문법에서 eslint type 오류가 발생합니다. key, value 타입 정의가 없어서 그런데요, type을 [key:string]:unkown으로 설정하는 방법도 있겠지만, 그보다는, javascript Objct 문법을 사용하면 type정의 필요없이 구현이 가능합니다. const obj = { name:'이름', title:'제목'} const newObj = {} /** for (const i in obj) { newObj[i] = obj[i]; } **/ for (const [key, value] of Object.entries(obj)) { Object.assign(newObj, { [key]: value }); } // newObj = { name:'이름', title:'제목'}

Front-End TDD [내부링크]

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

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으로 변경된 것을 인지 하지 못해서 나는 에러입니다. 따라서, 아래와 같이 Type Assertion을 사용하여 type을 변환하여 실행하면 문제가 해결됩니다. const getTodo = jset.fn(); (ge

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-height: 48px; color: #a2a2a2; font-weight: 600; font-size: 1.5rem; `; 이떄, 해당 component의 color를 props로 전

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

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

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: '^_' }], ... }

Recoil + immer 를 사용한 불변성 관리 [내부링크]

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: { title: '', content: '', }, }); const setAlert = useSetRecoilState(alertAtom); // or const [alertState, setAlert] = useRecoilSt

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

Recoil Atom 공식 문서를 보면 상세하게 알 수 있습니다. 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 설정만 하면 끝입니다. const todoListState = atom({ key: 'TodoList', default: [], }); ... // useState hook과 같이 사용 const [todoList, setTodoList] = useRecoilState(todoListSt

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 } & BirdInterface; interface Peacock extends BirdType { colourful: true; flies: false; } type과 interface

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', default: false, }); context : createContext를 사용하여 해당 context를 생성합니다. export const PopupTodoContext = React.

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함수를 "상위 컴포넌트에서 사용하고자 참조하기 위해서" 사용합니다. // 제공하기 원하는 함수 정의 interface ISlidePopupRef { close(): void; } // props type 정의 type Props = { title

[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를 실행하고 팝업을 닫아줍니다. 1.Screen A,B가 History에 쌓입니다. 2.Back을 선택합니다. 3.Screen A로 돌아갑니다. 4.강제로 Screen B로 이동 시킵니다.

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

https://blog.naver.com/innovatorwhy/223007028525 [React] Back 버튼으로 Modal 제어하기(1) Android에서는 물리적인 Back 버튼이 존재합니다. 따라서, Hybrid Web 개발시 해당 버튼의 액션을 고려... blog.naver.com 위와 달리 window history의 api와 recoil을 활용하면 코드를 간결하게 사용하여 modal을 back버튼으로 제어 할 수 있습니다. 주요 개념은 아래와 같습니다. Modal과 같은 Layered Element들을 배열로 관리합니다. 해당 Modal을 관리하는 화면에서 사용할 수 있는 custom hook을 생성합니다. onpopstate 이벤트에서 해당 요소를 제거하고 해당 요소의 state을 변경합니다. 먼저, stack을 관리할 Recoil Atom을 생성합니다. const stackState = atom({ key: '@stack', default: [], }); 배열에

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

사용방법은 단순합니다. <BrowserRouter> 정의 2. <Routes> 정의 3. <Route> 정의 Route 및의 자식 Route 정의 4. <Outlet> 지정 부모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 ( <BrowserRouter> <Routes> <Route key={'/'} path={'/'} element={<HomePage />}> {/*자식 Route 정의 */} <Route key={'ch

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

재귀함수를 사용하여 배열로 부터 Route를 생성하자. <BrowserRouter>는 <Route>로 정의하며 부모와 자식간의 관계로 나타냅니다. 하지만, Array등으로 정의해서 관리하지않으면 복잡하고 보기 어려운 코드로 변질됩니다. 나쁜예) App.jsx <BrowserRouter> <Routes> <Route key={'/'} path={'/'} element={<HomePage />}> {/*자식 Route 정의 */} <Route key={'child'} path={'/child'} element={<ChildPage />} /> </Route> <Route key={'first'} path={'/first'} element={<FirstPage />} /> <Route key={'1'} path={'/second'} element={<SecondPage />} /> <Route key={'2'} path={'/third'} element={<ThirdPage />}> <R

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

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

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/core-concepts 주요 개념 | Recoil 개요 recoiljs.org

Typescript 객체 타입 정의 type vs interface [내부링크]

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

1. 팝업 Component 생성 - props로 해당 Component에 값을 전달 - 여기서는 onClosed 함수를 전달하여 뒤로가기 버튼을 눌렀을때 이벤트를 전달해줍니다. export default function PopupTodo(onClosed) { return ( <PageContainer> <TitleContainer> <BackBtn onClick={onClosed} /> <Title title="팝업 Todo">팝업 Todo</Title> </TitleContainer> <PageContent paddingTop={20}> <ListStyled> <li>할일1</li> <li>할일2</li> </ListStyled> </PageContent> </PageContainer> ); } 2. 부모 Component에서 팝업 제어 - state를 사용하여 팝업 Component를 제어 합니다. - true : mount, false : unmount - onClosed 이

React Transition 팝업 적용 [내부링크]

CSSTransition을 사용하면 팝업에서 Transition 효과를 적용 할수 있습니다. https://reactcommunity.org/react-transition-group/transition React Transition Group import { Transition } from 'react-transition-group' ; import { useRef } from 'react' ; const duration = 300 ; const defaultStyle = { transition : ` opacity ${ duration } ms ease-in-out ` , opacity : 0 , } const transitionStyles = { entering : { opacity : 1 } , entered : { opacity : 1 } , exiting : {... reactcommunity.org 해당 사이트에 자세한 설명 및 속성에 대한 안내가 나와있습니다. 먼저 팝업

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

React로 Page를 개발하는데, Rendering이 두번씩 실행되는 경우가 있다. 한참을 코드 분석해도 원인을 알수 없다가, 우연히 해결했는데... 바로 Strict 모드 !! const StyledPage = () => { console.log('Rendering'); return ( <Container> <div className="title"> <label className="title-label">styled-components</label> </div> <div className="content"> <ul> <li> <RoundButton>버튼1</RoundButton> <RoundButton className="selected">버튼2</RoundButton> </li> </ul> </div> <div className="bg"></div> </Container> ); }; export default StyledPage; console을 찍으면 두번씩 호출 index.

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-app-rewire-alias'); module.exports = function override(config) { alias({ '@': 'src', // 절대경로 설정 })(co

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

alias 설정이 아래와 같이 끝났다면 https://blog.naver.com/innovatorwhy/222977561051 React Path alias 절대경로 설정 React에서 import를 할때 상대경로를 사용하는 경우가 많은데, 아래와 같이 상대경로가 복작한 경우가 많... blog.naver.com 별다른 설정을 하지 않으면 import문 작성시 code hint가 뜨지 않는다. 따라서 vscode에서 인식하도록 설정이 필요하다. jsconfig.json { "compilerOptions": { "baseUrl": ".", "target": "es6", "paths": { "@/*": ["./src/*"] // alias에 대한 컴파일 설정 } }, "include": ["src"] } alias 경로에 대한 code hint가 보인다.

React Router [내부링크]

React Router 설정하는 방법은 크게 2가지 입니다. Data API를 사용하는 지원하는 Router (v6.4) Data API를 지원하지 않는 Router Components 공식문서에서는 Data API를 사용하는 지원하는 새 Router를 사용하는 것을 권장한다. 사용법은 어렵지 않으나, 아직 Transition 효과르 적용하는 예제가 많지 않다. 따라서, 2가지 방법에 대해 알아보고자 한다. 1. https://blog.naver.com/innovatorwhy/222978634950 React Router - Data API를 사용하는 Router Router 사용하는 순서는 아래와 같습니다. App.js - router 생성 및 RouterPrivder 정의 routes 배열 ... blog.naver.com ※ 참고 사이트 https://reactrouter.com/en/main/routers/picking-a-router Picking a Router v6.6.

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 <RouterProvider router={router} />; } export default App; routes.js - path 및 element 정의 const routes = [ { path: '/', element: <HomePage />, },

모놀리식(Monolithic) 아키텍처 [내부링크]

“모놀리스"라는 단어는 거대하고 빙하 같은 것 모놀리식 아키텍처는 하나의 코드 베이스를 갖춘 대규모의 단일 컴퓨팅 네트워크 입니다. 즉, 하나의 어플리케이션 아래, WAS, WebServer, DB 등 단일 어플리케이션으로 이루어진 형태입니다. 모놀리식 아키텍처의 장점 손쉬운 배포 – 실행 파일 또는 디렉토리가 하나여서 배포가 더 쉽습니다. 개발 – 하나의 코드 베이스로 애플리케이션을 구축하여 개발이 더 쉽습니다. 성능 – 중앙 집중식 코드 베이스 및 리포지토리에서는 대부분 하나의 API만으로 마이크로서비스에서 여러 API가 수행하는 것과 동일한 기능을 수행할 수 있습니다. 테스트 간소화 – 모놀리식 애플리케이션은 하나의 중앙 집중식 장치이므로 분산된 애플리케이션보다 엔드투엔드 테스트를 더 빠르게 수행할 수 있습니다. 간편한 디버깅 – 모든 코드가 한 곳에 있으므로 요청을 따라가서 문제를 찾기가 더 쉽습니다. 모놀리식 아키텍처의 단점 느린 개발 속도 – 대규모 모놀리식 애플리케이션에

마이크로 서비스 아키텍처 [내부링크]

수천개의 서비스팀이 성장 마이크로서비스 구축 DevOps 실행 다양한 환경 생성 수백만건 배포

클라우드 마이그레이션 6가지 [내부링크]

유지(Retain) 소스 환경에 호스트/애플리케이션 유지 최소한의 분석/범위에 대한 검증 & 애플리케이션 선호도 폐기(Replace) 폐기 애플리케이션을 마이그레이션 하지 않음 리호스팅(Rehost) 동일한 특성의 앱을 AWS로 앱 마이그레이션 리프트 앤 시프트 방식 최소한의 노력으로 애플리케이션을 클라우드’에서’ 작동시키거나 클라우드 네이티브 서비스를 활용 플랫폼 재구축(Replatform) OS/DB 버전 상향 Amazon Relational Database Service(Amazon RDS) 사용 일부 애플리케이션 변경 앱 재설치 및 정리 리팩터링(Refactoring) OS/DB 포팅 AWS 서비스를 기본적으로 사용하도록 미들웨어와 앱 변경 데이터 변환, DB 전환 (예: MySQL 및 Amazon Aurora) 아키텍처 재설계(Rearchitect) 애플리케이션 아키텍처 변경 서비스형 소프트웨어(SaaS) 기반 제품 및 서비스 사용 애플리케이션 아키텍처 포팅 데이터 현대화,

Twelve-Factor [내부링크]

코드베이스 - git 으로 관리 할것 종속성 - 라이브러리들의 종속성을 따로 관리할것 설정 - 설정값,환경변수 따로 관리할 것(Parameter store, Secrets Manager) 백엔드 서비스 - 각 서비스로 인식할 수 있는 관리형 클라우드 사용할것 빌드, 릴리스, 실행 - 애플리케이션 빌드, 릴리즈, 실행 단계를 엄격하고 분리하고 관리할것 프로세스 - 상태 비저장, 독립적인 프로세스로 실행 할것 포트 바인딩 - 독립적인 포트를 바인딩하여 서비스로 공개하고 포트로 들어오는 요청을 처리할것. (서버리스 앱은 포트 바인딩 대신 API나 이벤트 기반으로 동작,Poll-based- 데이터 변화가 생겼을때 실행되는 방식) 동시성 - 수직적 및 수평적 확장 폐기 가능 - 프로세스 문제가 생길때마다 폐기하고 다시 만들고, 빠른 시작과 그레이스풀 셧다운을 통한 안정성 극대화 할것 개발/프로덕션환경 일치 로그 - 각종 로그는 파일로 다루지 않고 앱이 실행되는 도중에 실시간으로 포착할것 관리

DDD(Domain Driven Design) [내부링크]

DDD(Domain Driven Design)

현대적 애플리케이션 개발 [내부링크]

N계층(3Tier) → 서비스 지향 아키텍처(SOA) → 마이크로서비스 MVC → Pub-Sub → CQRS

Cloudformation [내부링크]

Cloudformation

CDK [내부링크]

CDK

꾸준한 미국 주식 [내부링크]

코카콜라 존슨앤존슨 타이레놀 boa

하이브리드 앱 개발시, Web SPA 개발 고려사항 (feat. Vue.js, React) [내부링크]

하이브리드 앱 개발시, Web 개발 고려사항 모바일 Web URL 비공개 처리 2. 페이지 이동시 이전 데이터 저장 및 스크롤 유지 3. 화면전환 Transition 4. Android Device 물리 Back키 대응 5. 각 Component별 Push 서비스 6. Device 상태 변경 Check

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

3가지 방법을 소개하고자 합니다. 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 https://blog.naver.com/innovatorwhy/222962662913 styled-components https://styled-components.com/ blog.naver

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 ( <div className="App"> <div style={title}/> </div> ); } export default App; 장점 1) 한 소스에서 Html과 Style 정의가 가능하기 때문에 소스하나만 유지보수 하면 된다. 단점 1) 유지보수 어려움 - 각 컴포넌트에 정의된 Html을 찾아가서 수정해야 함 2) 공통 Style 적용하

Import Style CSS [내부링크]

예전부터 사용하던 CSS 나 SCSS와 같이 Style을 정의해서 사용합니다. 파일 구 SamplePage.jsx import './style/SamplePage.css'; const SamplePage = () => { return ( <> <div className="titleWrap"> <button className="arrowBack" onClick={() => {}} /> <label style={{ marginLeft: '25px' }}>제목</label> </div> </> ); }; export default SamplePage; 장점 - 기존 퍼블리셔와 역할은 분리할 수 있다. - CSS, SCSS등 CSS 개발 방법을 사용할 수 있다. - Style 정의를 분리해서 사용할 수 있다. - Style CSS로 파싱하는 작업이 없기 때문에 React Style 보다 속도가 빠르다.

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에 변수를 조합해서 사용하는 방식이다. 이것이 필요한 이유는 CSS를 string 형태로 정의해서 사용하기 때문이다. 이렇게 쓰지 않는다면 엄청나게 길어지는 string + 를 보게 될것이다... 2. Styled-

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' 사용 value: String, // 'value'를 대신하는 사용자 지정 속성으로 'title' 사용 합니다 title: { type: String, default: '' } } } - V

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

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

장단기 금리차 [내부링크]

https://fred.stlouisfed.org/graph/?g=QsmJ 10-Year Treasury Constant Maturity Minus 2-Year Treasury Constant Maturity | FRED | St. Louis Fed Skip to main content Economic Research Resources Switch Products My Account Release Calendar FRED Tools FRED News FRED Blog About FRED 10-Year Treasury Constant Maturity Minus 2-Year Treasury Constant Maturity (T10Y2Y) Download Observation: 2022-06-10: 0.09 (+ more) Updated: Jun 10, 2022 Units: Perc... fred.stlouisfed.org

공포와 탐욕 지수 [내부링크]

https://www.cnn.com/markets/fear-and-greed Fear and Greed Index - Investor Sentiment | CNN CNN's Fear & Greed Index is a way to gauge stock market movements and whether stocks are fairly priced. The index uses seven market indicators to help answer the question: What emotion is driving the market now? www.cnn.com

하이일드 스프레드 (High Yield Spread Index) [내부링크]

https://fred.stlouisfed.org/series/BAMLH0A0HYM2 ICE BofA US High Yield Index Option-Adjusted Spread ICE BofA US High Yield Index Option-Adjusted Spread fred.stlouisfed.org

강세장을 판단하는 기술적 지표 [내부링크]

https://m.stock.naver.com/news/mainnews/view/008/0004776131 3월 침체장 랠리와 결정적 차이…이미 강세장 시작됐다?[오미주] - 네이버 증권 관심종목의 실시간 주가를 가장 빠르게 확인하는 곳 m.stock.naver.com 강세장을 판단하는 기술적 지표 첫째는 뉴욕증권거래소(NYSE)와 나스닥시장에서 일주일간 신고점을 기록한 종목 수에서 신저점을 기록한 종목 수를 뺀 차이가 전체 종목에서 차지하는 비율이 0% 이상이어야 한다는 점이다. 현재는 -3%이다. 둘째는 NYSE와 나스닥시장에서 상승 종목 수에서 하락 종목 수를 뺀 AD 라인이 전 고점을 경신하며 올라가야 한다는 점이다. 하지만 지금은 여전히 하락세다. 셋째는 S&P500 종목에서 20일 최고치를 기록한 종목의 비율이 55%를 넘어야 한다는 것이다. 지금은 15% 수준이다. 넷째는 여러 자산 사이의 상대 수익률을 통해 산출하는 리스크 지표가 리스크-온 상태여야 하는데 지금은 아직

동행지수순환변동치 [내부링크]

http://naver.me/xfaaoTr6 경기종합지수 경기종합지수 naver.me : 추세치=100을 기준으로 순환변동치가 100을 상회하면 추세이상의 성장을 하고 있고 100을 하회하면 추세이하의 성장을 하고 있다고 볼 수 있으며 순환변동치 수준보다는 방향 중심으로 해석

미국 출국 준비사항 [내부링크]

1.코로나 음성확인서 (감염 3개월 이내면 해당없음) - 6월버전 2. 여권 3. 국제 운전 면허증 4. USIM 5. ESTA 6. 해외 사용 가능한 신용/체크 카드 7. 돼지코 2개 8. 여행자보험

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

Vuex 사용 [내부링크]

"Vuex는 Vue.js 상태관리 패턴 입니다." 라고 하지만 상태관리 패턴을 사용하지 않은 개발자는 어렵다. 하지만 그래도 써야 하는 이유는 아래와 같다. (나의 경우에는) 1. 각 Components 간의 데이터를 공유하고 처리 가능 2. 화면 구현과 별도로 데이터 처리하는 로직을 별도로 관리함에 따라 유지보수가 용이 일단 사용해보자. Doit! 1. 설치 npm i --save vuex@next 2. Vuex 구조 namespaced를 사용하여 아래와 같이 각 업무 별로 구분해준다. 3. vuex 사용 : Namespaced를 사용할 경우 실제 vuex를 사용하고자 하는 component에서 아래와 같이 사용한다. createNamespacedHelpers(moduleName) 그런데 이 경우 moduleName이 정확해야한다. moduleName : 자신의 module Path + 생성시 정한 Name 예를 들어 아래 toast는 common 하위이므로 Path : commo

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 './modules/index.js' const router = createRouter({ history: createWebHashHistory(), routes: routes }) ex

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

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

Vue 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 www.npmjs.com 1. webpack-bundle-analyzer 설치 npm i --save-dev webpack-bundle-analyzer 2. webpack설정 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { configureWebpack: { plugins: [new BundleAnalyzerPlugin()] } }

Vue 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 삭제 - javascript에서 제공하는 기본 method로 변경 - method 직접 구현 3. jquery import를 jquery.min으로 변경 - jquery는 사용하지 않는 것이 좋지만 만약 사용한다면 jquery.min으로 변경하자

Vue 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, es2021: true }, extends: [ 'plugin:vue/vue3-recommended', 'standard' ], parserOptions: { ecmaVersion: 12, sourceType: 'm

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

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

Vue.js 개발자 LV.1(2) - Vue Cli 설치 [내부링크]

Vue.js 개발을 위해서는 아래와 같은 준비단계를 거친다. 간단하다. 일단하자. Doit. 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 실행하면 아래와 같은 화면이 나오면서, 혼자 이것저것 설치한다. 설치 완료. 이제 npm으로 엄청난 라이브러들을 설치할 수 있다. 2. Vue

Vue.js 개발자 LV.1(3) - 개발 Tool 설치 : Visual Studio Code [내부링크]

Vue.js 개발을 위해서는 아래와 같은 준비단계를 거친다. 간단하다. 일단하자. Doit. 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 available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio

아이템 선정 [내부링크]

딥하게 생각할 필요없다. 일단 목적을 정하자. - 스타트업을 하고 싶은가? - 내가 사용하기 위해서 만들것인가? - 그냥 스토어에 내가 만든 앱을 올리고 싶은가? - 단순 스터디 개념으로 만들고 싶은가? 먼저 스타트업을 목표로 한다면, 이 페이지를 볼 필요가 없다. 전문적으로 마케팅 부터, 사업 선정과 관련된 공부부터 하자. 나머지는 중에 그래도 쉽게 제대로 된 앱을 만들려면, 내가 사용하는 용도로 만드는게 제일 쉽다. 내가 사용하는 앱이라면, 어느 정도의 기회과 화면, 기능정의들이 어느정도 되어있을 것이다. 이 정도는 되어야 스터디도 되면서 소위 어디가서 내가 만든 앱이라고 말할수 있을 정도는 될테니... 나는 요즘 주식 투자에 관심이 많으니, 주식 투자 관리 앱을 만드는 것으로 하자. MTS는 너무 보기 어렵고, 필터링도 어설프다. 내가 보고싶은데로 나오는 주식 투자 관리 앱을 만들기로 결정.

기획 및 디자인 [내부링크]

내가 사용할 목적으로 앱을 만들기로 정했다면, 기획은 어느정도 있을 것이다. 기획도 딥하게 들어가면 많은 방법들이 있으나, 일단 만들어보자. 문제는 디자인인데, 디자인을 공부하지 않은 이상 쉽지않다. 제일 간단하게 할 수 있는 방법이라면, XD 를 추천한다. 7일동안은 무료로 사용 할 수 있다. https://www.adobe.com/kr/products/xd.html Adobe XD | 빠르고 강력한 UI/UX 디자인 및 협업 툴 Adobe XD는 웹 사이트, 앱 등을 위한 빠르고 강력한 UI/UX 디자인 솔루션입니다. 디자인, 와이어프레임, 애니메이션, 프로토타입, 협업, 공유를 한곳에서 해결하세요. www.adobe.com 어도브에서 제공하는 디자인 툴 XD를 이용해서, 수많은 무료 샘플들을 이용하면 어느정도 그럴듯한 디자인의 앱을 만들수 있다. 구글에서 xd무료 템플릿이라고 검색하면 많은 무료 템플릿이 있다. https://www.google.com/search?q=xd+%E

Android 개발 환경 - Android Studio 설치 [내부링크]

JDK, Java 이런 설치 없이 Android Studio만 설치하면 바로 개발할 수 있다. https://developer.android.com/studio?gclsrc=aw.ds&gclid=Cj0KCQiA8vSOBhCkARIsAGdp6RTmAfDNymNY373ZT7uReVFI0Rn6DI9K0OQdZWUTaDQahE9n1HIEV2IaAhEOEALw_wcB#downloads Download Android Studio and SDK tools | Android Developers  developer.android.com

Vue.js 공부 [내부링크]

Vue.js는 한국어로 제공되는 공식 문서가 있으므로 해당 공식 사이트를 정독한다면 Vue.js 마스터가 될수 있다. 물론 정독하는 것은 어렵다. 그래도 시작하기 정도만 반드시 알고 가자. https://kr.vuejs.org/v2/guide/#%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 공식문서 https://kr.vuejs.org/ Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org API https://kr.vuejs.org/v2/api/ API — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org

Git 연결 [내부링크]

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

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.env.NODE_ENV === 'prd' ? require('./config/prd.config.js') : require('./config/dev.config.js') // 빌드 모드의 따른 웹

주식 투자 관리 앱 두잇. 추천합니다. [내부링크]

두잇 주식 투자편은 나의 주식 현황을 관리하고 단순하고 쉽게 필터링 해서 볼수 있는 주식 관리 앱이에요. 그리고 또 중요한 포인트는. 종목평단가 뿐만 아니라 투자 시점으로 관리가 된다는 점. 종목으로 판단하는게 아니라 내가 투자한 시점으로 관리가 되어, 상황에 따라 관리하고 판매할 수 있어요. 투자별 관리가 되는 앱은 없었는데, 여기 앱은 제공 하고 있더라구요. https://play.google.com/store/apps/details?id=com.huah.doit 두잇 주식편 - Apps on Google Play Your own stock investment organizing app! Do two now! play.google.com 투자별 관리 종목별 관리 다른 사람에게 카톡으로 추천 주식 추천하거나 추천 받은 경우는 많죠. 그런데 추천한 사람은 얼마에 샀고 현재 몇 프로 수익인지 알려주는 경우는 잘없어요. 그리고 실제 주식을 추천해도 그 사람이 얼마에 샀는지 알수도 없죠.

Android App. 만들기 [내부링크]

초보자도 할수 있는, Android App 생성부터 Google Play 배포까지 방법부터 절차까지 진행해보자. 절차는 아래와 같다. 1. 아이템 선정 2. 기획 및 디자인 3. Android App 개발 4. Server 개발 ( 서버 연동이 필요하다면...) 5. Google Play 배포 간단하게 적자면 위와 같다. 일단 한번 해보자. Doit!

Vue.js 개발자 Lvl1(1) - Node 설치 [내부링크]

Vue.js 개발을 위해서는 아래와 같은 준비단계를 거친다. 간단하다. 일단하자. Doit. 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 접속 -> 다운로드 : 버전은 상관없으나 잘 모르니 이왕이면 안정성 설치 후 커맨드 창에서 npm 실행 후 아래와 같은 화면이 뜬다면 성공. 커맨드 창 실행 : 윈도우