web20 [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. [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. [React/함수형 컴포넌트] props가 undefined인 경우 default value로 인한 useEffect 무한 루프 (state update와 rendering) Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 일단 제목과 같은 문제가 발생하게 된 경위부터 이야기해보겠습니다. Parent component에서 비동기적으로 서버에서 데이터를 조회하고 child component에 props로 전달합니다. child component 최초 렌더링 시에 에러를 방지하기 위해 props에 default value를 할당합니다. 그리고 props가.. 2021. 9. 16. 빌드(build), 메이븐과 라이프 사이클 컴파일이란? 소스코드를 컴퓨터가 이해하는 기계어(바이너리코드)로 변환하는 과정 자바의 경우는 jvm에서 실행할 수 있는 바이트코드의 클래스 파일이 생성됨 빌드란? 소스코드를 실행할 수 있는 소프트웨어 형태로 변환하는 과정 → 소스코드(java)나 프로젝트 리소스(.xml, .jpg, ...)를 jvm이나 was(톰캣)이 인식할 수 있는 구조로 패키징 하는 과정 소프트웨어가 응집력 있는 하나의 단위로써 작동하게 하는 과정 (테스트, 검사, 배포 기능등을 포함하는 단위로 생각하기도 함) 빌드 툴 프로젝트 생성, 테스트 빌드, 배포 등 전체적인 라이프 사이클을 관리하기 위한 전용 프로그램 엔터프라이즈 개발시 일어나는 빈번한 라이브러리 추가 및 버전 동기화의 어려움을 해소 코드 컴파일, 컴포넌트 패키징, 개발 .. 2021. 7. 8. 이전 1 2 3 4 다음
