금융권 개발 일지 블로그

■ 개발환경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 개발에 관련된 유효성 검사를 모두 비활성화하는 ..

AntD는 컴포넌트 라이브러리 패키지입니다. 컴포넌트 라이브러리란, 컴포넌트를 재사용할 수 있도록 라이브러리로 제공하는 것입니다.더보기✅ AntD 사용한 리액트 프로젝트(이하, 리액트 앱, 앱) 개요(개요 번호와 본문 번호는 관계 없습니다.) 1. CRA 사용해서 typescript 템플릿 기반의 리액트 앱 생성자세한 설명은 [바로가기]를 눌러 주세요. 2. VS Code에서 workspace 열기워크스페이스를 열면 Workspace Trust를 물어봅니다. Yes 눌러주세요. 자세한 설명은 [바로가기]를 눌러주세요.워크스페이스 여는 방법 : File > Open Workspace from File... 3.components 폴더 생성컴포넌트 폴더에는 AntD의 예제 코드..

■ 문제상황 VS Code에서 Commit을 진행할 때, VS Code에서 git 계정으로 로그인한 기록이 없으면 이러한 경고가 뜰 수 있습니다.■ 해결방법git bash에서 git 계정의 이름과 이메일 주소를 입력 후, 다시 commit을 진행하면 됩니다.git 계정 확인방법  git bash로 로그인 정보 저장방법계정을 확인했다면 아래 명령어를 git bash에 입력해 로그인 정보를 저장합니다.git config --global user.name "My Name"git config --global user.email "myemail@example.com" commit 진행Source Contorl에서 Commit을 다시 누르면, 커밋이 진행됩니다.감사합니다. :)

들어가기 앞서.. Git을 이용하면 버전 관리 및 협업을 손쉽게 할 수 있습니다. 또한, 간단한 호스팅 기능도 제공하니 포트폴리오를 위해 사용법을 익혀보는 것을 추천드립니다.Git은 VS Code에서 우측 사이드바의 Source Control에서 이용할 수 있습니다.목차1. Git 프로그램 설치 파일 다운로드2. Git 프로그램 설치 파일 실행아래 포스팅에서 설명을 잘 해주고 있습니다. 윈도우에서 Git Bash 설치하기1. 설치 파일 다운로드 Windows에서 Git을 사용하기 위한 GitBash를 설치한다. (2.30 버전) Git Bash 설치 파일을 받기 위해 공식 홈페이지(https://git-scm.com/)에서 다운로드 한다. 다운로드 완료 후 설치 파일xangmin.tistory.com더보..

들어가기 앞서.. 명령어 팔레트(Ctrl + Shif + P)를 통한 간단한 화면 세팅을 설명하는 포스팅입니다. 명령어 팔레트를 열어서 명령어를 입력하면 됩니다. 목차 ■ Toggle Menu Bar (메뉴바 보여주기/없애기) ■ Toggle Side Bar Position (사이드바 위치 변경) ■ Toggle Side Bar Visibility (사이드바 보여주기/없애기) 단축키 : Ctrl + B ■ Toggle Activity Bar Visibility (액티브바 보여주기/없애기) 단축키 : Ctrl + Shift + A ■ Toggle Status Bar Visibility (상태바 보여주기/없애기) 메뉴바의 View에서 선택할 수도 있습니다. ■ Zoom Out/In 줌아웃 단축키 : Ctrl..