웹미니 : 1인 기업 라이프

[운영일지]웹미니 라이프 스킨 1.6.10

빽짱구 — Tue, 18 Nov 2025 21:08:51 +0900

버전 : webmini life 1.6.10

업데이트 내역

- 페이지와 GNB 활성화 싱크 맞춤

- 메인 뉴스레터 내용없을때 영역 깨지는 문제수정

- 기타 CSS수정

수정된 파일

skin.html

style.css

script.js

*1.6버전 이후부터는 코드가 많이 변경되었으니 기존에 스킨 수정사항이 있다면 전체적용 후 수정해주세요.

업데이트시 주의할점

index.xml을 덮을경우 기존에 설정된 값들이 없어지므로 스킨편집 설정창을 새로 하나더 열어서 업로드하시고 기존 설정창에서 아무거나 수정 후 적용을 누르시면 기존 설정들이 다시 저장됩니다. 그후에 새로추가된 기능을 재설정하시면 됩니다.

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

[운영일지]웹미니 라이프 스킨 1.6.8~9

빽짱구 — Sun, 24 Aug 2025 22:12:54 +0900

버전 : webmini life 1.6.8~9

업데이트 내역

- 댓글/방명록 작성폼 위치변경 (UX개선)>

- 다크모드 '구독하기' 버튼 수정

- 모바일 GNB 여백수정

*1.6버전 이후부터는 코드가 많이 변경되었으니 기존에 스킨 수정사항이 있다면 전체적용 후 수정해주세요.

업데이트시 주의할점

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

웹미니 라이프 스킨 사용 시 체크 할 부분

빽짱구 — Fri, 22 Aug 2025 10:50:39 +0900

안녕하세요 웹미니 입니다.

웹미니 라이프 스킨 구매해주신 분들께 다시한번 감사드립니다.

구매해주신 분들 블로그를 종종 둘러보는데 체크 할 부분이 있어서 공지드립니다.

먼저 https://webmini.tistory.com/482534 에서 모듈 설정 방법을 숙지해주시기 바랍니다.

스킨 사용 시 크게 주의할 부분은 없지만, 두군데만 체크해주시면 될듯합니다.

1. 반응형 스킨이라 관리자 > 꾸미기 > 모바일 > 티스토리 모바일웹 자동 연결을 '사용하지 않습니다' 로 설정해주세요.

('사용합니다'로 설정시 티스토리에서 제공하는 모바일 화면이 보여집니다.)

2. 관리자 > 플러그인 > '카테고리 더보기' 해제해주세요.

스킨 자체에서 해당 기능은 제공하기때문에 스킨 설정에서 사용이 가능합니다.

해당 플러그인 사용시 '공감' 설명 애니메이션 위치가 맞지 않기 때문에 해당 플러그인은 해제해주세요.

위에 설정만 체크 부탁드리겠습니다.

웹미니 스킨을 구매해주셔서 다시 한번 감사드립니다.

[운영일지]웹미니 라이프 스킨 1.6.7

빽짱구 — Thu, 21 Aug 2025 17:11:38 +0900

버전 : webmini life 1.6.7

업데이트 내역

- (패치) '알림팝업' 안닫히는 문제 수정

- header / footer 100% 사이즈로 UI변경

- 개인(독립)도메인 사용시 로그인 풀리는 문제 자동 적용

*1.6버전 이후부터는 코드가 많이 변경되었으니 기존에 스킨 수정사항이 있다면 전체적용 후 수정해주세요.

업데이트시 주의할점

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

[잡담]왜 티스토리 메인은 먹고 떠나는 이야기뿐일까

빽짱구 — Mon, 7 Jul 2025 17:20:59 +0900

티스토리 메인을 열면 어김없이 등장하는 건 맛집, 카페, 제주도, 일본여행, 디저트 투어 이야기들이다. 콘텐츠는 넘쳐나지만, 어딘가 익숙하고 반복적이며 지루하다. 왜일까?

정말 티스토리에는 맛집과 여행 블로거만 존재하는 걸까?

물론 필자도 가끔 맛집이나 여행 후기를 올린다. 이 글은 그런 콘텐츠 자체를 비판하려는 것이 아니다.
단지, 티스토리라는 플랫폼의 ‘메인’이라면, 더 다양한 목소리와 콘텐츠가 함께 소개되길 바랄 뿐이다.

지금의 메인은 너무 편향되어 있다. 상위 노출 글 대부분이 비슷한 주제로 채워지다 보니, 다채로운 이야기들은 메인에 설 자리를 잃고, 결국 보는 사람도 쓰는 사람도 지루함을 느낀다.

[그땐 그랬지]웹미니 과거와 제로보드4 ~ XE시절

빽짱구 — Mon, 7 Jul 2025 16:14:35 +0900

그땐 그랬지 #1 제로보드와 웹미니

가끔 과거를 떠올리며 추억에 잠길 때가 있다.

요즘 들어 그런 시간이 더욱 잦아진다.

그 시절, 나는 어떤 마음으로 지냈고, 무엇이 좋았으며, 또 어떤 점이 힘들었는지…

문득문득 떠오르는 기억들을 그냥 흘려보내기 아쉬워서,

‘그땐 그랬지’라는 카테고리를 통해 당시의 생각과 경험들을 기록으로 남기고자 한다.

나와 같은 시기를 살아온 이들과 공감대를 나눌 수 있다면,

그 또한 이 글의 의미를 더욱 풍성하게 만들어줄 것이다.

그 첫 번째 이야기로는 웹미니와 제로보드4에 대해 풀어보려 한다.

이 두 단어는 내게 단순한 툴이나 사이트가 아닌,

그 시절의 열정과 즐거움, 그리고 커뮤니티의 소중한 기억들이 담긴 상징 같은 존재다.

웹미니가 있기까지 20년이란 세월이 지났다.

과거 자료를 찾다보니 재밋기도하고 피식 웃음이 나오기도 한다.

제로보드의 만남

사이트를 만들어보겠다고 2000년도에 로컬에서 '나모에디터'를 사용해서 장난삼아 만든게 계기가 되었었다.

서버 개념도 없는 그냥 로컬에서 html로 링크걸고, 이미지 넣고 하는게 대부분이었던거 같다.

군대를 제대하고 예전에 했던 기억을 되살려서 하나포스 무료 홈페이지를 신청해서 만들어 본게 본격으로 흥미를 가져다 준 기억이 난다.

그 후 당시 최고의 무료 계시판 CMS인 제로보드를 만나면서 본격적인 사이트 제작에 입문하게 된다.

첫 호스팅과 개인도메인을 구매했던 시기이기도 하다.

닉네임이 '빽짱구'라 backzzanggu.com 으로 얻었는데 그때 당시에는 도메인에 대한 애착이 나름 굉장했었다.

빽짱구닷컴 v2

v1은 찾질 못했고 2004년 1월에 만든 v2는 다행이 찾았다. 20년전 일이다

처음 '웹정'이란 웹폰트를 사용했었고, 제로보드4 스킨을 만들어 배포를 시작했던 시기이기도 하다.

제로보드 관리자화면

관리자 로그인화면

게시판 하단에 카피라이터가 나름 자부심 있는 공간이었다.

git 로 움직이는 배너 만드는것도 나름 재미있던 시절이다.

빽짱구닷컴 v3

같은해 6월에 버전업을 했는데 디자인이 마음에 들지 않아 얼마 사용안한 기억이 난다.

빽짱구닷컴 3.5 / 빽짱구닷컴 3.8

웹미니 v1 (그누보드)

2005년 10월 v3.8로 변경 후 2005년 11월경 webmini.net 이라는 커뮤니티형 사이트와 빽짱구닷컴을 통합하고 웹미니라는 타이틀 아래 webmini.net 로 도메인명을 바꾸었다. 이때 호스팅회사에서 무료로 서버를 지원해줘서 많은 시도를 해볼 수 있었던 시기이기도 했다

싸이월드처럼 회원개인마다 미니컴티라는 서비스를 제공하기도 했었다.

가장 활발히 활동했을때이고 제로보드 공홈에 '제로보드 설치 강좌'을 올려서 웹미니를 더 알리는 계기가 되기도했다.

물론 스킨제작에도 몰두해서 웹미니 스킨을 좋아하는 사람들도 생기게 되었다.

제로보드XE

웹미니 v4 (제로보드 XE)

제로보드XE가 업데이트 됨에 따라 웹표준을 준수하게 되었고, 2007년 9월쯤 기존 v3.8버전의 디자인을 버리고, DB만 살려서 XE로 옮기게 되었다. 나역시 웹디자인에서 퍼블리셔로 전향하는 시기였다.

웹미니 v4.5

4.5 버전으로 리뉴얼하면서 제로보드XE 스킨을 배포하기 시작한다.

위에 레이아웃이 나름 인기가 있었던걸로 기억한다.

웹미니 v5 / 웹미니 v5.5

웹미니 5.5버전으로 2018년까지 운영하다가 스팸글과 해킹으로 운영을 중단하고 블로그로 바꾸게 되었다.

현재는 운영은 하지않고 보관용(?)으로만 남겨두었는데 가끔 과거의 글들을 읽어보면 추억속에 빠지곤한다.

실수했던 기억들과 열정에 가득찬 글등..

어떻게 보면 내 젊은날을 함께했던 사이트이기에 버리진 못하고 추억으로만 간직하고 있는거 같다.

제로보드4~XE 당시에 활동했던 분들이 가끔 찾아와주고 알아봐주면 묘한 느낌과동시에 감사한 마음뿐이다.

'웹속의 작은공간'으로 제로보드와 20여년간 함께한 사이트를 추억으로 간직하며, 기록속에 저장한다.

https://web.webmini.net

웹미니 : 웹속의 작은 공간

재미있는 유머나 포토갤러리, 요즘 이슈되는글, 정치/사회, 웹팁등을 공유

web.webmini.net

[HTML]html 엔티티(Entity) 사용하는 이유와 종류

빽짱구 — Wed, 2 Jul 2025 15:39:51 +0900

HTML 엔티티(entity) 를 사용하는 이유는 단순히 "기호를 넣기 위해서"가 아니라 문법 충돌이나 예기치 않은 해석을 막기 위한 안전장치라고 보면됩니다.

브라우저가 특수기회를 html 코드로 착각할 수 있어서 특수기호는 엔티티로 변경을 해줘야합니다.

리액트에서는 > 를 넣으면 코드로 착각해서 오류가 발생되는 이유도 하나입니다.

특수문자(기호)

&	&	앰퍼샌드
<	<	less than
>	>	greater than
"	"	큰따옴표
'	'	작은따옴표 (HTML5부터 지원)
©	©	저작권
®	®	등록상표
™	™	상표
·	·	중간점 (·)
×	×	곱셈 기호 (×)
÷	÷	나눗셈 기호 (÷)
±	±	플러스마이너스 (±)
°	°	도 (°)
€	€	유로
£	£	파운드
¥	¥	엔화
¢	¢	센트
§	§	절(section) 기호
¶	¶	단락 기호

공백 & 제어 문자

(공백)		non-breaking space (띄어쓰기 고정)
(줄바꿈)	<br />	줄바꿈 (태그)
―	—	em dash (—)
–	–	en dash (–)

화살표 (Arrow)

←	←	왼쪽 화살표
→	→	오른쪽 화살표
↑	↑	위쪽 화살표
↓	↓	아래쪽 화살표
⇐	⇐	왼쪽 이중화살표
⇒	⇒	오른쪽 이중화살표
⇑	&uArr;	위쪽 이중화살표
⇓	&dArr;	아래쪽 이중화살표

수학 기호

∞	∞	무한대
≠	≠	같지 않음
≈	≈	근사치
≤	≤	작거나 같다
≥	≥	크거나 같다
∑	∑	합계
∏	∏	곱셈 (곱의 기호)
√	√	루트
∫	∫	적분

기타 유용한 기호

♠	&spades;	스페이드
♣	&clubs;	클로버
♥	&hearts;	하트
♦	&diams;	다이아몬드
☎	☎	전화기 (Unicode)
✉	✉	편지 (Unicode)

숫자형 엔티티 (예시)

모든 문자는 유니코드 숫자로도 사용할 수 있습니다.

> → >
< → <
& → &
A → A
가 → 가

엔티티를 사용하는 이유중에 보안상(XSS 방지) 이유도 있습니다.

[필독]웹미니 라이프 스킨 초기 구매자 분들

빽짱구 — Wed, 25 Jun 2025 10:00:40 +0900

안녕하세요 웹미니입니다.

웹미니 라이프 스킨 초기 버전(버전 1.4이하)을 구매하신 분들은 체크 부탁드립니다.

초기 버전에 웹미니 통계 분석을 위한 '구글 애널리틱스 코드'가 실수로 들어가있음을 확인했습니다.

그로인해 정확한 통계가 잡히질 않아서 웹미니 라이프 스킨 초기 버전을 사용하시는 분들은 최신 버전으로 업데이트 하시거나 업데이트를 하지 않는 분들은 아래 코드를 찾아서 삭제 부탁드립니다.

skin.html 파일입니다.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id="></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', '');
</script>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','');</script>
<!-- End Google Tag Manager -->

Google 로 찾으셔서 위와 같은 코드가 있으면 전부 지우시면 됩니다.

부탁드리겠습니다.

감사합니다.

[1인 기업] 직장 다니는 1인 기업인의 삶

빽짱구 — Fri, 20 Jun 2025 18:00:35 +0900

1인 기업을 설립한지 횟수로는 6년차이고 실제 5년이 넘어서고 있다.

1인 기업 시작부터 현재까지 어떠한 삶을 살고 있으며, 어떤 변화가 있었는지 기록하고자 한다.

'다시는 직장생활 안한다' 결심하고 1인 기업으로 성공해보고자 직원은 없지만 18년동안의 회사 생활의 경험으로 이것저것 시도를 해본 기간이었던거 같다.

결국 회사 생활을 다시하게됐지만, 1인 기업으로서 작게 나마 여러가지 시도는 하고 있는중이다.

그럼 현재 회사생활을 왜 하는지와 1인 기업으로서 어떤 노력들을 하고 있는지 기록해본다.

회사 생활을 하게된 이유

핵심은 고정비용이다.

수익보다 고정비용이 더 많이 나가게 된 이유가 회사 생활을 하게된 결정적인 요인이다.

살아감에 있어, 여유롭진 못해도 먹고 살아야하는게 첫번째가 아닌가싶다.

혼자면 모르겠지만 딸린 식구가 있다보니 그게 가장 큰이유이다.

'유지하는게 굉장히 힘든거구나'라고 한가지 깨달음이 있었다.

회사 생활을 했을때는 크게 와닿지 않았었는데 1인 기업을 하면서 절실하게 느끼게 됐다.

혹시나 1인 기업을 운영하시는 분들이 이글을 본다면, 고정비용을 꼭 줄이라고 말하고 싶다.

현재 회사 다닌지 벌써 2년이 됐고, 지금의 삶은 기존 회사 생활하듯 삶의 일부가 되버렸다.

1인 기업의 노력

노력일까? 발버둥일까?

분명 방치는 아닌거 같은데...

그냥 자존심과 희망이라고 해두자!

태어나서 처음 사업자를 냈는데, 그래도 갑빠가 있지..

사실 수익은 거의 없다.. 있어도 술값정도? 라고 해두자.

회사 끝나고 뭐를 하기에는 몸이 너무힘들고, 무언가를 하더라도 주말에 잠깐 하게 되는데 요새는 딱히 떠오르는 구상이 없어서 현재는 티스토리 유료스킨 판매 하나로 1인 기업을 유지중이다. 구글광고 수익도 거의 없다고해도 무방하다.

그래서 '발버둥'이라는 단어가 생각났었다.

가끔 퍼블리싱 알바거리가 생기면 진행하는데, 그것도 아주 가끔이다.

내가 생각하는 1인 기업은 '잠자는 시간에도 수익이나는 구조'이다.

시간=돈 이기에 무언가를 하기위해 계속 내가 움직여야하고 시간을 뺏겨 자유롭지 못하다면 그건 내가 바라는 1인 기업형태가 아니다.

현재 판매되고 있는 티스토리 스킨이 그나마 성격이 비슷한데 잠자는 시간에도 수익이나는게 뭐가 있을지는 항상 고민중이다.

확신은 아니지만 확신이 오는날이 오겠지라며 작은 희망을 가지고 있는것이다.

앞으로 뭐먹고 살지?

어쩌면 대한민국 아빠들의 공통적인 고민이 아닐까 생각한다.

[운영일지]웹미니 라이프 스킨 1.6.6 - 패치

빽짱구 — Mon, 16 Jun 2025 15:32:07 +0900

버전 : webmini life 1.6.6

업데이트 내역

- 메인설정 최신글일때 모바일에서 스크롤생기는 현상 수정

*1.6버전 이후부터는 코드가 많이 변경되었으니 기존에 스킨 수정사항이 있다면 전체적용 후 수정해주세요.

업데이트시 주의할점

참고 이미지

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

[Git]내부망 VDI와 로컬 PC에서 Git 협업하기

빽짱구 — Thu, 12 Jun 2025 15:55:51 +0900

프로젝트 진행 시 두개의 Git을 통해 협업하는 방법입니다.

상황

1. 외부망(로컬), 내부망(VDI)

2. 내부망(VDI) git저장소를 외부에서 보안상 문제로 가져오지 못하는 상황

3. VDI의 속도가 느려 외부망(로컬)에서 작업해야하는 경우외에 재택해야하는 상황

준비사항

- 외부에서 올릴 수 있는 git 저장소 필요

설정하기

외부망(로컬)

개인 git, 혹은 외부에서 접속가능한 저장소가 필요하며 로컬에 셋팅은 다음과 같습니다.

로컬에 개인 git 저장소를 추가해줍니다.

git remote add origin 개인git주소

추가된 저장소 확인

git remote -v

내부망(VDI)

내부망에서는 기존 내부망에서 사용하던 git 저장소외에 외부 저장소를 추가해줍니다.

체크해야할게 식별하기 편하게 내부저장소 이름이 origin 이라면 외부망(로컬) git 저장소 명을 local로 추가해줍니다. (이름은 아무거나 상관없음)

git remote add local 개인git저장소

기존에 내부망 git 셋팅이 된후를 가정했을때 추가된 로컬 저장소를 확인

git remote -v

local 개인git주소 (fetch)

local 개인git주소 (push)

origin 내부망git주소 (fetch)

origin 내부망git주소 (pull)

위와 같이 추가된걸 볼수가 있습니다.

작업방법

먼저 내부망(VDI)에 있는 파일을 로컬git으로 보냅니다.

git 흐름도

브랜치가 feature/dev 가정하고 설명하겠습니다.

최초 내부망(VDI)에서 push하기

git push local feature/dev

외부저장소 이름을 'local' 로 했기때문에 local로 push를 해줍니다.

외부망(로컬)에서 pull 받기

git pull origin feature/dev

작업 진행순서

이제 로컬pc에서 작업하면 되고 작업 후에는 원래 하듯이 fetch하고 pull받고 push하면 됩니다.

만약 외부망 git을 여러사람이 사용한다면 merge도 해야겠죠.

그리고 내부망(VDI)에서는 로컬에서 작업한 local 저장소에서 pull을 받으시면 됩니다.

git fetch local feature/dev
git pull local feature/dev

그리고 merge할게 있으면 병합한 후에 다시 외부망(로컬) git으로 push합니다.

git push local feature/dev

다시 로컬에서 작업하려면 외부망(로컬)pc에서 pull 받으면 되겠죠?

위와 같은 작업루틴입니다.

흐름도를 보시면 이해하는데 도움이 되리라 생각됩니다.

[Git]git branch 대표적인 네이밍 규칙

빽짱구 — Wed, 11 Jun 2025 10:50:30 +0900

git 브랜치 생성시 종류별 네이밍 규칙과 설명입니다.

브랜치 생성 및 이동

먼저 브랜치 생성 명령어는 다음과 같습니다.

브랜치 생성

git branch 브랜치이름

예시 (퍼블 개발 브랜치일경우)

git branch feature/pub/dev

브랜치 생성 후 이동(체크아웃)

git checkout -b 브랜치이름

특정 브랜치로부터 분기해서 새 브랜치 만들기

git checkout -b 새브랜치 기존브랜치

git 2.23이상에서 사용 가능한 새로운 방식 (switch)

git switch -c 브랜치이름

브랜치 이름과 설명

feature/	새로운 기능 개발
bugfix/	일반적인 버그 수정
hotfix/	긴급한 버그 수정 (운영 중단 등)
release/	릴리즈 준비용 브랜치
chore/	기능과 무관한 잡일 (패키지 업데이트 등)
test/	테스트 관련 작업
docs/	문서 수정

프로젝트마다 일부 차이는 있겠지만, 통상적으로 위와 같은 네이밍으로 많이들 생성합니다.

[운영일지]웹미니 라이프 스킨 1.6.5

빽짱구 — Tue, 10 Jun 2025 17:53:44 +0900

버전 : webmini life 1.6.5

업데이트 내역

- 웹접근성 마크업 수정 및 CSS 변경

*1.6버전 이후부터는 코드가 많이 변경되었으니 기존에 스킨 수정사항이 있다면 전체적용 후 수정해주세요.

업데이트시 주의할점

참고 이미지

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

[운영일지]웹미니 라이프 스킨 1.6.4

빽짱구 — Wed, 4 Jun 2025 09:53:44 +0900

버전 : webmini life 1.6.4

업데이트 내역

- 목차 스크립트 수정

- 기타 스타일 수정

*1.6버전 이후부터는 코드가 많이 변경되었으니 기존에 스킨 수정사항이 있다면 전체적용 후 수정해주세요.

업데이트시 주의할점

참고 이미지

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

[운영일지]웹미니 라이프 스킨 1.6.3 (패치)

빽짱구 — Tue, 27 May 2025 14:42:06 +0900

버전 : webmini life 1.6.3

업데이트 내역

- 사이드바(카테고리)에서 글 카테고리 매칭문제로 펼침이 안되는 문제 수정 (script.js)

- 코드뷰 관련 css 수정

- 자잘한 스타일 수정

*1.6버전 이후부터는 코드가 많이 변경되었으니 기존에 스킨 수정사항이 있다면 전체적용 후 수정해주세요.

업데이트시 주의할점

참고 이미지

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

[운영일지]웹미니 라이프 스킨 1.6.2 (속도개선)

빽짱구 — Fri, 23 May 2025 13:58:48 +0900

버전 : webmini life 1.6.2

업데이트 내역

- 폰트 수정 (Pretendard Variable 로 통합)

- 사용하지 않는 파일 삭제(폰트관련 파일등)

- CSS코드 정리 및 스타일 수정

속도 개선을 위한 불필요한 호출 파일들 제거

*1.6버전 이후부터는 코드가 많이 변경되었으니 기존에 스킨 수정사항이 있다면 전체적용 후 수정해주세요.

업데이트시 주의할점

참고 이미지

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

[운영일지]웹미니 라이프 스킨 1.6.1

빽짱구 — Mon, 19 May 2025 09:54:25 +0900

버전 : webmini life 1.6.1

업데이트 내역

-관리자 설정에서 '유투브' 주소 입력시 페이스북 아이콘 출력되는 오류수정

*많은 코드가 변경되었기 때문에 기존 구매자중에 스킨수정을 하신분들은 1.6버전으로 전체 적용후에 수정된 부분만 1.6버전으로 옮겨야합니다. (백업필수), 1.6이후 사용자 모두 포함입니다.

업데이트시 주의할점

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

웹미니 라이프 스킨 1.6 버전 사용하실 경우

빽짱구 — Fri, 16 May 2025 14:43:42 +0900

안녕하세요 웹미니 운영자입니다.

웹미니 라이프 스킨이 버전 1.6으로 업데이트 됐습니다.

웹미니 스킨 업데이트 사항은 운영일지에 기록하고 있지만, 공지를 하는 이유는 많은 부분이 업데이트 되었기 때문입니다.

기존 사용자중에 스킨을 변형해서 사용하시는 분들은 1.6으로 전체 적용 후 재수정 해주셔야합니다.

수정된 부분 일부만 옮길 경우 오류가 발생할 수 있습니다.

index.xml / skin.html / style.css / scrip.js 모두 상당부분 코드와 class명이 수정되었습니다.

CSS에서 변수 컬러명도 변경되었기 때문에 전체 적용을 하시길 바랍니다.

앞으로 1.6버전 기준으로 계속 업데이트가 되오니, 업데이트를 받고자 하시는 분들은 꼭 전체적용 부탁드립니다.

(업데이트 없이 기존버전에 만족할경우 안하셔도 무관하긴하나 중복된 코드 개선과 추가된 기능은 아쉬울수 있습니다.)

업데이트 내용과 기능은 아래글을 참고하시기 바랍니다.

감사합니다.

https://webmini.tistory.com/482539

웹미니 라이프 스킨 특징

웹미니 라이프 티스토리 스킨 특징- 검색엔진최적화(SEO)- 웹접근성 준수- 반응형 지원- 기업용 블로그에도 적합- 프로모션 기능- 자동 다크모드 지원- 화면 확대 기능- 내비게이션 꾸미기- 카테고

webmini.tistory.com

[운영일지][운영일지]웹미니 라이프 스킨 1.6

빽짱구 — Fri, 16 May 2025 14:12:38 +0900

버전 : webmini life 1.6

업데이트 내역

- CSS 네이밍과 중복 코드수정 html class명 수정(변수명 포함)

*많은 코드가 변경되었기 때문에 기존 구매자중에 스킨수정을 하신분들은 1.6버전으로 전체 적용후에 수정된 부분만 1.6버전으로 옮겨야합니다. (백업필수)

업데이트시 주의할점

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

[CSS]BEM(Block, Element, Modifier) 방법론 클래스명 규칙 살펴보기

빽짱구 — Fri, 16 May 2025 13:59:27 +0900

BEM(Block, Element, Modifier)은 CSS 클래스 명명 규칙 중 하나로, 유지 보수와 재사용성을 높이고 CSS 구조를 명확하게 만들기 위해 사용된다.

B__E--M

class명을 작성할때 이름을 어떤걸로 할지 햇갈릴경우 BEM 규칙을 활용하면 이름을 정할때 많은 도움이 된다.

이미지 출처 : https://getbem.com/

W3C는 스타일링에 대해 다음과 같은 원칙을 제시한다.

원칙	설명
구조와 표현의 분리	HTML은 구조, CSS는 스타일을 담당해야 함
선택자의 명확성과 유지 보수성	CSS 선택자는 명확하고 예측 가능해야 함
접근성과 호환성 고려	클래스 네이밍과 구조는 의미 있고 일관성 있어야 함

BEM이란?

BEM 은 프런트엔드 개발에서 재사용 가능한 구성 요소와 코드 공유를 만드는 데 도움이 되는 방법론입니다.

기본 구조 : block__element--modifier (블록__요소--상태)

구성 요소	설명
Block	독립된 컴포넌트 단위 (예: card, btn)
Element	block 내부 구성요소 (예: card__title, btn__icon) (Block에 종속됨)
Modifier	상태 또는 변형 (예: btn--primary, card__title--highlighted)

Block: .block
Element: .block__element
Modifier: .block--modifier 또는 .block__element--modifier

- 하이폰과 _ 언더바 두개로 구분을 지어준다.

BEM 규칙으로 할경우 다음과 같은 장점이 있다.

클래스 이름만 보고 구조를 유추할 수 있음
CSS 충돌 방지
재사용성과 유지 보수성 향상
대규모 프로젝트에 적합

BEM 예시

<button class="btn btn--primary">
  <span class="btn__icon btn__icon--clickable"></span>
</button>

레이아웃 구조 HTML 예시

<body class="page">

  <header class="page__header header">
    <div class="header__logo">MyLogo</div>
    <nav class="header__nav nav">
      <ul class="nav__list">
        <li class="nav__item"><a href="#" class="nav__link">Home</a></li>
        <li class="nav__item"><a href="#" class="nav__link">About</a></li>
        <li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main class="page__main main">
    <section class="main__content content">
      <h1 class="content__title">Welcome</h1>
      <p class="content__text">This is the main content area.</p>
    </section>

    <aside class="main__sidebar sidebar">
      <h2 class="sidebar__title">Sidebar</h2>
      <ul class="sidebar__menu">
        <li class="sidebar__item">Item 1</li>
        <li class="sidebar__item">Item 2</li>
      </ul>
    </aside>
  </main>

  <footer class="page__footer footer">
    <p class="footer__text">© 2025 MyCompany</p>
  </footer>

</body>

-각 Block은 독립적이며, 재사용 가능하게 만든다.
-Modifier가 필요할 경우 --active, --dark, --large 같은 클래스를 추가하여 상태나 버전을 표현한다.
-위 구조는 SCSS 구조화, Tailwind 적용, 컴포넌트 기반 개발에도 응용이 가능하다.

참고자료

https://getbem.com/

BEM — Block Element Modifier

Flexible Using BEM, methodologies and tools can be recomposed and configured the way you like.

getbem.com

[운영일지]웹미니 라이프 스킨 1.5.4

빽짱구 — Tue, 13 May 2025 15:18:50 +0900

버전 : webmini life 1.5.4

업데이트 내역

- 댓글/방명록 최신순으로 리스트 정렬 기능 추가

댓글과 방명록 기존 과거순에서 최신등록순으로 노출이 됩니다. (활성화하면 최신글이 상단에 노출됩니다)

업데이트시 주의할점

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

[리뷰]에어팟(AirPods)3 케이스 내셔널지오그래픽(실제 착용샷)

빽짱구 — Fri, 25 Apr 2025 10:05:39 +0900

얼마전 에어팟3가 강아지의 장난감이 되는 불상사가 일어났다.

신경안쓰고 다니다가 뭔가 변화를 줘야할거 같아서 내셔널지오그래픽 러기드 범퍼 오토 락 케이스를 구매했는데 생각보다 디자인도 괜찮고 견고한 부분이 있어서 리뷰해본다.

일단 튼튼함이 느껴지고 실제보면 귀엽다(?) 정도로 표현할수 있겠다.

장점

오토락 방식으로 뚜껑이 쉽게 열리지 않아서 가방 안에서도 이어폰이 분리되지 않는다.
카라비너 포함이라 가방, 벨트루프 등에 걸 수 있어서 휴대성도 좋다

뚜껑에 조그만 자석이 부착되어 있고, 견고하게 잘만들어짐을 알수있다.

무선충전시 케이스를 제거하지 않아도 잘되며, 무엇보다 디자인이 맘에 든다.

에어팟3 케이스로 추천해본다.

[운영일지]웹미니 라이프 스킨 1.5.3(패치)

빽짱구 — Tue, 22 Apr 2025 16:54:30 +0900

버전 : webmini life 1.5.3(패치)

업데이트 내역

- 사이드바 좌측 설정일경우 '본문집중모드' 위치 안맞는 문제 수정

- 홈 커버 설정 (제목리스트 수정, 숫자리스트 추가 / 여백 및 자잘한 스타일 수정)

- css 코드 정리

업데이트시 주의할점

코드 일부 누락이 있어서 수정되었으니 구매하신 분들은 판매사이트에서 재다운로드 받아주세요.

스킨 수정을 많이하신 분들은 수정된 코드를 찾아서 해당 부분만 수정해주셔도 됩니다. (141번줄입니다)

수정전 코드

수정후 코드

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

[운영일지]웹미니 라이프 스킨 1.5.2

빽짱구 — Fri, 18 Apr 2025 15:58:57 +0900

버전 : webmini life 1.5.2

업데이트 내역

- 폰트사이즈 px --> rem으로 변경 및 사이즈업

- 상단 프로필 레이어영역 보강 (로그인,로그아웃 추가)

- 기타 스타일 수정 및 불필요한 요소 제거

업데이트시 주의할점

스킨 구매하기

웹미니 | 티스토리 웹미니 라이프 스킨

티스토리 웹미니 라이프 스킨입니다.

ctee.kr

[운영일지]웹미니 라이프 스킨 1.5.1

빽짱구 — Wed, 16 Apr 2025 13:16:48 +0900

버전 : webmini life 1.5.1

업데이트 내역

- 최신글 제목 리스트 타입 추가

업데이트시 주의할점

스킨 구매하기

[운영일지]웹미니 라이프 스킨 1.4.2

빽짱구 — Tue, 15 Apr 2025 10:30:07 +0900

버전 : webmini life 1.4.2

업데이트 내역

- 외부 RSS 주소 등록 지원

- 자잘한 스타일 수정

외부 RSS 주소 ex)https://feedburner.google.com/를 사용할 경우 관리자에서 외부 RSS 주소를 등록하게 되면 푸터 하단에 주소가 변경됩니다.

업데이트시 주의할점

스킨 구매하기

[여행]거제도 여행, 바람의 언덕 도장포 유람선에서 외도 보타니아 가기

빽짱구 — Mon, 30 Dec 2024 14:55:08 +0900

두 번째 거제도 여행이다.

10년 전쯤으로 기억하는데 그때는 날씨가 좋지 않아 외도 보타니아를 가보질 못해서 아쉬웠었다.

최우선적으로 외도를 가보자는 생각으로 일정을 잡았다.

어차피 '바람의 언덕'을 가야 하는 일정이 있었기에, 외도를 가는 여러 방법 중에서 우리는 '바람의 언덕' 도장포 유람선을 선택하게 되었다.

주차장에 바로 도장포 매표소가 있으며, 주차는 그곳에 하면된다. (유람선 탑승객에 한함)

바람의 언덕

가격은 성인기준 1인당 입장료(11,000원) + 유람선(23,000원) = 34,000원 정도 했다.

(참고로 외도에 상륙하지 않고, 유람선으로만 관광하실 거면 1코스 유람선만 지불하면 된다.)

개인적으로 2코스 외도 관광까지 추천한다.

도장포 선착장

출항시간대는 고정시간이 아니라서 미리 알아봐야 한다. 시간이 맞지 않을 경우 '바람의 언덕' 한 바퀴 둘러보고 횟집에서 식사하면서 기다려도 된다.

해금강을 들러서 외도에 상륙하는 2코스를 선택했다.

1코스는 좌측, 2코스는 우측에서 기다리면 2코스 인원은 명찰을 나눠주고받아서 탑승하면 된다.

도장포 유람선인데 그냥 좌석이 있는 일반 유람선이라 기대할 필요는 없다.

입장권 구매하는 곳 안에 편의점이 있는데 새우깡은 꼭 하나 사가시길 추천한다. (갈매기 관심 끌기용)

새우깡을 던져주면 엄청 몰리기 시작한다.

손에 새우깡을 들고 있으면 갈매기가 스틸해 가는데 겁먹지 않아도 된다.

해금강을 보면서 느낀 게 영화 '킹콩'에서 나온 바위? 느낌이 제일 먼저 생각났다.

20~30분 정도 가면 외도에 도착한다.

외도는 사유지인데 외도에 가보면 어떻게 만들어졌는지 사진과 역사가 전시되어 있다.

오르막길이 많긴 한데 한 번쯤은 가볼 만하다.

경치도 좋고 사진 찍을 곳도 많고...

로마 신화 느낌을 주는 이곳도 잘 꾸며 놓았다.

커피숍도 있고 간단한 간식 파는 곳도 있다.

여름에는 많이 더울 듯하고, 너무 춥지 않은 날씨에 가보면 좋은 경험이 될 거 같다.

거제도에 가면 꼭 외도에 가보길 추천한다.

[Mac]맥에서 영문 첫글자 대문자로 변경 안되게 하기

빽짱구 — Tue, 17 Dec 2024 13:38:39 +0900

맥에서 메모하다 보면 영문 첫글자가 대문자로 자동으로 변경될때가 있습니다.

그럴경우 아래에서 설정을 변경해주면 됩니다.

시스템 설정 > 키보드 > 텍스트 입력 (입력소스 편집)

'자동으로 단어를 대문자로 시작' 체크 해제

체크해제를 하면 첫글자가 대문자로 자동 변경되지 않습니다.

[React]npm과 yarn이란?

빽짱구 — Fri, 6 Dec 2024 14:55:27 +0900

react는 페이스북(Facebook, 현재 메타 Platforms)의 소프트웨어 엔지니어였던 **조던 워크(Jordan Walke)**가 개발했습니다. 그는 2011년에 React의 초기 버전을 만들었으며, 이는 Facebook에서 내부적으로 사용되던 XHP라는 PHP 기반 라이브러리에서 영감을 받았습니다.

React는 처음에는 Facebook의 뉴스피드와 Instagram에 사용되었으며, 2013년에 오픈 소스로 공개되었습니다. 공개된 이후로 React는 웹 개발 커뮤니티에서 큰 인기를 얻었고, 현재는 전 세계적으로 가장 널리 사용되는 프론트엔드 라이브러리 중 하나로 자리 잡았습니다.

리액트를 사용하려면 npm or yarn을 통해 라이브러리를 내려받아야합니다.

npm(Node Package Manager)과 Yarn은 JavaScript 패키지 매니저로, Node.js 프로젝트에서 라이브러리와 의존성을 설치하고 관리하는 도구입니다. 두 도구는 유사한 기능을 제공하지만, 차이점도 있습니다.

1. 기본 소개

npm
- Node.js의 기본 패키지 매니저로, Node.js 설치 시 함께 제공됩니다.
- 2010년에 처음 출시되었으며, JavaScript 생태계에서 가장 오래되고 널리 사용되는 도구 중 하나입니다.
Yarn
- Facebook에서 npm의 한계를 개선하기 위해 2016년에 개발한 패키지 매니저입니다.
- 더 빠르고 신뢰성 높은 패키지 설치를 목표로 만들어졌습니다.

2. 차이점 비교

항목	npm	Yarn
속도	초기에는 느렸으나, 최신 버전(npm 5 이상)에서 크게 개선됨.	캐싱과 병렬 다운로드로 더 빠른 속도 제공.
설치 명령어	npm install	yarn install
의존성 잠금 파일	package-lock.json 사용	yarn.lock 사용
병렬 다운로드	버전 5 이전에는 지원하지 않음.	기본적으로 병렬 다운로드 지원.
오프라인 캐싱	버전 5 이후 지원.	처음부터 강력한 오프라인 캐싱 제공.
보안	npm audit로 취약점 점검 가능.	설치 시 자동으로 취약점 점검.
모노레포 지원	추가 패키지(lerna 등) 필요.	기본적으로 지원 (Yarn Workspaces).
기본 제공	Node.js 설치 시 포함.	별도로 설치 필요.

3. npm과 Yarn의 주요 특징

npm

Node.js에 기본 포함되어 있어 추가 설치가 필요하지 않습니다.
의존성 관리와 속도가 버전 5 이후로 크게 개선되었습니다.
커뮤니티가 크고, 문서와 지원이 풍부합니다.

Yarn

안정성과 속도가 뛰어나며, 특히 큰 프로젝트에서 유리합니다.
Yarn Workspaces로 모노레포를 쉽게 관리할 수 있습니다.
설치 속도가 빠르고, 오프라인 캐싱이 강력합니다.

4. 선택 기준

npm: 간단한 프로젝트나 이미 Node.js가 설치된 환경에서 추가 설치 없이 사용하고 싶다면 적합합니다.
Yarn: 대규모 프로젝트나 빠르고 효율적인 의존성 관리가 필요한 경우에 더 나은 선택입니다.

최신 npm 버전에서는 대부분의 기능이 개선되어 둘의 차이가 점점 줄어드는 추세입니다. 하지만 특정 워크플로우에서는 여전히 Yarn이 유리할 수 있습니다.

npm 설치 방법

npm은 Node.js 설치 시 기본적으로 포함되어 있습니다. 따라서 Node.js를 설치하면 npm도 함께 사용할 수 있습니다.

npm 설치 절차:

Node.js 공식 웹사이트로 이동합니다.
최신 LTS (Long Term Support) 버전을 다운로드합니다.
- LTS는 안정적인 버전으로 권장됩니다.
설치 프로그램을 실행하고 안내에 따라 Node.js를 설치합니다.
설치 완료 후, 터미널에서 다음 명령어로 버전을 확인합니다:
bash

코드 복사

node -v # Node.js 버전 확인 npm -v # npm 버전 확인

Yarn 설치 방법

Yarn은 별도로 설치해야 하며, 설치 방법은 몇 가지 옵션이 있습니다.

a. npm을 사용하여 설치 (간단한 방법)

npm이 이미 설치되어 있다면, 다음 명령어로 Yarn을 설치할 수 있습니다

npm install -g yarn

설치 완료 후 Yarn 버전을 확인합니다

yarn -v

설치 확인

설치가 완료되면, 아래 명령어로 설치 상태를 확인합니다:

bash

코드 복사

npm -v # npm 버전 확인 yarn -v # Yarn 버전 확인

두 도구의 동시 사용

npm과 Yarn은 동일한 프로젝트에서 함께 사용할 수 있지만, 일반적으로 하나의 패키지 매니저만 사용하는 것이 좋습니다.
프로젝트 디렉토리에 package-lock.json(npm) 또는 yarn.lock(Yarn) 파일이 있는 경우, 해당 매니저를 유지하는 것이 권장됩니다.

[Javascript]HTMLCollection과 querySelector의 차이

빽짱구 — Thu, 5 Dec 2024 11:45:36 +0900

HTMLCollection과 querySelector (또는 querySelectorAll)의 차이는 주로 반환 객체의 형태, 동작 방식, 사용 사례에 있습니다. 이를 아래에서 자세히 비교합니다.

1. 반환 객체의 차이

메서드	getElementsByClassName, getElementsByTagName, 등	querySelector, querySelectorAll
반환 객체	HTMLCollection	Element 또는 NodeList
실시간 업데이트	문서가 변경되면 자동 업데이트	문서가 변경되어도 업데이트되지 않음
다중 요소 선택	항상 여러 요소를 반환 (HTMLCollection)	querySelector: 첫 번째 요소만 반환 querySelectorAll: NodeList로 모든 요소 반환

예시

// HTML 구조
<div class="item">Item 1</div>
<div class="item">Item 2</div>

<script>
// HTMLCollection
let items = document.getElementsByClassName('item');
console.log(items); // HTMLCollection(2) [div.item, div.item]

// querySelectorAll
let itemsQuery = document.querySelectorAll('.item');
console.log(itemsQuery); // NodeList(2) [div.item, div.item]
</script>

2. 실시간 업데이트 여부

HTMLCollection: 실시간으로 업데이트됩니다.
- DOM이 변경되면 HTMLCollection도 자동으로 반영됩니다.
- 예: 새로운 요소를 추가하거나 삭제할 때.
NodeList (querySelectorAll): **정적(static)**입니다.
- DOM 변경 이후에도 NodeList는 처음 선택된 상태를 유지합니다.
- 하지만 NodeList는 live 상태로 작동할 수도 있는데, 이는 childNodes 같은 다른 메서드로 생성된 경우에만 해당됩니다.

실시간 업데이트 예제

let itemsHTML = document.getElementsByClassName('item');
let itemsQuery = document.querySelectorAll('.item');

// DOM 변경
let newDiv = document.createElement('div');
newDiv.className = 'item';
document.body.appendChild(newDiv);

console.log(itemsHTML.length); // HTMLCollection: 자동 업데이트 → 3
console.log(itemsQuery.length); // NodeList: 업데이트되지 않음 → 2

3. 배열 메서드 사용 가능 여부

HTMLCollection: 배열 메서드 사용 불가
- forEach, map, filter 등 배열 메서드를 직접 사용할 수 없습니다.
- 배열로 변환해야 합니다: Array.from() 또는 [...collection].
NodeList: 배열 메서드 일부 사용 가능
- querySelectorAll로 반환된 NodeList는 **forEach**를 지원합니다.
- 그러나 map, filter 등은 지원하지 않으므로 필요 시 배열로 변환해야 합니다.

배열 메서드 예제

let itemsHTML = document.getElementsByClassName('item');
let itemsQuery = document.querySelectorAll('.item');

// HTMLCollection → 배열 변환 후 메서드 사용
Array.from(itemsHTML).forEach(item => console.log(item.textContent));

// NodeList는 forEach 지원
itemsQuery.forEach(item => console.log(item.textContent));

4. 선택 방식

HTMLCollection:
- 요소를 태그 이름이나 클래스 이름으로만 선택합니다.
- ID, 복잡한 CSS 선택자 등을 지원하지 않습니다.
- 메서드: getElementsByTagName, getElementsByClassName.
querySelector / querySelectorAll:
- CSS 선택자를 사용하여 ID, 클래스, 태그, 속성 등을 포함한 복잡한 선택이 가능합니다.
- 매우 유연하며 최신 개발에 더 적합합니다.

선택 방식 비교

// HTMLCollection
let itemsHTML = document.getElementsByClassName('item'); // 클래스 선택

// querySelector
let firstItem = document.querySelector('.item'); // 첫 번째 요소만
let itemsQuery = document.querySelectorAll('.item[data-active="true"]'); // 복잡한 선택자 지원

5. 사용 사례

HTMLCollection	querySelector / querySelectorAll
간단한 선택: 태그 이름, 클래스 이름만 필요	복잡한 CSS 선택자를 사용할 때 적합
실시간 DOM 변경 사항 추적이 필요한 경우	정적 NodeList가 필요하거나 최신 DOM 작업에 적합
과거 레거시 코드와 호환성이 필요할 때	최신 브라우저를 대상으로 더 현대적인 개발을 할 때

결론

현대적인 DOM 조작에서는 **querySelector 및 querySelectorAll**이 더 유연하고 직관적이므로 선호됩니다.
HTMLCollection은 레거시 코드나 간단한 작업에서 여전히 사용할 수 있지만, 대부분의 경우 더 강력한 CSS 선택자를 제공하는 querySelectorAll을 사용하는 것이 더 적합합니다.

[Javascript]HTMLCollection을 반환하는 주요 DOM 메서드

빽짱구 — Thu, 5 Dec 2024 11:38:04 +0900

HTMLCollection을 반환하는 주요 DOM 메서드

document.getElementsByTagName(tagName)
- 특정 태그 이름을 가진 모든 요소를 선택합니다.
- 예: document.getElementsByTagName('div')
  → <div> 태그를 모두 포함하는 HTMLCollection 반환.
document.getElementsByClassName(className)
- 특정 클래스를 가진 모든 요소를 선택합니다.
- 예: document.getElementsByClassName('item')
  → 클래스가 item인 모든 요소를 포함하는 HTMLCollection 반환.
document.forms
- 현재 문서의 모든 <form> 요소를 선택합니다.
- 예: document.forms
  → 문서의 모든 <form> 태그를 포함하는 HTMLCollection 반환.
document.images
- 현재 문서의 모든 <img> 요소를 선택합니다.
- 예: document.images
  → 모든 이미지 요소를 포함하는 HTMLCollection 반환.
document.links
- 현재 문서의 모든 <a> 요소 중 href 속성이 있는 것만 선택합니다.
- 예: document.links
  → 링크 요소만 포함하는 HTMLCollection 반환.
document.scripts
- 현재 문서의 모든 <script> 요소를 선택합니다.
- 예: document.scripts
  → 모든 <script> 태그를 포함하는 HTMLCollection 반환.
document.getElementsByName(name)
- 특정 name 속성을 가진 모든 요소를 선택합니다.
- 예: document.getElementsByName('username')
  → name 속성이 username인 모든 요소를 포함하는 HTMLCollection 반환.

HTMLCollection의 특징

실시간 라이브 업데이트
- HTMLCollection은 문서 구조가 변경되면 자동으로 업데이트됩니다.
  예: DOM에 요소를 추가하거나 삭제하면 HTMLCollection도 즉시 반영됩니다.
배열처럼 접근 가능
- 인덱스를 사용하여 특정 요소에 접근할 수 있습니다.
  
  let items = document.getElementsByClassName('item');
  
  console.log(items[0]); // 첫 번째 요소
배열 메서드 미지원
- 배열처럼 보이지만 실제 배열이 아니므로 forEach, map, filter 같은 배열 메서드를 사용할 수 없습니다.
- 대신 for 또는 for...of 루프를 사용하거나, 배열로 변환해야 합니다.
  
  let itemsArray = Array.from(document.getElementsByClassName('item'));
  
  itemsArray.forEach(item => console.log(item));
length 속성 지원
- 컬렉션에 포함된 요소의 개수를 반환합니다.
  
  console.log(items.length); // HTMLCollection에 포함된 요소의 수

HTMLCollection 사용 예제

<ul id="list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

<script>
  let items = document.getElementsByClassName('item');
  console.log(items.length); // 3
  console.log(items[1].textContent); // "Item 2"
</script>

HTMLCollection은 간단한 작업에 적합하지만, 최신 DOM 작업에서는 querySelectorAll로 반환되는 NodeList를 사용하는 것이 더 유연하고 강력합니다.

[Javascript]DOM Script 이벤트와 선택자

빽짱구 — Thu, 5 Dec 2024 11:07:12 +0900

이벤트

HTML DOM에서 지원하는 스크립트 이벤트 종류는 웹 페이지에서 다양한 사용자 상호작용과 브라우저 동작을 처리하기 위해 사용됩니다. 주요 이벤트는 다음과 같은 그룹으로 나눌 수 있습니다.

1. 마우스 이벤트

onclick: 요소를 클릭했을 때 발생
ondblclick: 요소를 더블 클릭했을 때 발생
onmousedown: 마우스 버튼을 눌렀을 때 발생
onmouseup: 마우스 버튼을 뗐을 때 발생
onmousemove: 마우스가 요소 위에서 움직일 때 발생
onmouseover: 마우스가 요소 위로 들어갈 때 발생
onmouseout: 마우스가 요소를 벗어날 때 발생
onmouseenter: 마우스가 요소 위로 들어갈 때 (버블링 없음)
onmouseleave: 마우스가 요소를 벗어날 때 (버블링 없음)

<button id="myButton">Click me!</button>
<script>
  const button = document.getElementById('myButton');
  
  button.onclick = function () {
    alert('Button was clicked!');
  };
</script>

2. 키보드 이벤트

onkeydown: 키를 눌렀을 때 발생
onkeypress: 키를 눌렀을 때 (현재는 onkeydown으로 대체되는 추세)
onkeyup: 키를 뗐을 때 발생

<input type="text" id="textInput" placeholder="Type something" />
<script>
  const input = document.getElementById('textInput');
  
  input.onkeydown = function (event) {
    console.log(`Key down: ${event.key}`);
  };

  input.onkeyup = function (event) {
    console.log(`Key up: ${event.key}`);
  };
</script>

3. 포커스 및 폼 이벤트

onfocus: 요소가 포커스를 받을 때 발생
onblur: 요소가 포커스를 잃을 때 발생
onchange: 입력 요소의 값이 변경되고 포커스를 잃었을 때 발생
oninput: 사용자가 입력을 할 때마다 발생
onsubmit: 폼을 제출할 때 발생
onreset: 폼이 리셋될 때 발생
onselect: 텍스트가 선택되었을 때 발생

<form id="myForm">
  <input type="text" placeholder="Enter your name" required />
  <button type="submit">Submit</button>
</form>
<script>
  const form = document.getElementById('myForm');
  
  form.onsubmit = function (event) {
    event.preventDefault(); // 기본 동작(페이지 새로고침)을 막음
    alert('Form submitted!');
  };
</script>

4. 드래그 & 드롭 이벤트

ondrag: 요소가 드래그될 때 발생
ondragstart: 드래그가 시작될 때 발생
ondragend: 드래그가 끝났을 때 발생
ondragover: 드래그된 요소가 다른 요소 위에 있을 때 발생
ondragenter: 드래그된 요소가 특정 요소에 들어갈 때 발생
ondragleave: 드래그된 요소가 특정 요소를 벗어날 때 발생
ondrop: 드래그된 요소가 드롭될 때 발생

<div id="dragBox" draggable="true" style="width: 100px; height: 100px; background-color: coral;">
  Drag me
</div>
<div id="dropZone" style="width: 200px; height: 100px; background-color: lightgrey; margin-top: 20px;">
  Drop here
</div>
<script>
  const dragBox = document.getElementById('dragBox');
  const dropZone = document.getElementById('dropZone');

  dragBox.ondragstart = function () {
    console.log('Dragging started');
  };

  dropZone.ondragover = function (event) {
    event.preventDefault(); // 드롭을 허용
    dropZone.style.backgroundColor = 'lightgreen';
  };

  dropZone.ondrop = function () {
    dropZone.style.backgroundColor = 'lightgrey';
    dropZone.textContent = 'Dropped!';
  };
</script>

5. 클립보드 이벤트

oncopy: 사용자가 콘텐츠를 복사할 때 발생
oncut: 사용자가 콘텐츠를 잘라낼 때 발생
onpaste: 사용자가 콘텐츠를 붙여넣을 때 발생

<div>
  <textarea id="clipboardArea" placeholder="Try copying, cutting, or pasting here"></textarea>
</div>

<script>
  const textArea = document.getElementById('clipboardArea');

  // 복사 이벤트
  textArea.addEventListener('copy', (event) => {
    alert('Text copied!');
    console.log('Copied text:', window.getSelection().toString());
  });

  // 잘라내기 이벤트
  textArea.addEventListener('cut', (event) => {
    alert('Text cut!');
    console.log('Cut text:', window.getSelection().toString());
  });

  // 붙여넣기 이벤트
  textArea.addEventListener('paste', (event) => {
    alert('Text pasted!');
    const pastedData = event.clipboardData.getData('text');
    console.log('Pasted text:', pastedData);
  });
</script>

6. 미디어 이벤트

onplay: 미디어가 재생을 시작했을 때 발생
onpause: 미디어가 일시 정지되었을 때 발생
onended: 미디어 재생이 끝났을 때 발생
onvolumechange: 볼륨이 변경될 때 발생
onseeked: 사용자가 특정 위치로 이동한 후 발생
onwaiting: 미디어가 다음 데이터를 기다리는 중일 때 발생

<audio id="audioPlayer" controls>
  <source src="example.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>
<div id="mediaStatus">Status: Paused</div>

<script>
  const audio = document.getElementById('audioPlayer');
  const status = document.getElementById('mediaStatus');

  // 재생 이벤트
  audio.addEventListener('play', () => {
    status.textContent = 'Status: Playing';
    console.log('Audio is playing');
  });

  // 일시 정지 이벤트
  audio.addEventListener('pause', () => {
    status.textContent = 'Status: Paused';
    console.log('Audio is paused');
  });

  // 종료 이벤트
  audio.addEventListener('ended', () => {
    status.textContent = 'Status: Ended';
    console.log('Audio playback ended');
  });

  // 볼륨 변경 이벤트
  audio.addEventListener('volumechange', () => {
    console.log('Volume changed:', audio.volume);
  });
</script>

7. 윈도우 이벤트

onload: 페이지가 로드되었을 때 발생
onunload: 페이지가 언로드될 때 발생
onresize: 윈도우 크기가 변경되었을 때 발생
onscroll: 사용자가 스크롤했을 때 발생
onerror: 에러가 발생했을 때 발생

<script>
  // 윈도우 크기변경
  window.addEventListener('resize', () => {
    console.log(`Window size: ${window.innerWidth}x${window.innerHeight}`);
  });
</script>

<div style="height: 2000px; padding: 10px;">
  Scroll the page to see the event in action!
</div>
<script>
  // 페이지 스크롤
  window.addEventListener('scroll', () => {
    console.log('Page scrolled! Scroll position:', window.scrollY);
  });
</script>

<script>
  // 페이지 로드
  window.addEventListener('load', () => {
    console.log('Page fully loaded!');
  });
</script>

8. 터치 이벤트 (모바일 전용)

ontouchstart: 화면을 터치했을 때 발생
ontouchmove: 터치한 상태로 움직일 때 발생
ontouchend: 터치가 끝났을 때 발생
ontouchcancel: 터치가 취소되었을 때 발생

<div id="touchBox" style="width: 200px; height: 200px; background-color: lightblue; text-align: center; line-height: 200px;">
  Touch me!
</div>

<script>
  const touchBox = document.getElementById('touchBox');

  // 터치 시작 이벤트
  touchBox.addEventListener('touchstart', (event) => {
    console.log('Touch started');
    touchBox.style.backgroundColor = 'lightgreen';
  });

  // 터치 이동 이벤트
  touchBox.addEventListener('touchmove', (event) => {
    console.log('Touch moving at:', event.touches[0].clientX, event.touches[0].clientY);
  });

  // 터치 종료 이벤트
  touchBox.addEventListener('touchend', () => {
    console.log('Touch ended');
    touchBox.style.backgroundColor = 'lightblue';
  });

  // 터치 취소 이벤트
  touchBox.addEventListener('touchcancel', () => {
    console.log('Touch canceled');
    touchBox.style.backgroundColor = 'red';
  });
</script>

9. 기타 이벤트

onwheel: 마우스 휠을 굴렸을 때 발생
oncontextmenu: 우클릭 메뉴가 열릴 때 발생
onprogress: 파일 다운로드나 업로드 진행 상황이 업데이트될 때 발생

<div id="scrollableDiv" style="width: 300px; height: 300px; overflow: auto; border: 1px solid black;">
  <div style="height: 1000px; padding: 10px;">
    Scroll inside this box using your mouse wheel.
  </div>
</div>
<p id="scrollInfo">Scroll direction: </p>

<script>
  const scrollableDiv = document.getElementById('scrollableDiv');
  const scrollInfo = document.getElementById('scrollInfo');

  scrollableDiv.addEventListener('wheel', (event) => {
    event.preventDefault();
    const direction = event.deltaY > 0 ? 'down' : 'up';
    scrollInfo.textContent = `Scroll direction: ${direction}`;
    console.log(`Mouse wheel moved: ${event.deltaY}`);
  });
</script>

선택자

**선택자(Selectors)**는 HTML 문서 내의 특정 요소를 찾고 조작하기 위해 사용됩니다. JavaScript에서 DOM 요소를 선택하는 방법은 여러 가지가 있으며, 이를 통해 동적으로 페이지를 제어할 수 있습니다.

1. ID 선택자

특정 ID를 가진 요소를 선택할 때 사용합니다.
메서드: document.getElementById()

const element = document.getElementById('myId');
console.log(element);

2. 클래스 선택자

특정 클래스를 가진 요소를 선택합니다.
메서드: document.getElementsByClassName()
특징: HTMLCollection(유사 배열)로 반환됩니다.

const elements = document.getElementsByClassName('myClass');
console.log(elements); // HTMLCollection

3. 태그 이름 선택자

특정 태그 이름을 가진 요소를 선택합니다.
메서드: document.getElementsByTagName()
특징: HTMLCollection으로 반환됩니다.

const elements = document.getElementsByTagName('p');
console.log(elements); // 모든 <p> 요소

4. CSS 선택자

CSS 스타일과 동일한 방식으로 요소를 선택합니다.
메서드:
- 단일 요소 선택: document.querySelector()
- 여러 요소 선택: document.querySelectorAll()
특징:
- querySelector: 첫 번째로 매칭되는 요소를 반환
- querySelectorAll: NodeList(유사 배열)로 반환

// 단일 요소 선택
const singleElement = document.querySelector('.myClass');
console.log(singleElement);

// 여러 요소 선택
const allElements = document.querySelectorAll('.myClass');
console.log(allElements); // NodeList

5. 이름 속성 선택자

name 속성을 가진 요소를 선택합니다.
메서드: document.getElementsByName()

const elements = document.getElementsByName('username');
console.log(elements); // 모든 name="username" 요소

6. 복합 선택자

여러 선택자를 조합하여 요소를 선택합니다.
CSS 선택자와 유사하게 작동:
- 자식 요소 선택: parent > child
- 후손 요소 선택: ancestor descendant
- 클래스 및 ID 조합: #id.class

// 특정 ID의 자식 요소 선택
const child = document.querySelector('#parent > .child');
console.log(child);

// 여러 조건을 가진 요소 선택
const special = document.querySelectorAll('.class1.class2');
console.log(special);

7. 속성 선택자

특정 속성을 가진 요소를 선택합니다.
CSS 속성 선택자와 동일:
- [attribute]: 속성을 가진 요소
- [attribute="value"]: 특정 값을 가진 속성
- [attribute^="value"]: 특정 값으로 시작하는 속성
- [attribute$="value"]: 특정 값으로 끝나는 속성

// 'data-test' 속성을 가진 요소 선택
const elements = document.querySelectorAll('[data-test]');
console.log(elements);

// 'href' 속성이 'https'로 시작하는 요소 선택
const links = document.querySelectorAll('a[href^="https"]');
console.log(links);

8. 전체 문서 선택

HTML 문서 전체를 선택하거나 특별한 경우 루트 요소를 선택합니다.
메서드:
- document.documentElement: <html> 요소를 반환
- document.body: <body> 요소를 반환

console.log(document.documentElement); // <html>
console.log(document.body); // <body>

[운영일지]웹미니 라이프 스킨 1.4.1

빽짱구 — Mon, 2 Dec 2024 09:38:47 +0900

버전 : webmini life 1.4.1

업데이트 내역

- '응원하기' 다크모드 지원

본문내에 이전글/다음글이 추가되었으며, 스킨편집에서 노출 설정이 가능합니다.

관련글도 노출 설정이 스킨편집에서 가능하도록 수정되었습니다.

'응원하기' 노출이 되는 블로그는 다크모드에서도 지원하도록 수정되었습니다.

주의할점

스킨 구매하기

[운영일지]웹미니 라이프 스킨 1.3.4(패치)

빽짱구 — Fri, 29 Nov 2024 17:23:50 +0900

버전 : webmini life 1.3.4

업데이트 내역

- 버전표기 오류 수정 (index.xml, style.css)

- 제목 그라데이션 설정 오류 수정

스킨편집에서 '제목 그라데이션 사용' 사용안할시 그라데이션 제거 되지 않은 문제 수정

기존 사용자는 아래 내용찾으셔서 해당 스타일 삭제해주세요.

style.css

.post-cover h2 {
    margin: 0 auto;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.4;
    color: var(--defaultText);
    letter-spacing: -0.01em;
    overflow: hidden;
    background: linear-gradient(90deg, #8980ed, #ec787f, #ffc170); /* 삭제 */
}

주의할점

스킨 구매하기

[Javascript]많이 사용되고 유용한 JavaScript 라이브러리와 프레임워크

빽짱구 — Fri, 29 Nov 2024 14:49:40 +0900

웹사이트에서 많이 사용되고 유용한 JavaScript 라이브러리들은 다양한 기능을 제공하며, 웹 개발을 더욱 효율적이고 편리하게 만들어 줍니다. 여기 몇 가지 인기 있고 유용한 JavaScript 라이브러리와 프레임워크를 소개합니다

1. React

용도: UI 구축
설명: React는 Facebook에서 개발한 사용자 인터페이스(UI) 라이브러리입니다. 컴포넌트 기반 아키텍처를 사용하여 효율적으로 복잡한 UI를 관리할 수 있습니다. React는 Virtual DOM을 사용하여 성능 최적화와 빠른 렌더링을 제공합니다.
추천 이유: 현대 웹 애플리케이션에서 가장 인기 있는 라이브러리로, 대규모 애플리케이션에 적합하고 많은 커뮤니티와 리소스가 존재합니다.
링크: https://reactjs.org/

React

React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizati

react.dev

2. Vue.js

용도: UI 구축
설명: Vue.js는 React와 비슷하지만 더 간결하고 쉽게 배울 수 있는 프레임워크입니다. Vue는 반응형 데이터 바인딩과 컴포넌트 시스템을 통해 동적인 사용자 인터페이스를 개발할 수 있게 해줍니다.
추천 이유: Vue는 가볍고 유연한 프레임워크로, 빠르게 학습하고 적용할 수 있습니다. 작은 프로젝트에서부터 대규모 애플리케이션까지 다양하게 사용할 수 있습니다.
링크: https://vuejs.org/

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

3. Lodash

용도: 유틸리티 함수 제공
설명: Lodash는 배열, 객체, 함수 등을 다루는 다양한 유틸리티 함수를 제공하는 라이브러리입니다. 코드의 가독성을 높이고, 반복적인 작업을 줄이는 데 유용합니다.
추천 이유: 자주 사용되는 함수들을 최적화하여 제공하므로, 자주 사용하는 로직을 간단하고 효율적으로 처리할 수 있습니다.
링크: https://lodash.com/

Lodash

_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn

lodash.com

4. Axios

용도: HTTP 요청
설명: Axios는 HTTP 클라이언트 라이브러리로, RESTful API와의 통신을 간단하고 효율적으로 처리할 수 있도록 도와줍니다. Promise 기반으로 비동기 요청을 쉽게 다룰 수 있습니다.
추천 이유: HTTP 요청을 다룰 때 매우 유용하며, 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다.
링크: https://axios-http.com/

Axios

Promise based HTTP client for the browser and node.js Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.

axios-http.com

5. GSAP (GreenSock Animation Platform)

용도: 애니메이션
설명: GSAP는 복잡한 애니메이션을 효율적이고 부드럽게 처리할 수 있는 라이브러리입니다. 다양한 애니메이션 효과와 타임라인을 관리할 수 있어, 고급 애니메이션을 쉽게 구현할 수 있습니다.
추천 이유: 애니메이션을 다루는 데 있어 성능이 뛰어나며, 매우 정교한 애니메이션을 지원합니다.
링크: https://gsap.com/

6. Chart.js

용도: 데이터 시각화
설명: Chart.js는 다양한 차트(막대차트, 원형차트 등)를 쉽게 만들 수 있는 라이브러리입니다. HTML5 Canvas를 이용해 직관적인 데이터 시각화를 제공합니다.
추천 이유: 데이터 시각화에 최적화되어 있으며, 다양한 차트 유형을 지원하고 설정이 간단해 많은 웹사이트에서 사용됩니다.
링크: https://www.chartjs.org/

Chart.js

Simple yet flexible JavaScript charting library for the modern web

www.chartjs.org

7. Moment.js (또는 Day.js)

용도: 날짜 및 시간 처리
설명: Moment.js는 날짜와 시간을 다루는 데 유용한 라이브러리로, 다양한 시간대와 형식 변환을 지원합니다. Day.js는 Moment.js의 가벼운 대안입니다.
추천 이유: 시간 관련 기능을 매우 쉽게 다룰 수 있으며, 시간을 다양한 형식으로 변환하거나 계산할 때 유용합니다.
링크: Moment.js: https://momentjs.com/
링크: Day.js: https://day.js.org/

Moment.js | Home

Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD"

momentjs.com

Day.js · 2kB JavaScript date utility library

2kB JavaScript date utility library

day.js.org

8. D3.js

용도: 데이터 시각화
설명: D3.js는 데이터를 기반으로 동적인 그래픽과 시각화를 만드는 데 사용되는 강력한 라이브러리입니다. SVG, Canvas, HTML 등을 이용해 복잡한 데이터 시각화를 구현할 수 있습니다.
추천 이유: 복잡한 데이터 시각화와 인터랙티브한 그래프를 만들 수 있어, 데이터 분석이나 과학적인 시각화에 유용합니다.
링크: https://d3js.org/

D3 by Observable | The JavaScript library for bespoke data visualization

D3 The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility

d3js.org

9. jQuery

용도: DOM 조작 및 이벤트 처리
설명: jQuery는 DOM 조작, 애니메이션, AJAX 요청 등 다양한 웹 개발 작업을 간단하게 처리할 수 있도록 도와주는 라이브러리입니다.
추천 이유: 과거에는 거의 필수였지만, 현재는 React, Vue 등의 라이브러리가 대세로 자리 잡으면서 사용이 줄어들었지만, 여전히 많은 레거시 프로젝트에서 사용되고 있습니다.
링크: https://jquery.com/

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

10. Tailwind CSS (라이브러리와 CSS 프레임워크)

용도: CSS 프레임워크
설명: Tailwind CSS는 유틸리티 중심의 CSS 프레임워크로, 클래스를 조합하여 원하는 디자인을 빠르게 만들 수 있습니다. JavaScript와 함께 사용하면 매우 효율적입니다.
추천 이유: Tailwind는 빠르게 프로토타입을 작성하거나 반복적인 스타일링 작업을 간소화할 수 있습니다.
링크: https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

11. AOS (Animate On Scroll)

용도: 스크롤 시 애니메이션 효과
설명: AOS는 스크롤에 따라 요소에 애니메이션을 적용하는 라이브러리입니다. 웹페이지를 스크롤할 때 콘텐츠가 화면에 나타나거나 이동하면서 애니메이션 효과를 줄 수 있습니다.
추천 이유: 사용자 경험을 향상시키고 페이지 전환이나 로딩에 매력적인 효과를 줄 수 있는 간단한 방법을 제공합니다.
링크: https://michalsnik.github.io/aos/

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

12. Swiper

용도: 터치 슬라이드, 캐러셀 구현
설명: Swiper는 모바일 및 데스크탑에서 모두 잘 작동하는 슬라이더 라이브러리입니다. 이미지를 슬라이드하거나 콘텐츠를 캐러셀 형태로 표시하는 데 유용합니다.
추천 이유: 터치 스와이프 기능을 잘 지원하고, 다양한 커스터마이징 옵션을 제공해 매우 인기 있는 슬라이더 라이브러리입니다.
링크: https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

13. fullPage.js

용도: 풀 페이지 스크롤
설명: fullPage.js는 전체 페이지를 각 섹션별로 구분하여, 스크롤 시마다 페이지가 전체 섹션을 넘기듯이 이동하는 방식의 스크롤을 제공합니다. 사용자가 스크롤하거나 네비게이션을 통해 섹션을 쉽게 이동할 수 있게 만들어줍니다.
추천 이유: 다양한 애니메이션 옵션, 반응형 지원, 그리고 전체 페이지 스크롤을 쉽게 구현할 수 있어 매우 직관적입니다. 특히 랜딩 페이지나 포트폴리오 사이트에서 많이 사용됩니다.
링크: https://alvarotrigo.com/fullPage/

fullPage scroll snapping. Create full screen pages fast and simple

Mouse wheel snap to sections. Fast and simple to use.

alvarotrigo.com

14. Locomotive Scroll

용도: 부드러운 스크롤과 애니메이션
설명: Locomotive Scroll은 페이지의 스크롤을 부드럽게 하고, 다양한 스크롤 효과를 추가할 수 있는 라이브러리입니다. 특히, 스크롤에 따른 애니메이션을 쉽게 구현할 수 있어 스크롤 기반의 독특한 경험을 제공합니다.
추천 이유: 모던한 웹사이트에 적합한 부드러운 스크롤 효과를 제공하며, 다양한 애니메이션 및 인터랙션을 쉽게 추가할 수 있습니다.
링크: https://locomotivemtl.github.io/locomotive-scroll

Locomotive Scroll | Detection of elements in viewport & smooth scrolling with parallax effects.

And if that wasn't enough, make 'em go backwards. Or upwards. Or downwards!

locomotivemtl.github.io

결론

이 라이브러리들은 웹 개발의 다양한 분야에서 유용하게 사용될 수 있으며, 각 프로젝트에 맞는 라이브러리를 선택하여 적용하는 것이 중요합니다. React나 Vue.js와 같은 UI 라이브러리는 큰 규모의 프로젝트에 적합하고, Lodash나 Axios 같은 유틸리티 라이브러리는 코드의 품질을 높여주는 데 큰 도움이 됩니다.

[영화]25년전의 재미와 감동 그대로 글래디에이터2 관람 후기

빽짱구 — Thu, 28 Nov 2024 17:31:36 +0900

바야흐로 글래디에이터 1을 본 게 군대시절이었다...

이등병 때 1일 정비를 얻어서 눈치 보면서 본 기억이 난다.

군대 제대 후 집중해서 다시보긴 했는데, 명작으로 기억이 남았던 영화이다.

1편이 너무 명작이기에 2탄이 잘해봐야 본적이겠지라는 10%로의 생각을 갖고 영화를 관람하게 되었다.

느낌은 1편과 비슷하면서 (초반 지루함도 비슷) 집중을 할 수밖에 없는 스토리와 분위기.

간단히 요약하자면 1편과 연결이 되고 주인공인 '막스무스'의 아들이 2편의 주인공이다.

1편에 나왔던 꼬맹이가 2편에서는 주인공이며 아들이다.

솔솔히 재밌고 약간의 감동도 있다.

개인적으로는 2편도 훌륭했으며, 1편을 안 본 사람도 2편을 보고 재밌어서 1편까지 찾아보게 되는 경우를 보았다.

런타임이 1탄과 비슷하게 좀 긴편이다.

지금 이시국에 왕이라면 어떻게 해야하는지.. 이정도 영화는 보길 추천해본다.

웹미니 스킨 블로그 등록

빽짱구 — Thu, 28 Nov 2024 16:19:26 +0900

웹미니 스킨 구매를 해주신 분들은 이곳에 아래 양식에 맞춰 사용하시는 블로그 주소를 남겨주셔야 합니다.

(비밀댓글로 남겨주세요)

등록 양식

- 스킨명 : ex) 웹미니 라이프

- 블로그 주소 : https://

- 블로그 주소변경 : (변경이 있을경우만 해당)

- 사용후기 등록 허락 : O or X

만약 블로그 주소가 변경되었다면, 기입해주세요. (구매는 1개의 블로그 기준입니다.)

그리고 스킨 사용후기에 소개를 해드리고자 하는데 원하시면 O, 원치 않으시면 X라고 표기해 주시면 됩니다.

참고로 업데이트 버전은 구매한 곳에서 받으시면 됩니다.
https://ctee.kr/item/store/33583

웹미니 스킨 구매를 해주셔서 감사드립니다.^^

[운영일지]웹미니 라이프 스킨 1.3.3

빽짱구 — Thu, 28 Nov 2024 15:40:05 +0900

webmini life 1.3.3

업데이트 내역

- 본문글자크기 조절기능 추가

스킨편집에서 '본문 폰트사이즈 확대/축소' 기능을 설정할 수 있습니다.

화면크기 기능과 다르게 본문글자 기능은 본문에 글자 크기만 제어합니다.

기존 사용자중에 스킨을 수정해서 덮어씌우기가 어려울경우는 아래 코드를 추가해주시면 됩니다.

script.js

// 본문 글자크기조절
코드
// 본문 글자크기조절 end

위 주석을 찾아 안에 코드를 복사 후 넣어주세요.

skin.html

// 아래 코드를 찾으신 후
<s_if_var_focus-content>
<button class="btn_expand">본문 집중모드</button>
</s_if_var_focus-content>

// 아래 코드로 변경합니다.
<div class="option_box">
    <s_if_var_focus-content>
    <button class="btn_expand">본문 집중모드</button>
    </s_if_var_focus-content>

    <s_if_var_font-zoom>
    <div class="font_zoom">
        <span class="tt">본문글자</span>
        <button id="font_increase" aria-label="폰트 확대"><i class="fas fa-plus"></i></button>
        <button id="font_decrease" aria-label="폰트 축소"><i class="fas fa-minus"></i></button>
        <button id="font_reset" aria-label="폰트 초기화"><i class="fas fa-redo-alt"></i></button>
    </div>
    </s_if_var_font-zoom>
</div>

style.css

.post-cover .option_box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.post-cover .option_box .font_zoom {
  display: inline-flex;
  align-items: center;
  height: 35px;
  border-radius: 20px;
  border: 1px solid #ddd;
  color: var(--textSideColor2);
  font-size: 13px;
  text-align: center;
  padding: 0 15px;
  margin-top: 10px;
  box-sizing: border-box;
  gap: 8px;
}
.post-cover .option_box .font_zoom button{
	color:#222;
}

/* 다크모드 부분에 */
[data-theme='dark'] .post-cover .option_box .font_zoom {
  border-color: #666;
  color: #eee;
}
[data-theme='dark'] .post-cover .option_box .font_zoom button {
  color: #fff;
}

index.xml 은 덮어주셔야 스킨편집에서 설정이 가능합니다.

주의할점

스킨 구매하기

[CSS]css 최신문법에서 추가되는 기능과 설명, 호환성 여부

빽짱구 — Sun, 24 Nov 2024 12:27:58 +0900

CSS 기능 중 주목할 만한 몇 가지와 그 설명들입니다.

브라우저에서 지원가능한 시기에는 구지 SASS를 사용할 필요가 없는 날이 오겠네요.

1. CSS Nesting

설명:

Sass와 같은 CSS 전처리기에서 제공되던 네스팅(Nesting) 기능이 이제 CSS 표준으로 도입되고 있습니다.

사용법:

.container {
  color: black;

  .child {
    color: red;
  }
}

장점: 코드를 더 간결하게 작성할 수 있고 구조적으로 이해하기 쉬움.

지원 여부:
Chrome: 부분 지원 (플래그 설정 필요)
Firefox: 미지원 (개발 중)
Safari: 미지원 (예정)
Edge: Chrome 기반으로 부분 지원
호환성 팁: Sass 또는 PostCSS 같은 전처리기를 활용해 네스팅을 사용 가능.

2. Container Queries

설명:

요소가 속한 컨테이너의 크기에 따라 스타일을 적용할 수 있는 기능.

사용법:

@container (min-width: 500px) {
  .box {
    background-color: blue;
  }
}

장점: 반응형 디자인을 구현할 때 더 정교한 컨트롤 가능.

지원 여부:
Chrome: 지원 (v105+)
Firefox: 지원 (v110+)
Safari: 지원 (v16+)
Edge: 지원 (Chrome 기반)
호환성 팁: Polyfill을 사용할 수 있으나 브라우저 지원이 넓어져 대체 필요성은 감소.

3. :has() 선택자

설명:

요소 내부에 특정 자식 요소가 있는지 여부에 따라 스타일을 적용.

사용법:

div:has(> img) {
  border: 2px solid green;
}

장점: 부모 요소에 조건부 스타일을 적용 가능.

지원 여부:
Chrome: 지원 (v105+)
Firefox: 지원 (v103+)
Safari: 지원 (v15.4+)
Edge: 지원 (Chrome 기반)
호환성 팁: JS를 활용한 클래스 토글 방식으로 우회 가능.

4. :is() 및 :where() 선택자

설명:

여러 선택자를 결합할 때 사용.
:is()는 가중치를 그대로 계산.
:where()는 가중치를 0으로 처리.

차이점:

특성	`:is()`	`:where()`
가중치	가장 높은 가중치(내부 셀렉터 포함) 적용	가중치 0으로 고정
용도	스타일 적용 시 우선순위가 필요할 때	기본 스타일 설정 또는 덮어쓰기 쉽게 할 때

사용법:

/* 가중치 있음 */
:is(h1, h2, h3) {
  font-weight: bold;
}

/* 가중치 없음 */
:where(h1, h2, h3) {
  margin: 0;
}

지원 여부:

Chrome: 지원
Firefox: 지원
Safari: 지원
Edge: 지원
호환성 팁: 모든 최신 브라우저에서 지원하므로 추가 우회법 필요 없음.

5. @scope 규칙

설명:

특정 컨텍스트 내에서 스타일을 제한적으로 적용하는 새로운 방법.

사용법:

@scope (.container) {
  h1 {
    color: red;
  }
}

장점: CSS의 전역성 문제를 완화.

지원 여부:
Chrome: 미지원
Firefox: 미지원
Safari: 미지원
Edge: 미지원
호환성 팁: Scoping 기능이 필요할 경우 Shadow DOM 또는 CSS Modules 사용.

6. Color Functions (color-mix, color-contrast)

설명:

색상을 동적으로 혼합하거나 명암비를 계산하는 기능.

사용법:

/* 색 혼합 */
background-color: color-mix(in srgb, red 50%, blue 50%);

/* 명암비 */
color: color-contrast(white vs black);

지원 여부:
Chrome: 지원 (v111+)
Firefox: 부분 지원 (color-mix 지원, color-contrast 미지원)
Safari: 지원 (v16+)
Edge: 지원 (Chrome 기반)
호환성 팁: 필요할 경우 JS를 사용해 동적 색상 계산 가능.

7. CSS Grid의 Subgrid

설명:

하위 요소에서 부모 그리드의 행과 열 정의를 재사용할 수 있는 기능.

사용법:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sub-container {
  display: subgrid;
}

지원 여부:
Chrome: 지원 (v117+)
Firefox: 지원 (v71+)
Safari: 지원 (v16+)
Edge: 지원 (Chrome 기반)
호환성 팁: Subgrid가 미지원인 브라우저에서는 Flexbox 대체 가능.

8. View Transitions API

설명:

페이지나 상태 변경 시 부드러운 전환 효과를 제공.

사용법:

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.transition {
  animation: fade 1s ease-in-out;
}

Chrome: 지원 (v111+)
Firefox: 미지원
Safari: 미지원
Edge: 지원 (Chrome 기반)
호환성 팁: JS 라이브러리(예: GSAP)를 사용해 유사한 전환 효과 구현 가능.

9. 새로운 단위 (lvh, svh, dvh 등)

설명:

뷰포트 높이 문제를 해결하기 위해 새로운 단위가 도입됨.
lvh: 뷰포트의 로컬 높이.
svh: 뷰포트의 작은 높이.
dvh: 뷰포트의 동적 높이. (추천)

https://blanche-toile.com/web/large-small-and-dynamic-viewport-units

주소표시줄까지 영역을 가져갈것인가 아닌가에 따라 선택하면 된다.

https://blanche-toile.com/web/large-small-and-dynamic-viewport-units

CSSのビューポート単位(svh, lvh, dvh)でUI表示に合わせたスタイルを適応させる | Free Style

スマートフォンやタブレット端末でのツールバーやアドレスバーを含む100vhの表示問題は、CSS Values and Units Module Level 4で追加された新しい単位「sv* / lv* / dv*」を使うことで、UIの表示を踏まえ

blanche-toile.com

사용법:

height: 100dvh; /* 동적 */

지원 여부:
Chrome: 지원 (v108+)
Firefox: 지원 (v110+)
Safari: 지원 (v16+)
Edge: 지원 (Chrome 기반)
호환성 팁: 미지원 브라우저에서는 vh와 함께 JS로 동적 높이 계산 가능.

10. Layered CSS (@layer)

설명:

CSS 우선순위를 명시적으로 제어 가능.

사용법:

@layer base {
  h1 {
    color: black;
  }
}

@layer components {
  h1 {
    color: blue;
  }
}

장점: 스타일 충돌을 방지하고 코드의 구조화에 도움.
이 외에도 CSS는 지속적으로 발전하고 있으며, 브라우저 지원 현황에 따라 사용할 수 있는 기능들이 다를 수 있습니다.

지원 여부:
Chrome: 지원 (v99+)
Firefox: 지원 (v97+)
Safari: 지원 (v15.4+)
Edge: 지원 (Chrome 기반)
호환성 팁: 구형 브라우저에서는 전통적인 CSS 우선순위 방식으로 대체 가능.

브라우저 지원 현황 정리 사이트

Can I Use: https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

CSS 기능별 브라우저 지원 상황을 실시간으로 확인 가능.

MDN Web Docs: https://developer.mozilla.org/

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

각 기능의 브라우저 호환성 및 예제 제공.

CSS의 새로운 기능을 사용할 때는 꼭 Fallback 스타일과 Polyfill을 고려하여 크로스 브라우징 문제를 해결하세요!

도구 추천:

Modernizr → 브라우저 기능 지원 여부를 감지.
PostCSS → CSS 컴파일 도구로 Fallback 스타일과 Polyfill 제공.
이런 방식을 활용하면 크로스 브라우징 문제를 효과적으로 해결할 수 있습니다.

[정보]구리시에서 자동차 번호판을 변경하려면?

빽짱구 — Sat, 23 Nov 2024 21:19:48 +0900

요점만 간단히 설명드리겠습니다.

구리시 자동차 번호판 교부소를 방문합니다.

기존에는 구리시청 입구 옆쪽에 있었지만, 이전을 해서 구리시청 안쪽으로 들어가서 우측 길따라 맨위쪽으로 끝까지 올라가면 나가는길 전에 위치해있습니다.

기존 번호를 유지하면서 번호판만 변경하려면 35,000원에 비용이 발생하며 10~20분이면 됩니다.

만약 번호까지 변경하려면 자동차 교부소에서 변경신청을 하시고, 번호판 교부소에 가서 새로운 번호판을 장착해야합니다.

만약 앞자리 3자리면 필름식 번호판과 사이즈가 동일해서 번호판 가드를 그대로 사용해도 됩니다만, 앞자리가 2자리인데 3자리로 변경시에는 사이즈가 달라 보조판 비용까지 듭니다. (보조판 10,000원 / 탈부착 3,000원)

준비물

자동차 등록증
신분증(여권, 주민등록증, 운전면허증 등)
신청서(번호판 교부소에 가면 있음)
기존 번호판(어차피 차에 달고 있으니까)

기존 번호판

필름식 번호판으로 변경

요약

구리시청 번호판 교부소 방문
교부소 안에 신청서 작성 (이름,주소,차번호)
자동차 등록증 복사해감
뚝딱뚝탁 기계로 새로운 번호판 만듬
장착 후 계산

[영화]'보통의 가족' 인간의 죄의식과 양면성

빽짱구 — Sat, 26 Oct 2024 23:47:12 +0900

영화의 제목을 보고 내용을 짐작할 수 있다.

우리는 뭐가 옳고 그른지 교육과 학습(경험)을 통해 익숙해져 있다. 포괄적으로 도덕과 양심이라고 말할 수 있겠다.

'보통의 가족'은 인간의 내면적인 모습을 전달하고 있다.

포스터에서도 인간의 양면성을 암시하고 있다.

겉으론 나쁜사람처럼 보여도 그렇지 않은 사람이 있고, 봉사활동과 어려운 사람을 돕지만 본인과 직접 연관될 경우 또다른 모습을 보여주는 사람등등

형(설경구)와 동생(장동건)은 처음과 마지막이 서로 입장이 바뀌어 생각을 하게 된다.

과연 우리가 알고 있는 도덕과 양심은 학습을 통해 교육이 된것일까..

아니면 인간이란 존재는 태어날때부터 이러한 감정이 탑재되어있는것일까..

관객들도 '나는 저런 상황에서 저렇게 했을거야', '저건 도덕적으로 저렇게 하면 안되지' 등 다양한 생각을할 수 있겠지만, 본인이 직접 저런 상황이 됐을때 어떤 선택을할 것인가?

다양한 각도에서 많은걸 생각하게 만드는 영화이며, 인간의 삶의대한 예측적 '판단'과 그에 따른 결과를 전달하고 있다.

[운영일지]웹미니 라이프 스킨 1.3.2

빽짱구 — Tue, 1 Oct 2024 22:44:27 +0900

webmini life 1.3.2

업데이트 내역

- 불필요한 코드 삭제 (skin.html / script.js)

- 알림팝업 버튼 및 글영역내 버튼(.btn_buy) 애니메이션 효과 추가

스킨 구매하기

[Javascript]반복문의 종류와 사용 용도

빽짱구 — Sun, 29 Sep 2024 20:43:46 +0900

JavaScript에서 for...of, for...in, forEach, map, filter, reduce는 모두 반복문이지만, 각기 다른 용도와 특성을 가지고 있습니다. 특정 상황에 맞는 반복문을 선택하는 것이 중요합니다. 아래에 각 반복문의 사용 용도와 차이점을 설명하겠습니다.

1. for...of

용도: 배열, 문자열, Map, Set 등의 iterable 객체의 값을 순회할 때 사용.
언제 사용해야 할까?
- 배열이나 iterable 객체의 요소 값을 순회할 때 가장 유연하게 사용 가능.
- 요소의 순서대로 값을 읽어오는 작업에 적합.
- 중간에 break 또는 continue로 반복을 중단하거나 건너뛰고 싶을 때 사용.

const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value); // 1, 2, 3
}

특징: 값만 순회하며, 인덱스가 필요하지 않을 때 적합.

Iterable 객체는 **순회(iteration)**가 가능한 객체를 의미합니다. 즉, 배열, 문자열처럼 한 번에 하나씩 접근할 수 있는 데이터 구조를 가지고 있으며, 이를 반복문(예: for...of)을 사용해 순회할 수 있습니다.

2. for...in

용도: 객체의 **열거 가능한 속성(key)**을 순회할 때 사용.
언제 사용해야 할까?
- 객체의 속성(key)을 순회할 때 적합.
- 객체의 속성 이름을 얻고자 할 때 사용.
- 배열에 사용하지 말 것! 배열에서 사용하면 인덱스만 순회하며, 배열이 아닌 객체 프로퍼티도 포함될 수 있기 때문에 부작용이 생길 수 있음.

const obj = { name: 'Alice', age: 25 };
for (const key in obj) {
  console.log(key, obj[key]); // name Alice, age 25
}

특징: 객체의 key를 순회하며, 배열에서는 부적절함.

3. forEach

용도: 배열의 각 요소를 순차적으로 처리하는 데 사용.
언제 사용해야 할까?
- 배열의 요소에 대해 함수를 실행하는 목적일 때 사용.
- 요소, 인덱스, 배열 자체에 접근해야 할 때.
- 반환값이 필요 없고, 각 요소에 대해 단순 작업만 수행할 때 적합.

const arr = [1, 2, 3];
arr.forEach((value, index) => {
  console.log(index, value); // 0 1, 1 2, 2 3
});

특징:
- 배열 요소를 수정하는 작업에는 좋으나, 반환값을 생성하지 않음.
- break나 continue를 사용할 수 없음.

4. map

용도: 배열의 각 요소에 대해 함수를 적용하여 새로운 배열을 반환하는 데 사용.
언제 사용해야 할까?
- 기존 배열을 수정하지 않고, 새로운 배열을 생성할 때 적합.
- 배열의 변환 작업에 사용 (예: 배열 요소에 수식을 적용하거나 변환).

const arr = [1, 2, 3];
const newArr = arr.map(value => value * 2);
console.log(newArr); // [2, 4, 6]

특징:
- 배열의 각 요소를 변환한 새로운 배열을 반환.
- 원본 배열을 변경하지 않음.
- 반복 중 중단이 불가능.

5. filter

용도: 배열에서 특정 조건을 만족하는 요소들만 새로운 배열로 반환.
언제 사용해야 할까?
- 조건을 충족하는 배열 요소들만 필터링할 때 사용.
- 예를 들어, 조건에 맞는 데이터만 추출할 때.

const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter(value => value > 3);
console.log(filteredArr); // [4, 5]

특징:
- 조건을 만족하는 요소들만 새로운 배열로 반환.
- 원본 배열은 변경하지 않음.

6. reduce

용도: 배열을 순회하면서 각 요소를 누적(accumulate)하여 하나의 값으로 줄이는 작업에 사용.
언제 사용해야 할까?
- 배열의 값을 누적하여 단일 결과(예: 합계, 평균 등)를 구할 때.
- 배열을 변환하여 하나의 값을 생성하는 작업에 적합.

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, value) => accumulator + value, 0);
console.log(sum); // 15

특징:
- 배열의 요소들을 누적하여 단일 값을 반환.
- 합계, 곱셈, 객체의 병합 등 다양한 용도로 사용 가능.

각 반복문을 사용하는 상황 정리

for...of: 배열이나 iterable 객체의 값을 순회할 때. break, continue가 필요할 때.
for...in: 객체의 key를 순회할 때. 배열에서는 사용하지 않는 것이 좋음.
forEach: 배열의 각 요소를 처리하지만 반환값이 필요 없을 때. break, continue가 필요 없을 때.
map: 배열의 각 요소를 변환하여 새로운 배열을 반환할 때.
filter: 조건을 만족하는 배열의 요소들을 필터링하여 새로운 배열로 반환할 때.
reduce: 배열을 순회하면서 하나의 값으로 줄이는 작업이 필요할 때.

결론

각각의 메서드는 서로 다른 목적에 맞게 설계되었기 때문에, 작업의 목적에 따라 적절한 반복문을 선택하는 것이 중요합니다.

[Mac]Mac OS Sequoia 15.0 아이폰 미러링 지원

빽짱구 — Sun, 29 Sep 2024 00:58:08 +0900

https://www.apple.com/kr/macos/macos-sequoia/

Mac OS Sequoia 으로 업데이트 되면서 아이폰 미러링 기능을 드디어 지원하게 되었다.

그동안 애플 사용자들이 원했던 기능인데 그로인해 사용하기가 더욱더 편리해졌다.

먼저 아이폰의 어플들을 맥에서도 이용하기 때문에 게임뿐만아니라, 인증 받아야할 경우 아이폰을 보고 확인을 해던것들이 맥에서 손쉽게 인증을 할수 있게 되었다.

업데이트 되면서 단점과 아직 다른 프로그램과 충돌(?)문제도 있고 버그가 아직 있다는 의견들이 있는데, 개선되리라 생각되고 그에 맞게 다른 소프트들도 빌드업하리라 생각된다.

주요 업데이트 기능:

iPhone 미러링: 맥에서 아이폰을 바로 제어하고 사용할 수 있습니다.
Apple Intelligence: 인공지능 기반 도구가 도입되어, 문서 작성 시 자동 교정, 요약, 톤 변경 등을 지원합니다.
새로운 Safari 기능: Highlights라는 새로운 기능이 추가되어, 웹사이트의 핵심 정보를 요약하고 제공하며, Reader 모드가 개선되었습니다.
Passwords 앱: 아이클라우드 키체인과 비밀번호를 저장하고 관리할 수 있는 전용 앱이 생겼습니다.
Messages: 텍스트 효과와 이모지 스티커 추가, 예약 메시지 전송 기능이 추가되었습니다.
게임 모드: 게임 성능 향상을 위한 최적화가 포함되었습니다

참고 경로

https://www.apple.com/kr/newsroom/2024/09/macos-sequoia-is-available-today/

macOS Sequoia, 오늘부터 이용 가능

가장 진보한 데스크탑 운영체제의 최신 버전인 macOS Sequoia를 오늘부터 Mac에서 무료 소프트웨어 업데이트로 이용할 수 있다.

www.apple.com

https://www.apple.com/kr/macos/macos-sequoia/

macOS Sequoia

macOS Sequoia는 매끄러운 윈도우 타일과 더욱 집중하기 좋은 웹 브라우징, 새로운 iPhone 미러링 기능과 더불어 Apple Intelligence에 대한 지원까지 선사합니다.

www.apple.com

[나스]시놀로지 NAS에 웹서버 구축하기 6탄(도메인 접속시 다른 사이트로 리다이렉팅 시키기 .htaccess 이용)

빽짱구 — Sat, 14 Sep 2024 22:30:30 +0900

시놀로지 NAS에 웹서버 구축하기 6탄 - 도메인 연결시 다른 사이트로 리다이렉팅 시키는 방법입니다.

이해를 돕고자 아래 url로 접속해보면 알수 있습니다.

https://www.webmini.co.kr

위 주소로 접속시 https://webmini.tistory.com 으로 라다이렉팅 되는 걸 알수 있습니다.

물론 도메인 제공업체에서 설정하는 여러 방법들도 있겠지만, 저는 시놀로지 NAS 웹서버를 통해 .htaccess 파일을 이용해서 리다이렉팅을 하고자 합니다.

먼저 도메인 업체에서 DNS레코드 설정을 하셔야합니다.

본인이 구매하신 도메인 업체 사이트에 접속해서 DNS레코드 > A레코드 설정을 해주세요. (사이트마다 조금씩 다릅니다.)

예를 들어 webmini.net 이나 www.webmini.net 로 접속했을 경우 webmini.tistory.com 로 리다이렉팅 하려면 서보드메인(2차)에 www가 있는것과 없는것 모두 작성하고 연결할 서버의 IP에는 나스 IP를 작성하면 됩니다.

아래글을 참고하시면 도움이 됩니다.

https://webmini.tistory.com/961

[나스]시놀로지 NAS에 웹서버 구축하기 4탄(서브도메인 연결)

시놀로지 NAS에 웹서버 구축하기 4탄 - 서브도메인 연결 방법입니다. 서브도메인이라 함은, www.webmini.net의 도메인을 사용 중일 때 쇼핑몰은 shop.webmini.net 로 하고 싶을 때입니다. 즉, www.webmini.net로

webmini.tistory.com

도메인 레코드 설정은 도메인을 서버에 연결할 경우 대부분 비슷합니다.

나스에서 나머지는 셋팅을 해주셔야하는데 셋팅 방법을 설명하기 전에 아래 글을 참고해주세요.

https://webmini.tistory.com/915

[나스]시놀로지 NAS에 웹서버 구축하기 1탄(필수 패키지 설치)

시놀로지 NAS에 웹서버 구축하는 방법입니다. (1탄) 패키지 센터에서 필수 패키지 설치 나스에 접속해서 '패키지 센터'에서 아래 패키지들을 설치합니다. Web Station, Apache HTTP Server, PHP, MariaDB, phpMyAd

webmini.tistory.com

기존에 설명했던 내용에서 중복되는 부분이 있습니다. 웹서버 구축을 해야 특정사이트로 리다이렉팅 할수 있기 때문입니다.

서버구축

먼저 나스에 접속해서 웹으로 사용될 폴더를 생성해줘야합니다.

저는 web 폴더에 여러 사이트를 운영중임으로 위와 같이 폴더를 생성해서 관리하고 있습니다. 참고만해주세요

webmini.co.kr 폴더를 만들어서 www 폴더를 하나더 생성합니다. (폴더명은 본인들이 아무거나 관리하기 쉬운 이름으로 정합니다)

www는 해당 사이트의 루트가 될것입니다.

그리고 .htaccess 파일을 생성해서 메모장이나 에디터툴을 사용해서 아래 코드를 삽입해주세요.(파일명은 .(쩜)도 포함입니다)

RewriteEngine On

# site location
RewriteRule ^(.*) http://webmini.tistory.com/$1 [R=301,L]

그리고 해당 위치에 업로드해줍니다. (라다이렉팅되는 주소는 원하는 주소로 변경해주세요.)

가상호스트 셋팅

나스에서 셋팅한다고해서 다른 서버 셋팅과 크게 다를건 없습니다. 개념은 동일합니다.

호스팅 사이트도 비슷합니다. 서버하나에 엄청 많은 사이트들이 저런식으로 셋팅되어있고 사용자들은 일정비용을 내고 서버의 특정위치에 폴더 하나를 돈을 내고 이용한다고 보시면 됩니다.

'File Station'에서 폴더를 생성했다면 'Web Statiion' > '웹 서비스 포털'에서 가상 호스트를 생성합니다.

'가상 호스트' 메뉴로 접근합니다.

가상 호스트 설정에서 호스트 이름을 작성합니다.

호스트 이름은 도메인명을 작성합니다. 참고로 www가 있는것과 없는 주소 모두 리다이렉팅 시키려면 동일한 설정을 두번해줘야합니다.

문서 루트는 처음에 'File Station'을 통해 생성한 폴더로 연결해줍니다.

리다이렉팅만 시킬거라 구지 백엔드 서버와 스크립트 언어 설정은 할필요가 없습니다.

만약 해당 폴더내에서 php나 java등으로 개발을 한다면 설정을 해줘야겠죠?

일단 그게 아니므로 그부분은 설정을 하지 않겠습니다.

가상 호스트 생성은 이게 끝입니다.

시놀로지 DiskStation 버전마다 조금씩 차이는 있을 수 있습니다. 제가 설명하는 버전은 아래와 같습니다. (7.1.1)

보안 인증서 생성

https로 접속되게 하기위해 보안 인증서를 생성해야합니다.

제어판 > 보안 메뉴로 이동합니다.

보안 메뉴로 접속했다면 '새 인증서 추가' 를 선택합니다.

그리고 'Let's Encrypt에서 인증서 얻기'를 선택합니다.

도메인 이름은 www가 없는 도메인명을 작성하고, 주제 대체 이름에 www가 있는 도메인과 없는 주소 모두 작성합니다.

구분은 ; (세미콜론)으로 합니다.

그리고 '완료' 버튼을 누르면 끝입니다.

인증서 설정

마지막으로 생성된 보안 인증서를 해당 도메인에 연결해줍니다.

인증서 탭에서 생성된 인증서를 선택 후 '설정' 을 누릅니다.

마지막으로 www가 있는 도메인과 없는 도메인 모두 생성된 인증서로 연결해줍니다.

설정이 끝나면 바로 해당 도메인으로 접속시 리다이렉팅 되는걸 확인 할수 있습니다.

아래글도 같은 방식입니다.

https://webmini.tistory.com/991

[운영일지]티스토리 블로그 2차 도메인 주소 변경시 페이지 주소 유실 문제해결

웹미니 블로그 주소 http://blog.webmini.net 를 꽤 오래 사용했었는데, 구글 크롬 등 주요 브라우저의 정책 변경 및 취약점 대응을 위하여 티스토리에서 2차 도메인으로 접속 시 일부 기능이 불가피하

webmini.tistory.com

여러번 하다보면 개념파악하는데 도움이 될것입니다.

사이트 제작 문의

빽짱구 — Mon, 9 Sep 2024 10:29:24 +0900

사이트 퍼블리싱 제작을 원하시면 아래 내용참고해서 문의 주세요.

(블로그 제작은 하지 않습니다)

1. 기본 정보

성함:
연락처:
이메일:
회사명 또는 단체명:

2. 기획 단계

사이트의 주요 목적은 무엇인가요? (예: 정보 제공, 제품 판매, 브랜드 홍보 등)
주요 페이지 구성 및 콘텐츠 기획은 완료되었나요?

3. 디자인 및 파일 제공

디자인 시안은 제공되나요? (Figma, Sketch, Adobe XD 등)
디자인 파일에 포함된 이미지, 아이콘, 폰트 등의 리소스는 모두 준비되었나요?
반응형 웹페이지 제작 여부: 모바일, 태블릿, 데스크탑 해상도를 모두 지원하나요?
SEO 최적화를 위해 소셜 미디어 공유 시 사용할 오픈그래프 이미지(예: 페이스북, 트위터) 가이드가 있나요?

4. 퍼블리싱 일정

기획 완료일:
디자인 완료일:
퍼블리싱 작업 시작일:
퍼블리싱 예상 완료일:
사이트의 예상 오픈일:

5. 코딩 요구 사항

SEO 최적화를 원하시나요? (예: 메타 태그 설정, 페이지 속도 최적화 등)
웹 접근성(A11Y) 기준을 적용할 계획이 있으신가요?
오픈그래프(OG) 및 트위터 카드(Twitter Cards) 메타 데이터 설정이 필요하시나요?

6. 기능 구현

인터랙션(애니메이션, 효과 등)을 원하시나요?

7. 작업 환경

프로젝트 관리 도구를 사용하시나요? (Git, SVN등)

8. 예상 단가

예상하는 단가는 얼마인가요? (페이지 수 및 복잡도에 따라 달라질 수 있음)

9. 기타 요구 사항

추가로 고려해야 할 사항이나 특별한 요청 사항이 있으신가요?

10. 문의하기

메일 : webmini@webmini.net

카카오채널 : https://pf.kakao.com/_vxixlLxb

[CSS]버튼이나 링크에 애니메이션 제공해주는 라이브러리

빽짱구 — Fri, 6 Sep 2024 16:44:09 +0900

https://ianlunn.github.io/Hover/

버튼이나 링크에 마우스를 올렸을 때 적용할 수 있는 여러 애니메이션 효과를 제공하는 라이브러리입니다.

다양한 버튼 애니메이션을 구현해주며, 버튼 제작시 참고용으로도 괜찮은거 같습니다.

https://ianlunn.github.io/Hover/

Hover.css - A collection of CSS3 powered hover effects

ianlunn.github.io

설치방법

사용하려면 먼저 라이브러리를 포함시켜야 합니다. 두 가지 방법으로 사용할 수 있습니다:

(1) CDN으로 포함하기

HTML 파일의 <head> 섹션에 아래 코드를 추가하여 Hover.css를 CDN으로 불러올 수 있습니다.

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
</head>

(2) 직접 다운로드하여 사용하기

https://github.com/IanLunn/Hover 에서 파일을 다운로드합니다.
프로젝트에 hover.css 파일을 포함시킵니다.
HTML 파일에 해당 CSS 파일을 링크합니다.

<head>
  <link rel="stylesheet" href="path/to/hover.css">
</head>

사용방법

Hover.css는 클래스 기반으로 작동합니다. 원하는 HTML 요소에 hvr-로 시작하는 클래스를 추가하면 애니메이션이 적용됩니다. 예를 들어, 버튼에 호버 효과를 적용하려면 다음과 같이 할 수 있습니다.

예시

<button class="hvr-grow">Hover Me</button>

다른 효과를 적용하려면 Hover.css 문서에서 제공하는 다양한 클래스 이름을 사용하면 됩니다.

hvr-bounce-in: 바운스하며 나타나는 효과
hvr-float: 요소가 떠오르는 느낌을 주는 효과
hvr-shrink: 요소가 작아지는 효과

[AI]카카오톡으로 chat GPT 가져오기 (메신저봇 사용) - 개선된 버전

빽짱구 — Tue, 3 Sep 2024 10:27:54 +0900

ChatGPT

기존 버전에서 개선된 버전입니다.

https://webmini.tistory.com/1080 (기존버전)

[AI]카카오톡으로 chat GPT 가져오기 (메신저봇 사용)

요새 chat GPT가 대세죠.현재는 GPT를 통해 다양하게 이용중인데요. 저역시 업무간에 코드오류 체크, 생성등 너무 효율적으로 잘사용하고 있습니다. GPT란GPT는 "Generative Pre-trained Transformer"의 약

webmini.tistory.com

셋팅 방법은 위에 게시글을 참고해주시고, 코드만 아래 내용으로 변경하시면 됩니다.

개선된 코드

const scriptName = "GPT";

let key = "API 입력"; // OpenAI 사이트에서 발급받은 API 키 입력

function response(room, msg, sender, isGroupChat, replier, imageDB, packageName) {
    if (msg.startsWith(".챗 ")) {
        let cmd = msg.substr(3).trim(); // 명령어 이후의 메시지를 가져옴
        if (cmd.length > 0) {
            replier.reply("[GPT 응답]\n" + getResponse(cmd));
        } else {
            replier.reply("명령어 뒤에 텍스트를 입력해주세요.");
        }
    }
}

function getResponse(msg) {
    let result = "";
    let data = {
        "model": "gpt-3.5-turbo", // 원하는 모델을 입력하세요.
        "messages": [{"role": "user", "content": msg}], 
        "temperature": 0, 
        "max_tokens": 1024,
        "top_p": 1, 
        "frequency_penalty": 0.0, 
        "presence_penalty": 0.0
    };

    try {
        let response = org.jsoup.Jsoup.connect("https://api.openai.com/v1/chat/completions")
            .header("Content-Type", "application/json")
            .header("Authorization", "Bearer " + key)
            .requestBody(JSON.stringify(data))
            .ignoreContentType(true)
            .ignoreHttpErrors(true)
            .timeout(20000) // 타임아웃 20초로 설정
            .post();
        
        let resultJson = JSON.parse(response.text());
        
        if (resultJson.choices && resultJson.choices.length > 0) {
            result = resultJson.choices[0].message.content.trim();
        } else {
            result = "GPT로부터 유효한 응답을 받지 못했습니다.";
        }
    } catch (e) {
        result = "오류가 발생했습니다: " + e;
    }

    return result;
}

"model": "gpt-3.5-turbo", // 원하는 모델을 입력하세요.

위에 부분을 아래 모델 종류를 참고해서 원하는 모델로 넣어주세요. ex) gpt-4-turbo

참고로 gpt-3.5-turbo 모델은 2022년 데이터가 마지막입니다. 그이후에 벌어진 일을 물어보면 모릅니다.

요금 한도 가이드

https://platform.openai.com/docs/guides/rate-limits

모델 종류 및 limit 보기

Model	Token limits	Request and other limits	Batch queue limits
gpt-4o	10,000 TPM	3 RPM 200 RPD	90,000 TPD
gpt-4o-mini	60,000 TPM	3 RPM 200 RPD	200,000 TPD
gpt-3.5-turbo	40,000 TPM	3 RPM 200 RPD	200,000 TPD
gpt-4	10,000 TPM	3 RPM 200 RPD	100,000 TPD
gpt-4-turbo	10,000 TPM	3 RPM 200 RPD	100,000 TPD

모델별 특징

이 모델들은 모두 OpenAI가 개발한 언어 모델들이지만, 성능, 크기, 용도에서 차이가 있습니다. 각각의 모델에 대해 자세히 살펴보겠습니다.

1. GPT-4o

특징: GPT-4o는 GPT-4의 경량화된 버전입니다. GPT-4o는 성능을 유지하면서도 더 적은 자원으로 동작할 수 있도록 최적화된 모델입니다.
용도: 자원이 제한된 환경에서 사용될 수 있으며, 여전히 높은 성능을 요구하는 애플리케이션에 적합합니다.

2. GPT-4o-mini

특징: GPT-4o-mini는 GPT-4o보다 더 작은 버전으로, 더욱 경량화되어 자원 효율성이 높습니다. 성능은 다소 낮을 수 있지만 빠른 응답 시간과 적은 자원 사용이 가능합니다.
용도: 매우 자원이 제한된 환경에서 간단한 작업을 처리하는 데 적합합니다.

3. GPT-3.5-turbo

특징: GPT-3.5-turbo는 GPT-3.5의 최적화된 버전으로, 기존 GPT-3.5보다 더 빠르고 비용 효율적입니다. 성능은 GPT-3.5와 비슷하거나 약간 개선된 수준입니다.
용도: 대화형 AI와 같은 실시간 애플리케이션에서 사용되며, 적절한 성능과 비용 효율성을 제공합니다.

4. GPT-4

특징: GPT-4는 GPT-3.5의 후속 모델로, 보다 정교한 언어 이해와 생성 능력을 제공합니다. 파라미터 수가 많아 더 복잡한 작업을 처리할 수 있습니다. GPT-4는 여러 언어로 더욱 자연스러운 대화가 가능하며, 컨텍스트를 더 잘 이해합니다.
용도: 복잡한 언어 작업, 고급 분석, 창의적 글쓰기, 그리고 멀티턴 대화와 같은 고급 애플리케이션에 적합합니다.

5. GPT-4-turbo

특징: GPT-4-turbo는 GPT-4의 최적화된 버전으로, 동일한 크기의 모델이지만 속도와 비용 면에서 더 효율적입니다. OpenAI는 이 모델이 실제로 GPT-4보다 빠르고 비용이 적게 드는 것으로 설명합니다.
용도: GPT-4의 성능을 유지하면서도 비용과 속도에서 효율성을 추구하는 애플리케이션에 적합합니다.

요약

GPT-4는 가장 강력한 모델로 복잡한 작업에 적합합니다.
GPT-4-turbo는 GPT-4와 유사한 성능을 제공하면서도 더 빠르고 저렴하게 사용할 수 있습니다.
GPT-4o는 경량화된 버전으로, 적은 자원으로도 높은 성능을 유지할 수 있습니다.
GPT-4o-mini는 자원이 매우 제한된 환경에서 사용할 수 있는 소형 버전입니다.
GPT-3.5-turbo는 더 빠르고 비용 효율적인 GPT-3.5로, 실시간 대화형 AI 등에 적합합니다.

제대로 동작을 안할경우 잔액이 있는지 보시고, 없으면 충전해서 사용하시면 됩니다.

https://platform.openai.com/settings/organization/billing/overview

기존에 개인 API키를 넣었다면, 프로젝트 API키를 생성해서 넣으셔도 됩니다. (프로젝트 키로 변경되었습니다.)

[Javascript]비동기 처리 Promise, async/await 살펴보기

빽짱구 — Mon, 2 Sep 2024 22:10:34 +0900

javascript에서 비동기 처리를 다루는 방법으로는 Promise와 async/await이 있습니다. 이 두 가지 방법은 비동기 작업(예: API 호출, 파일 읽기 등)을 처리하는 데 매우 유용합니다.

1. Promise 예제

Promise는 비동기 작업이 성공했는지 실패했는지에 따라 결과를 처리할 수 있는 객체입니다.

// 비동기 작업을 시뮬레이션하는 Promise 생성
const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;  // 작업이 성공했다고 가정
            if (success) {
                resolve("데이터를 성공적으로 가져왔습니다.");
            } else {
                reject("데이터를 가져오는 데 실패했습니다.");
            }
        }, 2000);  // 2초 후에 작업이 완료됨
    });
};

// Promise 사용 예제
fetchData()
    .then(result => {
        console.log(result);  // 작업이 성공하면 이 블록이 실행됨
    })
    .catch(error => {
        console.error(error);  // 작업이 실패하면 이 블록이 실행됨
    });

위의 예제에서 fetchData 함수는 Promise를 반환합니다. 2초 후에 성공 또는 실패에 따라 resolve 또는 reject가 호출됩니다. then과 catch를 사용하여 결과를 처리할 수 있습니다.

2. async/await 예제

async/await은 Promise를 다루는 더 간결하고 직관적인 방법입니다. await 키워드는 Promise가 해결될 때까지 기다리고, async 키워드는 함수가 비동기임을 명시합니다.

// 비동기 작업을 시뮬레이션하는 함수 (Promise를 반환)
const fetchDataAsync = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;  // 작업이 성공했다고 가정
            if (success) {
                resolve("데이터를 성공적으로 가져왔습니다.");
            } else {
                reject("데이터를 가져오는 데 실패했습니다.");
            }
        }, 2000);  // 2초 후에 작업이 완료됨
    });
};

// async/await 사용 예제
const getData = async () => {
    try {
        const result = await fetchDataAsync();
        console.log(result);  // 작업이 성공하면 이 블록이 실행됨
    } catch (error) {
        console.error(error);  // 작업이 실패하면 이 블록이 실행됨
    }
};

// 비동기 함수 호출
getData();

위의 예제에서 getData 함수는 async 키워드를 사용하여 비동기 함수로 정의되었습니다. await 키워드는 fetchDataAsync가 반환하는 Promise가 해결될 때까지 기다리고, 그 결과를 result 변수에 할당합니다. 에러가 발생할 경우 try/catch 블록에서 처리합니다.

요약

Promise: 비동기 작업의 완료 또는 실패를 처리하기 위한 객체입니다. then, catch 메서드를 사용하여 결과를 처리합니다.
async/await: 비동기 코드를 더 간결하게 작성할 수 있게 해주는 구문입니다. await를 사용하여 Promise가 해결될 때까지 기다립니다.

이 두 가지 방법은 비동기 작업을 다룰 때 유용하며, 특히 async/await은 비동기 코드를 더 읽기 쉽게 만듭니다.

[Javascript]고차함수, 익명함수, 콜백함수 설명 및 예제

빽짱구 — Mon, 2 Sep 2024 22:03:17 +0900

1. 고차 함수 (Higher-Order Function)

고차 함수는 하나 이상의 함수를 인수로 받거나, 함수를 반환하는 함수입니다.

// 고차 함수: 함수를 인수로 받음
function higherOrderFunction(callback) {
    console.log("고차 함수가 호출되었습니다.");
    callback();  // 전달받은 함수를 호출
}

// 인수로 전달될 함수 (익명 함수 형태로 작성)
higherOrderFunction(function() {
    console.log("이 함수는 콜백 함수로 전달되었습니다.");
});

고차 함수는 함수를 인수로 받아 호출합니다.

2. 익명 함수 (Anonymous Function)

익명 함수는 이름이 없는 함수로, 변수에 할당하거나 다른 함수에 전달될 때 자주 사용됩니다.

// 익명 함수를 변수에 할당
const greet = function() {
    console.log("Hello, World!");
};

// 함수를 호출
greet();

function()은 이름이 없는 익명 함수입니다. 이 함수는 greet 변수에 할당되어 호출될 수 있습니다.

3. 콜백 함수 (Callback Function)

콜백 함수는 다른 함수의 인수로 전달되어, 특정 작업이 완료된 후 호출되는 함수입니다.

// 익명 함수를 변수에 할당
const greet = function() {
    console.log("Hello, World!");
};

// 함수를 호출
greet();

performTask 함수는 콜백 함수를 인수로 받습니다. 작업이 완료된 후 콜백 함수가 호출되어 작업 완료 메시지를 출력합니다.

요약

고차 함수는 함수를 인수로 받거나 함수를 반환하는 함수입니다.
익명 함수는 이름이 없는 함수로, 함수 표현식을 통해 작성됩니다.
콜백 함수는 다른 함수에 인수로 전달되어 나중에 호출되는 함수입니다.

이들 개념은 자바스크립트에서 매우 중요하며, 특히 비동기 프로그래밍이나 함수형 프로그래밍에서 자주 사용됩니다.