흔히 서버의 원격 저장소의 PaaS로 가장 많이 사용하는건 AWS의 S3입니다. 여기서 PaaS란 (Platform as a Service) 클라우딩 컴퓨팅 서비스 중 하나입니다. SaaS(Service as a Service)의 개념을 개발 플랫폼에도 확장한 방식으로, 개발을 위한 플랫폼을 구축할 필요 없이, 필요한 개발 요소를 웹에서 쉽게 빌려쓸 수 있게 하는 모델입니다. 네이버 지도 api나 카카오맵 api와 같은것들도 같은 것들도 PaaS의 일종입니다. 깃허브에서 레포지토리를 이용하여 이런 Paas형태로 저장소를 api호출로 파일을 불러 올 수 있습니다. 자 백문이 불여일견이라고 보자보자 어디보자 일단 깃허브에서 repository를 생성해준다. 해당 repository에 깃허브로 업로드하거나 삭..
이번 포스팅에서는 글 등록을 구현해 보도록 하겠습니다. 우선 Vue 부분에 컴포넌트를 조금 정리하고 가도록 하겠습니다. 제일 처음 생성되는 App.vue에서 상단에는 Vue 이미지 파일과 HelloWordl 컴포넌트를 통해서 첫화면을 보여주고 있습니다. 해당 부분을 조금 바꿔 볼까 합니다. HelloWorld컴포넌트를 BoardList.vue로 변경해주고 상단에 이미지 부분은 글 등록하는 컴포넌트를 넣어보도록 하겠습니다. 우선 HelloWorld.vue 파일을 BoardList.vue로 이름을 변경합니다. 기존에 HelloWorld.vue => BoardList.vue 로 변경했으면 name에도 마찬가지로 BoardList로 변경을 해주도록 하겠습니다. 이번에는 App.vue로 가서 import 부분을 ..
이번에는 저번에 화면에 보여진 데이터(JSON)들을 테이블 형태로 표현하도록 하겠습니다. 프론트 라이브러리로는 Element-ui를 사용하도록 할겁니다. https://element.eleme.io/#/en-US Element - The world's most popular Vue UI framework element.eleme.io 뭐 element-ui말고도 bootstrap-vue등 여러 라이브러리들이 많지만 제가 실무에서 사용하는 라이브러리이기도 하고 쉽게 사용할 수 있는 라이브러리라고 생각되어서 해당 라이브러리를 사용하겠습니다. 우선 frontend폴더에서 yarn add element-ui를 통해서 패키지파일을 설치하도록 하겠습니다. 정상적으로 설치되었는지 package.json을 확인해보겠습..
안녕하세요. 너무 오랜만에 포스팅을 이어 나가서 죄송합니다... 그동안 회사 프로젝트와 개인 토이프로젝트랑 개발 공부까지 하다가 보니 시간이 정신없이 흘러 글을 쓸 생각조차 못했습니다... 천명만 넘어도 좋겠다라는 블로그의 방문자수는 어느덧 4000이 넘는 수의 방문자를 기록하였습니다 블로그명도 몽상개발자에서 개발은 재밌어야 한다로 바꾸었습니다...! 토이프로젝트나 잡담에 대한 내용들은 앞으로 NullPointerException 카테고리(Null 채우겠다라고 바뀔수도 있습니다...)에 게시물을 통해서 작성하도록 하고 이만 본론에 들어가겠습니다. 저번 포스팅에서 만든 프로젝트를 이어 가보도록 하겠습니다. 우선 포스팅한지 너무 오랜기간이 지나서 github에 올라가있는 마지막 프로젝트를 기준으로 다운을 받..
이번에도 토이프로젝트 진행과정중에서 발생했던 겪었던 문제 중 하나에 대해서 다뤄보려고 합니다. 화면을 마우스로 당겨서 넘기게 해주는 라이브러리입니다. 블라인드에서 해당 부분처럼 당겨서 밀어내는 방식을 사용하길래 찾던 중 알게된 것이 swiper입니다. https://swiperjs.com/ 처음에 공식문서에 나와있는 그대로 코드를 프로젝트에 적용해봤지만 적용이 안되는 현상이 있길래 또 당황... 결과적으로는 또 vue의 버전과 맞지않는 문제가 발생해서 vue2에서는 현재(2021.08.19 기준) swiper의 버전이 swiper6버전이 맞지 않아서 swiper 5버전대를 받아서 사용하였습니다. https://swiperjs.com/vue Swiper Vue.js Components Swiper is t..
안녕하세요 뭔가 오랜만에 글을 작성하는 것 같은데 최근에 토이프로젝트를 진행하고 코딩테스트에 대한 공부를 하느라 블로그에는 신경을 쓰지 못하고 있었는데요. 최근에 방문자수가 늘고 있는게 보이더라구요... 근데 항상 느끼던게 티스토리의 방문 통계 차트 그래프는 항상 느리더라구요... 그래서 차트 데이터도 한번 볼 겸 오늘은 소소하게 차트데이터를 통해서 최근 방문자수의 총 합을 한번 알아보도록 하겠습니다! 티스토리의 관리 페이지를 처음 띄웠을때의 화면입니다 이 차트의 데이터는 구성을 한번 보도록 하겠습니다. 일단 /manage로 진입했을때에 호출하는것들은 count.json, trend.json, toEntry.json등 이렇게 있습니다. 한번 찬찬히 response데이터를 먼저 보겠습니다 lastUpdat..
기존의 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 devtools Chrome 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라는 폴더가..