이 글에서는 실무에서 사용할 수 있는 React + SpingBoot 프로젝트 구조를 만드는 과정을 알아보겠습니다. 이전에 Vue + SpringBoot 프로젝트를 만드는 방법을 알아보았는데요. 이 방법은 전문가처럼 React나 Vue 같은 Javascript 프레임워크를 사용할 수 있는 구조가 아니기 때문에 토이 프로젝트 혹은 간단한 팀 프로젝트에서 이용할 수 있는 구조이지 실무에서는 사용하기 부적합한 구조입니다. 이번 글에서는 프론트엔드 전문가처럼은 아니지만 그에 준하는 수준으로 React를 사용할 수 있는 SpringBoot 프로젝트를 만들어보겠습니다. 스프링 부트 프로젝트 만들기 먼저 프로젝트의 중심이 되는 스프링 부트 프로젝트를 만들어보겠습니다. Gradle이나 Maven과 같은 빌드 도구를 이..
이번 글에서는 프론트엔드를 Vue.js를 Spring boot를 백엔드를 사용하는 간단한 프로젝트를 만들어보겠습니다. Spring boot만으로도 웹 개발의 생산성을 높일 수 있지만 프론트엔드에서 사용되는 자바스크립트 프레임워크인 Vue.js를 사용한다면 더 빠르고 쉽게 웹 개발을 할 수 있습니다. 물론 Vue.js 외에도 React.js나 Angular.js를 이용해도 좋습니다. 스프링 부트 프로젝트 만들기 먼저 백엔드에 해당하는 스프링 부트 프로젝트를 만들어보겠습니다. 빌드 도구를 이용할 수도 있지만 조금 더 손쉽게 만들어보기 위해 스프링 부트 프로젝트를 Spring Boot initializr를 이용해보겠습니다. 아직은 프로젝트를 구성하시는 게 어려우시다면 위에 설정한 내용을 참고해서 스프링 부트 ..
왜 CSS(Cascading Style Sheets)의 버전은 Level 3가 끝일까요? 인터넷 검색을 해도 책을 통해 공부를 하려 해도 CSS3라는 단어는 잘 보이는데 CSS4라는 단어는 찾기가 어렵습니다. 이전에 간단하게 CSS의 정의에 대해 이야기를 한 적이 있는데요. 이번에는 CSS 버전에 대한 이야기를 해보려고 합니다. 앞으로도 CSS4는 존재하지 않는다. 사실 CSS3도 엄밀히 따지면 CSS 2.1에서 확장된 개념으로 CSS 2.1 이후에 공개(published) 된 것들을 이야기합니다. 정확히는 표준 사양을 정의하는 집단(CSSWG)에서 CSS 2.1을 수립하는 과정 중 단일로 정의하는 버전 체계는 좋지 않다는 것을 인지했습니다. CSS 2.1에 버전 3에 해당하는 모듈들을 일부 포함하게 되..
그래들(Gradle) 빌드 시스템을 사용하면 외부 라이브러리 혹은 내부에서 사용하는 프로젝트나 라이브러리 모듈의 의존성을 쉽게 관리할 수 있습니다. 보다 자세한 Gradle의 의존성 관리 개념은 공식 사이트 가이드를 통해 익히시는 게 좋습니다. 이번 글에서는 Gradle을 사용하게 되면 필수적으로 알아야 하는 build.gradle 파일의 dependencies 설정에 대해 알아보겠습니다. 의존 유형을 알아야 한다. [ Dependency types ] build.gradle에서 사용되는 정의 중 가장 먼저 알아야 할 부분은 의존 유형(Dependency types)입니다. Gradle을 이용해 프로젝트에 의존성을 추가하려면 build.gradle 파일의 dependencies 블록에 implementa..
너에게 묻는다 연탄재 함부로 발로 차지 마라 너는 누구에게 한번이라도 뜨거운 사람이었느냐 반쯤 깨진 연탄 언젠가는 나도 활활 타오르고 싶을 것이다 나를 끝 닿는 데까지 한번 밀어붙여 보고 싶은 것이다 타고 왔던 트럭에 실려 다시 돌아가면 연탄, 처음으로 붙여진 나의 이름도 으깨어져 나의 존재도 까마득히 뭉개질 터이니 죽어도 여기서 찬란한 끝장을 한번 보고 싶은 것이다 나를 기다리고 있는 뜨거운 밑불위에 지금은 인정머리없는 차가운, 갈라진 내 몸을 얹고 아래쪽부터 불이 건너와 옮겨 붙기를 시간의 바통을 내가 넘겨 받는 순간이 오기를 그리하여 서서히 온몸이 벌겋게 달아 오르기를 나도 느껴보고 싶은 것이다 나도 보고 싶은 것이다 모두들 잠든 깊은 밤에 눈에 빨갛게 불을 켜고 구들장 속이 얼마나 침침하니 손을 ..
MongoDB는 NoSQL 데이터베이스로 JSON 형태의 데이터를 저장하는 도큐먼트 지향 데이터베이스입니다. MongoDB도 Mariadb처럼 도커(Docker)를 사용하면 손쉽게 설치해서 사용할 수가 있는데요. 이번 글에서는 도커(Docker)를 이용해서 MongoDB를 설치하는 방법에 대해서 알아보도록 하겠습니다. 도커가 처음이어도 이 글에서 정의된 명령문을 사용하면 쉽게 MongoDB를 설치해서 사용할 수 있습니다. tip. 도커(Docker)를 설치하지 않았다면 먼저 도커를 다운받자 도커를 설치하지 않으셨다면, 공식 사이트를 방문해 도커를 다운 받아 설치해주세요. 도커 설치 방법은 일반적인 응용 프로그램과 동일합니다. 운영체제 맞는 설치 프로그램을 다운 받아 실행을 시키시면 됩니다. Docker ..
도커(Docker)를 이용하면 손쉽고 빠르게 Mariadb를 설치해서 사용할 수 있습니다. Mariadb 뿐만 아니라 가상화되어 있는 수많은 이미지들을 컨테이너로 만들어 사용할 수 있습니다. 처음 도커를 사용하신다고요? 그래도 이 글에서 소개할 명령문만 있으면 헤매지 않고 Mariadb를 설치해서 쓸 수 있습니다. tip. 도커(Docker)를 설치하지 않았다면 먼저 도커를 다운받자 도커는 엑셀과 같이 운영체제 위에서 돌아가는 하나의 프로그램입니다. 그렇기 때문에 도커를 설치하지 않으셨다면, 공식 사이트를 방문해 도커를 다운하여 설치해주세요. 설치방법은 일반적인 응용프로그램처럼 다운로드 받아 실행을 시키시면 됩니다. Docker hub에서 Mariadb 이미지를 다운로드 받자 공식 홈페이지에서 도커를 다..
HTTP 쿠키는 웹 브라우저에 저장되는 작은 크기의 문자열로, HTTP 통신을 할 때 값을 주고받을 수 있도록 만들어진 보조적인 수단입니다. 기본적으로 HTTP 프로토콜은 상태가 없으며(stateless), 제한적이지만 쿠키를 이용해 값들을 주고받을 수 있게 정의된 개념입니다. 정확한 명세는 RFC 6265에 정의되어 있습니다. HTTP 쿠키의 정의를 알아보자. 쿠키(Cookie)는 브라우저와 서버 간에 지속적으로 유지할 수 있는 데이터를 제공함으로써, 상태를 가질 수 있도록 하는 HTTP 상태 관리 개념입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 전달받은 내용(데이터)을 저장하는데 이를 쿠키라고 이..
Failed to configure a DataSource 에러와 원인과 해결 방법 메시지 Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. *************************** APPLICATION FAILED TO START *************************** Description: Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. Reason: Failed to de..
바닐라 자바스크립트 (Vanilla Javascript)는 과연 무엇일까? 그리고 왜 필요한 걸까? 이 질문에 대해서 대답하기 위해서는 최근의 자바스크립트가 아니라 이전의 웹 생태계와 그 안에 있던 자바스크립트를 이해할 필요가 있다. 완전히 같다고는 이야기할 수 없지만 Java에 빗대어 보면 POJO (Plain Old Java Object)와 비슷한 맥락을 가지고 있다고 생각한다. 먼저 바닐라 스크립트가 어떤 것인지 알아보자 - Vanilla Javscript Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. 바닐라 JS는 빠르고 가벼운 크로..
이번에는 HTML5를 기준으로 간단하게 회원가입 양식 템플릿을 만들어보겠습니다. 이전에 부트스트랩을 사용해서 회원가입 화면을 만든 적이 있는데요. 부트스트랩을 사용하지 않고 순수하게 HTML5만 사용해서 화면을 만들어 보는 것도 좋을 것 같아 이 글을 작성하게 되었습니다. 일반적으로 회원가입 양식에는 , , , , , 등 여러 가지 태그를 이용합니다. 하지만 이 글은 기본편으로 처음 회원가입 화면 개발하는 분이 쉽게 개발을 해볼 수 있도록 간단하게 , 만 사용해보았습니다. 시작하기 HTML5라는 단어를 써서 말은 거창해 보이지만 HTM5라고 해서 HTML과 다른 부분은 거의 없습니다. ". html" 파일의 선언 부만 위와 같은 구문을 명시하면 됩니다. HTML과 HTML5의 자세한 면면을 살펴보면 선언..
조금 늦게 기술 블로그 지표와 애드센스 수익 분석 글을 올립니다. 지난 2021.06월에는 7월 지표가 좋지 않을 것이라고 미리 예상을 했었는데요. 예측했던 것과 달리 블로그 지표가 나빠지지는 않았습니다. 약간 의외의 결과가 나와서 신기하기도 하고, 이전에 열심히 작성했던 글들이 인정받은 것 같아 기분이 좋기도 하네요. 7월 블로그 방문자 유입 분석 지난 6월에 블로그 방문객은 총 6,358명이었습니다. 7월의 블로그 방문객 수는 총 14,241명으로 6월과 비교하면 방문객이 7,883명이 늘어났습니다. 지표가 좋지 않을 거라는 예측이 완전히 빗나가고 2배 이상으로 방문객이 증가했습니다. 구글 검색으로 유입된 방문객도 6월 대비 6,819명이 늘어났습니다. 많은 분들이 블로그를 방문해주셨네요. 이 글을 ..