IT개발/JS 관련13 [JSP] 📚 JSP 핵심 태그 완벽 정리 | JSTL 기본 사용법과 예제 모음 JSP(JavaServer Pages)는 Java 기반 웹 개발에서 오랫동안 사용된 대표적인 기술이다.하지만 JSP에 Java 코드를 직접 작성하게 되면, HTML과 Java가 섞여 가독성이 떨어지고 유지보수가 어려워진다.이러한 문제를 해결하기 위해 JSTL(JSP Standard Tag Library) 이 등장했다.JSTL은 JSP에서 자주 사용하는 로직을 태그 형식으로 제공하는 표준 라이브러리다.✅ JSTL이란?JSTL은 JSP에서 반복문, 조건문, 포맷팅 등을 간편하게 처리할 수 있는 태그 모음이다.코드의 복잡도를 줄이고, 표현을 단순화할 수 있다.JSTL을 사용하려면 JSP 상단에 다음과 같이 선언해야 한다. 여기서 prefix="c"는 JSTL Core 라이브러리의 접두어이며, 보통 c로 사용한.. 2025. 4. 8. [GSAP] GSAP(GreenSock Animation Platform) 라이브러리(애니메이션 구현) GSAP는 웹 애니메이션을 쉽게 구현할 수 있게 해주는 강력한 JavaScript 라이브러리이다. 복잡한 애니메이션을 간단하게 만들 수 있도록 도와주며, 성능이 뛰어나고 다양한 브라우저에서 호환된다. GSAP는 주로 다음과 같은 기능을 제공한다. https://gsap.com/ 1. 기본 개념GSAP는 애니메이션을 구현하기 위한 간단하고 직관적인 API를 제공한다. 타임라인, 트위너, 이징(easing) 등 다양한 기능을 통해 애니메이션을 세밀하게 조정할 수 있다. GSAP는 CSS 애니메이션보다 더 많은 제어를 가능하게 하며, 복잡한 애니메이션 시퀀스를 쉽게 구성할 수 있다. 2. GSAP 설치GSAP을 사용하기 위해서는 먼저 라이브러리를 설치해야 한다. 아래와 같은 방법으로 설치할 수 있다.npm을.. 2025. 2. 26. [JavaScript] JavaScript 구조 분해 할당(Destructuring Assignment) JavaScript의 구조 분해 할당은 배열이나 객체의 속성을 쉽게 추출해서 변수에 할당할 수 있는 문법이다. 이걸 사용하면 코드가 깔끔해지고, 반복적인 코드도 줄일 수 있다. 1. 배열 구조 분해 할당배열의 요소를 변수에 간편하게 할당할 수 있다.예제const fruits = ['사과', '바나나', '체리'];// 구조 분해 할당const [firstFruit, secondFruit] = fruits;console.log(firstFruit); // 출력: 사과console.log(secondFruit); // 출력: 바나나여기서 fruits 배열의 첫 번째와 두 번째 요소를 각각 firstFruit와 secondFruit에 할당한다. 이렇게 배열의 요소를 쉽게 뽑아낼 수 있다. 2. 기본값 설정구조.. 2025. 2. 25. [React] React 프로젝트에 prettier & eslint 설치하기 PrettierPrettier란?Prettier는 코드 포매터로, 소스 코드를 일관되게 포맷팅해주는 도구임. 여러 개발자들이 협업할 때 코드 스타일이 통일되지 않으면 가독성 이 떨어지고, 코드 리뷰가 복잡해질 수 있음. Prettier를 사용하면 다음과 같은 장점이 있음:일관성: 팀 내 모든 코드가 동일한 스타일로 포맷됨.생산성 향상: 코드 스타일에 대한 논의나 고민을 줄여줌.자동 포맷팅: 파일을 저장할 때 자동으로 포맷팅할 수 있어 편리함.https://prettier.io/docs/ What is Prettier? · PrettierPrettier is an opinionated code formatter with support for:prettier.io 설치 명령어Prettier를 설치하는 방법은.. 2025. 2. 18. [React] React 프로젝트 생성 후 최초 렌더링 과정 이해하기(Vite 설치) Vite를 통해 React 프로젝트를 설치 후 실행을 시키면 아래와 같은 화면을 만날 수 있다. 그리고 실제 생성된 폴더구조를 보면 다음과 같다 위 폴더 구조 안에서 저 최초 화면이 어떻게 렌더링 되는건지 간단히 정리해보려 한다. 전체 구조project-folder/├── src/│ ├── App.tsx│ ├── main.tsx│ ├── index.css│ ├── assets/│ │ ├── react.svg│ │ └── vite.svg├── index.html 1. index.html역할 : 이 파일은 웹 페이지의 기본 구조를 정의합니다. 브라우저가 처음 로드할 HTML임주요 내용: : React 애플리케이션이 이곳에 렌더링됨 : main.tsx 파일을 로드하여 React.. 2025. 2. 18. [vue] 특정 페이지에서만 특정 클래스 추가하기 vue 프로제트를 작업하다보니 content 영역에 대해서 메인 Home 페이지에서만 main 클래스를 추가해야 하는 상황이 발생했다. 방법) [ :class ] 속성을 활용하여 특정 페이지에서 특정 클래스 추가 .// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'; // Vue 3에 맞게 변경import Home from '../views/MainHome'; // 변경된 Home 컴포넌트import newlyProduct from '../views/newlyProduct';const routes = [ { path: '/', name: 'MainHome', compone.. 2025. 2. 10. 이전 1 2 3 다음
