금융권 개발 일지 블로그

더보기✅ 문제 상황 및 해결 아이디어 확인하기문제상황: React 애플리케이션에서 웹팩(Webpack) 빌드 에러 발생CRA로 생성한 리액트 앱에서 자연어 처리를 위해 natural 라이브러리를 사용하려고 하니, url 모듈이나 util 모듈 등을 찾을 수 없다는 에러가 발생했습니다. 즉, node.js의 핵심 모듈에 대한 폴리필(polyfill)이 없어서 발생된 문제입니다.*polyfill: 구형 브라우저 미지원 문법 등을 대응하기 위한 코드 문제상황 재연: natural 라이브러리 설치 → 소스 코드에 라이브러리 importnpm install natural위 명령어로 라이브러리를 설치한 뒤에, 소스 코드 내에 require('natural') 또는 import natural from 'natural..

깃에 커밋도 했고, git bash에서 git log로 이력도 조회되는데깃허브 페이지에는 잔디도 안 심어져있고 이력도 안 보이는 경우가 있습니다. PUSH를 해주세요. 종종 일어나는 실수입니다. 감사합니다. :)

더보기🗨️ 문제상황한 달 전부터 회사PC와 개인 노트북 간의 연동을 위해 원드라이브를 사용중입니다. 벌써 드라이브 용량을 절반 이상 사용했다는 알림창이 뜨더라구요.[바로가기: 원드라이브 > 저장소 관리] 원드라이브 홈으로 이동해서 모든 항목을 다 확인해 봤습니다. 원인은, '사진'이었습니다.2006년 이후로 PC에서 캡처한 모든 이미지가 자동 저장되고 있는 상황이었습니다. '사진' 메뉴에서는 일괄 삭제 기능을 제공하지 않고 있습니다.아래의 방법처럼 원드라이브를 PC의 파일 탐색기로 접근해서 이미지를 일괄 삭제할 수 있었습니다.1. 파일 탐색기로 원드라이브 '사진' 폴더로 이동방법은 2가지 있습니다. 방법1)window Key + Shift + S를 눌러서 아무거나 캡처한 뒤, 아래 사진을 참고해서 이동..

■ 문제상황쿼리 실행 오류로, 바인딩이 잘못됐을 때 발생합니다. 바인딩이 잘못되는 경우는 다음과 같습니다.1) 파라미터의 이름이 맞지 않음2) 바인딩 자리와 개수가 맞지 않는 경우■ 해결방법1) 파라미터의 이름이 맞지 않는 경우String id1 = request.getParameter("id1");// ...pstmt.setString(1, id3);request.getParameter()를 담는 변수의 이름이 setString의 2번째 인자와 동일한지 확인해 주세요. 아래처럼 파라미터를 가져올 때는 id1 변수에 담아놓고 setString에서 id3을 쓰시면 에러가 발생합니다. id1과 id3의 이름을 동일하게 맞추면 해결됩니다. 2) 바인딩 자리와 개수가 맞지 않는 경우위처럼 바인딩 자리는  5..

■ 개발환경WAS : TomcatJDK : 1.8리액트에서 JSP를 사용하고 있는데, JSP를 어떻게 디버깅해야 될 지모르겠더라구요. 그래서 톰캣 루트에 디버깅하고 싶은 JSP파일을 복사한 뒤, index.html로 파일명을 변경해서 디버깅 중입니다. 이 포스팅을 참고하시러 온 분들의 개발환경이 저와 안 맞을 것 같아서 관련 포스팅은 링크로 추가해놨습니다.■ 문제상황 JSP로 오라클에 연결한 뒤, insert 쿼리를 실행하는 도중 에러가 발생했습니다. OracleDriver가 없다는 에러로, Oracle JDBC 드라이버 클래스를 로드할 때, 드라이버의 클래스패스가 잘못 설정되었거나 JAR 파일이 앱 루트의 WEB-INF/lib 아래에 없는 경우 발생합니다.■ 해결방법더보기🗨️ JAR? 라이브러리? 드..

들어가기 앞서.. 로그 레벨을 분리해서 관리하는 게 익숙하지 않아, 생각없이 로그를 지워가면서 개발을 진행하고 있었습니다. 문득, 나중에 다시 코드에 로그를 추가해 가면서 추적할 생각을 하니 암담하더군요. 개발 로그가 왜 필요한지 몸으로 깨우쳤습니다. 이번 포스팅은 리액트에서 어떻게 개발 로그를 만드는지를 다루면서 개발 로그에 대한 중요성을 잊지 않고자 작성한 내용입니다. 제가 이해한 대로 정리한 거라 틀린 게 있다면 댓글로 피드백 부탁드립니다. :)목차1. 개발 로그의 필요성1.1. 로그의 필요성로그는 어디에서 어떤 이유로 문제가 발생하여 프로그램에 장애/이슈 등이 발생했는지 파악하기 위해 꼭 필요합니다. 로그가 없다면 모든 소스 코드를 전부 읽어야 되기 때문입니다. 잘 만들어진 로그는 문제를 빠르고 ..

■ 문제상황 경고는 오류가 아니기 때문에 해결하지 않아도 프로그램 동작에 문제는 없겠지만, 로그를 보기 힘들어서 해결하게 되었습니다. 경고는, 태그가 의 자식으로 존재할 수 없다는 내용입니다.경고: validateDOMNesting(...): 는 의 후손으로 나타날 수 없습니다. validateDOMNesting()은 아마 DOM의 중첩 구조를 검사하는 함수 같습니다. 로그의 형태를 보면 맨 아래 부분이 부모이고, 맨 윗 부분이 자식요소를 나타내고 있습니다. 위에서부터 p 태그를 찾은 뒤, 바로 위의 컴포넌트가 뭔지 확인해보니, SimSuccessAlert1 컴포넌트가 있습니다. 이 컴포넌트를 p 태그 안에서 부르고 있는 것 같습니다.■ 해결방법해당 컴포넌트를 msg라는 상태변수에 넣고 있는데, 그 부..

■ 에러설명 Minified React error #130의 전체 내용은 다음과 같습니다. [공식문서 바로가기]Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: [missing argument].[missing argument] 리액트 컴포넌트를 렌더링시킬 때 발생하는 에러로, components의 이름이 잘못되었다는 내용입니다. 이러한 상황으로는, 컴포넌트의 이름을 잘못 정의했거나 컴포넌트를 만들지 않고 import 시키는 경우가 있습니다.더보기🗨️Minified React error #31는 에러코드가 왜 직관적이지 않나요?Re..

■ 문제상황 searchBox 파일에서도 나지 않는 오류인데, 이 컴포넌트를 재사용하는 곳에서 오류가 발생했습니다. JSX에서 컴포넌트는 대문자로 시작해야 된다는 규칙이 있기 때문입니다.■ 해결방법컴포넌트의 이름을 규칙에 맞게 수정합니다. searchBox -> SearchBox 파일명까지 수정했는데, 에러가 사라지지 않는다면 VS Code를 껐다가 다시 키면 됩니다.감사합니다. :)

■ 문제상황보다시피, 해당 소스 파일은 jsx입니다. ts 또는 tsx 파일이 아닌 곳에서 TypeScript에서만 쓸 수 있는 import type 구문을 사용해서 나타난 오류입니다. VS Code에서 설정에 따라, JS 개발에 대한 유효성을 검사하는 기능이 있기 때문에 이를 비활성화 해주면 해결됩니다.🗨️ 'import type' 구문은 뭔가요?TypeScript에서 'import type' 구문은 실제 값들을 가져오지 않고 타입이나 인터페이스만을 가져오기 위해 사용됩니다. 이 기능은 TypeScript 3.8 버전부터 사용할 수 있습니다.■ 해결방법❎ (비추천) VS Code의 확장 프로그램 비활성화확장 프로그램을 비활성화하면 VS Code에서 JS 개발에 관련된 유효성 검사를 모두 비활성화하는 ..