수월한 IT

안녕하세요. IT여행자입니다. vscode 에디터에서 전체 인터페이스 구성을 영문 또는 한글로 변경하는 방법을 간단히 기술하겠습니다. 먼저 View>Command Palette...메뉴를 선택합니다. 단축키로는 Ctrl+Shift+p입니다. 열린 Command Palette 창에서 "Configure Display Lanugage"를 찾아 선택합니다. 아래와 같은 항목들이 나오면 필요한 언어를 선택하고 vscode를 다시 시작하면 됩니다. 물론 해당 언어팩이 설치되어 있지 않다면 자동으로 언어팩을 설치해 줍니다.

안녕하세요 IT여행자입니다. 웹 특성 중 하나가 브라우저를 새로 고침 하면  현재 값이 유지되지 않는다는 것입니다. 따라서 현재 값을 유지하거나 새로고침 현상 없이 현재 값을 다른 값으로 변경하기 위한 다양한 방법들이 존재합니다. 현재 값을 유지한다는 것이 웹 프로그램이 아닌 일반 컴퓨터 프로그램들에게서는 별거 아닌 문제이기는 합니다. 그냥 변수에 담아 필요한 시점이나 장소에 그냥 대입해 주면 당연히 화면에 출력되기 때문입니다. 그러나 서두에 말한 것처럼 웹은 정확히는 http 프로토콜 특성상 기본적으로 상태값 또는 현재값을 유지해 주는 기능이 없습니다. 대부분의 FRONT-END 프레임워크에서는 이런 상태값을 유지해 주는 기능을 지원하여 약간의 노력만 하면 대부분 해결할 수 있을 것입니다. 본 지면에서..

안녕하세요. IT여행자입니다. 저는 개인적으로 eclipse를 메인 개발툴로 사용하는 개발자 중 한 사람입니다. 그런데 eclipse 툴을 사용하여 FRONT-END 부분인 HTML, CSS, JS를 개발할 때는 불편한 점이 한두 가지가 아닙니다. 그중 가장 불편한 점은 코드 자동 완성 기능이 eclipse가 매우 불편하다는 점에 있습니단. 플러그인들을 설치하면 그나마 참을 수 있는 수준이 되지만 적당한 플러그인들을 찾는 것도 귀찮은 일이 됩니다. 그런데 vscode 편집기를 사용하여 BACK-END 부분중 jsp 부분을 개발하려다 보면 생각보다 설정 작업이나 귀찮은 점이 한두 가지가 아니게 되더군요. 물론 최근엔 jsp를 사용하여 개발하는 요소들이 많이 줄었다고는 하지만 이미 개발되어 운영되고 있는 프..

안녕하세요 IT 여행자입니다. 이번 여행자 수첩은 아주 간단한 내용입니다. 우리가 프로그램을 작성할 때 주석처리를 하게 되는데 일반적으로 '//'을 사용하거나 '/*... */ ' 을 사용하게 됩니다. 그러나 대부분의 IDE 툴에서는 주석에 대한 기능을 추가하여 프로그램을 사용할 때 도움을 줍니다. 그중 대표적인 주석 방법이 '/***.. */'를 사용하는 방법입니다. 예를 들어 보면, 아래의 그림과 같이 /*** ai 시뮬레이션 */ 으로 주석 처리를 합니다. 해당 클래스를 사용한 부분에서 마우스를 클래스명에 올려 놓으면(대부분) 아래의 그림처럼 주석처리된 내용이 하나의 정보로 표시됨을 알 수 있습니다. 클래스명뿐만 아니라 필드(변수), 메서드에도 동일한 방법으로 주석 처리를 하여 그 기능을 확인해 볼..

안녕하세요 IT여행자입니다. 이번 여행지는 Chart.js 라이브러리를 사용하여 차트 만들기 입니다. 차트를 만드는 라이브러리나 API는 그 종류가 굉장히 많이 있지만 Chart.js는 자바 스크립트를 사용하여 간단히 차트를 만들수 있는 라이브러리 입니다. 여행 방법은 아래와 같습니다. 1. CDN 형태로 라이브러리 가져오기 라이브러리를 다운로드 받아 프로젝트내에 포함시킬 수 도 있습니다. " target="_blank" rel="noopener">https://cdn.jsdelivr.net/npm/chart.js"> 2. 기본 골격 데이터를 생성하는 언어는 JSP를 사용하였지만 어떤 언어이든 상관없습니다. 데이터를 자바스크립트로 전달 할 수만 있으면 상관 없습니다. line type 1 특별한 이유는 ..

안녕하세요 IT여행자입니다. 이번 수첩에서는 업무 내용이 서버 관리자까지는 아니더라도, 리눅스를 설치하고 원격지에서 터미널접속, jsp연동 및 db 연동을 작업에 대한 내용을 알고 있다면 주변머리가 생길 것 같아 간단히 정리해 보았습니다. [참고] - 모든 작업은 리눅스의 슈퍼유저로 리눅스 터미널에서 작업하시면 됩니다. - 문서 작성환경은 window10위에 virtualbox로 xbuntu를 설치하여 작업함. sshd 설치 및 접속환경 설정 1) sshd 설치 apt update apt upgrade apt install openssh-server -y 2) sshd 활성화 systemctl enable ssh systemctl start ssh 3) 리눅스 유저 등록(리눅스 터미널에서 직접 작업) u..

안녕하세요 IT여행자입니다. 간혹 이클립스를 사용할 때 자바스크립트 코드에 대한 코드 하이라이트 기능이 없어지거나 색상을 다른 형식으로 바꾸고 싶을 때가 있을 것입니다. 이때 손쉽게 theme를 지정하여 텍스트 색상 및 바탕색을 지정할 수 있습니다. Window> Preferences> TextMate 로 이동하셔서 'source.js'를 선택한 후 theme를 지정할 수 있습니다. 기본적으로 설치된 이클립스 내부에서는 다양한 theme는 없지만 코드 하이라이트는 보입니다. 이상 IT여행자 수첩이었습니다.

안녕하세요~ IT 여행자입니다. 이번 작은 구술에서는 favicon에 대한 이야기를 해 보렵니다. favicon은 브라우저의 제목 표시줄에 표시되는 사이트를 특정 짓을 수 있는 작은 아이콘을 의미합니다. 일반적인 웹 서핑할 때는 큰 문제가 되지 않지만 개발자 입장에서 사이트를 테스트하거나 할 때 브라우저의 개발자 모드를 열어 놓고 작업할 때가 매우 많습니다. 이때 눈에 가장 거슬리는 오류 아닌 오류가 바로 favicon에 해당하는 아이콘이 없을 때입니다. 이럴 때 좀 귀찮아도 favicon으로 사용할 이미지를 16x16이나 24x24 크기로 이미지를 만들어 태그를 사용하여 연결해 놓으면 에러 같지도 않은 에러 메시지를 보지 않아도 됩니다. ^^ 이런 면도 그렇지만 이왕이면 해당 사이트에 걸맞은 고유한 작..

안녕하세요 IT여행자입니다. JSP를 사용하여 웹을 개발할 때 안에 있는 정보를 VO객체에 담을 수 있는 방법 중 가장 손쉬운 방법은 아마도 을 사용하는 것이 아닐까 합니다. 그런데 Servlet 구조를 사용하게 되면서 처럼 손쉽게 안에 있는 값들을 VO에 담을 수 있는 방법이 없게 되었습니다(이 부분은 아마도 제가 방법을 알지 못할 수도 있습니다.) 그래서, Servlet 코드 안에서 태그 안에 있는 값을 VO로 만들어주는 메서드를 정의해서 사용하곤 합니다. 항목이 몇 개 되지 않는다면 별 문제가 되지 않지만 항목의 수가 많아질수록 그 수고로움이 말도 아니게 됩니다. 즉, String id = request.getParameter("id"); ... MemberVo vo = new MemberVo();..

안녕하세요~ IT 이곳 저곳을 여행하고 있는 IT 여행자압니다. 이번 수첩은 이클립스에서 DBearver 플러그인을 설치하고 사용해 보는 간단한 내용을 적을까 합니다. DBeaver는 다양한 데이터베이스를 사용할 수 있는 몇 안되는 클라이언트 툴입니다. 윈도우, 맥, 리눅스에서 사용할 수 있는 독립적인 프로그램을 따로 설치하여 사용할 수도 있습니다. 그러나 윈도우용에서 어떤 경우엔 프로그램 자체가 실행되지 않는 생각지도 못한 버그가 존재합니다. 명확한 해결책을 찾기가 매우 힘들기 때문에 프로그램을 설치해서 사용하는 것은 일단 비추이지만, 이클립스의 플러그인을 설치하여 사용하는 것을 추천 드립니다. step 1. 이클립스 marketplace에서 dbeaver 를 검색하여 설치한다. 버전번호는 그 때 그 ..

안녕하세요 IT여행자입니다. 이번 여행자 수첩은 Firefox 브라우저의 cache 기능을 활성화하거나 비활성화하는 방법에 대한 내용입니다. 일반적으로는 빠를 처리 속도와 중복되는 패킷 정보를 수신하지 않기 위해 cache 기능은 반드시 필요한 기능입니다. 그러나 개발자의 입장에서는 여간 불편한 내용이 아닐 수 없습니다. 특히나 css부분의 수정을 계속해나가야 하는 과정에 있다면 cache 때문에 탈모 증상을 겪을 수도 있을 것입니다. Firefox가 갖고 있는 cache 기능을 비활성화해 봅시다. 1. 먼저 브라우저를 열고, 주소 입력란에 'about:config'라고 입력합니다. 그러면 위험한 작업인데도 계속할 거냐 라는 경고 메시지와 함께 버튼이 나오게 되는데 버튼을 클릭합니다. 2. 검색창에 'b..

안녕하세요. IT 여행자입니다. 이번 여행자 수첩은 USB나 이동 디스크에 MySQL Server를 설치하는 방법입니다. 실제 프로젝트에 사용하기에는 적절하지 않으나 테스트용 프로젝트에서 사용하거나, 컴퓨터를 바꾸어 가면서 MySQL을 사용해야 하는 상황에서는 매우 적절한 방법이 아닐까 합니다. 물론 SQLite와 같이 임베디드용 데이터베이스를 사용할 수 도 있지만, 임베디드용 데이터베이스들은 대부분 멀티 스레드나 다중 접속 시 많은 제한들이 있는 게 사실일 것입니다. 또한 설치된 데이터베이스에 저장된 데이터들을 다른 기기에 복사해서 사용하기엔 복잡한 과정을 거쳐야 사용 가능합니다. 이런 측면에서 손쉽게 데이터와 서버 전체를 복사해 컴퓨터들을 바꾸어 가면서 사용할 수 있다는 것은 매우 매력적인 요소일 것..

안녕하세요. IT여행자입니다. 이번 여행지는 JavaScript를 사용하여 file 태그에 의해 선택된 이미지를 미리 보는 작업을 해볼까 합니다. HTML5가 이제 보편적으로 사용되면서 하나의 file 태그에 의해 하나 이상의 파일들을 한 번에 선택할 수 있게 되었습니다. 아직 몇몇 파일 다운로드 API 중에는 file 태그의 multiple 속성을 사용할 수 없는 것도 있지만 버전업이 되지 않는다면 시장에서 도태되겠지요~ 여담이지만, 우리나라도 이제 것 IE에 종속적이었기 때문에 web 개발 능력이 한없이 IT 선진국에 비해 뒤쳐져있는 건 사실일 것입니다. 아니, 정확히 이야기하면 신기술을 사용하지 못하고 그저 IE의 특성만을 답습하다 보니 우리도 모르게 세계 시장에서 도태된 것일 겁니다. 사설 끊고~..

안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 포스팅은 CSS와 JavaScript만을 사용하여 모달 박스를 만들어 암호를 입력하도록 해 보겠습니다. iframe이나 새창을 띄워서 모달 형태의 박스를 구현하는 방법도 있지만 쓰임새에 따라 각각의 장단점들이 있겠습니다. 여기서 모달 박스란 반드시 어떤 작업을 해야 하거나, 승인 또는 거부를 한 후 다음 작업이 진행되도록 하기 위해 사용될 것입니다. [시연 장면] 암호 입력을 위한 모달창 시연 1. HTML 작업 먼저 모달이 필요한 페이지와 모달을 구현할 페이지를 작성합니다. 암호를 입력하려면 버튼을 클릭해 주세요. 암호를 입력하세요 CSS를 구현하기 이전이기 때문에 아마도 아래와 같은 화면이 출력될 것입니다. 여기서 id='modal'로..

안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 작은 IT구슬은 이클립스의 코드 자동 완성 기능입니다. 이클립스가 언제부터인가 코드 자동 완성 기능에 대하여 그리 신경 쓰지 않고 있다는 생각이 드네요. 아마도 이런 요소들 때문에 급격히 VSC(Visual Studio Code)에게 밀리고 있지 않나 생각해 봅니다. VSC 에디터를 사용하다 보면 html5, css3, javascript에 대한 코드 자동 완성 기능이 정말 이클립스와 비교가 되지 않을 정도로 지원하고 있습니다. 이클립스의 정책 구조가 서드파트 개발자들과의 상생이 목표라면 크게 반길만한 정책이지만, 아무튼 불편한 건 사실입니다. 또한 서드 파트의 개발자들의 부지런함에 종속되어 버린 에디터라면 생명력이 그리 길어 보이지는 않..

안녕하세요 IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 포스팅은 다음 API를 사용한 우편번호 검색 프로그램으로 자바스크립트만을 사용한 우편번호 검색입니다. 다음 API를 사용한 우편번호 검색의 특징은 아래와 같습니다. 별도의 로그인이나 KEY 등록 과정이 필요 없다. 자바스크립트만을 사용하여 우편번호 검색을 할 수 있다. API 연결과 검색 버튼의 이벤트 처리만으로 모든 것을 해결할 수 있다. step 1. 웹페이지를 작성한 뒤 다음 API를 사용하기 위한 스크립트를 추가합니다. step 2. 우편번호 검색을 위한 을 작성합니다. 우편번호 주소 step 3. 우편번호 검색 버튼의 클릭이벤트에 다음 API의 우편번호 검색 로직을 호출합니다. 우편번호 검색 버튼(btnZipcode)이 클릭되면 다..

사용자가 파일을 다중 선택하거나 탐색기에서 파일을 드래그 앤 드롭을 사용하여 파일을 선택하도록 한 후 최종적으로 전송할 파일을 선택 또는 취소하여 파일을 전송하는 솔류션입니다. 그 흔한 jquery를 사용하지도 않았습니다. 자바스크립트의 기본 기능만을 사용했습니다. 물론 jquery를 사용한다면 소스가 조금 단순해지긴 할 것 같네요~ ^^ 먼저 움짤을 보고 가시죠~ 보다 다양한 기능은 처리하지 않았지만, file 태그를 사용하여 파일을 선택하거나, 탐색기에서 파일을 다중으로 선택할 수있고, 최종 선택된 이미지를 보면서 최종 선택 여부를 결정하여 파일을 전송할 수 있습니다. [체크사항] servlet.com에서 재공하고 있는 cos.jar API는 사용할 수 없습니다. 이 글이 포스팅되는 시점에서도 아직 ..

안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 IT 작은 구슬에서는 자바스크립트에서 사용되는 함수를 정의하는 다양한 방법들에 대해서 설펴 보고자 합니다. 선언적 함수함수 표현식익명함수(즉시실행함수)화살표 함수생성자를 통한 함수리터널 유형 함수 1. function 함수명( [매개변수] ) {... } 선언적 함수가장 보편적으로 많이 사용하고 있던 함수 선언 형식입니다. 함수가 hoisting 된다는 특징이 있습니다. 함수가 hoisting 된다는 의미는 선언되는 순서와 상관없이 스크립트 엔진은 가장 먼저 메모리 스택에 함수를 로딩하여 사용할 준비를 해 준다는 의미입니다. 즉, 코드의 순서가 "사용->선언"순으로 작성하든, "선언->사용" 순으로 작성하든 상관이 없다는 말입니다. 이러한..