로그인이 필요합니다.
로그인
jQuery 4 공식 릴리즈 드디어 나왔군요 (ㅜ.,ㅜ )… 프론트 개발자들의 손가락을 지켜줄 업데이트 인지 확인해 봐야겠어요. 주요 변경 사항과 특징을 요약해보았습니다. 1. 현대적인 아키텍처로 전환 ES 모듈(ESM) 마이그레이션 내부 소스 코드가 AMD 방식에서 ES 모듈 방식으로 완전히 전환 최신 빌드 도구(Webpack, Rollup 등)와의 호환성 <script type="module">을 통해 브라우저에서 직접 모듈 로드 Rollup 도입 패키징 도구를 기존의 선택 방식에서 Rollup으로 변경하여 결과물의 최적화 2. 브라우저 지원 범위 변경 (탈-IE 가속화) IE 10 이하 버전 지원 종료 IE 11은 지원 범위에 포함 향후 출시될 jQuery 5.0에서는 완전히 제거 레거시 Edge(크로미움 이전), iOS 16 미만, Firefox 146 미만 등 오래된 브라우저들에 대한 코드를 정리 3. 보안 및 최신 웹 표준 준수 Trusted Types 지원 보안 가이드라인인 CSP(콘텐츠 보안 정책)를 준수할 수 있도록 Trusted Types를 지원 DOM 조작 시 발생할 수 있는 보안 취약점을 예방 비동기 스크립트 요청 방식 변경 AJAX를 통한 비동기 스크립트 실행 시 인라인 스크립트 대신 <script> 태그를 활용하도록 하여 CSP 오류 발생 가능성을 최소화 4. 코드 정리 및 슬림(Slim) 빌드 최적화 오래된 API 제거 10년 가까이 'deprecated(사용 권장 안 함)' 상태였던 jQuery.trim, jQuery.isArray, jQuery.parseJSON, jQuery.now 등 네이티브 JavaScript 함수(Array.isArray(), JSON.parse() 등)를 사용 더 가벼워진 Slim 빌드 슬림 빌드에서 Deferred와 Callbacks를 제거하여 용량을 더 줄임 Gzip 기준 약 19.5KB 5. 업그레이드 방법 jQuery Migrate 4.x 기존 코드를 4.0으로 옮기는 것을 돕기 위해 마이그레이션 플러그인 함께 출시 사용 시 제거된 API를 사용하는 곳을 찾아 경고 또는 임시로 복구 jQuery는 이제 "모든 브라우저의 호환성 해결사"라는 과거의 역할 대신, 현대 웹 표준, 편리한 문법을 유지, 안정적인 인프라를 추구하는 것 같다. 기존 프로젝트를 운영 중이라면 마이그레이션 가이드를 참고하여 업데이트를 검토해보는 것이 좋다. 자세한건 릴리스를 확인해 주세요, https://blog.jquery.com/2026/01/17/jquery-4-0-0/
hobby ino
2026.01.20
2
1
처음 글 올리네요. ㅎㅎ Spring boot에서 Tailwind CSS를 사용하고 싶어서 다음과 같은 방식을 고안하게 되었습니다. 저는 템플릿을 Thymeleaf(타임리프)를 좋아해서 이 기준으로 작성하겠습니다. Framework : String boot 4 Template : Thymeleaf(타임리프) CSS : Tailwind CSS 미리 Node.js 설치해 주세요. 우선 프로젝트 하나를 생성합니다. 그 다음 리소스를 생성합니다. 우선 index.html 을 다음과 같은 내용으로 생성합니다. 경로 : src/main/resources/template/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tailwind TEST</title> </head> <body> <div>Tailwind CSS</div> </body> </html> 그 다음 스타일 시트를 생성합니다. 우선 스타일시트 파일 확인용이라 아무 스타일이나 입력해주세요. 경로 : src/main/resources/static/css/default.css @charset "UTF-8"; html, body { height: 100%; place-items: center; place-self: center; place-content: center; } div { width: 10rem; height: 5rem; margin: 0 auto; background: lightcoral; border: 1px red solid; } 그럼 두 경로에 파일이 보이실 꺼에요. 그다음 index.html head에 다음 테그를 삽입해 주세요. <link rel="stylesheet" href="./../static/css/default.css"> 스타일이 적용되는지 확인합니다. 적용 확인이 되면 그다음 head에 다음 tag를 삽입해 주세요. <!-- Tailwind CSS dynamic Style CDN 스타일 완성후 삭제 --> <script src="https://unpkg.com/@tailwindcss/browser@4"></script> 개발자 모드를 활용해 실시간으로 스타일이 적용되는지 확인해주세요. 확정 된 스타일을 index.html파일에 적용합니다. 이런 식으로 스타일을 적용하여 완성된 스타일을 default.css로 빌드하여 적용해 보도록 하겠습니다. src랑 같은 위치에 node 경로를 생성해주세요. 그 다음 node안에 package.json 파일 생성 후 다음 내용을 입력해 주세요. { "dependencies": { "@tailwindcss/forms": "^0.5.6", "autoprefixer": "^10.4.16", "fs-extra": "^11.1.1", "heroicons": "^2.0.18", "postcss": "^8.4.31", "tailwindcss": "^3.3.3", "update-browserslist-db": "^1.2.3" } } 터미널에서 다음 명령을 실행하세요. npm install 빌드를 정상적으로 실행하기 위해 postcss 설정 파일을 생성합니다. node/postcss.config.js module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ] } 이제 node안에 css파일을 하나 생성합니다. node/default.css 아래의 내용을 추가합니다. @tailwind base; @tailwind components; html, body { @apply h-full place-items-center place-self-center place-content-center; } div { @apply w-[10rem] h-[5rem] mx-auto rounded shadow-lg shadow-black/15 bg-red-200 text-center place-content-center } 다음으로 할 작업은 nodejs 빌드 스크립트 추가입니다. 저는 node폴더에서 실행하는 기준으로 작성하겠습니다. 우선 빌드 대상은 node안에 있어야 함으로 node/tmpl 에 복사하고 빌드하도록 하겠습니다. 우선 node/tmpl 에 복사하는 스크립트를 작성하겠습니다. node/copy.js 파일을 생성합니다. const fsExtra = require('fs-extra'); console.log('Resource init!'); const sourceDirectory1 = './../src/main/resources/templates'; // 원본 디렉토리 경로 const targetDirectory1 = './tmpl/t'; // 대상 디렉토리 경로 console.log('Try copy '${sourceDirectory1}' -> ${targetDirectory1}'); fsExtra.copy(sourceDirectory1, targetDirectory1, err => { if (err) { console.error('Error copying directory:', err); } else { console.log('Directory copied successfully! 1'); } }); console.log('Finished : ${new Date().toISOString()}'); 그 다음 터미널에서 실행해 복사를 확인합니다. node copy.js index.html에서 <script src="https://unpkg.com/@tailwindcss/browser@4"></script> 를 삭제하고 정합니다. 다음은 tailwindcss 빌드 입니다. -i : 인풋 -o : 아웃풋 터미널에서 아래 명령을 실행헤 주세요. npx tailwindcss build -i default.css -o ../src/main/resources/static/css/default.css 그 다음 적용여부를 확인하면 완료입니다. 그리고 빌드를 쉽게 하기 위해 package.json의에 빌드 스크립트를 추가합니다. 빌드 대상 폴더 비우기 rm -rf tmpl 빌드 대상 복사 node copy.js tailwindcss 빌드 tailwindcss build -i default.css -c tailwind.config.js -o 압축버전 빌드 (공백 삭제 등 용량 최적화) --minify 추가 { "scripts": { "css": "rm -rf tmpl && node copy.js && tailwindcss build -i default.css -c tailwind.config.js -o ../src/main/resources/static/assets/v2/css/default.css", "css-min": "rm -rf tmpl && node copy.js && tailwindcss build --minify -i default.css -c tailwind.config.js -o ../src/main/resources/static/assets/v2/css/default.css" }, "dependencies": { "@tailwindcss/forms": "^0.5.6", "autoprefixer": "^10.4.16", "fs-extra": "^11.1.1", "heroicons": "^2.0.18", "postcss": "^8.4.31", "tailwindcss": "^3.3.3", "update-browserslist-db": "^1.2.3" } } 이렇게 하면 빌드 시 아래화 같이 커맨드를 입력하면 됩니다. 일반 : npm run css 압축 : npm run css-min gradle에서 빌드 시 위 내용을 자동 실행 하고 싶으면 build.gradle 다음 내용을 추가하면 됩니다. task nodePreBuild(type: Exec) { // node 폴더 위치를 절대 경로로 계산 workingDir = file("${projectDir}/node") // Windows와 Mac/Linux 호환성 처리 if (System.getProperty('os.name').toLowerCase().contains('windows')) { executable 'cmd' args '/c', 'npm', 'run', 'css' } else { executable 'sh' args '-c', 'npm run css' } // 3. 디버깅을 위한 출력 (Gradle 실행 시 콘솔에 찍힘) doFirst { println "--------- CSS Build Start ---------" println "Working Directory: ${workingDir}" println "Executable: ${executable}" println "Arguments: ${args}" println "-----------------------------------" } } processResources.dependsOn nodePreBuild 궁금하신건 댓글 달아주세요. Tailwind CSS 좋아하는데… 요즘 많이 힘들다고 하네요. 많이 응원해주세요. ㅎㅎ
hobby ino
2026.01.16
1
1
- 이벤트
l
- 체험단 모집
l
- 특가 이벤트
l
- 당첨/발표
1
3
0 / 0
