코딩 아자

<< 학습 목표 >>

1. JRE와 JDK를 구분할 수 있다.

2. JDK 를 설치할 수 있다.

3. 서버를 설치할 수 있다.

4. 이클립스와 서버를 연결할 수 있다.

5. MariaDB를 설치할 수 있다.

전체 큰 주제가 DB와 관련된 주제가 아니기 때문에 DB를 설치만 할 것

만약 DB가 무엇인지 어떻게 사용하는지 왜 그렇게 사용하는지 등이 궁금하다면 DB 공부를 따로 할 것

구글에서 mariadb 검색

만약 검색 결과에 이와 같은 결과가 없다면 직접 이동하자

https://mariadb.org/

[ Download ] 클릭(1)

우리는 MariaDB 최신 버전을 사용함

다운로드 페이지에서 별도로 체크하거나 설정할 것들은 없고 바로 [ Download ] 클릭(1)

설치 프로그램 실행시켜 [ Next ] 버튼을 누르면 됨

근데 [ Next ] 를 몇 번 하다 보면 [ Next ] 가 안되는 지점이 있음

root 계정의 비밀번호를 설정해주는 지점인데 root 계정의 비밀번호는 0000 으로 설정(1), Use UTF8 as default server's character set 체크(2) 후 [ Next ] 클릭(3)

그 다음 지점을 보면 여기 중요한게 하나 있음

TCP port: 3306 인데 이 설치 프로그램의 우측 상단을 보면 [ MariaDB Server ] 라고 되어있음

우리가 설치하는 DB는 정확하게는 MariaDB Server 임

왜일까 까지는 몰라도 되고 "톰캣과 같은 서버 프로그램을 설치하는거구나" 까지만 생각하면 됨

백화점에 여러 종류와 수 많은 매장이 있듯이 서버 컴퓨터에는 수 많은 서버 프로그램이 실행될 수 있음

앞서 우리는 웹 서버인 톰캣을 설치한 거고 이번에는 DB 서버인 MariaDB 를 설치하는 것

MariaDB 는 3306 포트를 사용함

만약 MariaDB를 톰캣과 같은 포트 번호로 바꾸면 톰캣과 MariaDB는 동시에 실행될 수 없음

반드시 알아야하는건 아니고 알면 개발하면서 도움이 되는 정도이니 가볍게 넘어가자

이제 [ Next ] 버튼을 더 클릭해 설치를 마무리하자

이번에는 설치가 제대로 됬는지 확인해보자

MaraiDB가 제대로 설치됬다면 바탕화면에 [ HeidiSQL ] 프로그램이 보일 것

HeidiSQL 프로그램을 통해 DB에 접속해보자

HeidiSQL 프로그램을 실행시키고 [ 신규 ] 버튼 클릭(1) -> Library는 libmysql.dll(2) -> 사용자는 root, 암호는 0000 (3), [ 저장 ] 버튼 클릭(4) -> [ 열기 ] 버튼 클릭(5)

MariaDB가 제대로 설치가 됬다면 MariaDB로 접속이 되서 다음과 같은 화면이 나옴

만약 안나온다면 댓글로 남겨주세요.

이클립스 내 톰캣이 실행되지 않는 이유는 여러 가지가 있음

1. 이클립스의 톰캣이 사용할 포트를 다른 서버 프로그램이 사용하고 있다.

2. 설정이 되어있어야 할 것이 설정되어있지 않다.

3. 오타 등으로 인해 컴파일 오류가 발생된 웹 프로젝트를 톰캣에 넣었다.

그 중에서도 이 3가지가 대부분임

여기서는 1, 2 번에 관련된 문제를 해결하는 방법을 알아볼 것

3번은 본격적으로 JSP/Servlet을 배우면서 필요하면 언급하겠음

1. 이클립스의 톰캣이 사용할 포트를 다른 서버 프로그램이 사용하고 있다.
이 경우 이클립스에 Already 를 포함한 안내 창이 나옴

이때는 우선 사용중인 포트 번호들을 조회해서 8080 포트가 진짜 사용중인지 확인하고 8080 포트를 사용하고 있는 프로그램을 끌 수 있다면 끄면 됨

만약 8080 포트를 사용하는 서버 프로그램이 없다면 이클립스 자체의 문제로 이클립스를 껐다 키면 됨

8080 포트가 사용중인데 사용중인 프로그램이 어떤 프로그램인지 몰라 끌 수 없다면 이클립스의 톰캣 포트 번호를 바꾸면 됨

이클립스의 톰캣 포트 번호를 바꿔보자

이클립스 내 [ Servers ] 탭(1) -> 서버 더블클릭(2) -> HTTP/1.1의 Port Number 더블클릭해 다른 번호로 지정 후 엔터(3) -> 저장(Ctrl + s)

이렇게 포트 번호를 바꿀 수 있음

포트 번호를 바꾸고나서 다시 서버를 실행시켜보자

아마 잘 실행될 것

바꿨는데도 여전히 포트 번호가 사용중(~~ Already ~~)이라는 문구가 뜨면 몇 차례 다른 번호로 지정해보고 그래도 안되면 컴퓨터를 껐다 켜보자

만약 그래도 안되면 댓글 남겨주세요.

2. 설정이 되어있어야 할 것이 설정되어있지 않다.

보통 이 경우는 [ Tomcat admin port ] 의 포트 번호가 설정되지 않은 경우임

톰캣 포트 번호를 바꾸는 것과 마찬가지로 이동해서 [ Tomcat admin port ] 의 번호를 8005 로 저장한 후 서버를 실행시켜보자

만약 [ Tomcat admin port ] 가 없다면 이클립스 좌측 [ Servers ] 펼치기(1) -> [ Tomcat v9.0 Server at localhost-config ] 펼치기(2) -> server.xml 더블클릭(3) -> [ source ] 탭 클릭(4) -> SHUTDOWN의 port 번호를 8005 로 설정(5) 후 저장(Ctrl + s)

여기까지 설정이 되어있어야 할 것이 설정되어있지 않다 를 알아봤음

여기까지 했는데도 여전히 이클립스의 톰캣이 실행되지 않으면 댓글로 남겨주세요.

제 블로그를 그대로 따라왔다면 내 컴퓨터에 서버 프로그램이 두 개가 된 것

먼저 아래 과정을 통해 내 컴퓨터에 서버 프로그램을 설치한 것

또 아래 과정을 통해 이클립스에 서버 프로그램을 설치한 것

위 두 과정을 통해서 내 컴퓨터에는 톰캣이 두 개 설치된 것

이게 무슨 얘기냐 먼저 [ Chapter01. 개발 환경 구축하기 - 서버 설치 ] 를 통해 톰캣을 설치하고 실행시켰던것처럼

[ Chapter01. 개발 환경 구축하기 - 이클립스와 서버 연결하기 ] 를 통해서 이클립스 안에 또 다른 톰캣을 설치한거고 이클립스 안에 설치한 서버를 실행시킬 수 있음

이클립스 안에 설치한 서버를 실행시켜보자

그 전에! [ Chapter01. 개발 환경 구축하기 - 서버 설치 ] 에서 문제 없이 톰캣이 실행된 분들이라도 [ Chapter01. 개발 환경 구축하기 - 서버가 실행되지 않아요 ] 글에 포트 번호가 무엇인지 설명하는 글을 보고 오자

이클립스 안에 설치한 서버를 실행시키기 전에 톰캣 서버가 실행 되있다면 닫아야함(1)

이클립스 하단에 [ Servers ] 탭에 추가된 서버 우클릭(1) -> Start(2)

이때 이와 같이 [ 보안 경고 ] 창이 뜬다면 [ 액세스 허용 ] 클릭(1)

이클립스 내 서버가 정상적으로 실행됬다면 [ Servers ] 탭에 추가된 서버에 [ Started, Synchronized ] (1) 가 됬을 것

만약 어떤 문제로 인해 서버가 정상적으로 실행되지 못했다면 보통 이런 메세지 창이 뜸

당황할 것 없이 메세지를 잘 읽어보면 [ 8080 포트가 이미 사용중입니다 ] 메세지라는 걸 금방 알 수 있음

이클립스 내 톰켓이 실행되지 않는 경우에는 아래 글을 보고 오자

여기까지 이 글에서 직접 하진 않았지만 내 컴퓨터에 설치된 서버를 실행시켜 보기도 했고 이 글에서 이클립스에 설치된 서버를 실행시켜봤음

이렇게 하는 이유는 개발을 편하게 하기 위해...

자바를 배울 때 입력했던 코드는 이클립스가 곧바로 실행시켜줬지만 JSP/Servlet 프로그램은 이클립스가 실행시켜줄 수 없고 서버가 실행시켜줄 수 있음

이클립스를 사용해서 JSP/Servlet 을 공부하고 나중에는 근사한 웹 프로그램도 개발하게 될 것

공부하면서 입력한 코드를 실행시켜서 결과를 확인해봐야 하기도 하고 웹 프로그램을 개발하면 그 프로그램이 제대로 동작하는지 확인도 해야함

이렇게 내가 입력한 JSP/Servlet 코드, 웹 프로그램을 실행시키려면 우선은 톰캣 서버로 넣어야함

이클립스 안에 톰캣을 설치하지 않았을 때 웹 프로그램을 실행시키기까지의 과정

1. 이클립스로 웹 프로그램을 개발한다.

2. 이클립스의 웹 프로그램을 war 형식으로 압축한다.

3. 프로그램이 압축된 war 파일을 톰캣의 webapps 폴더로 옮긴다.

4. 톰캣의 bin 폴더로 이동해 startup 을 더블 클릭해 서버(톰캣)을 실행시킨다.

5. 웹 브라우저에서 실행시키고 싶은 웹 프로그램의 경로를 입력한다.

를 거쳐야함

여기 있는 1 ~ 5단계를 이해할 필요는 없음

"이렇게 여러 단계를 거쳐서 웹 프로그램을 실행시키는구나" 라고 생각만 하면됨

이클립스 안에 톰캣을 설치했을 때 웹 프로그램을 실행시키기까지의 과정

1. 이클립스로 웹 프로그램을 개발한다.

2. [ Servers ] 탭에 있는 서버를 실행시킨다.

를 거치면 됨

단계가 확 줄었음

마찬가지로 여기 있는 1, 2 단계를 이해할 필요는 없음

이렇게 이클립스 안에 톰캣을 설치해두면 개발 과정이 매우 짧아져서 개발하기가 편해짐

"그럼 애초부터 C 드라이브에 톰캣을 설치할게 아니라 바로 이클립스에 톰캣을 설치하면 안되나?" 싶을텐데 우리가 이클립스와 서버를 연결했던 과정을 떠올려보자

과정상 어쩔 수 없이 먼저 C 드라이브에 톰캣을 설치해야함

또한! 개발을 할 때는 이클립스의 서버로 결과를 확인하지만 개발이 완료되고 서비스를 사람들도 이용할 수 있게끔 실제로 가동시킬 때는 C 드라이브에 있는 톰캣에 넣어서 가동시킴

이클립스의 톰캣은 개발용 톰캣

C 드라이브에 있는 톰캣은 실제 서비스용 톰캣

우리가 웹 프로그램을 실제로 서비스할 규모로 크게 만들 수도 없고 실제로 서비스 하려면 톰캣 외에도 알아야할 것 & 준비해야할 것이 더 많이 있기 때문에 실제 서비스할 일은 없을 것

개발자가 되기 위해 공부를 하거나 포트폴리오를 만드는 과정

1. 이클립스를 사용해 웹 프로그램을 개발한다.

2. 이클립스 내 톰캣을 사용해 테스트한다.

( 만약 왜 2에서 끝나지? 싶으면 다시 한번 위 글을 읽어볼 것 )

개발자가 되서 개발하는 과정

1. 이클립스를 사용해 웹 프로그램을 개발한다.

2. 이클립스 내 톰캣을 사용해 테스트를 한다.

3. 개발이 끝났다면 웹 프로그램을 war 형식으로 압축한다.

4. war 형식의 압축 파일을 C 드라이브의 톰캣 내 webapps 폴더로 옮긴다.

5. C 드라이브의 톰캣을 실행시킨다.

<< 학습 목표 >>

1. JRE와 JDK를 구분할 수 있다.

2. JDK 를 설치할 수 있다.

3. 서버를 설치할 수 있다.

4. 이클립스와 서버를 연결할 수 있다.

5. MariaDB를 설치할 수 있다.

웹 개발을 편하게 하려면 이클립스와 서버를 연결해야함

이유는 이 글의 마지막까지 읽어보고 다음 글을 보면 알 수 있음

연동하기 전 잠깐 아래 글로 가서 이클립스 관련된 초기 설정을 맞춰주고 오자

이클립스와 서버를 연결할 때는

1. 이클립스가 설치해둔 톰캣 서버를 인식할 수 있게 설정을 해주고

2. 이클립스 안에 서버를 만들어야함

1. 이클립스가 설치해둔 톰캣 서버를 인식할 수 있게 설정하자

이클립스를 실행시키자

[ Window ](1) -> [ Preferences ] 클릭(2)

[ Server ](1) -> [ Runtime Environment ](2) -> [ Add ](3) 클릭

[ Apache ](1) -> [ Apache Tomcat v9.0 ] 클릭(2) -> [ Next ] 클릭(3)

[ Browse ] (1) -> 톰캣이 설치된 곳으로 이동

톰캣 폴더 클릭(1) -> [ 폴더 선택 ](2) 

[ Finish ] 클릭 (1)

이렇게 해서 이클립스가 설치해둔 톰캣 서버를 인식할 수 있게 설정(1) 을 했음

[ Preferences ] 하단에 [ Apply And Close ] 클릭

2. 이클립스 안에 서버를 만들자

[ Ctrl + N ] -> Server 로 검색(1) -> [ Server ] 클릭(2) -> [ Next ] 클릭(3)

[ Apache ] (1) -> Tomcat v9.0 Server 클릭(2) -> [ Finish ] 클릭(3)

이클립스의 좌측에 [ Server ] 가 추가(1)된 걸 볼 수 있음

또 이클립스 하단에 [ Servers ] 탭에 추가(2)된 걸 볼 수 있음

둘 다 똑같은 것 (1) 에서도 볼 수 있고 (2)에서도 볼 수 있음

여기까지 이클립스 안에 서버를 만들기까지 끝

이클립스와 서버 연결하기 끝

<< 학습 목표 >>

1. 이클립스의 자바 버전을 1.8로 설정할 수 있다.

2. 이클립스의 문자열 인코딩을 UTF-8로 설정할 수 있다.

이클립스와 관련된 세팅을 하자

이클립스를 실행시키자

우리는 자바 8 버전을 설치했음

자바 8 버전을 사용하는 이유는 실무에서 자바 8 버전을 많이 사용하기 때문에 ㅎㅎ

2023년 2월 자바 최신 버전은 19버전임

실무에서는 최신 버전 보다 11 씩이나 낮은 8버전을 사용함

8버전을 사용하는 이유는 다양하니 만약 정말 궁금하다면 입사 후 선임에게 물어보자ㅎㅎ

다시 본론으로 돌아와서 우리는 자바 8 버전을 설치했는데 이클립스는 별도로 자바 17버전을 사용함

이클립스가 자바 17버전이 아닌 자바 8 버전을 사용하도록 바꾸자

이클립스 내 [ Window ] 메뉴(1) -> [ Preferences ] 클릭(2)

[ Java ] (1) -> [ Installed JREs ] (2) 를 확인 해보면 이클립스가 자바 17버전을 사용한다는걸 알 수 있음(3)

이클립스가 자바 8 버전을 사용하도록 [ Add ] 클릭 (4)

Standard VM 클릭(1) -> [ Next ] 클릭(2)

[ Directory ] 클릭(1)

자바를 설치한 곳으로 가 jre 폴더 클릭(1) -> [ 폴더 선택 ] 클릭(2)

자바를 설치한 곳은 C드라이브 -> Program Files -> Java 폴더임

만약 jre 폴더가 없다면 jdk 폴더를 선택해도 됨

JDK는? JRE + 개발과 관련된 것들 이 더 들어있기 때문에

이와 같이 선택되었다는 걸 확인하고 [ Finish ] 클릭(1)

추가한 자바 8 버전을 체크(1) -> [ Apply ] 클릭(2)

그 다음 왼쪽 메뉴 중 [ Compiler ] 클릭(1) 을 하면 다음과 같이 메세지가 나오는데 [ Apply ] 클릭(2)

[ Compiler ] 설정에서 [ Compiler compliance level ] 을 1.8 로 변경(1) -> [ Apply ] 클릭(2)

여기까지 먼저 이클립스가 자바 8 버전을 사용하도록 설정했음

이번에는 문자열 인코딩을 UTF-8 로 설정하자

똑같이 [ Preferences ] 창 내에서 encoding 으로 검색(1)

여기서 Workspace, CSS Files, HTML Files, JSP Files 의 encoding 을 모두 UTF-8 로 변경

( 슬라이드쇼로 이미지들을 첨부했습니다 )

이전다음

0123

다 설정했으면 이제 설정이 끝났으니 [ Apply And Close ] 클릭

여기까지 이클립스 세팅 끝!

서버가 실행되지 않을 때는 여러 가지 경우가 있는데 우선 포트(port) 번호가 충돌 나는 문제가 있고 또 환경변수 설정이 잘못되서 그럴 수 있음

먼저 포트 번호가 충돌 나는지 확인해볼텐데 그 전에 포트(port) 번호가 무엇인지 알아보자

서버는 컴퓨터라고도 했고 백화점에 비유했음

백화점에 여러 매장이 있고 백화점 안에 여러 매장이 있으니 옷도 사고 밥도 먹고 놀기도하고 커피도 마시고... 백화점 내 여러 가지 서비스를 이용할 수 있음

서버 컴퓨터에는 여러 서버 프로그램이 실행될 수 있고 서버 컴퓨터에서 동작 중인 서버 프로그램들이 저마다의 서비스를 제공함

서버 컴퓨터를 통해 대표적으로 많이 운영하는 서비스가 웹 서비스, DB 서비스가 있음

JSP/Servlet을 배우면 우리도 이 서비스들을 할 수 있게 됨

다시 비유로 돌아가서 백화점 내 각 매장의 자리가 있음

그 매장의 자리에 동시에 두 개의 매장을 운영할 순 없음

두 개의 매장을 운영하려면 쪼개야하는데 쪼갤 수 없다고 가정한다면 한 자리에는 한 매장만 운영할 수 있는 것

이와 같이 서버 컴퓨터에서 실행되는 서버 프로그램은 저 마다 포트 번호가 있고 포트 번호는 서로 달라야함

A 서버 프로그램이 80번 포트를 사용한다면 B 서버 프로그램은 80번 포트를 쓸 수 없음

이제 포트 번호가 무엇인지 알았으니 톰캣의 얘기로 돌아가자

톰캣은 기본적으로 8080번 포트를 쓰도록 설정되어있음

그래서 톰캣의 포트 번호를 직접 바꿔주지 않는한 톰캣을 실행시키면 8080번 포트를 사용하려하는데 내가 설치한 어떤 프로그램 중에서 나도 모르게 8080번 포트를 사용하는 프로그램이 있어서 톰캣이 실행되지 않을 수 있음

내 컴퓨터에서 실행 중인 서버 프로그램의 목록과 서버 프로그램이 사용중인 포트 번호를 확인해보자

우선 시작 버튼 클릭 -> cmd 입력 후 실행 -> cmd 창 내에 netstat -ano 입력 후 엔터(1)

netstat 라는 명령은 사용 중인 포트 번호를 확인할 수 있는 명령으로 -ano 는 옵션임

a : 모든 포트 표시

n : IP주소:포트 형태로 보여줌

o : PID 표시

나는 톰캣을 실행시키지 못했는데 netstat 명령의 결과 중 두 번째 항목에 8080 으로 끝나는게 있다면 내 컴퓨터에 어떤 서버 프로그램이 8080번 포트를 사용하고 있다는 것

서버 프로그램이 악성 프로그램일 수도 있지만 그렇지 않을 수도 있으니 넘어가도 무방함

이렇게 이미 8080번 포트를 쓰는 서버 프로그램이 있다면 톰캣의 포트 번호를 바꿔줘야함

톰캣의 포트 번호를 바꿀려면 server.xml 파일에서 톰캣이 사용할 포트 번호를 바꿔줘야함

server.xml 파일 안에는 톰캣과 관련된 여러 설정 값들이 들어가 있음

톰캣의 포트 번호를 바꾸러 가자

톰캣 폴더(1) -> conf 폴더(2) -> server.xml 우클릭(3) -> 연결 프로그램(4) -> 다른 앱 선택 클릭(5)

그 후 [ 추가 앱 ] 클릭(1) -> 메모장 클릭(2) -> [ 항상 이 앱을 사용하여 .xml 파일 열기 ] 클릭(3) -> [ 확인 ] 클릭(4)

이제 이와 같이 톰캣과 관련된 여러 설정 값이 들어있는 server.xml 파일이 열렸을 것

여기서 스크롤을 좀 내려서 8080이 있는 곳을 찾아 8080 대신 8090 또는 9000 이렇게 8080 이후의 값으로 바꾼 뒤 저장(Ctrl + s)

그리고 나서 다시 톰캣을 실행시켜보면 이제 정상적으로 실행될 것

여기까지 톰캣이 실행되지 않는데 포트 번호가 문제일 경우 이를 해결하는 방법을 알아봤음

그외에 포트 번호 문제가 아니라 환경변수를 잘못 추가해 발생하는 문제도 있음

환경 변수 설정하는건 다른 글에서 설명했으므로 아래 글에 들어가서 환경변수 부분을 확인해보자

[ JAVA_HOME 환경 변수 설정 ]

[ CATALINA_HOME 환경 변수 설정 ]

https://codingaja.tistory.com/6

여기까지 톰캣이 실행되지 않을 때 체크해야할 것들을 얘기했음

만약 여기 있는 방법으로도 실행되지 않으면 댓글 남겨주세요.

<< 학습 목표 >>

1. JRE와 JDK를 구분할 수 있다.

2. JDK 를 설치할 수 있다.

3. 서버를 설치할 수 있다.

4. 이클립스와 서버를 연결할 수 있다.

5. MariaDB를 설치할 수 있다.

배울 때는 톰캣(Tomcat) 서버를 많이 사용함

실무에서도 톰캣을 많이 사용하지만 NginX, JEUS 등 다른 서버들도 많이 사용함

톰캣 설치 자체는 굉장히 간단함

그래서 여기서는 톰캣을 설치하고 실행시켜볼 것

톰캣 설치하자

구글에서 톰캣 검색 후 아래와 같이 제일 위에 나오는 결과 클릭

만약 제일 위에 나오는 결과가 다르면 직접 이동

https://tomcat.apache.org/

톰캣의 버전이 굉장히 다양한데 어떤 버전을 선택해야되는지 가이드가 잘 나와있음

왼쪽 메뉴 중 [ Download ] 항목의 Which version? 을 눌러보면 내 상황에 맞는 톰캣 버전을 선택할 수 있도록 나와있음

배울 때는 버전이 크게 상관 없지만 실무에서는 톰캣 버전이 굉장히 중요하니 잘 기억만 해두자

우리는 서블릿 4, JSP 2.3, java 8 버전을 기준으로 설명하기 때문에 톰캣 9버전을 사용할 것

버전을 확인했으면 다시 [ Download ] 항목의 톰캣 9 클릭 그 후 스크롤을 밑으로 내려 [ Core ] 항목의 zip 클릭

다시 언급하지만 이 블로그는 윈도우를 기준으로 설명하고 있음

압축을 풀면? 설치 끝!

압축 푼 폴더로 들어가면 똑같은 이름의 폴더가 또 있을 것

그 폴더를 잘라내서 C드라이브로 옮기자

C드라이브로 옮기는 이유는? 그냥 ㅎㅎㅎ

다운로드 폴더에 다운로드 받은 파일들이 쌓이는데 잘못해서 지울 수 있으니까 자주 접하지 않는 C드라이브로 옮겨두는 것

톰캣을 설치했고 이제 환경변수를 설정해야함

자바와 마찬가지로 작업 표시줄의 시작버튼(1) -> [ 시스템 환경 변수 편집 ] 입력(2) 후 실행(3) -> [ 환경변수 ] 버튼 클릭(4)

[ 시스템 변수 ] 영역에 [ 새로 만들기 ] 버튼 클릭(1) -> 변수 이름을 [ CATALINA_HOME ] 으로 지정(2) -> 변수 값은 직접 입력하지 말고 [ 디렉터리 찾아보기 ] 클릭(3)

[ 내 PC ] 클릭(1) -> 로컬 디스크 (C:) 클릭(2) -> 톰캣 폴더 클릭(3) -> [ 확인 ] 버튼 클릭(4)

변수 값 제대로 들어간거 확인한 후 [ 새 시스템 변수 ] 창 내 [ 확인 ] 버튼 클릭(1) -> [ 환경 변수 ] 창 내 [ 확인 ] 버튼 클릭(2) -> [ 시스템 속성 ] 창 내 [ 확인 ] 버튼 클릭(3)

여기까지 환경변수 설정 끝~!

톰캣 설치와 환경 변수 설정까지 끝났으니 톰캣을 실행시켜서 정상적으로 동작하는지 확인해봐야하는데

잠깐 앞서 얘기했던 서버를 떠올려보자

서버는 컴퓨터라고 했음

이제 좀 더 정확하게 얘기하면서 비유해보자면 서버 컴퓨터는 백화점 같은 것

백화점만 있으면 안되고 백화점에 입점한 매장도 있어야함

서버 컴퓨터만 있으면 안되고 서버 컴퓨터에 서버 프로그램이 있어야함

서버 프로그램은 여러가지가 있음

이 글의 맨 처음 언급했던것처럼 NginX, JEUS 등 여러 서버 프로그램이 있음

이 중 우리는 톰캣 이라는 서버 프로그램을 사용하는 것

백화점에 매장이 입점하듯 서버 컴퓨터에 서버 프로그램을 설치한 것

백화점에 매장이 입점했다고 고객들이 그 매장에서 물건을 살 수 있는건 아님

그 매장에 팔 물건들이 입고되야함

서버 컴퓨터와 서버 프로그램이 있다고 사람들이 이용할 서비스가 만들어진게 아님

웹 개발자들이 웹 서비스를 만들고 그 웹 서비스를 톰캣에 넣어야함

백화점은 시간에 맞춰서 오픈을 하고 그 후 매장들도 시간에 맞춰서 오픈을 함

백화점은 오픈 했지만 매장이 오픈을 하지 않았으면 물건을 살 수 없음

서버 컴퓨터, 서버 프로그램, 개발을 완성한 웹 서비스가 있다고 해서 바로 서비스가 이뤄지는게 아니라 먼저 서버 컴퓨터를 켜야하고 웹 서비스를 가지고 있는 서버 프로그램을 실행시켜야함

그래야 사용자들이 웹 서비스를 이용할 수 있음

여기까지 우리가 톰캣을 왜 설치했는지, 서버 컴퓨터, 톰캣은 어떤 역할인지 설명을 했음

앞으로 서버라는 말을 사용할텐데 서버라는 말은 톰캣을 뜻함

서버를 설치했으니 서버를 실행시켜보자

C 드라이브로 옮겨둔 서버 폴더로 들어가서 bin 폴더(1) 안에 있는 startup(2) 을 실행시키자

startup 이라는 파일 이름만 봐도 느낌이 오는것처럼 우리가 실행시킨 파일은 서버를 실행시키는 프로그램

서버가 실행이 됬는데 알 수 없는 문자들이 쭉 ~ 찍힘

이 문자들이 찍힌 창을 cmd 창이라고 함

그리고 cmd 창에 알 수 없는 문자들이 쭉 ~ 찍힌 이유는 문자열 인코딩 때문에 생기는 문제임
cmd창의 문자열 인코딩을 UTF-8로 바꿔주면 해결됨

cmd창의 문자열 인코딩을 설정해보자

작업 표시줄 왼쪽에 시작 버튼 클릭(1) -> regedit 입력(2) -> [ 가장 정확 ] 의 [ 레지스트리 편집기 ] (3) 실행

그 후 [ HKEY_CURRENT_USER ] (1) 를 펼치고 [ Console ] (2) 을 우클릭 -> 새로만들기 -> 키 (3) 클릭

( 진행하다보면 다시 한번 여기서부터 시작해야되는 지점이 있음 밑에서 "다시 키 만들기 ~~" 말이 나오면 여기부터 다시 보자 )

새로만들기 한 키의 이름은 %SystemRoot%_System32_cmd.exe 로 지정(1)

그 후 방금 지정한 %SystemRoot%_System32_cmd.exe 키를 한번 클릭한 다음 오른쪽의 빈 공간을 우클릭(2) -> DWORD(3) 클릭

새로만든 DWORD의 이름은 CodePage 로 입력(1) 후 엔터 -> CodePage 우클릭 -> [ 수정 ] (2) 클릭

수정 창에서 우선 단위를 10진수(1)로 바꾸고 값 데이터를 65001 로 입력(2) 후 [ 확인 ] 클릭(3)

다시 키 만들기부터 시작해서

키 이름 : Tomcat

DWORD 이름 : CodePage

DWORD의 값 : 65001

로 키를 하나 더 추가하자

키 이름, DWORD 이름, DWORD의 값을 메모장 같은 곳에 복사해두고 위에서 다시 따라 오면서 해당 부분의 이름과 값만 여기 있는 이름과 값으로 바꾸면 됨

여기까지 cmd창의 문자열 인코딩을 UTF-8 로 바꿨음

이제 레지스트리 편집기를 닫고 다시 startup 을 더블 클릭해 서버 프로그램을 실행시켜보자

짜잔~ 이제 cmd창이 한글로 보여지고 톰캣 서버가 실행됬음

cmd창이 열렸다고 해서 무조건 톰캣이 실행된건 아님

톰캣이 제대로 실행됬는지 확인해야되는데 cmd창의 가장 마지막에 "서버가 [~~] 밀리초 내에 시작되었습니다." 메세지가 나와야함

만약 cmd창이 계속 열려있지 않고 열린 후 닫히면 톰캣이 제대로 실행되지 못한 것

톰캣이 제대로 실행되지 못했을 때는 변경해줘야할 게 있기 때문에 제대로 실행되지 않은 분들은 아래 글로 가서 보시길

여기까지 톰캣 설치, 실행을 해봤음

설치와 실행 자체는 굉장히 간단하지만 환경변수 설정과 cmd창 문자열 인코딩이 더해져서 복잡해보였던 것 뿐임

<< 학습 목표 >>

1. JRE와 JDK를 구분할 수 있다.

2. JDK 를 설치할 수 있다.

3. 서버를 설치할 수 있다.

4. 이클립스와 서버를 연결할 수 있다.

5. MariaDB를 설치할 수 있다.

원래의 학습 목표대로라면 서버를  설치해야하나 이클립스 설치하는 방법도 알려달라는 요청이 있어 추가됬습니다.

만약 앞에 글을 보지 않고 바로 여기로 오셨다면 앞 글을 참고해 JDK 설치 및 환경변수 설정까지 하고 오세요

이클립스(Eclipse) 는 개발툴(Development Tool)로 프로그램을 개발할 때 사용하는 도구임

프로그램을 개발할 때 이클립스와 같은 개발툴이 아닌 메모장 같은 텍스트 편집기로도 개발할 수 있음

메모장으로 개발을 하게 되면 우리가 직접 개발 -> 컴파일 -> 실행 의 단계를 거쳐야함

그러나 이클립스 같은 개발툴을 사용하게 되면 개발 -> 실행 의 단계를 거침

이클립스로 개발했을 때 컴파일(Compile) 과정이 없어진게 아니라 개발툴이 대신 해줌

이클립스는 자바, JSP, Servlet, Spring 등을 사용해 개발할 때 사용하는 대표적인 무료 개발툴임

만약 대학생이거나 금전적으로 여유가 된다면 인텔리제이(IntelliJ) 개발툴을 사용해보자

그러나 이 블로그는 이클립스를 기준으로 설명하기 때문에 인텔리제이를 사용하게 되면 이 블로그가 도움되진 않을 것

우선 이클립스 프로그램을 다운 받기 위해 구글에 이클립스 라고 검색하자

검색 후 Eclipse Donwloads 를 클릭

만약 검색 결과에 이게 없다면 직접 들어가자

https://www.eclipse.org/downloads/

중간에 [ Get Eclipse IED ~ ] 영역의 [ Download Packages ] 클릭

꼭 잘보고 [ Download Packages ] 를 클릭해야함

[ Download x86_64 ] 를 선택하면 안됨!

이동한 다운로드 페이지에서 [ Eclipse IDE for Enterprise Java and Web Developers ] 항목의 [ Windows x86_64 ] 클릭

[ Download ] 버튼을 클릭해 이클립스를 다운 받자

다운로드 받은 파일의 압축을 풀자

여기까지 이클립스 설치 끝!

보통 우리가 설치 라고 하면 앞서 JDK 설치했듯이 설치 프로그램이 실행되서 [ 다음 ] 버튼을 누르고 설치가 되는걸로 아는데 꼭 그것만이 설치가 아님

앞으로 개발을 하다 보면 이런식으로 압축만 풀어도 설치가 끝내는 것들이 대부분일 것임

이클립스를 실행까지만 시켜보자

우선! 이클립스를 자주 사용하게 될테니 편의를 위해 압축 푼 파일 안으로 들어가 eclipse 폴더를 잘라내 바깥으로 빼자

압축 푼 파일 안으로 들어가 eclipse 폴더 우클릭 -> 잘라내기(1) / 뒤로가기 클릭(2)

빈 영역에 우클릭 -> 붙여넣기(1) 또는 Ctrl + V

이제 eclipse 폴더 안으로 들어가 [ eclipse ] 프로그램 실행

이클립스를 처음 실행시키면 이와 같이 workspace 를 선택하는 화면이 나오는데 따로 설정을 바꿀 필요는 없고 파란색 음영 되어있는 workspace 경로를 잘 기억하자

웹 개발하면서 저 경로를 반드시 알아야 하는 순간이 자주 옴

까먹을것같다면 메모장같은걸 사용해서 저장해두자

그 후 하단에 [ Use this as the default and do not ask agin ] 클릭

이 workspace 를 기본으로 사용하겠다 이 선택하는 화면을 보여주지 말아라 체크죠?

체크했으면 [ Launch ] 클릭 해 이클립스 진짜! 실행

이클립스가 정상적으로 실행되었음

맨 처음에 보여지는 Welcom 은 이클립스 소개와 관련된 것으로 [ X ] 눌러서 닫아도됨

이 글은 이클립스 사용법과 관련된 글이 아니니 여기까지!

<< 학습 목표 >>

1. JRE와 JDK를 구분할 수 있다.

2. JDK 를 설치할 수 있다.

3. 서버를 설치할 수 있다.

4. 이클립스와 서버를 연결할 수 있다.

5. MariaDB를 설치할 수 있다.

전체적인 학습 목표는 위와 같지만 여기서는 굵게 처리한 1, 2 부분을 보자

카카오톡을 사용하려면 카카오톡을 설치해야하는 것처럼 우리가 이제 Java, Servlet, JSP를 사용해서 프로그램을 개발해야하므로 그에 맞는 프로그램들을 설치해야함

Servlet, JSP는 모두 자바를 기반으로 만들어졌기 때문에 자바를 설치해야함

자바는 JRE와 JDK 로 나눠지며 보통 "개발자가 자바를 설치한다" 라고 하면 JDK 를 설치함

자바를 설치하기 전 JRE와 JDK를 구분해보자

이제 본격적으로 개발 환경을 설정하자

참고로 Windows 를 사용하는 사람들을 위한 개발 환경임

만약 Mac 을 사용 중이라면 미안하지만 다른 블로그를 참고하는게 좋음

먼저 JDK 를 설치할텐데 공식 사이트에 가서 다운 받아 설치하면 됨

구글에서 자바 8 이라고 검색하고 Java Se 8 Archive Downloads 로 들어가자

만약 검색 결과에 (2)와 같은 결과가 없다면

https://www.oracle.com/kr/java/technologies/javase/javase8-archive-downloads.html

로 들어가면 됨

그 다음 Java SE Development Kit 내 Windows x64의 Download 클릭

그 후 번거롭지만 회원 가입 & 로그인을 해야 다운 받을 수 있음

다운로드 후 다운로드 받은 프로그램을 실행시키자

이 설치 프로그램은 2개를 설치함

위에 언급했던 JDK와 JRE

설치 프로그램을 실행시키면 제일 먼저 JDK 를 설치함

실행 후 [ Next ] 버튼을 몇 번 클릭하면 JDK 설치가 진행됨

JDK 설치가 완료되고 나서 JRE 설치가 진행됨

JRE 설치도 [ 다음 ] 또는 [ Next ] 버튼을 몇 번 클릭하면 끝

이제 환경변수를 설정하자

환경변수를 설정하는 이유는 이후에 설치할 톰캣(Tomcat) 이라는 서버가 자바를 인식할 수 있게 하기 위함임

환경변수는 [ 고급 시스템 설정 보기 ] 에서 설정할 수 있음

작업 표시줄의 시작 버튼(1) 을 클릭 하고 고급 시스템 설정 입력(2) 그 후 고급 시스템 설정 보기 클릭(3)

[ 환경변수 ] 클릭

[ 시스템 변수 ] 영역에 [ 새로 만들기 ] 클릭

변수 이름은 JAVA_HOME 으로 입력 / 정확하게 입력해야함

변수 값은 [ 디렉터리 찾아보기 ] 클릭 후 [ 내 PC ] 펼치기

그 후 C드라이브 -> Program Files -> Java -> jdk1.8 ~~ 클릭 후 [ 확인 ]

변수 값 부분은 컴퓨터 설정에 따라 다르니 여러분의 변수값과 위 이미지의 변수값은 다름

이와 같이 따라왔다면 여러분의 컴퓨터 설정에 맞게 제대로 된 값이 입력되있음

변수 값까지 입력 됬다면 [ 확인 ] 클릭

그 후 [ 시스템 변수 ] 영역에 Path 클릭(1) 하고 [ 편집 ] 버튼 클릭(2)

여기서 [ 새로 만들기 ] 클릭(1) 후 다음과 같이 %JAVA_HOME%\bin 입력

정확하게 입력해야함

아직 여기서 할 일이 좀 더 남아있음

방금 새로 추가한 값이 선택된 상태로 [ 위로 이동 ] 버튼 클릭을 해 제일 위로 올리자

그 후 [ 확인 ] 클릭

그 후 [ 환경 변수 편집 ] 창의 [ 확인 ] 클릭

이제 ! 마지막 ! 으로 [ 시스템 속성 ] 창에서 [ 확인 ] 버튼 클릭

여기까지 길고 길었던 [ 환경 변수 설정 ] 까지 끝났음

자바(정확히는 JDK) 가 제대로 설치됬고 환경변수 설정이 제대로 됬는지 확인해보자

윈도우의 작업표시줄 왼쪽에 시작버튼을 클릭한 상태에서 그대로 cmd 라고 입력 후 [ 가장 정확 ] 에 있는 명령 프롬프트 실행

명령프롬프트는 터미널창 ( Terminal Window ) 이라고도 부름

이 cmd 창을 실행하고 java -version 입력 후 엔터

( java 와 -version 사이에 띄어쓰기 꼭 해줘야함 )

그때 밑에 이미지와 같이 java version "1.8. ~~~ " 가 나왔다면 제대로 설치 된 것

( 구체적인 버전 번호는 살짝 다를 수 있음 )

만약 위와 같이 출력되지 않는다면 [ 환경 변수 설정 ] 이 제대로 되지 않은 것

우선 재부팅을 한번 해보고 그래도 되지 않으면 다시 이 글의 환경 변수 설정 부분을 읽어보자

그래도 안되면 댓글을 남겨주시면 도와드리겠습니다.

여기까지 길고 길었던 자바 설치가 끝났음

이제 다음인 서버 설치는 다음 글에서 계속~~

<< 학습 목표 >>

1. 정적 웹과 동적 웹의 차이를 이해하고 설명할 수 있다.

2. 클라이언트 사이드 언어와 서버 사이드 언어를 구분할 수 있다.

정적 웹(Static Web) : 개발자 등 제 3자에 의해 프로그램을 바꾸지 않으면 사용자는 계속 같은 내용을 보는 웹

동적 웹(Dynamic Web) : 개발자 등 제 3자에 의해 프로그램을 바꾸지 않아도 사용자는 상황에 맞는 적절한 내용을 볼 수 있는 웹

현재 시간을 보여주는 웹 페이지가 있을 때 정적 웹과 동적 웹의 차이를 알아보자

( 결과를 보고 싶다면 아래 코드를 여러분이 알고 있는 방식을 사용해서 넣고 실행시켜보세요 )

<< 정적 웹 >>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>현재 시간을 보여주는 웹 페이지</title>
	<style type="text/css">
		strong { color : red; }
	</style>
</head>
<body>
	<p>
		현재 시간은 <strong>14시 29분 28초</strong> 입니다.
	</p>
</body>
</html>

<< 동적 웹 >>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>현재 시간을 보여주는 웹 페이지</title>
	<style type="text/css">
		strong { color : red; }
	</style>
</head>
<body>
	<p>
		현재 시간은 <strong></strong> 입니다.
	</p>
	
	<script type="text/javascript">
		let timeInfo = new Date().toLocaleString().split(" ");
		let isPM = timeInfo[3] == "오후";
		timeInfo = timeInfo[4].split(":");
		
		if(isPM) {
			timeInfo[0] = 12 + parseInt(timeInfo[0]);
		}
		
		let strongTag = document.getElementsByTagName("strong")[0];
		strongTag.textContent = timeInfo[0] + "시 " + timeInfo[1] + "분 " + timeInfo[2] + "초";
	</script>
</body>
</html>

위 두 코드를 보면 정적 웹은 보여줄 시간을 직접 넣었음

이렇게 어떤 데이터를 직접 넣었을 때를 하드 코딩(Hard Coding) 했다고 표현함

정적 웹의 경우 초가 바뀔 때 마다 개발자가 초를 계속 수정해줘야함

그러나 동적 웹은 보여줄 시간을 직접 넣지 않고 자바스크립트(JavaScript)로 계산한 후 넣었음

동적 웹의 경우에는 초가 바뀌어도 개발자는 할 일이 없음

이렇게 정적 웹과 동적 웹의 차이는 고정된 컨텐츠를 보여주느냐 상황에 맞는 컨텐츠를 보여주느냐임

정적 웹과 동적 웹의 또다른 차이는 무엇일까?

소스 코드를 보고 또다른 차이를 찾아보자

정적 웹과 동적 웹의 또다른 차이는 자바스크립트의 유무임

( 컴퓨터로 이 글을 보고 계신다면 위 글을 드레그, 핸드폰으로 이 글을 보고 계신다면 위 글을 꾹 누르고 ~ 임까지 드레그하세요 )

동적 웹을 구현하기 위해서 반드시 JSP, Servlet, Spring 등을 알아야하는것은 아님

자바스크립트와 같은 프론트엔드 언어만 알아도 동적 웹을 구현할 수 있음

그러나 더 폭 넓고 다양한 동적 웹을 구현하기 위해서는 JSP, Servlet, Spring 등을 알아야함

그렇다면 정적 웹은 필요 없는 것일까?

그렇지 않음

동적 웹이라고 해도 정적인 부분을 가지고 있음

위 동적 웹 코드에서 정적인 부분이 있음

어디? "현재 시간은"과 "입니다"

이런 부분까지 자바스크립트로 대체 할 필요는 없음

또한 우리 나라의 역사라거나 그 회사의 연혁, FAQ 같은 것들은 컨텐츠가 자주 바뀌지 않음

따라서 이렇게 컨텐츠가 자주 바뀌지 않는 것들은 정적 웹(HTML, CSS)으로 구현하고

상황에 맞는 컨텐츠를 보여줘야할 때는 정적 웹에 동적 웹(JavaScript, JSP, Servlet, ...)을 더해서 구현함

HTML, CSS, 자바스크립트와 같은 언어를 프론트 사이드 또는 클라이언트 사이드 언어라고 부름

JSP, Servlet, Spring 과 같은 것을 서버 사이드 언어 라고 부름

여기의 내용은 반드시 알아야하는 내용은 아니니 괜히 구분해서 헤깔리거나 어렵게 느껴진다면 여기 전체 내용은 잊어버려도 됨