반응형

다른곳에서 소스를 받아와서 복사 후 붙여넣기만 하면 VS CODE가 자동으로 줄 정렬을 해주는데, 이 기능이 굉장히 좋을 때도 있지만 불편하게 만드는 경우도 있다.

 

예를들면 css는 개인적으로 한줄로 쭉 작성하는것을 선호하는 편이지만 VS CODE에 넣기만 하면 자동으로 단위별로 줄 정렬이 되어버린다.

 

prettier와 같은 플러그인을 설치하여 옵션을 꺼봤지만 저장시 자동 정렬은 별도의 옵션이였다.

 

아래와 같이 옵션을 끄면 자동 정렬을 끌 수 있다.

 

저장 시 자동 줄 정렬 끄기🛠

 

1. 파일 - 기본 설정 - 설정

 

2. formatOnSave를 입력한다.

 

체크되어 있는 Format On Save 옵션을 체크를 해제하면 더 이상 저장할 때 자동으로 정렬이 되지 않는다.

반응형
  1. ㅇㅇ 2021.05.03 17:38

    감사합니다

  2. 2021.06.11 04:29

    완전 도움 됐어요

반응형

야밤에 잠깐 소스를 봐준다고 팀뷰어로 상대방 개발자분 컴퓨터를 보고있었는데, 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 버전으로 설치하고 정상 동작을 확인했습니다.)

반응형
  1. Favicon of https://keffy.tistory.com ­­­ ­ 2021.01.08 07:11 신고

    안녕하세요!!
    학생 한 명이 같은 문제를 겪고 있었는데, stackoverflow에 나오는 걸 이것저것 다 해봤는데도 해결이 되지 않아서 슬퍼하고 있던 참이었어요 ㅎㅎ
    내가 한국어로 검색해볼게 잠시만!! 하고서 검색해보던 차에 이 포스팅을 발견하고 학생의 문제를 해결하였습니다 :)))
    좋은 정보 공유해주셔서 감사합니다!! 복받으세요- ㅎㅎ

    • Favicon of https://myhappyman.tistory.com Park.S.W 2021.01.08 08:57 신고

      안녕하세요! 제 글이 도움이 되어서 다행이네요 :) 복 많이 받으세요ㅎ

  2. Favicon of https://cddh.tistory.com cddh 2021.01.16 22:46 신고

    덕분에 해결했습니다 감사합니다,,,

    • Favicon of https://myhappyman.tistory.com Park.S.W 2021.01.18 08:51 신고

      방문해주셔서 감사합니다~ 도움이 되어서 다행이네요 :)

  3. test1 2021.01.25 14:54

    문제 해결에 큰 도움이 되었습니다.
    좋은 하루 되시길 바랍니다.
    감사합니다.

  4. Hello 2021.03.08 05:25

    어우 이 글 덕분에 해결했네요 감사드려요

반응형

~.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가 생성된 것을 확인 하실 수 있습니다.

 

반응형
  1. 주니 2020.09.17 21:38

    왜 안될까요 ㅠ

    • eoy13 2020.09.20 22:35

      혹시 서버 오른쪽 클릭 후 브라우저 열었을 때 주소창에 localhost만 쓰여있다면 안나와요 뒤에 /test.jsp 붙여주면 잘 나오더라구요

  2. eoy13 2020.09.20 22:36

    혹시 vscode로 jsp를 사용할 때, 양식 자동 완성이라든지 그런 편리한 팁은 없을 까요? 이클립스는 쓰고 싶지 않은데 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 이런 문장들을 일일히 쳐야하는게 불편해서욧 ㅠㅠ

    • Favicon of https://myhappyman.tistory.com Park.S.W 2020.09.21 08:57 신고

      방문해주셔서 감사합니다 :) 간편하게 vscode에서 jsp를 사용하는방법을 찾아보고 포스팅했던 글인데, 추가적으로 자동완성 관련하여 찾아봤지만 해당 기능은 저도 찾을수는 없었습니다. 마켓등에 해당 기능이 추가될때까지는 기다려보거나 직접 만들어서 쓰셔야 할것같습니다.

    • 주니어 2022.06.28 09:58

      해당기능은 없는걸로 알고있어서 기본값 jsp 를 만들어 두시면 편리하게 사용 가능합니다

  3. 주니 2020.09.25 03:12

    jsp 실행하면 서블릿(.java .class) 어디에 저장이 되나요?
    Tomcat 9.0\work\Catalina\localhost\ROOT\org\apache\jsp
    여기에는 없더라구요

    • Favicon of https://myhappyman.tistory.com Park.S.W 2020.09.25 09:22 신고

      안녕하세요~
      기존 톰캣에서도 저장되는 위치를 잡아주실 수 있듯이 마찬가지로 server.xml에서 별도로 work위치를 잡아주시면 될 것같습니다.

      server.xml -> Host 태그 -> workDir="저장 될 위치" 형태로 지정 후 톰캣을 재지정하시면 지정한곳에 .java .class가 풀린 모습을 확인 하실 수 있습니다.

  4. dw 2020.10.02 16:11

    안녕하세요. vscode로 html에서 form태그로 jsp에 값을 넘겨줄려는데
    http 405오류가 뜨네요.
    어떻게 해결하면 될까요..?

    • Favicon of https://myhappyman.tistory.com Park.S.W 2020.10.05 08:49 신고

      안녕하세요~ html에서 jsp로 넘기신다는건 모델1로 개발중이신건지 자세히 알수 없지만 에러코드 405인것으로 보아 서버까지는 갔지만 매핑방식 오류로 의심됩니다 예를들면 POST로 전달하였지만 서버코드에서는 GET방식으로 처리하고 있는게 아닌지 확인 바랍니다.

  5. 농부요 2020.10.20 18:29

    안녕하세요. 포스팅 하신대로 해봤는데도
    localhost에서 연결을 거부했습니다.
    ERR_CONNECTION_REFUSED
    에러가 뜨는데요. 설정 문제인가요?
    혹시 해결방법이 있을까요??

    • 농부요 2020.10.20 18:34

      세팅한 작업폴더 위치에 포스팅한 test.jsp 파일을 똑같이 만들어서 저장했습니다.
      그리고 비쥬얼스튜디오 코드의 톰캣서버 탭에서 구동을 해도 아무 OUTPUT 이 나오지 않더라고요 브라우저에 직접 http://localhost/test.jsp 을 입력하여도 위에 말씀드린 에러만 뜹니다...

    • Favicon of https://myhappyman.tistory.com Park.S.W 2020.10.21 08:49 신고

      안녕하세요!
      먼저 톰캣이 정상적으로 구동이 되었다면 server.xml 부분에서 설정이 정상적으로 안되었을 확률이 높을 것 같습니다.
      먼저 기본포트인 8080을 80으로 바꾸셨는지 확인을 해주시고(포트입력없이 기본포트로 사용하기 위함)

      두번째로 추가한 Context 설정값의 docBase 속성의 경로가 올바른지 확인해주세요!

    • 농부요 2020.10.21 16:09

      안녕하세요!
      설정이 잘못되셨다고 하셔서 확인했더니 기본포트 하나만 설정이 되어있더라고요.
      그래서 두번째 포트도 포스팅 하신대로 추가 했더니 정상적으로 작동합니다!
      비쥬얼 스튜디오가 좀더 직관적이라 정말 사용하기 편하네요!!
      감사합니다!

    • Favicon of https://myhappyman.tistory.com Park.S.W 2020.10.21 16:19 신고

      적용이 잘 되어서 다행이네요 :) 좋은 하루 되세요!

  6. Favicon of http://magicznyslub.pl/member.php?action=profile&uid=386768 kagome0518 2020.11.19 23:44

    도움되는 내용 매우 잘 보고 가용~

  7. 탱자 2020.12.14 18:12

    이상하네요...;
    윗글 그대로 했는데 404 에러가 나면서 test.jsp 를 찾지를 못 하네요

    ------------------------------------------------
    HTTP 상태 404 – 찾을 수 없음
    타입 상태 보고

    메시지 파일 [/test.jsp]을(를) 찾을 수 없습니다.

    설명 Origin 서버가 대상 리소스를 위한 현재의 representation을 찾지 못했거나, 그것이 존재하는지를 밝히려 하지 않습니다.
    ------------------------------------------------

    docBase 경로는 정확하게 설정했는데두요.. ㅠㅠ

    • 탱자 2020.12.14 18:16

      추가로 localhost 로만 접근하면

      War Packages Deployed on this Tomcat Server:
      No war package

      이렇게 출력되네요

    • Favicon of https://myhappyman.tistory.com Park.S.W 2020.12.14 18:25 신고

      안녕하세요! 404 에러코드는 요청한 내용을 찾을 수 없다는 에러로 요청하신 설정 경로에 test.jsp가 존재하지 않아서 발생하는 에러입니다. 디렉토리에 test.jsp가 정확히 존재하신다면 docBase설정이 잘못되었을 확률이 높아보입니다. 설정시 test.jsp가 존재하는 디렉토리명까지 정확하게 입력하셨는지 재확인하시고 경로 설정이 어렵다면 절대경로로 설정하시는걸 추천드립니다.

  8. Favicon of https://vorsommer.tistory.com 스시쿤 2021.03.20 15:03 신고

    안녕하세요! 좋은 글 감사합니다^^ 덕분에 잘 따라했습니다!

  9. dhwns 2021.07.19 18:36

    Tomcat server 실행 시키면 아래와 같이 오류가 뜨네요...


    [apache-tomcat-10.0.8]: 7월 19, 2021 6:34:14 오후 org.apache.catalina.core.StandardServer await
    SEVERE: 주소 [localhost]와(과) 포트 [8005]에, 서버 셧다운 소켓을 생성하지 못했습니다. (base 포트 [8005], offset [0])
    java.net.BindException: Address already in use: bind
    at java.base/sun.nio.ch.Net.bind0(Native Method)
    at java.base/sun.nio.ch.Net.bind(Net.java:479)
    at java.base/sun.nio.ch.Net.bind(Net.java:468)
    at java.base/sun.nio.ch.NioSocketImpl.bind(NioSocketImpl.java:643)
    at java.base/java.net.ServerSocket.bind(ServerSocket.java:396)
    at java.base/java.net.ServerSocket.<init>(ServerSocket.java:282)
    at org.apache.catalina.core.StandardServer.await(StandardServer.java:584)
    at org.apache.catalina.startup.Catalina.await(Catalina.java:887)
    at org.apache.catalina.startup.Catalina.start(Catalina.java:833)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.base/java.lang.reflect.Method.invoke(Method.java:564)
    at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:345)
    at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:476)

    [apache-tomcat-10.0.8]: 7월 19, 2021 6:34:14 오후 org.apache.coyote.AbstractProtocol pause
    INFO: 프로토콜 핸들러 ["http-nio-80"]을(를) 일시 정지 중
    [apache-tomcat-10.0.8]: 7월 19, 2021 6:34:14 오후 org.apache.catalina.core.StandardService stopInternal
    INFO: 서비스 [Catalina]을(를) 중지시킵니다.
    [apache-tomcat-10.0.8]: WARNING: An illegal reflective access operation has occurred
    WARNING: Illegal reflective access by org.apache.catalina.loader.WebappClassLoaderBase (file:/C:/apache-tomcat-10.0.8-windows-x64/apache-tomcat-10.0.8/lib/catalina.jar) to field java.io.ObjectStreamClass$Caches.localDescs
    WARNING: Please consider reporting this to the maintainers of org.apache.catalina.loader.WebappClassLoaderBase
    WARNING: Use --illegal-access=warn to enable warnings of further illegal reflective access operations
    WARNING: All illegal access operations will be denied in a future release
    [apache-tomcat-10.0.8]: 7월 19, 2021 6:34:14 오후 org.apache.coyote.AbstractProtocol stop
    INFO: 프로토콜 핸들러 ["http-nio-80"]을(를) 중지시킵니다.
    [apache-tomcat-10.0.8]: 7월 19, 2021 6:34:14 오후 org.apache.coyote.AbstractProtocol destroy
    INFO: 프로토콜 핸들러 ["http-nio-80"]을(를) 소멸시킵니다.

    • dhwns 2021.07.19 18:41

      해결방안 :
      포트 8005 종료시키니까 됩니다.

    • Favicon of https://myhappyman.tistory.com Park.S.W 2021.07.20 09:52 신고

      기재해주신 로그 3번째줄에 힌트가 있었던것 같습니다. 🙄

      java.net.BindException: Address already in use: bind

      이미 다른 환경 톰캣에서 8005번을 사용중이셨던것으로 예상됩니다.(이클립스, 톰캣런처 등)
      해결이 되셔서 다행이네요! 😁

  10. 익명 2022.03.21 16:40

    비밀댓글입니다

    • 익명 2022.03.22 08:51

      비밀댓글입니다

반응형

간단한 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를 처음에 설치하시면 영문버전인데 툴을 한글버전으로 사용하고 싶은분들에게 추천합니다. 설치 후 별도의 설정이 필요합니다. 저는 영문버전으로 사용중입니다.

 

반응형