어제보다 한 걸음 더

[Spring] IntelliJ "Can't load AMD 64-bit .dll on a IA 32-bit platform" 에러 Error 내용 09-Apr-2019 15:28:14.684 寃쎄퀬 [main] org.apache.catalina.core.AprLifecycleListener.init The APR based Apache Tomcat Native library failed to load. The error reported was [C:\Users\USER\develop\apache-tomcat-8.5.39\bin\tcnative-1.dll: Can't load AMD 64-bit .dll on a IA 32-bit platform] java.lang.UnsatisfiedLinkError..

[개발환경] 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..

.gitignore 작성법 https://www.gitignore.io/ 접속 아래와 같이 자신의 프로젝트 종류를 적고 생성한다. 결과 (짜자잔.....!!) 그대로 복사해서 프로젝트 내 .ignore 파일 안에 넣어주면 된다.

[Vue] Vue.js 개발 환경 셋팅 vue.js 개발 환경을 위해서 몇 가지 필요하다고 생각하는 것을 설치하도록 하겠습니다. Chrome Node.js VS Code Vue.js devtools Chrome 브라우저 설치 뷰로 화면 개발을 하려면 첫 번째로 구성해야 할 환경이 바로 브라우저입니다. 구글에서 개발한 크롬 브라우저는 최신 웹 트렌드와 문법을 빠르게 반영하고 있는 브라우저이며, 웹 개발 시 편리한 기능을 제공하는 크롬 개발자 도구를 지원합니다. 크롬 브라우저는 공식 사이트 또는 검색 사이트에서 '크롬'이나 'Chrome'으로 검색하여 설치하시면 됩니다. Node.js 설치 1. node.js 홈페이지 접속 후, 현재 버전이 아닌 LTS 버전을 다운로드 합니다. . . (중간 설치 과정은 생..

[Vue] Vue.js란 무엇인가? Project 포스팅에 앞서, 일단 Vue.js와 Node.js에 대한 정리를 어느 정도 하기로 했다. Vue.js란? 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공 Vue의 장점 배우기가 쉽다. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. 리액트의 장점과 앵귤러의 장점을 갖고 있다. 뷰는 구글에서 일하던 직원이 앵귤러를 더 가볍게 쓰고 싶어서 만든 프레임워크 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징을 모두 가지고 있음 Vue.js의 특징 UI 화면단..