반응형

야밤에 잠깐 소스를 봐준다고 팀뷰어로 상대방 개발자분 컴퓨터를 보고있었는데, VS CODE툴을 사용해서 개발중이었다. VS CODE의 open in browser 확장프로그램 기능을 사용중이셨는데... 엉뚱하게 갑자기 해당 확장프로그램이 정상동작을 하지 않는 현상이 발견되었고 옵션을 사용할때마다 계속해서 동일 에러를 출력하였다.

 

문구는 다음과 같았다.

 

Vscode Error : Open browser failed!! Please check if you have installed the browser correctly!

 

여러가지 해결방법도 찾아봤는데 일단 명확한 해결방법을 찾지를 못했고, Stackoverflow 글들을 참고하면서 setting에서 브라우저 지정도 해보고 vscode를 전부 삭제하기전에 설정파일들까지 초기화해서 전부 삭제하고 재설치도 해보고 크롬도 재설치해봤지만, 해결은 되지 않았다.

 

그러다가 찾은 글이 같은 확장프로그램은 아니지만 버전을 낮춰보니 정상동작한다는 글을 보았고, 적용을 하고 리로드하니 정상동작하는것을 보았다.

 

1. 확장프로그램 탭으로 이동하고 원하는 확장프로그램의 톱니바퀴 아이콘을 클릭한다.

 

2. 다른버전 설치를 클릭한다.

 

3. 버전 정보들 중에 원하는 과거버전으로 설치한다.

(해당 문제가 발생하여 1.1.0 버전으로 설치하고 정상 동작을 확인했습니다.)

반응형
반응형

~.html 파일에 HTML, CSS, JS등으로 웹 페이지를 열심히 만들고 결과물을 전달해주는 과정에서 스프링프로젝트로 들어가는건지 모르겠지만 html파일을 전부 JSP로 변경해서 넘겨달라는 요청사항이 있었다.

 

한번 하는거면 문제가 없지만 넘기고 나서도 추가적으로 변경 요청사항이 있었고 그때마다 매번 html을 작업해보고 jsp로 하나하나 수정하는것도 번거로울 뿐더러 include를 통해 내부에 태그까지 심어달라는 둥 여러가지 요구사항이 있어서 구조적으로도 많이 달라지는 상황이었다.

 

그래서 애초에 jsp에서 다 작업해버리는게 좋다고 판단했고, 주로 사용하던 툴인 VS Code에서 간단하게 JSP를 구동시키고 로컬에서 페이스도 볼 수 있도록 환경 설정을 해보겠다.

 

spring 프레임워크 boot 설정법은 아니므로 해당 방법이 필요한분들은 다른 포스팅을 찾아보셔야 할 것 같습니다.

 

톰캣 설치

일단 먼저 WAS서버가 필요한데, 가장 보편적으로 사용하는 톰캣을 설치하자.

https://tomcat.apache.org/download-80.cgi

 

Apache Tomcat® - Apache Tomcat 8 Software Downloads

Welcome to the Apache Tomcat® 8.x software download page. This page provides download links for obtaining the latest versions of Tomcat 8.x software, as well as links to the archives of older releases. Unsure which version you need? Specification versions

tomcat.apache.org

다운로드가 끝나면 인스톨 프로그램을 통해 설치를 진행한다.

윈도우 환경이라고 생각하고 설치는 간단하니 넘어가도록 하겠다. (설치경로는 기억해야합니다.)

 

 

 

VS CODE 설정

확장 프로그램 설치 - Debugger for Java, Tomcat for Java

먼저 2가지 확장 프로그램을 설치해줘야 한다. 맨 왼쪽 5번째 탭을 누르고 확장 프로그램을 설치해주자.

 

 

2가지 설치가 끝나고 탐색기탭으로 돌아가면 최하단에 TOMCAT SERVERS라는 탭이 생긴 것을 볼 수 있다.

 

탭을 열어보면 아무것도 없을텐데(캡처본은 제가 추가해서 보입니다...)

+버튼을 눌러서 아까 먼저 설치한 톰캣을 등록해준다.

 

아까 설치한 톰캣을 선택해주면 정상적으로 등록된다.

(일반적으로 설치프로그램을 통해 설치하면 C:\Program Files\Apache Software Foundation\Tomcat 8.5

해당 경로에 있을 확률이 높다. 설치경로를 잘 파악해둔다.)

 

톰캣이 정상적으로 등록되고 오른쪽 클릭을하면 여러가지 메뉴를 볼 수 있다.

Start : 톰캣을 구동한다.

Stop : 톰캣을 종료한다.

Restart : 톰캣을 재시작한다.

Rename : 등록한 톰캣의 이름을 변경한다.

Open in Browser : 브라우저를 통해 톰캣을 연다.

Open Server Configuration : 가장 중요하다!! 톰캣의 설정을 변경하는 설정파일이다.

 

Open Server Configuration을 클릭하면 server.xml파일이 열린다.

 

server.xml

이런식으로 xml파일이 보이는데, 우리가 추가해야할 정보는 2가지정도가 있다.

 

Host태그쪽에 보면 Value태그가 있는데 바로위에 Context라는 태그를 추가할것이다.

<Context path="" docBase="JSP작업을 할 위치"></Context>

 

해당 태그를 추가하고 Service 태그 바로 아래 첫번째 Connector의 포트값을 8080 기본에서 80으로 변경해준다.

<Connector port="80" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443"/>

 

작업이 끝나면 위 캡처의 형태로 변경되어 있어야 한다.

 

그럼 준비가 끝났다.

 

현재 세팅한 작업폴더의 위치는 E드라이브의 project의 jspWorks이다.

해당 폴더에 jsp를 만들고 확인해보겠다.

 

E:/project/jspWorks/test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>

<head>
    <title>VS CODE에서 JSP 동작시키기</title>
</head>

<body>
    <h1> test.jsp 페이지입니다.</h1>
</body>

</html>

 

test.jsp를 만들고 톰캣서버 탭에서 톰캣을 구동한다.

그럼 OUTPUT 탭에 여러 메시지들이 쭈르륵 출력되고 원하는 브라우저 하나를 켠다.

 

 

http://localhost/test.jsp

jsp명까지 끝까지 입력하여 주소를 입력하고 정상적으로 페이지가 열리는지 확인한다.

 

 

2020-09-25 추가----------------------------------------------------------

구동한 jsp의 .java, .class 위치 지정하기

먼저 확인해보았던 server.xml을 열어봅니다.

 

내부 태그 내용 중 Host태그를 찾고 workDir을 추가합니다.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Server port="8010" shutdown="SHUTDOWN">
  <Listener className="org.apache.catalina.startup.VersionLoggerListener"/>
  <Listener className="org.apache.catalina.core.AprLifecycleListener" SSLEngine="on"/>
  <Listener className="org.apache.catalina.core.JreMemoryLeakPreventionListener"/>
  <Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener"/>
  <Listener className="org.apache.catalina.core.ThreadLocalLeakPreventionListener"/>
  <GlobalNamingResources>
    <Resource name="UserDatabase" auth="Container" type="org.apache.catalina.UserDatabase" description="User database that can be updated and saved" factory="org.apache.catalina.users.MemoryUserDatabaseFactory" pathname="conf/tomcat-users.xml"/>
  </GlobalNamingResources>
  <Service name="Catalina">
    <Connector port="80" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxPostSize="-1" maxParameterCount="-1"/>
    <Connector port="8009" protocol="AJP/1.3" redirectPort="8443"/>
    <Engine name="Catalina" defaultHost="localhost">
      <Realm className="org.apache.catalina.realm.LockOutRealm">
        <Realm className="org.apache.catalina.realm.UserDatabaseRealm" resourceName="UserDatabase"/>
      </Realm>
      <Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="true" 
          workDir="배포시킬 경로">
        <Context path="" docBase="E:/project/jspWorks/ROOT"></Context>
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" prefix="localhost_access_log" suffix=".txt" pattern="%h %l %u %t &quot;%r&quot; %s %b"/>
      </Host>
    </Engine>
  </Service>
</Server>

톰캣을 재기동 하면 지정한 위치에 .java, .class가 생성된 것을 확인 하실 수 있습니다.

 

반응형
반응형

간단한 HTML, CSS, JAVASCRIPT의 작업을 할 때, 주로 아톰을 사용하다가 리액트 공부를 하면서 VS Code를 알게 되었습니다. 뭔가 더 직관적이고 간편한 UI가 마음에 들어서 요즘엔 주로 사용하는 툴입니다. 아톰의 추가 패키지 설치처럼 VS Code에도 추가 확장 프로그램을 설치 할 수 있습니다.

 

설치방법

좌측 메뉴 중 최하단의 Extensions 메뉴를 클릭하고 찾고자 하는 확장 프로그램을 검색해서 설치하면 됩니다.

단축키 Ctrl + Shift + X

 


확장 프로그램 추천

사용하면서 편리한 확장 프로그램을 알게 되면 계속해서 추가하겠습니다.

 

1. ESLint : 자바스크립트 문법 및 코드 스타일을 검사해줍니다.

 

2. open in browser : html 같은 페이지를 바로 브라우저창에서 키고 싶을 때, 브라우저 연결을 도와줍니다.

 

3. Prettier-Code formatter : 코드 스타일을 자동으로 정리해줍니다.

 

4. HTMLHint : 작성한 HTML 문법에 문제가 있는지 체크해줍니다.

태그가 안닫히거나 올바른 문법이 아니면 경고를 띄워줍니다.

 

5. Reactjs Code Snippets: 리액트를 사용하는분들에게 추천합니다.

함수를 작성하거나 단축 단어를 사용하여 간편하게 코드를 작성할 수 있습니다.

 

6. Korean Language Pack for Visual Studio Code: VS Code를 처음에 설치하시면 영문버전인데 툴을 한글버전으로 사용하고 싶은분들에게 추천합니다. 설치 후 별도의 설정이 필요합니다. 저는 영문버전으로 사용중입니다.

 

반응형
반응형

메이븐이란 아파치에서 라이브러리를 편하게 다운로드하고 추가하고 버전 관리하기 위해 사용하는 것을 말한다.

 

프로젝트 하나에 무수한 라이브러리를 하나하나 다운받아 추가하고 필요없는건 지우고 하는일은 굉장히 고될것이다...

 

스프링 프로젝트를 하다보면 자연스럽게 pom.xml에서 메이븐을 사용하고 있었을 것인데,

가끔 자바에서만 테스트하기 위해 메이븐 프로젝트로 java파일들을 만들어서 백단에서 돌아가는 데이터를 확인할 일들이 있다.  이럴때 메이븐 심플 프로젝트를 만들어서 유용하게 사용하고 있다.

이번엔 몽고DB 데이터 조회 및 작업을 해보기 위해 생성하게 되었는데 생성방식도 포스팅한다.

 

그럼 메이븐 프로젝트를 생성해보자.

 

생성하기


1. 먼저 이클립스에서 탐색기에 오른쪽 클릭을 하고 New - Maven Project 선택을하거나 안보이는 경우 Other를 통해 선택해준다.

New - Other 선택

 

2. Maven으로 검색해본다.

Maven Project 선택

 

3. 메이븐 프로젝트 생성 위치 지정하기

   - 현재 사용중인 디렉토리에 생성시켰다.

메이븐 프로젝트 위치 지정

 

4. 메이븐 종류를 선택한다. 간단하게 자바 결과값만 확인할 것이므로 quickstart로 만들었지만 웹이 필요한분들은 webapp으로 선택하시면 됩니다. 다른것들은 필요에 따라 선택해서 생성

메이븐 템플릿 선택

 

5. 메이븐 그룹, 명 지정하기

   - Group ID는 프로젝트 구조

   - Artifact ID는 프로젝트 명이라고 생각하면 된다.

메이븐 그룹, 명 지정

 

6. Finish를 누르면 생성된다. 생성된 모습

메이븐 프로젝트 완성

 

반응형
반응형

request.getrequest.getRemoteAddr() IP가 0:0:0:0:0:0:0:1로 나올 때 127.0.0.1로 인식시키는법을 알아 보겠다.

이클립스 환경 설정을 변경해주면 된다.

 

Eclipse 설정변경

Run - RRun - Run Configuration - Arguments 탭 - " -Djava.net.preferIPv4Stack=true " 추가(""빼고)

 

Run Configurations... 선택

 

 

Arguments 탭에 VM arguments: 내용을 추가한다.

 

 

 

 

설정 추가

 

저장하고 톰캣을 재부팅하면 정상적으로 127.0.0.1로 인식한다.

반응형
반응형

이클립스 종류의 에디터를 사용도중 egov 사용시(일반 이클립스나 STS에서는 본 적이 없다...)에 .xml파일들을 열려고 하면 아래 캡처와 같이 log4j.xml 문법 에러가 발생하여 수정이 불가하고 mapper는 outline이 추가적으로 열리는등 매번 수정하거나 소스를 확인할때마다 불편하였다.

log4j.xml 확인시 뜨는 에러 모습

 

xml을 열때 기본 xml편집기로 열어서 수정하는 방법을 알아보겠다.

해당 설정을 하면 모든 xml이 기본 xml편집기로 바뀌어 mapper 에디터라던지 형태가 틀어질 수 있으니

원하지 않는분은 설정을 피하길 바란다.

 

Window - Preferences창으로 이동 후

General - Editors - File Associations 으로 이동한다.

 

File types쪽에 *.xml 이 있는지 확인 하고 없다면 Add... 버튼을 눌러서 *.xml 추가해준다.

 

 

추가하면 *.xml을 선택 후 Associated editors: 탭에서

XML Editor를 선택 후 Default 버튼을 누른다.

Apply and Close를 누르면 전부 .xml이 정상적으로 보이는 것을 볼 수 있다.

반응형
반응형

STS4에서 부트만 사용하다가 스프링 프로젝트를 생성하려고 보니 보이지가 않았다.

 

STS4는 스프링부트를 기본으로 나오기 때문에 STS3까지만 스프링 프로젝트가 생성이 가능하다.

 

이클립스에서 스프링 설치하듯이 마켓에서 STS3 Add를 설치하면 된다.

 

Help - Eclipse Marketplace

STS3 ADD 설치

 

설치 팝업이 끝나고 하단 Progress가 끝날 때까지 기다리면 툴을 재시작해달라는 메시지가 뜬다.

 

툴이 재시작 되고 로딩이 끝나면,

 

새로운 스프링 프로젝트를 생성한다

 

 

Next를 누르고 MVC 프로젝트로 생성하고 원하는 프로젝트명을 입력한다.

 

 

Next 후 원하는 package 구조를 생성한다. *.*.* 최소 3개 이상으로 구성하도록 한다.

 

 

프로젝트가 생성된다.

입력한 명으로 프로젝트가 생성

반응형
반응형

대문자를 소문자로 소문자를 대문자로 변경

개인적으로 mybatis쪽 쿼리 작성을 하다보면 종종 대소문자를 구분해야 하는 경우가 많았는데 기존 소스등이 잘못 입력된 경우 빠르게 수정하기 위해 단축키가 필요했다.

 

변경하고자는 문단을 블럭 지정을 하고

ctrl + shift + y : 대문자 -> 소문자 변환

ctrl + shift + x : 소문자 -> 대문자 변환

 

단축키를 입력하면 변경이 가능합니다.

 

 

자동 정렬하기

스페이스, 탭 등 엉망으로 정리되어 있는 소스를 한번에 정렬할 때 유용하다.

변경하고자는 문단을 블럭 지정을 하고

ctrl + shift + f : 자동 정렬

줄 맞춤등이 한번에 처리된다.

반응형