web24 [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. [mysql] 암호화 & 복호화, 인코딩&디코딩 고객의 개인정보처럼 중요한 정보의 보안을 위해서 DB에 저장되는 값을 암호화해야 하는 경우가 있다. 암호화한 값을 쿼리의 입력 값으로 전달해도 되지만 mysql에서 제공하는 함수를 이용해서 암호화 작업을 할 수도 있다. 암호화 & 인코딩 #암호화 AES_ENCRYPT({암호화 할 값},{암호화 키}) #인코딩 TO_BASE64(AES_ENCRYPT({암호화 할 값},{암호화 키})) #BASE64로 인코딩 HEX(AES_ENCRYPT({암호화 할 값},{암호화 키})) #hexadecimal string으로 인코딩 #EXAMPLE UPDATE MEMBER SET MEM_NAME_ENC = TO_BASE64(AES_ENCRYPT(MEM_NAME,'testkey123')); 복호화 & 디코딩 #디코딩 FRO.. 2021. 7. 1. [React] SPA, Routing, React-router, History, Hooks SPA(Single Page Application) SPA는 단어 그대로 한 개의 페이지로 이루어진 애플리케이션을 의미합니다. SPA 이전의 애플리케이션은 페이지 전환이 발생할 때마다 서버에 해당 페이지를 요청하는 SSR(Server-side Rendering)방식을 사용했습니다. 이러한 방식은 페이지가 다시 렌더링 될 때까지 사용자가 빈 화면을 보며 대기해야 하므로 사용자 경험에도 좋지 않을 뿐더러 변하지 않는 Header나 Footer도 다시 렌더링하기 때문에 비효율적입니다. SPA는 페이지 전환이 일어날 때마다 서버에 요청을 보내지 않습니다. 대신, 최초로 애플리케이션을 로드하는 시점에 모든 정적 리소스를 받습니다. 이후 사용자 요청에 따라 필요한 데이터만 서버에 요청하고 동적으로 페이지를 변경합니.. 2021. 6. 16. 이전 1 2 3 4 다음
