기존의 IP프로토콜을 통해 데이터를 전송하는 과정에서는 몇가지의 문제가 있었습니다. 패킷 전달에서의 순서 문제가 발생한다거나 연결성을 보장할 수 없고 패킷이 소실되어 버리는 등의 문제가 일어납니다. 이러한 문제들을 해결하는 프로토콜이 TCP 프로토콜입니다. 우선 네트워크 전송의 데이터 표준을 정리한 것이 ISO 7계층이 있고 이 이론을 실제 사용하는 인터넷 표준이 TCP/IP 4계층이 있습니다. 채팅프로그램을 통해서 Hello라는 메시지를 전송하는 상황을 가정해보겠습니다. 먼저 SOCKET라이브러리를 통해서 OS계층에서 Hello라는 메시지에다가 TCP 정보를 씌웁니다. 그다음 TCP정보에다가 IP정보를 또 씌워줍니다. 그러한 데이터를 LAN카드를 통해서 물리적인 정보들을 포함해서 인터넷을 통해서 또 다..
프론트엔드 개발을 할 때 아이콘을 많이 사용합니다. 프론트엔드 라이브러리내에서 아이콘들을 제공하긴 하지만 종류가 제한적이고 원하는 아이콘이 없을때가 많습니다. 회사에서 Font Awesome 라이브러리를 사용하는데 개인 프로젝트에서도 사용할려고 했었을때 사용방법을 남기면 좋을 것 같아서 포스팅을 해보려고 합니다. | 설치 방법 yarn이나 npm을 통해서 fontawesome라이브러리를 설치합니다. (fontawesome일것 같지만 fortawesome인점 주의해주세요) npm npm install --save @fortawesome/fontawesome-free yarn yarn add @fortawesome/fontawesome-free main.js에 추가 main.js에 아래 코드를 추가해줍니다...
Vue에서 Bootstrap Vue를 사용하다가 메뉴바를 적용하다가 계속 적용이 안되는 현상이 있어서 애초에 Bootstrap Vue가 적용이 안되어 있다는 것을 알게되었습니다. 검색을 해봐도 알 수 없어서 깃허브에 Bootstrap Vue 의 repository에 issue를 통해 얻은 이유와 해결방법에 대해서 공유해보고자 하겠습니다. https://bootstrap-vue.org/docs/components/navbar#navbar BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org 부트스트랩의 navbar예제를 구현하고자 했었습니다. 이게 왜 그런지 모르겠는데 계속해서 검색부터해서 오른쪽정렬이 전혀 ..
이번에는 Vue 개발할때 자주 사용하는 개발 도구인 Vue devtools에 대해 포스팅해보겠습니다. 크롬에서 확장 프로그램 플러그인으로 제공하는 Vue devtools는 Vue로 만든 웹의 구조를 파악하거나 데이터 파악하고 디버깅을 할 수 있게합니다. 설치 주소https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd Vue.js devtoolsChrome and Firefox DevTools extension for debugging Vue.js applications.chrome.google.com설치주소로가서 확장프로그램을 추가해줍니다.확장프로그램을 보시면 Vue.js devtools가 설치되어있..
인터넷 프로토콜(IP, Internet Protocol)은 송신 호스트와 수신 호스트가 패킷 교환 네트워크에서 정보를 주고받는 데 사용하는 정보의 규약(프로토콜[약속과 같은 것])이며, OSI 네트워크 계층에서 호스트의 주소지정과 패킷 분할 및 조립 기능을 담당합니다. 예시를 들어서 설명해보겠습니다.한국에 사는 홍길동이 미국에 사는 Merry에게 우편을 보낸다고 가정해보겠습니다.보통 편지에는 보내는 사람의 이름,주소과 받는사람의 이름,주소 정도의 출발지에대한 정보와 목적지에 대한 정보가 담겨있고 편지안에는 편지에 대한 내용물에 대한 내용물이 있을 수 있습니다.인터넷 프로토콜의 관점에서 보면 보내는사람의 주소는 출발지의 IP, 받는사람의 주소는 목적지의 IP, 그리고 편지안의 내용은 전송하고자하는 전송데이..
이전 포스팅에 이어서 이번에는 프로젝트에 프론트 환경을 구축해서 Spring에 연결하는 환경을 만들어 보겠습니다. 우선 프로젝트의 소스파일 폴더에 Vue프로젝트를 생성해보도록 하겠습니다. src에서 마우스 우측클릭을 하면 보이는 설정에서 Properties를 클릭합니다. 해당 버튼을 누르면 해당 소스가 있는 파일 편집기 폴더를 열어줍니다. 스프링폴더의 루트 레벨에서 frontend를 만들어 보겠습니다. 해당 파일의 주소를 클릭하고 cmd를 누르고 엔터를 하게 되면 해당 위치의 cmd창이 열립니다. 저번과 마찬가지로 Vue create frontend 명령어를 입력하여 frontend라는 이름의 Vue 프로젝트 폴더를 생성합니다. 정상적으로 폴더가 완성이 되었습니다. 아까 없었던 frontend라는 폴더가..
노드가 무엇인지에 대해 여러가지 의견이 많지만, 어떠한 설명도 노드 공식 사이트(https://nodejs.org/ko/)의 설명보다 정확하지는 않을 것입니다. 노드 공식 사이트에서는 노드를 다음과 같이 설명하고 있습니다. 노드는 자바스크립트 런타임입니다. 여기서 런타임이란 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻합니다. 따라서 노드는 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있습니다. 쉽게 말해 노드는 자바스크립트 실행기라고 생각하면 됩니다. 기존에는 자바스크립트 프로그램을 웹 브라우저 위에서만 실행할 수 있었습니다. 브라우저는 기본적으로 자바스크립트 런타임을 내장하고 있으므로 자바스크립트 코드를 실행할 수 있습니다. 브라우저 외의 환경에서 자바스크립트를 실행하기 위한 여러 시도가 ..
이번에는 프론트엔드 환경을 구축해서 Vue를 사용할 수 있는 환경을 만들어 보도록 하겠습니다. 우선 NPM을 사용하기 위한 환경을 구축하도록 합니다. NPM(Node Package Manager)는 자바스크립트를 위한 패키지 관리자입니다. 즉, 자바스크립트에서 사용하는 모듈들을 패키지화해서 관리하고 베포하는 자바스크립트 런타입 환경인 Node.js의 기본 패키지 관리자입니다. 과거에는 npm을 별도로 설치해야 했지만 지금은 node.js만 설치하면 자동으로 설치가 됩니다. node.js 사이트에서 node.js installer를 다운로드 합니다. node.js 다운로드 페이지 : https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built..
이제 본격적으로 게시판의 기능들을 구현해보려고 합니다. src/main/java 에 패키지를 작성합니다. - com.dream.controller : 웹에서 처리해야할 데이터를 받아서 해당 데이터를 담당할 service를 선택하여 호출합니다. - com.dream.service : 데이터를 DAO를 통해 넘겨주거나 받으면서 비즈니스 로직을 수행하는 역할을 합니다. - com.dream.mapper: mapper에 기제된 SQL문을 호출하여 DB의 데이터에 접근합니다. - com.dream.vo : DB에 있는 테이블 컬럼 값을 java에서 객체로 다루기 위해 사용합니다. vo 패키지에 BoardVO 클래스를 생성합니다. BoardVO클래스에 BOARD테이블에 맞게 VO객체를 생성합니다. package c..
리액트에 대해서는 개인적으로 생활코딩님의 강의를 정독한 이후로 실무에서는 VUE만 사용하다보니 손놓은지 오래되었는데 간만에 리액트를 구현할 일이 생겨 간단하게 구현했다가 애를 먹은 상황을 공유하고자 합니다. 원하는 상황은 이렇습니다. 경로 /에서 /about경로로 갈때에 지연시간을 걸어 오래동안 대기를 하는 상황을 의도적으로 만들어 대기시간을 발생시키도록 합니다. 여기서 필요한 것은 리액트에 내장되어 있는 함수인 lazy, Suspense를 사용합니다. 그럼 lazy와 Suspense가 무엇인가에 대해 알아보자 React.lazy React.lazy는 코드를 분할하게 해줍니다. 코드 분할은 앱을 "지연 로딩"하게 도와주고 앱 사용자들에게 획기적인 성능 향상을 하게 합니다. 앱의 코드 양을 줄이지 않고도 ..
HTTP 상태 에러 코드중에 405에러가 나왔습니다. 콘솔 에러에서 잡힌 로그 Resolved exception caused by handler execution: org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not supported친절하게도 POST를 지원하지 않는다라고 합니다.브라우저에서 호출할때 POST로 호출하고Controller에서는 당당히 @RequestMapping(value = "호출URL.do", method = RequestMethod.GET)'매핑하여 받는 주소에 대한 method를 GET으로 지정해서 POST 방식으로 지정해서 Request를 받아라'라고 GET은 허용불가하다..
CTRL + SHIFT + R : 파일 찾기(Open Resource) 원하는 파일을 찾기 위해서 Project Explorer나 Package Explorer의 트리를 사용해서 찾을 수도 있지만, 폴더와 파일이 많으면 빨리 찾기가 쉽지 않습니다. 파일 이름을 어느정도 알고 있다면 단축기 CTRL + SHIFT + R 키를 눌러 Open Resource 창을 열고 파일 이름의 전부 또는 일부를 타이핑하여 쉽게 원하는 파일을 찾을 수 있습니다. 문자에 * 을 넣으면 포함하는 임의의 모든 파일들을 조회 할 수 있습니다. CTRL + SHIFT + O : Organize Imports 파일내의 import 문장을 재구성 합니다. 필요없는 import는 제거하고 필요한 import는 자동으로 삽입합니다.