mingg IT

주로 깊은 복사를 사용할때 lodash를 사용한다. import 를 해보면 이렇게 우리가 주로 사용을 할텐데 import _ from 'lodash' 나는 lodash 안에서 cloneDeep 만 사용하려고 한다. 그럴땐 import {함수명} from 'lodash' 로 사용하면 된다. 허나 블로그를 참고해보니 용량이 여전히 줄지 않았다고 함. 해당 방법처럼 사용해야 용량이 줄어든다한다. import cloneDeep from 'lodash/cloneDeep'; 결론 트리쉐이킹으로 모듈 용량 줄이면 된다. (참고 블로그) https://techblog.wclub.co.kr/posts/0001.tree-shaking/Tree%20Shaking%20%EC%9D%84%20%ED%86%B5%ED%95%9C%2..

vue create {프로젝트명} 으로 프로젝트를 새로 생성하려 했으나 처음보는 에러가 발생했다. Error: spawn yarn ENOENT 해결법은 아주 간단하다 npm uninstall yarn npm install --global yarn 이후 다시 vue create 시 정상적으로 수행됨을 알 수 있다. 혹시나 또 발생할지 모르기 때문에 기록용으로 남겨두려한다.

현업에서 일을 하다보면 게시판 같은 경우에는 숫자 입력만 되어야 하는 경우가 있다. 구글링 해보면 input type="number"로 쓰라는 말이 있는데 해보면 알겠지만 숫자외 다른 문자 입력이 가능하다. 커서를 이동하면서 입력도되고.. 혹은 내눈엔 문자가 보였다가 문자가 사라진다. 아마 다들 공감하는 부분일 거임. 해당 방법을 쓰면 완벽하게 숫자만 입력 가능한 Input form을 만들 수 있다. oninput이라는 이벤트 타입이 보일텐데 input form은 값을 입력하게 되면 keydown ->keypress-> oninput-> keyup 순으로 나타나게 된다. oninput 이후 부터 우리 눈에 값이 입력된 것을 볼 수 있다. 그렇기 때문에 아래 코드처럼 사용하면 Number만 입력 가능한 i..

우선 나는 이젠 새롭게 개발하는 컴포넌트는 모두 StoryBook을 사용 하려고 한다. (이젠 StoryBook 없이 개발하던 시절론 돌아갈 수 없어.. ) 오늘 간단하게 소개하려고 한다. StoryBook을 처음 npx로 설치하게 되면 .storybook이 생기게 되고, 여기서 main.js를 통해서 .stories.js 파일 위치를 지정해준다. (읽어올 수 있도록 설정하는 거임) module.exports = { // stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], stories: ['../src/components/**/*.stories.js'], staticDirs: ['../public'], addons:..

StoryBook으로 예시를 따라해 보고 있던 와중, yarn test가 실패하였다. https://storybook.js.org/tutorials/intro-to-storybook/react/ko/simple-component/ 원인을 살펴보니 사용하고 있던 리액트 버전이 18인것. "react": "^18.1.0", "react-dom": "^18.1.0", 버전을 17 로 낮추었음. "react": "17.0.2", "react-dom": "17.1.2", 정상적으로 동작함. Reperence https://github.com/testing-library/react-hooks-testing-library/issues/753

vs code 에서도 snippet 을 사용하여 자주 쓰는 템플릿을 저장하고 개발 시간을 단축하는 관련 글을 포스팅 한 적이 있다. 요새는 webStorm을 사용하고 있기 때문에 다시 적어두려고 한다. Settings > Live Templates 내가 추가하고 싶은 파일 확장자에서 + 버튼을 클릭한다. Abbreviation은 내가 만든 snippet을 부르는 ?? 사용하는 ? 이름이다. 난 요새 Vue를 쓰고 있기 때문에 해당 부분을 등록하도록 하겠음. @Watch('item') changeItem(to) { console.log('1113', to); } 내용을 입력하고 Apply > OK 버튼을 클릭한다. Vue 파일 위에서 W를 입력해보면 뜨는걸 볼 수 있음. 끝

React에서 clean 코드를 작성하는 방법을 소개 하려고 한다. 1. Dialog 로직 분리하기 보통 우리가 dialog를 쓸 때 버튼을 만들고, useState를 만들고 이에 따라 dialog를 open 하고 닫는 코드를 사용한다. (리팩토링 전) Home.tsx const Home: React.FunctionComponent = props => { const [open, setOpen] = useState(false); const onClick = () => { setOpen(true); }; const onClose = () => { setOpen(false); }; return ( Here is Home Button Title Content close ); }; 보통 이런식으로 사용해왔다. 허..

1장 도메인 모델 시작하기 DDD 란? Domain Driven Design (도메인 주도 개발) DDD 특징 기존 데이터 중심 접근법으로 부터 벗어나, 도메인을 중점으로 두고 설계 하는 것 유비쿼터스 언어로 이루어짐. (ex UML, ERD, 등 모두가 이해할 수 있는 언어) DDD 가 나오게 된 배경 여러 요구사항을 올바르게 이해하고 설계하기 위해. 특정 도메인을 개념적으로 표현한 것.도메인 모델 이란 도메인 모델 표현 UI 표현 응용 사용자 요청한 기능을 실행. 업무 로직을 직접 구현하지 않고 도메인 계층을 조합해서 기능을 실행. 도메인 도메인 규칙을 구현함. 인프라스트럭처 DB나 메시징 시스템과 같은 외부 시스템 연동도메인 모델 패턴 도메인 계층은 도메인의 핵심 규칙을 구현하기 때문에 주문 도메인..