NW Studio

웹 브라우저와 스크립트 사용자가 브라우저에 특정한 주소를 입력하면, 브라우저는 HTTP메시지를 만들어서 해당 서버로 송신한다. 그리고 서버는 이 HTTP메시지를 받아서 마찬가지로 HTTP메시지를 응답으로 내려준다. 최종적으로 사용자의 브라우저는 이 응답 메시지를 받아서, 여기에서 HTML문서를 꺼내어 브라우저에 표시한다. 여기까지로 끝이라면, 브라우저는 사용자가 웹문서(표시된 사이트)에서 어떠한 상호작용을 할 때마다 HTTP메시지를 송신하고, 서버는 이를 받아서 다시 응답 메시지를 내려주는 작동을 반복해야 할 것이다. 하지만 이는 매우 번거로운 일이다. 물론 최초 요청시에는 서버가 반응 해야 한다. 하지만 이 때 응답해준 HTML문서에, '스크립트 뭉치'까지 포함되어 있다면 어떨까? 브라우저는 최초 요청..

Tech - Frontend/Vue.js 2022. 6. 7. 15:10

별도의 java 서버가 없는, 단순한 static 프론트앤드 배포 java서버(백앤드) 없이 단순히 프론트앤드만 배포하면 되는 경우라면 가장 단순하다. Vue프로젝트의 산출물은 비교적 단순하기 때문에 쉽게 배포할 수 있다. npm build dev를 하면 아래와 같은 산출물이 나오는데, 이를 프론트앤드용 서버에서 WAS를 설치해둔 경로에 올리기만 하면 된다. 예를 들어 WAS로 nginx를 사용한다면, nginx를 설치해둔 서버의 설정된 경로에 올리기만 하면 된다. java서버(백앤드)가 없다는 것은, 말 그대로 프론트앤드에서 해당 사이트에 필요한 모든 처리가 가능하다는 뜻이다. 예를 들어 DB에 무언가를 저장하고, 필요할 경우 조건에 따라 조회해오는 로직 따위가 불필요한 상황에서 프론트앤드만으로 프로젝..

Tech - 웹 개론 2021. 12. 13. 18:57

Vue.js 모듈 https://nwstudio.tistory.com/56 7. 뷰 템플릿 서블릿도 사용하기 편하게 개선했고, html에서 모델의 데이터를 바로 사용할 수 있게 되면서 html의 작성 편의성도 올라갔다. 이렇게까지 했는데도 더 할 일이 남아있을까? 프레임워크에 종속되는 nwstudio.tistory.com 여기에서 Nuxt프레임워크에 대해 간단하게 언급했었다. Nuxt를 사용하면 서버사이드에서도 Vue.js를 사용할 수 있기에, 서버사이드의 작업은 Thymeleaf로 하고 클라이언트 사이드 작업은 Vue.js로 하는 불편을 덜 수 있다고 했다. 그리고 nuxt프레임워크가 Vue.js를 서버사이드에서 실행하기 위해 필요한 Node.js에 대해 알아보았고, 모듈에 대해서도 알아보았다. 여러분..

Tech - 웹 개론 2021. 11. 2. 00:10

Node.js 앞서 말한바와 같이 서버에서 애초에 html을 내려주기 전에 javascript를 실행하고 내려보내 줄 수 있다면, 서버사이드에서도 Vue.js를 사용할 수 있다. 그렇다면 더이상 SSR을 위해 Thymeleaf를 사용하고, 동시에 CSR을 위해 Vue.js를 사용해야 하는 불편함이 사라진다. 그냥 Vue.js만 사용하면 SSR와 CSR이 동시에 가능하기 때문이다. 이렇게 하기 위해서는, 브라우저가 아닌 서버사이드에서 javascript를 실행해줄 수 있어야 한다. 그리고 그렇게 해줄 수 있는 "javascript 실행기"가 바로 Node.js이다. Node.js가 등장하기 전에, javascript는 오로지 웹 브라우저를 통해서만 사용되었고 다른 목적으로는 사용되지 않았다. 하지만 이제 ..

Tech - 웹 개론 2021. 11. 1. 21:53

서블릿도 사용하기 편하게 개선했고, html에서 모델의 데이터를 바로 사용할 수 있게 되면서 html의 작성 편의성도 올라갔다. 이렇게까지 했는데도 더 할 일이 남아있을까? 프레임워크에 종속되는 뷰 템플릿 문제 아쉽게도 그렇다. 지금 로직에서는 뷰 리졸버에서 html 변환 작업을 하고 있다. 즉, html에서 사용하는 예약어가 바뀌면 자바 로직이 영향을 받는다. 이런식으로 html에서 모델의 값을 사용할 수 있게 지원하는 것들을 뷰 템플릿이라고 하는데, 뷰 템플릿은 당연히 각각마다 예약어가 다르다. 그러면 시중에 있는 뷰 템플릿들은 모두 Spring과 협의해서 Spring의 Front Controller 안에 자신의 변환 로직을 삽입한 것일까? SSR 물론 이렇게 할 수도 있겠지만, 너무 불편하다. 당연..

Tech - 웹 개론 2021. 10. 22. 19:08

Spring MVC 이제 충분히 쓸만하도록 서버 개발 환경을 구성했다. 사실, 이미 누군가 이렇게 해 두었고, 그것을 Spring 프레임워크라고 부른다. 프레임워크는 게임 엔진과 비슷한 역할을 한다. 게임 엔진은 어렵고 복잡한 그래픽스 연산을 대신 해서 랜더링을 책임지고, 빌드환경을 제공하며, Update같은 프레임단위 콜백 메소드를 제공해서 개발자가 오로지 게임 컨텐츠에만 집중할 수 있게 한다. 웹 개발에도 이런 것이 있는데, 웹 개발의 '엔진'이라 할 수 있는 것이 바로 Spring 프레임워크다. Spring프레임워크를 사용해 보았다면 알고 있겠지만, 여기서는 웹 서비스를 제공하기 위해 기본적으로 앞서 우리가 만들었던 controller 메소드만 만들면 된다. 즉, 비즈니스 로직만 구현하면 된다는 뜻..

Tech - 웹 개론 2021. 10. 22. 15:00

아직은 만족할 수 없다. 서블릿과 JSP를 통해 컨트롤러와 뷰를 분리했었다. 하지만 이것으로도 완벽하지 않다. 서블릿의 코드 안에서는 계속해서 request로부터 dispatcher를 꺼내서 forward메소드를 호출해줘야 한다. 이는 매우 번거로운 작업이다. 또한 뷰 타겟이 될 jsp파일의 경로도 java코드에 박혀있기 때문에, 만약 jsp대신 Thymeleaf같은 다른 템플릿엔진을 사용하려고 한다면 모든 java코드를 다 뜯어고쳐야 한다. 여러분은 앞으로 많은 웹 서비스를 개발해야 할텐데, 이러한 상황에서 만족할 수 있겠는가? service(request, response){ param1 = request.getParam("param1"); //비즈니스 로직 작성 request.setAttribute..

Tech - 웹 개론 2021. 10. 21. 23:13

서블릿으로 구매완료 페이지 만들기 앞서 말한 서블릿을 이용해, 요청 메시지를 분석해서 적절하게 DB에 넣었다고 가정하자. 그러면 이제 구매요청을 받았으니, 사용자 스스로가 방금 어떤 물건을 구매했는지, 그리고 어느 주소로 보냈는지와 같은 정보를 확인할 수 있는 구매 완료 페이지를 보내줘야 한다. 이건 생각보다 복잡하다. 웹 문서를 내려보내줘야 하는데, 구매 요청은 서블릿을 통해서 받았다. 즉, WAS가 요청을 받아서 바로 특정한 정적인 웹 문서를 내려보내준 것이 아니라, 서블릿에 작성하는 로직을 통해 웹 문서를 동적으로 생성해서 내려보내 주어야 하는 것이다. 따라서 구매요청에 대한 응답으로 구매완료 페이지(웹 문서)를 내려보내 주려면, java코드로 html을 작성해서 내려보내 주어야 한다. 서블릿 메소..

Tech - 웹 개론 2021. 10. 21. 10:35