분류 전체보기25 [React] VAC Pattern을 적용해 관심사 분리하기 VAC(View Asset Component) Pattern View Logic과 렌더링을 분리하여 개발하는 설계 방식 const SpinBox = () => { const [value, setValue] = useState(0); return ( setValue(value - 1)}>- {value} setValue(value + 1)}>+ ); }; VAC props를 통해서만 제어 되고 스스로 상태를 관리 하지 않는 Stateless component // VAC const SpinBoxView = ({ value, onIncrease, onDecrease }) => ( - {value} + ); // View Component const SpinBox = () => { const [value, s.. 2023. 12. 5. npm에서 yarn berry로 Migration to yarn berry 최근에 팀원이 yarn berry를 도입하자고 해서 마이그레이션을 시작했습니다. 빌드 시간을 단축할 수 있고 다른 회사들도 사용한다하여 좋나보다 하고 지나갔습니다. 그러한 무지 상태에서 작업을 하니 도중에 문제가 발생했습니다. 프로젝트 코드에서 의존성 명시 없이 라이브러리를 사용하고 있었는데 yarn berry로 마이그레이션을 하고 빌드를 하니 의존하지 않는 패키지에 접근하고 있다는 오류가 뜬 것 입니다. 아래에서 정리하겠지만 기존 npm 프로젝트에서는 유령 의존성에 의해 특정 패키지가 접근이 가능합니다. yarn berry로 넘어오니 접근이 안되는 게 불편하게 느껴졌습니다. 또한 마이그레이션 작업을 할 때 명시 하지 않은 패키지를 자동으로 추가해주는 방법이 없.. 2022. 11. 9. [정규식/RegExp] 실수 입력 시 정수부, 소수부 자리 제한(소수점 이하 자리 제한)/ input element에서 사용하기/ 음수를 포함 하는 경우 실수 정규식 /^([1-9]{1}\d{0,1}|0{1})(\.{1}\d{0,2})?$/g 정수는 2자리, 소수점 이하 2자리 까지 가능 정수부가 0으로 시작하면 1보다 커야한다 -> 023 불가능 0.34 가능 소수부 없어도 가능. input 엘리먼트에서 입력이 발생할 때 마다 반영하기 위해 작성한 정규식이므로 0. or 0.0 or 0.40 이와 같은 케이스는 통과시킨다 필요에 따라 수정할 수 있게 하나 하나 분석해보자 식 해석 [1-9] 1에서 9까지에 해당하는 숫자가 [1-9]{1} 1번 대응되고 [1-9]{1}\d 숫자(0-9)가 [1-9]{1}\d{0,1} 0~1번 대응된다 [1-9]{1}\d{0,1}| 또는 [1-9]{1}\d{0,1}|0 0이 [1-9]{1}\d{0,1}|0{1} 1번 대응된.. 2022. 3. 3. [Vue] vue-fragment 사용 시 발생하는 DOM Exception 해결 vue component는 하나의 root element를 가져야 한다. 따라서 다중 element가 있는 경우 하나로 감싸주기 위해서 태그를 사용하거나 vue-fragment 패키지를 사용할 수 있다. 태그로 감싸서 신나게 작업을 하다보면 다음과 같은 오류를 만날 수 있다. [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.” DOMException: Failed to execute 'insertBefore' on 'Node': The node be.. 2022. 2. 28. [mybatis/mysql] mysql procedure 사용 시 OUT parameter 오류 해결 방법 mybatis에서 mysql procedure를 사용하기 위해 다음과 같이 mapper 파일에 작성했다. {call myProcedure( #{inputParam1, mode=IN, jdbcType=INTEGER} , #{inputParam2, mode=IN, jdbcType=VARCHAR} , #{outputParam1, mode=OUT, jdbcType=VARCHAR} )} ERROR 1. CallableStatement.registerOutParameter(18, 12) java.sql.SQLException: Parameter number 18 is not an OUT parameter 쿼리를 호출하니 input 파라미터는 잘 들어가는데 out 파라미터를 제대로 인식하지 못하는 오류가 발생했다. .. 2021. 11. 2. [VScode] eslint 와 prettier 들여쓰기 충돌 오류 eslint가 들여쓰기 fix 하라고해서 고치고 저장하면 들여쓰기가 다시 달라지는 오류.. 아 어쩌란말이냐 트위스트 추면서~ settings.json 에서 포맷터를 변경하면 됩니다. "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, 에디터의 포맷터와 eslint가 서로 판단하는게 달라서 생기는 문제같은데 뭐 정확하게는 안찾아봤습니다. 바쁘다 바쁘다 현대사회 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, 이렇게 변경해주면 해결됩니다 2021. 10. 18. 이전 1 2 3 4 5 다음
