" 묵묵히 갈 길을 갈 수 있는 것도 용기 "

오딘박스(OdinBOX), 혁신을 이룹니다.

DEVELOPMENT 92

SweetAlert2를 활용하여 알림창 변경방법

자바스크립트,디자인,프론트엔드,백엔드,오픈소스라이브러리,공식문서,깃허브 기본 알림창을 변경하여 자신의 웹을 바꿔보자 최근 포트폴리오를 준비하면서 사이트를 만드는데 자바스크립트 등으로 만들어져 있는 오픈소스 라이브러리에 대한 관심도가 많아져 검색을 하다 보니 정말 다양하고 좋은 기능들이 많이 있기도 하고 신기한 기능들이 많이 있었습니다. 그중에서 사이트에 적용을 하면 괜찮을 것 같은 알림창(Alert)관련한 오픈소스를 여러분에게 소개를 해드리려고 합니다. 목차 SweetAlert2 [#] 우리가 보통 홈페이지를 이용하다 보면 자주 볼 수 있는 알림 창의 경우 보통 아래의 모양처럼 나오는 것을 확인을 할 수 있습니다. SweetAlert를 사용하게 되면 위와 같은 기본 알림창의 디자인을 바로 변경하여 사용할..

DEVELOPMENT 2022.05.14 (2)

스프링(Spring), 기초부터 차근차근 알아보기

HTML,CSS,JAVASCRIPT,JS,JQUERY,개발,DEV,SOURCE,GITHUB,프레임워크,이클립스 스프링 A부터 Z까지 천천히 배웁시다. 최근 스프링 관련해서 배우고 있어 아직 저 또한 초보이기 때문에 기억하고 기록하는 차원에서 글을 적으려고 합니다 물론 여기서 저는 타 블로그 현업 개발자분들보다 부족할 수 있지만 기초부터 알아가기 위해 이렇게 글을 적으려고 하니 초보 분들에게도 많은 도움이 되었으면 좋겠습니다. 목차 스프링 프레임워크(Spring Framework) 스프링이란? 우선 스프링이란 무엇인지 알아보려면 자바에 대해서 먼저 알아야 합니다 자바는 우리가 프로그래밍을 하게 되면 가장 기초로 시작하는 C언어 자바로 시작을 하게 되기도 합니다. 우선, 자바를 많이 하는 이유는 객체 지향이..

DEVELOPMENT/JAVA 2022.05.07

맥에서 스프링 개발환경 구축하는 방법

맥,이클립스,운영체제,윈도우,개발,프레임워크,JSP,HTML,JS,CSS자바,스크립트,버전 맥에서 스프링을 사용하는 방법 최근 스프링 관련하여 공부를 하고 있는데 이전 글에도 글을 썼지만 맥북 에어를 구입을 하고 처음 맥을 사용하면서 어려움이 많습니다. 물론 지금 사용한 지 조금 지나다 보니 익숙해지긴 하지만 여전히 어렵다고 느껴집니다 사용이 불편하고 어려운 건 둘째 치더라도 개발환경을 윈도우에서 늘 익숙하게 사용하던 것처럼 하려는데 맥과 전혀 맞질 않아 제대로 실행이 안되기도 하고 프로그램 삭제 후 재설치하려는데 제대로 삭제가 안돼서 몇 번 초기화하다가 결국 공장초기화를 진행을 하고 우여곡절이 많았습니다 그래서 이번 글은 저와 같은 분들이 없었으면 좋겠고 또 나중에 제가 혼자 설정을 하는 일이 있으면 ..

DEVELOPMENT 2022.04.17

이클립스(Eclipse) 개발환경 인코딩(Encoding) 설정방법

이클립스,개발환경,설치,초기설정,UTF8,EUCKR,한글깨짐,인코딩,한글,서버 이것만 보면 이클립스 인코딩 관련 설정은 끝! 이클립스를 처음 설치하고 아무런 설정없이 이용을 하다보면 한글깨짐이 제일 많이 발생을 합니다 이럴 경우 깨질때마다 하나하나 설정을 하면 불편하기도 불편하다고 생각합니다 그래서 여러분은 저와 같이 불편함이 없었으면 하는 마음으로 이클립스 인코딩 설정을 할 수 있는 방법을 정리했습니다 정말 간단하고 빠르게 설정을 할 수 있으니 혹시나 포맷하거나 삭제하고 재설치하는 분들은 이 글 즐겨찾기에 추가하고 필요할 때마다 보시는 것을 추천합니다! 이클립스 인코딩 설정 이클립스를 실행합니다 이클립스 버전에 따라서 차이는 크게 없기때문에 버전 상관없이 따라하시면 됩니다. 우선, 제일 첫번째로 Ecl..

DEVELOPMENT 2022.04.06

이클립스(Eclipse) 다운로드부터 설치 알려드립니다.

이클립스,IDE,설치,다운로드,무료개발툴,개발프로그램,DEV,자바,JSP,WEB,통합개발환경 이클립스 사용을 하려면 이글 하나면 충분! 이클립스를 처음 사용하고 싶은 분들은 어떻게 사용하면 좋을지에 대해서 알아보도록 하겠습니다. 천천히 따라 하시면 설치부터 설정까지 하실 수 있으니 따라하시면 됩니다. 이클립스(Eclipse) 이클립스는 자바를 비롯한 다양한 언어를 지원하는 프로그램으로써 많은 분들이 사용하고 있는 프로그램 중 하나입니다. 이 프로그램을 사용하기 위해 기본적으로 자바를 먼저 설치를 진행을 해야 합니다. 이전 제가 올렸던 글에 환경변수 설정 방법과 함께 설치를 할 수 있는 방법[#]을 정리를 했으니 우선 자바 설치와 함께 환경변수 설정을 하고 오시면 됩니다. 자! 그러면 본격적으로 이클립스를..

DEVELOPMENT 2022.03.19

이클립스 실행 오류 해결방법(Incompatible JVM)

이클립스,자바,버전,환경변수,실행오류,실행안됨,JVM,java,오류,에러코드,eclipse 이클립스가 실행이 안되는데 해결 방법은? 프로그램 개발을 하기 위해 사용하고 있는 개발 프로그램 중 이클립스도 많은 분들이 이용하고 있습니다. 이클립스를 사용하면서 은근히 발생하기 쉬운 오류 중 하나를 해결할 수 있는 방법에 대해서 알아보도록 하겠습니다. 혹시나 잘 모르겠다고 생각하시면 이 글을 보고 천천히 따라하시면 해결 할 수 있으니 따라오세요! "어라? 아까까진 잘 사용하던 이클립스를 실행하려니 안되네요!" 문제 발생 - 오류 메세지 Version 1.8.0_261 of the JVM is not suitable for this product Version: 11 or greater is required. 이..

DEVELOPMENT 2022.02.17

웹(WEB/UX) 디자인 관련 참고할만한 사이트

웹,UI,UX,반응형,모바일,PC,데스크톱,디자인사이트,그래픽,JS,HTML,CSS WEB UI/UX 디자인 참고 해보세요! 웹사이트 디자인을 위해 혼자 창작으로 해내는 것도 좋겠지만 다른 웹사이트들은 어떤 식으로 만들어져 있는지 확인을 하면서 참고를 하는 것도 정말 필요한 과정 중 하나입니다. 예를 들어 자신이 만드려고 하는 홈페이지가 커뮤니티 관련 홈페이지라고 한다면 관련 커뮤니티 홈페이지를 확인을 하면 되지만 불편하기도 하고 다양한 사이트를 보는 것이 자신이 사이트를 만들 때 디자인 관련하여 더욱 도움이 된다고 생각합니다. 그럴 때 바로 필요한 사이트를 여러분에게 소개를 해드리려고 합니다. 웹사이트모음 굿디자인웹 국내 최우수 웹디자인 선정, 웹사이트. 굿디자인웹 www.gdweb.co.kr - 굿디..

DEVELOPMENT 2022.01.06

웹 소스 코드 공유 및 테스트 방법

소스코드,코드사이트,프로그래밍,언어,코드펜,w3schools,html,css,javascript,웹,프론트,백엔드 웹 프로그래밍 코드 테스트 및 공유하는 방법 웹 개발을 하면서 다른 사람들과 소스 코드를 공유할 때 어떤 식으로 공유를 하시나요? 보통 복사 - 붙여 넣기로 바로 공유하는 경우도 있지만 쉽고 조금 더 알아볼 수 있도록 공유할 수 있는 방법에 대해서 알아보도록 하겠습니다. 더욱 많은 사이트가 있지만 제가 사용해봤던 것 중 일부를 소개해드리니 보시고 여러분이 편하게 사용할 수 있는 사이트를 이용하시면 됩니다. 목차 CodePen [#] 코드펜의 경우 제가 가장 많이 사용하고 있는 사이트 중 하나입니다. 웹 개발할 때 쉽고 간편하게 수정하고 테스트할 수 있어 그 자리에서 확인을 할 수 있다는 것과..

DEVELOPMENT 2021.11.16

VS Code(Visual Studio Code)에서 깃허브(GitHub) 업로드 방법

vscode,visualstudiocode,비주얼스튜디오코드,깃허브,github,업로드,소스,프로그래밍,merge,머지,마이크로소프트,윈도우,Microsoft 에디터를 활요한 편한 깃허브 사용방법 비주얼 스튜디오 코드를 평소 많이 사용하게 되는데 해당 프로그램을 이용하여 깃허브에 바로 업로드하여 관리할 수 있는 방법에 대해서 알아보도록 하겠습니다. 일부 다를 수 있으나 거의 비슷하여 해당 방법과 비슷하게 따라 하시면 어려움이 없이 사용할 수 있습니다. 목차 준비물 GitHub [#] VisualStuido Code [#] GitHub 설치방법 - 버전에 따라 일부 차이가 있을 수 있으며, 사용자 환경에 따라 약간 달라질 수 있습니다. 위 주소로 들어가 사용하고 있는 운영체제를 선택하여 설치를 진행합니다...

DEVELOPMENT 2021.11.10

Bootstrap :: Modal 활용하는 방법

HTML,홈페이지,웹,개발,프로그래밍언어,자바스크립트(JS),Jquery)제이쿼리,웹,팝업,모달 팝업보단 모달을 쓰자! 일반적으로 우리가 웹페이지를 이용하다 보면 자주 볼 수 있는 화면이 있는 팝업과 함께 모달이 존재합니다. 저의 경우 처음 HTML이라는 것을 접했을 때는 팝업(pop-up)을 이용하여 어떤 필요한 정보를 출력을 하였는데 우리가 인터넷을 쓰다 보면 팝업창이 뜨면 내용을 정확히 보지도 않고 닫거나 불편하고 여러모로 크게 좋진 않아 어떻게 하면 좋을까 고민을 하다 모달(modal)이라는 것을 알게 되었습니다. 그래서, 여러분에게 팝업과 모달의 차이점에 대해서 간단히 알아보고 모달 사용방법에 대해서 알아보도록 하겠습니다. 목차 모달(Modal) VS 팝업(pop-up) 팝업(pop-up) 우선..

DEVELOPMENT 2021.08.27