[개발환경] Apache Tomcat 설치 Tomcat Download ① Tomcat 다운로드 링크를 따라 들어가면, 아래와 같이 고양이와 함께 페이지가 로딩될 것이다. 옆에 Download 탭에서 버전을 선택할 수 있고, 클릭하면 Download 링크가 나열된다. 항상 최신형이 좋을 것 같지만 안정적이지 못하다. 그렇기 때문에 우리는 한 단계 아랫 버전인 8 버전을 자신의 OS 환경에 맞게 다운받도록 하자.(2019년 4월 기준) ② 나 같은 경우는 windows10 64bit 환경을 사용하고 있고, 아래와 같이 develop이라는 폴더에서 개발 환경 관련 파일들을 모두 모아두는 편이기 때문에 이 곳에 톰캣 폴더를 구성하였다. 허무하겠지만, 여기까지 설치는 끝났다... 이제 이것을 각 IDE에서 사용..

[Spring] IntelliJ에서 Spring + Maven 프로젝트 생성하기 이번 포스팅의 목표는 IntelliJ를 이용하여 Spring + Maven 프로젝트를 생성하고, 실행 가능한 상태까지 만드는 것이 목표이다. 프로젝트 구조 구성이나 여러 추가적인 작업은 이 포스팅에서 다루지 않겠다. 개발환경 셋팅 IntelliJ 설치 페이지 JDK 설치 및 환경변수 셋팅방법 Tomcat 설치방법 프로젝트 생성 ① IntelliJ를 실행하면 뜨는 초기화면이다. 여기서 'Create New Project'를 클릭한다. ② 보통 JDK(여기선 Java8, JDK1.8을 사용)를 설치했다면, 아래와 같이 Project SDK가 자동으로 잡혀 있다. 설치를 하지 않았다면 JDK를 먼저 설치해주자. (하..

1. @Media 규칙 Media 규칙이란? @Media 규칙은 다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙 Media 속성 Media 속성을 사용하면 음성 장치부터 점자는 물론 프린터와 텔레비전에 맞게 스타일 시트를 사용할 수 있다. 2. 반응형 웹 미디어 쿼리는 밑의 표와 같이 장치를 구분하는 것은 물론 장치의 크기나 비율을 구분할 수 있다. 속성 설명 width 화면의 너비 height 화면의 높이 device-width 장치의 너비 device-height 장치의 높이 orientation 장치의 방향 device-aspect-ratio 화면의 비율 color 장치의 색상 비트 color-index 장치에서 표현 가능한 최대 색상 개수 monochrome 흑백 장치의 픽셀..

1. Vue Router란? Vue에서 SPA(Single Page Application)을 구현 시, 사용자 요청 경로에 따라 해당하는 컴포넌트에 매핑하여 렌더링을 결정해주는 플러그인이 Vue Router이다. 원래 사용자의 URI Request가 들어오면 서버 즉 백엔드에서 Controller가 그 Request에 해당하는 Response로써 정적 파일(html, css, javascript ...)을 보내준다. Vue Router는 프론트엔드에서 요청 URI에 따라 전체 새로운 돔을 변경하는 것이 아니라, 브라우져에서 변화가 있는 부분의 돔을 변경하는 방식이다. 2. 설치 CDN html head 태그 안에 vue CDN 밑에 아래와 같이 추가해 줍니다. (vue를 CDN으로 이용하시는 경우 기준입..

float 속성을 사용한 레이아웃 구성 Header Navigation Aside Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo animi perspiciatis voluptas porro! Temporibus repudiandae autem quas eaque earum perspiciatis perferendis ipsum, sed maiores, numquam aliquam doloribus placeat voluptas commodi? Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi nemo eaque exercitationem praesentium dol..

Vue.js 프로젝트 구조 프로젝트 구조 셋팅에 앞서.. 1. vue 설치 이전 포스팅에서 vue 개발환경 셋팅 중 가장 중요한 vue 설치를 빼먹었었네요 ^^; 그래서 우선, vue 설치부터 하고 가겠습니다~~! vue를 쉽게 설치하는 방법은 크게 두 가지가 있습니다. //CDN ... 1.2 NPM 다음으로는 우리와 같이 프로젝트 시작하기 전에 vue를 적용하여 폴더셋팅을 하기 위한 사람들을 위한 방법입니다. 또한 대규모 서비스를 만들 때 NPM을 이용하시는 것을 추천드립니다. NPM을 아시는 분들이라면 아마도 쉽게 하실 수 있을 겁니다. CMD 창을 열어주시고, 아래와 같이 명령어 한 줄이면 OK! # 최신 안정화 버전 $ npm install vue① "Window Key + R" ② npm in..