๐คทโ๏ธ ๋ณธ๋ก ์ ์์
์ต๊ทผ์ HTML, CSS ํผ๋ธ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ๋์ ์ธ ๊ธฐ๋ฅ์ JS์ jQuery ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
์ค๋๋ง์ HTML, CSS, JS ์ ํต์ ์ธ ์น ํผ๋ธ ์์ ์ ํ๋ค ๋ณด๋ ์๊ฐ์ง๋ ๋ชปํ ์์ง์ผ์ด์ค๋ค์ด ๋ฐ์ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์์ต๋๋ค.
์ด ๋ํ ์ข์ ๊ฒฝํ์ด๊ณ ๋ค์ ํ๋ฒ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋ฆฌ๋ง์ธ๋ ํ ์ ์์ด์ ์ข์์ต๋๋ค.
์ด ๊ธ์ ์ ์ ๊ฐ์ธ์ ์ธ ์ค๋ฅ๋ฅผ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ๊ณต์ ๋๋ฆฝ๋๋ค.
์น๊ฐ๋ฐ์๋ผ๋ฉด ์์์ผ ํ๋ jQuery๋?
https://cometruedream.tistory.com/5
jQuery์ ์ ์
์ ์ด์ฟผ๋ฆฌ(jQuery)๋? ์ ์ด์ฟผ๋ฆฌ๋ ์คํ ์์ค ๊ธฐ๋ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋์ฑ ์ฝ๊ณ ํธ๋ฆฌํ๊ฒ ์ดํดํ๊ณ ์ฌ์ฉํ ์์๊ฒ ํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ๋๋ค!! ์ฝ๋ ์์ฒด๊ฐ ์ดํดํ๊ธฐ ์ฝ
cometruedream.tistory.com
๐คทโ๏ธ jQuery ๋ก๋ ์์
jQuery ์ฝ๋๊ฐ ๋์ํ๋ ค๋ฉด jQuery ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋จผ์ ๋ก๋๋์ด์ผ ํฉ๋๋ค.
<head> </head> ์ฌ์ด์ jQuery ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ถ๊ฐํด์ผ์ง jQuery๋ฅผ ๋ฌธ์ ์์ด ์ฌ์ฉํ์ค ์ ์์ต๋๋ค.
jQuery ๋ผ์ด๋ธ๋ฌ๋ฆฌ CDN
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
๐คทโ๏ธ ๋์ ์ผ๋ก ๋ฐ๋๋ ํญ๋ฉ๋ด ์ฝํ ์ธ
ํญ๋ฉ๋ด ์ฝํ ์ธ ๊ฐ ๋์ ์ผ๋ก ์ถ๊ฐ๋ ๊ฒฝ์ฐ jQuery์์ ํญ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์ ๊ทผํ ๋ ์ ๊ทผํ๋ DOM ์์๋ค์ด ์กด์ฌํ์ง ์์ ์ ์์ต๋๋ค.
๊ทธ ์ด์ ๋ DOM ์์๊ฐ ๋์ ์ผ๋ก ์ถ๊ฐ๋๊ธฐ ๋๋ฌธ์ ์ฒซ DOM ์์์ ์ ๊ทผํ ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ฑฐ๋ ๊ธฐ๋ฅ์ด ์ ๋๋ก ๋์ํ์ง ์์์ ์์ต๋๋ค.
๐คทโ๏ธ ๋์ ์ผ๋ก ๋ก๋๋ ์ฝํ ์ธ ์ด๋ฒคํธ ์์ ํ์ฉ์ผ๋ก ๋ฌธ์ ํด๊ฒฐ
๋์ ์ผ๋ก ๋ก๋๋๋ ์ฝํ ์ธ ๋ฅผ ์ด๋ฒคํธ ์์์ ์ฌ์ฉํ์ฌ jQuery ํด๋ฆญ ์ด๋ฒคํธ์ ์ ๊ทผํฉ๋๋ค.
์ด๋ฒคํธ ์์์ ํตํด์ ๋์ ์ผ๋ก ๋ก๋๋๋ ์์๋ค์ ๋ํด์ ์ด๋ฒคํธ๊ฐ ์ ๋๋ก ์๋ํฉ๋๋ค.
๊ธฐ๋ณธ jQuery ์ฝ๋
$(function () {
// ํญ ํด๋ฆญ ์ด๋ฒคํธ ์ฒ๋ฆฌ
$('.modal_tab ul li').click(function () {
// ๋ชจ๋ ํญ์์ active ํด๋์ค ์ ๊ฑฐ
$('.modal_tab ul li').removeClass('active');
// ํด๋ฆญํ ํญ์ active ํด๋์ค ์ถ๊ฐ
$(this).addClass('active');
// ๋ชจ๋ ํญ ๋ด์ฉ ์จ๊ธฐ๊ธฐ
$('.tab-content').hide();
// ํด๋ฆญํ ํญ์ ํด๋นํ๋ ๋ด์ฉ ๋ณด์ฌ์ฃผ๊ธฐ
var tabId = $(this).data('tab');
$('#' + tabId).show();
});
});
jQuery ํญ๋ฉ๋ด ๊ธฐ๋ฅ ์ฝ๋์ ๋๋ค.
jQuery ํญ๊ธฐ๋ฅ ๋ง๋ค๊ธฐ
2021.07.21 - [Jquery] - ์ค๋์ Tab-Menu ๋ง๋ค์ด ๋ด์!
์ค๋์ Tab-Menu ๋ง๋ค์ด ๋ด์!
ํญ์ ๋งํ๋ Jquery๋ javascript๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ด์ ๋ณด๋ค ํธํ๊ณ ์งง์ ์ฝ๋๋ก ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ๊ตฌํํ ์ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ๋๋ค. ์ ๋ jquery ์์ฃผ ํ์ฉ์ ํฉ๋๋ค. ์ค๋์ ๊ฐ๋จํ๊ณ ๊ธฐ๋ณธ์ ์ธ Tabmenu๋ฅผ ๋ง๋ค
cometruedream.tistory.com
์ด๋ฒคํธ ์์๋ jQuery ์ฝ๋
$(document).on('click', '.modal_tab ul li', function () {
// ๋ชจ๋ ํญ์์ active ํด๋์ค ์ ๊ฑฐ
$('.modal_tab ul li').removeClass('active');
// ํด๋ฆญํ ํญ์ active ํด๋์ค ์ถ๊ฐ
$(this).addClass('active');
// ๋ชจ๋ ํญ ๋ด์ฉ ์จ๊ธฐ๊ธฐ
$('.tab-content').hide();
// ํด๋ฆญํ ํญ์ ํด๋นํ๋ ๋ด์ฉ ๋ณด์ฌ์ฃผ๊ธฐ
var tabId = $(this).data('tab');
$('#' + tabId).show();
});
์ด๋ฒคํธ ์์์ด๋?
https://f-lab.kr/insight/closure-event-delegation-20240528
ํด๋ก์ ์ ์ด๋ฒคํธ ์์ ์ดํดํ๊ธฐ
์ด ๊ธ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํด๋ก์ ์ ์ด๋ฒคํธ ์์์ ๋ํด ๋ค๋ฃน๋๋ค. ํด๋ก์ ์ ๊ฐ๋ ๊ณผ ํ์ฉ, ์ด๋ฒคํธ ์์์ ๊ฐ๋ ๊ณผ ํ์ฉ, ์ค์ ํ์ฉ ์์ , ์ฅ๋จ์ ๋ฑ์ ์ค๋ช ํฉ๋๋ค.
f-lab.kr
๐คทโ๏ธ ์ด๋ฒคํธ ์์์ด๋?
๋์ ์ผ๋ก ๋ก๋๋๋ ํญ๋ฉ๋ด ์ฝํ ์ธ ๋ฅผ ์ ์ด์ฟผ๋ฆฌ๋ก ๋ค๋ฃจ๋ฉด์ DOM ์์์ ์ ๊ทผํ์ง ๋ชปํด์ ์๋ฌด ๊ธฐ๋ฅ์ด ๋์ํ์ง ์๋ ๋ฌธ์ ์ ์ง๋ฉดํ์ต๋๋ค.
script ๋ก๋ ์์๋ html, css, js ๊ฐ๋ฐ์ ํ ๋ ์ค์ํ ๊ฐ๋ ์ค์ ํ๋์ด๋ฉฐ ์ด๋ฒคํธ ์์์ ์ฌ์ฉํ์ฌ ๋์ ์ผ๋ก ๋ก๋๋๋ ์ฝํ ์ธ ๋ฅผ ์ ์ด์ฟผ๋ฆฌ๋ก ๋ค๋ฃจ๋ฉด์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์ ๊ฒฝํ์ ๊ณต์ ๋๋ฆฝ๋๋ค.
์ฌ๋ฐ๋ ์ค๋์ ๋ ๋ณ ์ด์ธ ๋ณด๊ณ ๊ฐ์ธ์!
https://cometruedream.tistory.com/247
[React] Tailwind ํ์ค, ๋์ค, ์ธ์ค ํจ๊ณผ className ์ปค์คํ
๐คทโ๏ธ Tailwind ํ์ค, ๋์ค, ์ธ์ค ํจ๊ณผํ๋ก์ ํธ ์งํ์ค ๋ฐฐ๋ ๋งํฌ์ URL ๊ธธ์ด๊ฐ ๋๋ฌด ๊ธธ์ด์ 3์ค ํจ๊ณผ ์ฒ๋ฆฌ๋ฅผ ํด์ผ ํ์ต๋๋ค. React + Tailwind CSS ์ ํ ๋ ํ๋ก์ ํธ ์ฌ์ CSS ํ์ผ & style ํ๊ทธ๋ฅผ ์ฌ์ฉํ
cometruedream.tistory.com
https://cometruedream.tistory.com/243
NestJS Lifecycle (์๋ช ์ฃผ๊ธฐ) ๊ฐ๋
๐คทโ๏ธ ๋ณธ๋ก ์ ์์ Nest JS ๊ฐ๋ ?Nest JS๋ Node JS ๊ธฐ๋ฐ์ผ๋ก ํ ์๋ฒ ์ดํ๋ฆฌ์ผ์ด์ ํ๋ ์์ํฌ ์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ์๋นํ ์ค๋ซ๋์ Express ๊ธฐ๋ฐ์ผ๋ก ์๋ฒ ์ดํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์์ ์๋์ ์ธ ์
cometruedream.tistory.com
https://cometruedream.tistory.com/242
๋ฆฌ์กํธ Vite Proxy ํ์ฉํ CORS ์ค๋ฅ ํด๊ฒฐ
๐คทโ๏ธ ๋ณธ๋ก ์ ์์ํ๋ก ํธ์๋ ๋ฒ๋ค๋ฌ ๊ฐ๋ ๊ณผ webpack vs vite ๋น๊ต์ ๋ํด์ ๊ณต๋ถ๋ฅผ ํ๊ณ ๊ธ์ ๋ณด์๋ฉด ๋ ๋ง์ ๋์์ด ๋ฉ๋๋ค^^ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ํ ๋ฒ๋ค๋ฌ ๊ฐ๋ ๊ณผ webpack vs vite ๋น๊ตhttps://comet
cometruedream.tistory.com
https://cometruedream.tistory.com/241
React ํด๋๊ตฌ์กฐ FSD ๊ธฐ๋ฅ ๋ถํ ์ค๊ณ ์ํคํ ์ฒ
๐คทโ๏ธ ๋ณธ๋ก ์ ์์ํ๋ก์ ํธ๋ฅผ ์์ํ๊ธฐ์ ์์ ํด๋ ๊ตฌ์กฐ, ์ค๊ณ์ ๋ํ ์ํคํ ์ฒ๋ฅผ ๋ง๋๋ ๊ฒ์ ์๋นํ ์ด๋ ต๋ค. ์ด๋ฒ ํ๋ก์ ํธ์ React FSD ํด๋๊ตฌ์กฐ ์ํคํ ์ฒ๋ฅผ ์ค๊ณํ ์์ ์ด๋ผ์ FSD ์ํคํ
cometruedream.tistory.com
https://cometruedream.tistory.com/244
์ฝ๊ฒ ์ดํดํ๊ณ ์ฌ์ฉํ ์ ์๋ Prisma ๋ช ๋ น์ด ์ ๋ฆฌ
๐คทโ๏ธ Prisma ๋ช ๋ น์ด ๋ณธ๋ก ์ ์์ Prisma๋?Nest JS ํ๋ ์์ํฌ์ Prisma ORM์ ํ์ฉํด์ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ Prisma๋ Node JS ๊ธฐ๋ฐ์ ํ๋ ์์ํฌ/๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ํธ์์ฉ์ด ์๋๋ฉฐ Prisma + DB ์ฐ๋์ผ
cometruedream.tistory.com
[์๋ฐ์คํฌ๋ฆฝํธ 2ํ] ์๋ฐ์คํฌ๋ฆฝํธ ์ซ์ ์๋ฃ๊ตฌ์กฐ์ ๊ฐ๋ ๊ณผ ๋ด์ฅํจ์
์ธ์์ ํฅํด ๋ฌ๋ ค - ์๋ฐ์คํฌ๋ฆฝํธ(javascript) ์ซ์ํ ๋ฐ์ดํฐ ์๋ฃ๊ตฌ์กฐ๋ ๋ชจ๋ ์ข ๋ฅ์ ์ํ์ ์ฐ์ฐ์ ์ํํ ์ ์๋ ์ค์ํ ๋ฐ์ดํฐ ํ์ ์ ๋๋ค. [์๋ฐ์คํฌ๋ฆฝํธ 2ํ] ์๋ฐ์คํฌ๋ฆฝํธ ์ซ์ ์๋ฃ๊ตฌ์กฐ์
fnfentermagazine.com
'Jquery' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์์ฆ ๋ง์ด ์ฐ์ด๋ gnb floating ์ ๋ง๋ค์ด๋ด์ (7) | 2021.08.04 |
---|---|
์ค๋์ floating ๋ง๋ค์ด๋ด์! (10) | 2021.07.23 |
์ค๋์ go-Top ๋ง๋ค์ด๋ด์ (10) | 2021.07.22 |
์ค๋์ Tab-Menu ๋ง๋ค์ด ๋ด์! (10) | 2021.07.21 |
Jquery ๊ธฐ๋ณธ๋ฌธ๋ฒ์ ์์๋ด์! (10) | 2021.07.20 |