본문 바로가기

웹 개발/웹프로그래밍44

NN 스프링 부트 웹 애플리케이션 구조와 빌드 도구 스프링 부트 웹 애플리케이션의 폴더 구조를 살펴보고 빌드 도구인 Maven과 Gradle의 역할과 구조에 대해 쉽게 설명드리겠습니다.   목차  스프링 부트 폴더 구조 main실제 코드를 작성하는 폴더로 프로젝트 실행에 필요한 모든 소스와 리소스 파일이 이 폴더 안에 위치합니다. 1.  java  - 자바 소스 코드가 들어가는 폴더로 애플리케이션의 패키지 구조에 맞게 클래스 파일이 위치합니다.2.  resource  - 리소스 파일 (설정 파일, HTML, CSS, 이미지 등) 이 위치하는 폴더.application.propertiesapplication.xml템플릿 엔진 파일 : Thymeleaf 템플릿 등static : 웹 애플리케이션의 정적 리소스(CSS, JavaScript, 이미지 파일) 를 담.. 2025. 3. 27.
NN HTML | 콘텐츠 삽입 태그 iframe, embed, object 비교 외부 콘텐츠를 로드하는데 사용되는 HTML 태그인 iframe, embed, object 태그를 소개하고 장단점을 비교해 보겠습니다.  목차  1. iframe 태그 소개콘텐츠를 표시하고 공유하는데 가장 많이 사용되지만 몇 가지 단점이 있습니다. ▶ 예제 단점▶ 외부 콘텐츠를 포함하기 때문에 웹사이트 디자인을 망가질 수 있고 검색 엔진에 색인되지 않기 때문에 SEO에 부정적인 영향을 줄 수도 있습니다. 또한 iframe으로 로드할 때 보안 문제가 발생할 수도 있습니다.▶ 테이블 안에서 사용 시 높이 조절이 매우 어렵습니다.  2. embed 태그 소개간단하게 외부 콘텐츠를 보여주는데 사용합니다. object와 달리 대체 콘텐츠를 지원하지 않기 때문에 미지원 브라우저에서는 아무 것도 안 보이는 경우가 발생.. 2024. 7. 26.
NN Javascript | 사용자 정의 객체와 이벤트 객체 자바스크립트에서 이벤트 객체는 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공합니다. 이벤트가 발생하면 객체는 동적으로 생성되며, 이벤트 핸들러에게 암묵적으로 인자를 전달하게 됩니다. 목차  1. 객체 객체 구성 요소▶ 속성 (Property) — 값을 담고 있는 정보  ▶ 메서드 (Method) — 객체 사용 방법var kim = { firstName : "John"; lastName : "Doe"; info : function() { alert(firstName + lastName); };}; ▶  중괄호로 묶는다.▶  키와 값은 : (콜론) 을 사용합니다.  2. 사용자 정의 객체여러 정보를 하나로 묶어 사용할 때 객체생성▶ 리터럴 표기법 : var a=.. 2024. 4. 10.
NN Javascript | 자바스크립트 객체 (내장, DOM, BOM) 자바스크립트 객체 중 내장객체와 문서객체모델(DOM), 그리고 브라우저 객체 모델(BOM)에 대해 살펴보고 하위 객체들의 사용법을 간단하게 정리해 보겠습니다. 목차  1. 내장객체 생성var 참조변수 = new Object(); 날짜정보객체var 참조변수 = new Date();toLacaleString() : 현재날짜와 시간정보 로컬형식으로 반환 수학객체Math객체는 따로 new키워드로 인스턴스를 생성하지 않고 사용합니다.Math.random() : 무작위수 생성 배열객체var 참조변수 = new Array(); 문자열객체var 참조변수 = new String();indexOf() : String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 없으면 -1을 반환match() : Strin.. 2024. 4. 5.
NN Javascript | 자바스크립트 기초 문법 자바스크립트는 HTML의 부족한 점을 채워주고 웹사이트를 동적으로 만들 수 있습니다. 자바스크립트를 공부하기에 앞서 자바스크립트 특징과 문법 등 기초적인 내용을 정리해 봤습니다. 목차  1. 자바스크립트란 ? ECMA▶ 기술 및 통신업계 국제적 비영리 표준기관 ▶ ECMAScript6 - ES6. ECMA 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어  HTML에서 CSS, JavaScript 호출▶ HTML — 보통  안에서 CSS 호출,  마지막 자바스크립트 호출 ▶ CSS —  ▶ JavaScript —  자바스크립트가 할 수 있는 일▶ 웹 사이트를 동적으로 만들 수 있습니다. ▶ 웹 브라우저에서 실행되는 프로그램을 만들 수 있습니다. ▶ 서버를 구성하고 서버용 프로그램을 만들 수 있습니다... 2024. 4. 3.
NN Javascript | 비동기 처리 (콜백, 프로미스, await) 각 함수와 코드가 순차적으로 실행되는 것을 동기(Synchronous)라고 합니다. 처리가 늦어지는 경우 성능에 문제가 될 수 있기 때문에 여러 작업을 동시에 처리하는 비동기(Asynchronous) 방식이 필요합니다. 비동기 방식은 실행 순서를 장담할 수 없기 때문에 비동기 방식에서 순서를 제어하는 방법이 콜백함수, Promise, async/await 입니다.  목차  Web API 자바스크립트의 비동기 실행이 아닌 웹 브라우저 단에서 비동기적 실행을 가능하게 만든 것입니다. Web API는 타이머, 네트워크, 파일입출력, 이벤트 처리 등 브라우저에서 제공하는 API를 말합니다. 종류 - DOM / XMLHttpRequest, setTimeout() 등  콜백함수 소개▶ 방식 - 함수의 매개변수 자체.. 2024. 4. 1.
NN Javascript | jQuery 유용한 플러그인과 라이브러리 소개 사용자 인터페이스 개발을 위한 jQuery UI 플러그인 이외에도 유용한 플러그인과 라이브러리가 많습니다. 이미지 관련, 텍스트 관련, 모달 창 관련, 날짜 / 차트 관련 등 분류해서 정리해 봤습니다. 목차  이미지 / 동영상  슬라이더▶ Slick Carousel - 이미지 슬라이더로 반응형이며 터치 기능을 지원하는 플러그인입니다. 캐러셀이란 '회전목마'란 뜻으로 돌아가며 슬라이드가 보여지는 방식입니다.▶ Owl Carousel - 반응형 이미지 슬라이더와 캐러셀 구현▶ jQRangeSlider - 날짜, 시간, 숫자 등 사용자가 범위를 선택할 수 있는 슬라이더 ▶ Swiper.js - 모바일 터치 슬라이더 플러그인으로 이미지 갤러리, 배너 슬라이드쇼 등의 기능 애니메이션▶ Animate.css - 다.. 2024. 3. 25.
NN Javascript | jQuery UI 소개와 사용방법 jQuery UI는 jQuery를 기반으로 다양한 컴포넌트와 위젯을 모아놓은 사용자 인터페이스 개발을 위한 라이브러리입니다. jQuery UI를 사용하면 버튼, 다이얼로그, 탭, 슬라이더, 프로그레스바 등 다양한 UI요소를 손쉽게 구현할 수 있습니다. jQuery UI는 어떤 컴포넌트들이 있는지 살펴볼게요. 목차  jQuery UI 기능▶ 위젯, 효과, 상호작용  사용방법▶ jQuery추가, jQuery UI 추가 jQuery UI 위젯▶ jQuery UI 아코디언 - 클릭한 대상이 확대되고 나머지 메뉴는 축소 시키는 효과입니다.▶ jQuery UI 폼 ▶ jQuery UI 탭 - 웹 페이지에서 탭 기능을 구현하는 사용되는 플러그인입니다.  jQuery UI Demos | jQuery UIjQuery U.. 2024. 3. 22.
NN 파일업로드 dropzone.js 으로 손쉽게 구현하기 파일업로드를 이미 구현되어있는 dropzone 자바스크립트 라이브러리를 사용하여 가장 쉽게 구현하는 방법을 정리해 드릴게요. 추가로 웹사이트에 간단하게 적용시키는 것까지 해보겠습니다. 목차  서버 / 로컬서버 WAMP (Window, Apache, MySQL, PHP)파일업로드를 구현하기 위해서는 서버가 있어야합니다. 업로드 후 서버단에서 php로 파일 처리를 해야하기 때문이죠. 로컬서버로 대신하셔도 됩니다.   ▶ bitnami - wamp 환경을 만들어주는 bitnami 는 업데이트가 종료 되었습니다.  Dropzone 라이브러리  CDN링크로 사용하시려면 cdn 주소는 다음과 같습니다. 링크가 포함된 html 소스는 아래에 다시 나오기 때문에 넘어가셔도 됩니다.  ▶ Javascript ▶ CSS .. 2024. 3. 20.

티스토리툴바