개발 story

안녕하세요. hia의 개발 story입니다. 오늘은 도커에 대한 글을 써볼까 합니다. 이전에 맥북에서 oracle을 사용하기 위해 docker를 사용했던 적이 있습니다. 그때는 아무것도 모르는 채로 맥북에서 사용하기 위해 열심히 따라서 구축했었습니다. 아래의 글을 따라가면 맥북 환경에서 docker를 설치하는 방법을 알 수 있습니다. 맥 OS에서 DB 환경 구축하기 - 1. Docker 이용해서 Oracle Database 11g 설치하기 현재 취업을 위해 국비지원 교육을 듣는 중이다. 30일 동안의 자바 수업이 끝나고 작은 프로젝트를 진행한 ... blog.naver.com 아직도 잘은 모르지만 조금 배운 내용을 기록하기 위해 글을 씁니다. docker란 별도로 가상화 환경을 구축하지 않고도 가상환경을..

안녕하세요. hia의 개발 story입니다. header를 만들고 나니 생기는 문제가 있었습니다. 기존 페이지는 페이지별로 header 코딩이 되어있었기 때문에 해당 페이지를 누르면 그에 해당하는 메뉴에 current라는 클래스를 넣어줬습니다. 하지만 header를 분리하게 되면 어떤 페이지에서 header를 불렀는지 알 수가 없어서 선택된 메뉴를 표시해줄 수가 없습니다. 이제 그 부분을 script로 적용하여 변하게 하려고 합니다. 아래의 사진처럼 페이지에는 메인, 소개, 예약, 숙박, 문의 이렇게 다섯 가지의 메뉴가 있습니다. 그 메뉴 중 현재 선택된 메뉴는 메인입니다. 선택된 메뉴를 빨갛게 만드는 것은 main.css에 미리 설정된 스타일로 클래스명이 current인 li 태그에 설정된 스타일입니다..

안녕하세요. hia의 개발 story입니다. 홈페이지를 만들기에 앞서 페이지를 조각내 보려고 합니다. 프런트를 만들 때 보통 공통으로 들어가는 페이지가 있습니다. 특히나 header, footer 파일이 가장 대표적입니다. 쉽게 말해서 홈페이지의 어느 페이지를 들어가더라도 떠있어야 하는 파일을 따로 만들어두는 것입니다. 그러면 페이지마다 같은 부분을 고칠 필요 없이 조각난 파일만 수정을 하면 되기 때문에 선택이 아닌 필수 사항입니다. Thymeleaf에 들어가면 이렇게 공식 문서를 볼 수가 있습니다. 이제 이 문서를 사용해서 fragment 조각들을 만들어봅시다. Thymeleaf Page Layouts - Thymeleaf Summary In this article, we described many w..

안녕하세요. hia의 개발 story입니다. 이클립스에서도 유용하게 사용하는 기능인 프론트 단에서의 정적 자원들이 자동 새로고침 되는 기능을 설정하려고 합니다. 물론 이클립스도 설정을 해야하지만 지금은 인텔리제이를 공부하는 중이기 때문에 인텔리제이에서의 설정을 남겨보려 합니다. 우선 인텔리제이를 킨 후 화면 우측 상단에 있는 나의 서버를 찾아줍니다. 쉽게 우측 상단 run버튼 왼쪽에 있는 main 서버를 찾아주는 곳입니다. 눌러서 Edit Configurations.. 를 눌러줍니다. 이전 버전에 대한 글만 올라와있어서 좀 찾기가 어려웠습니다. 최신 버전에서는 아래 화면에서 Modify options를 눌러주면 됩니다. 그러면 아래 화면이 나오는데 우리가 설정해줘야할 것은 On 'Update' actio..

안녕하세요. hia의 개발 story입니다. 스프링 부트를 공부할 겸 미니 프로젝트로 간단한 펜션 홈페이지를 제작하고 있습니다. 홈페이지를 제작하려고 하니 디자인이 걱정되기도 하고 페이지를 다 만들어야 한다는 생각에 걱정이 되었습니다. 그래서 무료로 제공되는 템플릿을 수정하여 사용하기로 했습니다. 아래 사이트는 제가 이용한 사이트인데 zip 파일로 제공할 뿐만 아니라 무료에 수정까지 가능한 템플릿을 제공합니다. 무료로 제공되지만 상당히 깔끔한 UI를 제공하는 것 같습니다. HTML5 UP Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license. html5up.net 파..

안녕하세요. hia의 개발 story입니다. 프로젝트 진행상황을 남기기 위해서 git 연동을 하려고 합니다. 우선 intellij에서 설정을 위해서 Preferences로 이동해줍니다. 검색창에 git을 검색하면 Git/ GitHub가 나옵니다. 우선은 git을 먼저 등록합니다. 아래 화면은 사실 잘못 알고 git.exe 파일이 아닌 깃허브의 url을 잘못 입력해서 나오는 화면입니다. 여기서는 깃을 등록하는 것이기 때문에 본인의 컴퓨터에 깃이 설치되어있어야 합니다. 깃이 설치되어 있다면 설치되어있는 깃 폴더를 찾아가야 합니다. 맥북 그리고 저의 경우에는 /usr/local/git/bin/git.exec 였습니다. 혹시 깃이 어디에 설치되어있는지 잘 모르겠다면 터미널을 켜고 아래 명령어를 입력해주면 위치가..

안녕하세요. hia의 개발 story입니다. intellij에 git 파일을 설정하려고 보니 최상단에 있는 /usr 폴더가 보이지 않았습니다. 맥에서 프로그램이 설치되면 설정 파일들이 간혹 /usr 폴더 아래에 들어가는 경우가 있어서 위의 상황처럼 당황스러운 경우가 간혹 있습니다. 그럴 때 해결 방법을 공유하려고 합니다. finder 폴더로 이동.. 우선 finder에서는 보이지 않지만 검색해서 들어가는 방법이 있습니다. shift + command + G를 눌러 폴더로 이동하는 창을 띄워줍니다. 여기에서 원하는 루트를 입력해주면 finder에서 직접 찾을 수는 없지만 해당 폴더에 들어갈 수 있습니다. 그러나 제가 원하는건 finder에서 찾는 게 아닌 intellij에서 폴더를 검색해야 하는 상황이었습..

안녕하세요. hia의 개발 story입니다. 프로젝트의 가장 기본으로 Hello World 페이지를 만들어서 index 파일이 잘 읽히는지 확인하려고 합니다. 스프링 부트에서는 기본적으로 welcome page를 지원해줍니다. 공식 문서에서 보이듯이 파일명을 index로 설정하면 자동으로 welcome page로 인식을 합니다. 정확히는 프로젝트 실행 시에 스프링 부트에서 가장 먼저 index를 찾아서 가죠. Spring Boot Features Graceful shutdown is supported with all four embedded web servers (Jetty, Reactor Netty, Tomcat, and Undertow) and with both reactive and Servlet-..

안녕하세요. hia의 개발 story입니다. 스프링 프로젝트를 진행하기 위해 프로젝트를 생성했습니다. 생성 후 실행 테스트를 해보려고 하니 run 버튼이 보이질 않았습니다. 억지로 찾아서 run을 돌려보려고 하니 그 또한 비활성화 버튼으로 보였습니다. 원래는 아래 사진에서 처럼 프로젝트에 우클릭을 하면 run이 보여야 하는 게 정상입니다. 그럼 이제 다시 run 버튼이 잘 보이도록 설정을 해봅시다. 우선 Mark Directory as > Sources Root 를 눌러줍니다. 이후에 다시 우클릭을 눌러서 Add Framework Support.. 를 눌러줍니다. 아래처럼 화면이 뜨면 Maven 프로젝트를 체크하고 OK를 클릭합니다. 잠시 기다린 후 다시 프로젝트 우클릭을 하면 아래 그림처럼 run이 보..

안녕하세요. hia의 개발 story입니다. 안녕하세요. 웹 개발을 공부하고 있는 개발자 hia입니다. 오늘은 작은 프로젝트를 시작하기 위해 스프링 부트 프로젝트를 생성해보겠습니다. 그동안 이클립스로 작업을 해왔기 때문에 인텔리제이로 잘 만들 수 있을지 걱정이 되네요 ㅎㅎ 이클립스에서 스프링 부트 프로젝트를 만들 때는 Spring Initializr를 이용했었는데 Intellij Ultimate 버전은 프로그램 안에서 Spring Initializr로 만들 수 있습니다. Intellij를 켜고 스프링 프로젝트를 만들어봅시다. File> New> Project...로 들어갑니다. 여러 항목 중에 Spring Initializr를 선택하면 https://start.spring.io/ 에서 만드는 것과 같은 ..