IT노트

간단하게 생각해 보자

웹서비스란 ? 

우리가 네이버 카페 서비스를 이용할때,

첫번째, 네이버 메인화면 요청

두번째, 로그인 요청

세번째, 카페 메뉴 요청

클라이언트는 요청을 하고 서버는 요청에 대한 응답을 한다.

이때 요청은 웹주소이다.  요청이 잘못된 경우, 즉 웹요청이 잘못된 경우 404에러 메시지가 웹브라우저에 나타난다..

단어정리 - 다음 단어는 매우 중요함.

1. 클라이언트 : 서비스를 요청하는 주체

2. 웹브라우저 : 웹서비스를 요청하고 결과를 보여주는 프로그램

3. 웹서비스의 절차 : 첫번째 : 클라이언트 요청, 두번째 : 서버의 처리, 세번째, 서버의 응답, 네번째 : 클라이언트 웹브라우저에서 랜더링한다. 

(심화, 위와 같은 절차가 끝나면 서버와 클라이언트의 연결은 물리적으로 종료된다.

이것이 좀 어려운데 이렇게 생각하자

음식점이 서버이고 손님이 클라이언트 같은 개념이다. 손님이 음식을 먹고 계산하고 나가면 음식점에는 사람이 없는 것이다.

이게 연결이 끊긴 것이다. 그런데 가게 주인은 손님을 기억하고 싶어서 별도로 손님의 전화번호를 저장했다고 하자.

이렇게 기억하는 것을 논리적으로 연결된것이라고 한다. 여기서 끊겼다는 것은 물리적인 접속이 끊긴것이다. 물리적인것은 현재 손을 잡고 있던가, 전화통화가 진행중임을 의미하고, 논리적으로 연결됨은 옆에는 없지만 기억하고 있다 이런 의미이다.)

4. http 프로토콜 : 클라이언트가 서버에서 웹서비스를 요구한다는 의미. 서버는 웹서비스로 이해함.. 이런 약속, 프로토콜이라 함

(심화, 기본 포트 번호 80번을 사용함

좀 어려운데... 깊게 파면 외우는 게 될 테니 일단 이해해 보자.

아파트가 있다. 아파트는 층이 있다. 각 층의 집은 집번호가 있다.   아파트 주소  + 각 층의 동호수가 최종 주소가 된다.

컴퓨터가 있다. 컴퓨터는 여러개의 통신 프로그램이 있다.   컴퓨터주소 + 통신프로그램 번호가 주소가 된다.

여기서 통신프로그램주소가 포트번호라고 생각하면 된다.

여기서 중요한 것 !!!

아파트 단지에서 동호수가 중복될 수 없다. 

하나의 컴퓨터에서도 여러개의 통신 프로그램있다. 인터넷, 카톡, 네이트온, 게임 등.. 이 프로그램의 통신용 포트도 중복되면 안된다. 꼭 기억하시길 포트번호가 충돌 나면 안된다.

)

정리해보자 

클라이언트요청  > 서버에서 요청접수 > 클라이언트 요청을 처리해 줄 전문프로그램 > 서버의 응답 > 응답받은 클라이언트에서 웹브라우저로 화면에 보여줌

이것을 프로그램으로 매칭한다면

클라이언트는 웹브라우저를 사용

요청을 접수하는 프로그램이 아파치톰캣

클라이언트 요청을 처리해 줄 전문 프로그램이 스프링

서버에서 응답해주는 화면을 만들어 주는 것은 스프링

만들어준 화면을 스프링 > 서버 > 클라이언트 순으로 전송

웹브라우저, 톰캣, 스프링이 어떤 역활을 하는지 정리를 꼭 하고 다음 장을 읽어보자~~~

스프링..

기록할 도구는

-------------------------------------------

IDE : spring

Build-tool : maven

server : apach tomcat 8.5

--------------------------------------------

spring boot가 아닌 spring를 선택한 이유는 

spring을 사용하는 입장과 spring을 설정도 직접해 볼 수 있는 기회를 통해 흐름을 이해하는데 도움이 될거라고 판단함.

실제, 교육을 spring으로 해 보니 다른 framework도 잘 적응함, 

자 그럼 시작해 봅시다.

- 주제 : 프로젝트 생성하기

- 기억해야 할 것 <기술 Stack>

  1. 프레임워크가 무엇인가?

  2. bulid-tools이 무엇인가?

  3. 라이브러리가 무엇인가?    프레임워크랑 차이가 무엇인가?

이것을 외우지 않고 공부하면 시간이 지나면서 포기할 마음이 점점 생길것이며 다양한 이론이 머리속에 엉킬 것입니다.

외우세요!! 

어떤 사람은 이렇게 이야기 합니다. 이해가 가야 외운다.

이런 말씀을 드리고 싶습니다. 처음 abcd를 배울때 그땐 이 알파벳이 어떻게 나중에 사용될지 모르고 배웁니다. 나중에 

되서야 아 그렇구나!!!   그때 열심히 공부할껄하고 후회 하곤 합니다. 마찬가지 입니다. 지금 배우는 공부가 개발자로 살아갈때 어찌 적용이 되는지 모릅니다. 그래서 이해할 만큼은 하되 이해가 안되면 암기하는 것입니다. 무조건적인 이해는 때로는 목적을 벗어나게 됩니다.

우리의 목적은 프로젝트 생성입니다.. 

프레임워크는 개발의 주도가 소프트웨어라는 것입니다. 요리사는 자기 주도 아래 요리를 하지만 밀키트는 요리사의 주도가 아닌 설명서의 주도아래 요리를 하죠. 요리의 예는 이해가 될겁이니다만 요리를 개발로 바꾸면 이해가 잘 안될 수 있어요. 이해하기 쉽지 않쵸. 개발을 한 경험이 있으면 좀 이해가 될 것입니다. 이럴때는 네 바로 암기입니다.

아..개발은 개발자가 주도하지 않고 어떤 틀에 만들어 놓은  것에  따라 개발한다.. 어떤 틀이 있다네..이렇게 외우는 겁니다.

그리고 좀 더 생각해 보면 프레임워크는하나의 뼈대라는 의미가 있죠. 아 어떤 뼈대를 만들어 놓았데. 밀키트도 미리 뼈대를 만든거 같네..   이렇게 외우는 겁니다. 더 이해하기위해서는 경험이 필요합니다.

빌드툴 - 프레임워크는 여러 기능이 있죠. 그 기능을 구현하기 위해서는 다양한 재료나 도구가 필요합니다. 그것을 관리하는 것을 빌드툴로 이해하시면 됩니다.

라이브러리는 기능을 구현할 때 필요한 것입니다. 

프레임워크는 틀을 만들어 놓고, 기능을 구현하기 위해 라이브러리를 포함시켜 놨고, 이것을 관리하는 툴이 빌드툴 정도로 

이해하시고 경험을 쌓으시면 됩니다.

빌트툴의 정의는 이것보다 훨씬많습니다.  >    컴파일, 토드해석, 코딩규약검사, 테스트, 패키징해서 압축파일만들기(배포) 등,  

자 그럼 경험을 하러 갑시다.

그 뼈대를 만들어 볼께요.. 프로젝트 생성을 한다는 뜻입니다.

그 전에 복습하나 하고 갈께요

폴더 기억 나시죠? 기억해야 합니다.. 

common 폴더에 있는 것은?

eclipse폴더에 있는 것은?

workspace 폴더가 의미하는 것은?

정답을 말씀하셨을거라 생각합니다. 자신의 답에의문이 생긴다면 폴더를 직접 클릭해 보세요. 

답은 스스로 완성하는 것입니다~~

자 다시 본론으로 돌아와서

뼈대를 만들어 볼께요.. 프로젝트를 생성한다는 의미죠

지금  만들 뼈대<프로젝트>는 eGovFrame web project 입니다. 웹기반 서비스를 개발하는 뼈대이죠.

웹이란것은 매우 중요한 이론인데 .

웹을 파고 들어 가면 목적에 벗어나기때문에.. 일단 외우는 겁니다.

웹브라우저로 http주소를 입력해서 서버의 서비스를 이용한다.  외우세요. 짧지만 개발자 냄새가 나는 문장입니다. 

웹시간 서비스를 개발할 목적이므로 eGovFrame web project 의 뼈대를 만들께요.

이정도 언급했으면 뼈대라는 단어가 프레임워크로 익숙해 지셨으니.

있어보이게 앞으로는 프레임워크로 사용할께요 

아래그림 처럼 File > New 해서 프로젝트를 생성하려고 합니다. 파란 색이 만들수 있는 프로젝트입니다.

많아요.

쫄지마세요. 하던것만 하면 됩니다. 핸드폰도 많은 기능 다 안쓰잖아요

살다보면 하나씩 만나게 됩니다. 다 만나지도 않습니다. 걱정마세요

지금 만들려고하는 프로젝트 기억나세요? 기억 안나면 위쪽에서 찾아 보세요. 

만들려는 프로젝트가 있으면 클릭하면 되지만 파란색 범위를 보니 없네요. 이럴때는 Other를 클릭해서 자세히

찾아 봅니다. 

아래와 같은 화면이 나오죠

이때 파란색으로 표시된 검색창에 eGovFrame Web Project로 검색해도 되고

창에서 직접 찾으셔도 됩니다..   빨간색으로 표시된 프로젝트를 찾으세요. 그리고 Next를 눌러요

산넘어 산이라고 뭐가 또 많이 나오네요

이럴땐 이해하는 단어만 이해하는 겁니다. 

프로젝트 이름이 있네요.. 네 이름 지정하는 것입니다.. 나의 이름은~~ 뭐 이런거죠

단순한 이름으로 해 보죠

본인거랑 틀린 그림을 찾아서 그곳에 입력하시면 됩니다. 

동그라미 친 곳의 Module version 2.3로 기억하시고 그냥 기억만 하세요.

Group ID, Artifact ID는 좀 보고 갈께요

Group ID는 회사의 도메인을 거꾸로 쓰는 경우가 많습니다.    도메인은 그냥 주소입니다.. http://www.abc.com 여기서 abc.com을 도메인이라고 하죠. 이것을 거꾸로 씁니다..

 Artifact ID 프로젝트의 이름으로 작성하죠.

두개의 정보를 보면 어떤회사의 어떤 프로젝트로 구별이 가능하죠? 이렇게 하고 Next를 누릅니다.

이제 샘플 코드를 선택할 수 있는데 

선택합니다.

선택하지 않을 경우는 뼈대는 있지만 아무것도 없는 즉, 사람이 살지 않는 집이고요

샘플 코드를 선택하면 가구등이 배치 되어 있는 올인원 셋팅 되어 있는 집입니다.

익숙하신 분은 체크 안해도 되지만

공부가 목적이면 체크해서 구조를 살펴 보는 것을 권장합니다.  

이제 Finish를 눌러요. 뭔가 창이 뜨면 No 누르세요

자 이제 프레임워크, 뼈대를 만들었어요.

다음 화면에 표시한 부분을 먼저 확인 합니다..

맨위는  package Explorer 인데 이것는 프로젝트를 탐색하는 메뉴입니다.

프로젝트를 탐색하는 것은 Project Explorer도 있는데 .. 전 package Explorer을 더 좋아합니다.

Window > Show View에서 찾으시면 되는데, 없다면 other를 클릭하셔서 검색으로 찾아 보시면 됩니다. 

KimtrCafe 프로젝트를 다음과 같이 클릭해 보세요

프레임워크는 뼈대를 만드는 겁니다.

이렇게 뼈대가 만들어져 있습니다.

이렇게 뼈대를 만들어져 놓고 개발자는 필요한 개발 소스를 폴더 위치에 맞게 작성합니다.

그러면 프레임워크는 자기가 알아서 운영해 줍니다.. 이런 의미가 개발의 주도가 소프트웨어라는 의미~~

아래 폴더의 의미를 이해하려면 우린 MVC패턴을 이해하면 쉽게 이해할 수 있어요

그러니 아직은 그냥 이런 폴더가 있구나 라고 기억하세요. 

자 이제 실행해 봅니다.

프로젝트 마우스 우클릭 > Run AS > Run on server 를 선택하여서 프로젝트를 실행합니다.

이때 뭔가 메뉴가 안나온다면

첫째 , tomcat서버 설치 확인.. 전 글에 있어요

실행하는 동안 아래 그림처럼 Console을 보세요

글씨 잘 올라 가죠.

이때 왼쪽 빨간색 라인에서 들여쓰기가 된 글자 나온다면 에러 입니다. 

콘솔화면은 에러난 것을 고치는 것(디버깅작업)에 아주 중요한 단서를 제공합니다. 

꼭 꼭 실행하고 콘솔창부터 보세요.. 글씨 다 안읽어도 됩니다.

들여쓰기 된 것이 나오면 그때 보셔도 됩니다

정상적으로 실행된다면 웹 브라우저에 다음과 같이 화면이 나옵니다.

이때 주소창을 보면 프로젝트 이름까지만 남기고 뒤는 지워 버려요..

주소를 분석하면 좋은데... 해 보죠

locahost는 서버의 주소

9980은 포트의 주소

KimtrCafe는 프레임워크에서는 프로젝트명이지만, 여기서는 컨텍스트패스라고 불리웁니다.

서버를 좀 이해하셔야 합니다.  그 흐름은 나중에 한 번 잡아 보죠.

그냥 서버가 이해하는 프로젝트라고 생각하시고, 정부전자프레임워크의 프로젝트랑 연결되어 있다. 

아까 샘플코를 선택해서 아래와 같이 샘플로 만든 게시판이 나옵니다. 

이렇게 하면 프로젝트  까지 생성하고 실행까지 성공한 것입니다 

팁, 웹브라우저를 크롬으로 바꾸고 싶다면 아래와 같이 하세요

웹브라우저는 클라이언트가 서버에게 서비스를 요청하고, 서버의 응답을 보여주는 프로그램입니다.

네이버 생각해 보시면 클라이언트가 네이버주소창에주소를 적는 것이 요청

그 뒤에는 화면이 바뀌고 그것은 네이버가 응답해 준 화면입니다.

네이버응답을 클라이언트가 볼 수 있게 다시 보여주죠 이런 역활을 하는게 웹브라우저입니다.

이렇게 시작하여서 깊게 공부하는 것입니다. 일단 이해하시고

클라이언트는 서비스를 이용하는 것. 서버는 서비스를 제공해 주는 것입니다.

주요단어

  서버 :

 서버는 특정 서비스를 제공해 주는 역활을 한다. 카카오톡 같은 경우는 사용자가 메세지를 서버로 전송하면 서버는 받을 대상에서 다시 문자를 전송해 준다. 이 외에도 다양한 서비스를 제공하고 있다. 파일전송 서비스, 응성대화 서비스등

 이번 장에서의 서버는 서버중에서도 웹서비스를 제공해 주는 서버를 설치한다. 

우리가 공부하는 것은 바로 웹개발 분야이기 때문이다. 

 웹개발은 클라이언트의 요청, 서버의 처리, 응답의 순으로 진행됩니다. 이때 클라이언트의 요청을 처리 해주는 것이 서버입니다.

 서버와  WAS도 구분하여 공부해 두세요~~

 포트번호 : 

  인터넷에서 컴퓨터 시스템의 주소는 IP주소이다. 인터넷 상에서 특정 서비스의 통신은 포트번호로 구분한다. 

  예를들어 네이버 홈페이지에 접속할 경우 주소창에 http://www.naver.com:80 이렇게 입력한다.

  여기서 www.naver.com은  은 도메인 주소라고 부르지만 실제로는 ip로 바뀌어 서버를 찾아가서

  서버에서 80번 포트의 서비스를 요청하게 되는 것이다..  http는 기본 80번 포트로 정해져 있어서 일반적으로 생략하고 사용하는 것이다. 

자 이제 .. 이론을 암기하시고.. 웹서버&WAS를 설치하자

사용한 프로그램은 apache-tomcat 8.5이다.  

 아래 화면 하단 가운데 servers를 클릭하자

아래 그림 참고 >  서버가 없다. 만들고 싶으면 클릭혀~ 이런 뜻이다. 클릭하자

클릭하면 아래 그림처럼 서버를 선택하라고 한다. Apache에서 8.5선택한다.  그리고 Next

이제 나오는 화면을 잘 보면   Name은 서버 이름이다. 그냥 두자

Tomcat installation directory : 톰캣 서버를 지정하라는 의미이다... 

서버다운로드 받기  ------------------------------------------------------------------------------------------------------------------

톰캣서버 프로그램이 필요하다... 구해보자..  아파치톰캣 사이트에 들어가서 다운로드 받는다.

아래 그림을 참고하면 됩니다.

https://tomcat.apache.org/

설치하는 방법과 사용하는 운영체제에 따라 다르다.

윈도우 환경 64비트라고 가정하고 다운로드 받는다. 이때 설치파일이 아닌 zip파일로 받는다.

다운로드 후  아파치 톰캣 서버를 관리하는 폴더를 생성합니다.

이때, 위치는 상관이 없습니다만

관리가 편하게 IDE가 있는 위치로 하겠습니다.

 common이라는 폴더를 생성하였고 아래 그림처럼 압축을 풀었습니다.

이제 서버를 다운로드 받아서 설치까지 완료 하였습니다. 서버 폴더의 위치를 기억하세요..

서버 다운로드 받고 압축풀기 끝 ---------------------------------------------------------------------------------------

다시 IDE로 돌아가서 서버를 설치하겠습니다. 

아래 그림처럼 서버를 찾아서 폴더선택을 하겠습니다.

아래 화면처럼 나오면 정상입니다. 이제 Finish를 클릭해서 설치를 마무리 합니다.

이제는 아래 그림과 같은 화면에 나올 것입니다.

아래 화면의 그림은 1으로 표시된 부분을 더블클릭했습니다. 더블클릭하시죠~

1번부분은 현재 설치된 서버입니다.

2번부분은 현재 설치된 서버이며, 서버에 필요한 각종 환경설정 파일이 있습니다.

  여기서 문제 : 현재 설치된 서버의 이름은?  버전은?

3번은 위에서 말한 포트 번호입니다.. 

  포트 넘버는 충돌이 되면 안되겠죠? 서비스에 대한 번호니까요. 충돌이란 같은 번호가 2개 이상이 된다는 의미입니다.

  서로 다른 서비스를 2개의 번호로 정의한다면 번호로 서비스를 요구 하는 사람은 헷갈리겄죠  암튼 그렇습니다.

  여러개의 IDE를 설치하고 삭제하다보면 충돌 날 경우가 있어요.. 이럴때는 저 포트번호만 바꿔 주면 되는데

  9000번 이상 번호는 잘 안쓰기 때문에 적당히 바꿔 주시면 되고 충돌나면 다시 다른 것으로 바꾸면 됩니다. 

나머지 v로 표시한 부분은 그냥 체크해 주세요.. 

그리고 이제 서버를 설치하였으니 실행해 봅시다.

아래 그림의 버튼으로 서버를 시작합니다.

 이때, 에러가 날 수 있습니다. 에러 하나를 보여 드립니다.

Details를 클릭하면 ...위에서 말한 포트가 이미 사용중이라서 사용하면 안된다는 에러 입니다. 

이럴때는 어떻게 하는것이죠? 힌트는 위에 있습니다. .. 정답> 포트 번호를 바꾸면 됩니다. 

아래 그림 처럼 포트번호를 바꾸고 시작합니다.

파일을 저장하라는 메시지가 뜨면 save를 눌러주고 콘솔창에 다음과 같은 로그가 나옵니다.

1번은 서버가 동작중이라는 의미입니다.

2번의 글자가 막 나오는데.. 읽어보면 이해가 안될 수도 있는데 그냥 구경만합니다.

에러가 있는지 없는지 확인만 합니다.  

위 그림은 에러가 없네요..

그리고 마지막마에 반가운 메시지  Server startup in 442 ms 가 나오면 성공입니다.

이제 셋팅이 완료 되었어요

다음에는 프로젝트를 생성해 보겠습니다..

셋팅도 좋치만 필요한 이론은 꼭 기억하세요..

공감과 응원 댓글은 블로그를 작성할 힘이 됩니다~~~~ 꾸벅

기술 Stack

 - IDE이해   :  프로그램을 개발하기 위한 통합개발환경 도구, 이번 장에서는 IDE 중 egovframework 설치하기 

 - workspace이해 : 개발 프로젝트 소스 파일을 저장하기 위한 폴더(디렉토리)

순서

1. 정부전자프레임워크 사이트에서 다운로드 받기

2. 압축풀기

3. 디렉토리 이해하기

4. 프레임워크 실행하기

실습

1. 정부전자프레임워크 사이트에서 다운로드 받기

    www.egovframe.go.kr

다운로드 > 개발환경 클릭  :  3.X다운로드 선택  : 본인 컴퓨터 운영체제에 맞게 선택  : 릴리즈 일자 확인

다운로드 후 압축파일 확인 합니다.

압축파일을 풀기 합니다. 풀기가 완료 되면 다음과 같은 폴더가 생깁니다.

위 폴더를 실행하면 세부 폴더가 나옵니다. 이 폴더를 주목해 주세요

eclipse 폴더가 IDE 폴더,  workspace가 IDE에서 생성한 프로젝트 파일을 저장할 위치입니다.

(단, 익숙하신 분은 다른 위치에 workspace를 지정하여도 됩니다.)

이제 eclipse폴더를 실행하면 다음과 같은 화면이 나옵니다.

eclipse.exe 파일이 IDE실행 파일입니다. 과감하게 실행하세요

위 그림을 살펴볼께요. 이런 화면이 나오면 꼭 읽어 보세요. 영어문장을 번역하면 좋치만. 아는 단어로 대충 때려 맞춰도 됩니다 ㅎ   

select ~~ workspace  : workspace는 소스파일 저장 폴더입니다.  소스파일을 어디에 저장할 것인지 선택하라는 의미 같네요

위에서 지정했던 폴더를 지정해 줍니다. 

use thie as ~~~ do not ask again  : 다시 묻지 않습니다. 이런 뜻이네요.. 한 번 설정했으니 다시 묻지 않는 걸로~

Launch를 클릭하면 아래와 같은 화면이 나옵니다. welcome을 찾아 보세요.. 

welcome인사 받으시고 옆에 X  버튼 눌러 주세요

그럼 아래와 같은 화면이 나옵니다.. 

지금까지 IDE설치와 workspace설정에 대한 실습입니다 ~~

이젠 server를 설치해서 웹개발의 환경을 마무리 해야 합니다.

다음편에서는 server - tomcat 8.5를 설치해 보겠습니다.

공감과 응원 댓글은 저에게 블로그를 작성할 에너지를 줍니다~