웹으로 말하기 - mysetting

11:59 5/30

mytory.net

mobile screenshot relative

11:59

mytory.net

mobile screenshot

웹으로 말하기
https://mytory.net/

웹개발, PHP, CSS, jQuery, javascript, 아이폰 등등

저작도구: Jekyll v3.9.0

최종 피드 수집: 2025-12-22 00:47

전체 (71)

5d

WSL2에서 localhost 웹 접속이 느릴 때 – Apache Keep-Alive 설정 혹은 WSL Mirrored 네트워크 모드로 해결

WSL2에서 아파치로 웹 개발을 하다 윈도우 브라우저에서 localhost 접속이 엄청 느린 경우가 있었습니다. 저는 라라벨 프로젝트 개발 중에 이 문제가 답답했는데요. 해결책은 두 가지입니다. 아파치의 keep-alive 시간을

서버

WSL

000

5d

Cloudflare Workers로 만드는 서버 상태 모니터링 도구

서버가 살아 있는지 확인하는 모니터링 서버가 먼저 죽는 상황을 몇 번 겪고 나서, 서버리스로 하는 편이 낫겠다고 생각했다. 그래서 바이브 코딩으로 Cloudflare Workers 기반 서버 상태 모니터링 도구를 만들었다. 👉

내 작업

000

14d

Utility-First, Component-Second — Utility-First CSS에서 더 강조돼야 할 ‘First’

객체 지향 CSS는 재사용 가능한 컴포넌트를 도입함으로써 중복 문제를 효과적으로 해결했습니다. 하지만 동시에 의외로 풀기 어려운 새로운 질문을 남겼습니다. 컴포넌트의 책임은 어디까지여야 하는가?
유틸리티 퍼스트 CSS는 컴포넌트

CSS

개념

000

15d

티스토리 워드프레스 이전 플러그인: 티스토리 백업을 워드프레스로 가져오는 플러그인

개인 티스토리를 워드프레스로 이사했습니다. 그 과정에서 플러그인을 만들었습니다. 플러그인을 설치한 뒤, “도구 > 티스토리 가져오기”로 가서 티스토리 백업 ZIP 파일을 업로드하면 임포트를 합니다. 백업 파일이 너무 크면 버벅댈

내 작업

WordPress Plugin

000

1M

Git 한글 파일명이 깨져 나올 때

\123\234\345 형식으로 한글 파일명이 깨져 보일 때 아래 설정을 해줍니다.

백엔드

000

1M

PDF 내지 사이즈가 제각각일 때 한번에 맞춰 주는 커맨드

리눅스 커맨드입니다. 위 명령은 pdf의 종이 사이즈를 152mm x 223mm로 맞춰 줍니다. A4사이즈로 하고 싶다면 --a4paper 옵션을 주면 됩니다. 자세한 내용은 help를 참고하시면 됩니다. 우분투에서 pdfjam을

추천 패키지·프로그램

TIP

000

1M

윈도우에서 webp를 마우스 우클릭 한 번으로 jpg로 변환하기

File Converter라는 프로그램을 사용하면 됩니다. 아래 링크에서 다운로드할 수 있습니다. https://github.com/Tichau/FileConverter/releases Assets에서 msi 확장자로 끝나는 걸

추천 패키지·프로그램

TIP

000

2M

WSL2로 웹 개발 환경 구축하기

2022년 12월부터 2023년 6월까지 대략 반년 조금 넘게 WSL2로 개발환경을 구축하고 개발을 했습니다. 원래 우분투 리눅스를 개발컴 주 운영체제로 10년 넘게 사용했습니다. 그래서 리눅스에서 개발할 때의 편리함을 WSL2에

기타

000

3M

PDF to Images, 이미지 리사이즈 등 유용하면서 개인정보 문제에서 자유로운 온라인 도구 모음

일을 하다 보면 이미지를 리사이즈해야 할 때도 있고, PDF를 이미지로 변환해야 하는 경우도 있습니다. 세로 이미지를 가지고 가로 썸네일을 만들어야 하는 경우도 있습니다. 무료 온라인 툴들이 많지만 내가 업로드하는 자료가 어디로

내 작업

추천 패키지·프로그램

000

4M

세로 이미지 좌우 확장하며 블러 넣는 무료 온라인 툴 – Mytory Background Expander with Blur

SNS에 글을 공유할 때 대표 이미지가 종종 포스터 같은 세로형 이미지인 경우가 있습니다. 이런 이미지를 그대로 공유하면 썸네일 영역에 맞지 않아 좌우가 잘리거나 보기 좋지 않게 표시되곤 합니다. 포토샵 같은 도구로 충분히 해결할

내 작업

추천 패키지·프로그램

000

5M

애플, 구글, 메타의 계정 160억 개 유출 보도의 진실은?

며칠 전 “지금 당장 비번 바꾸세요”라는 자극적인 제목의 기사(‘“지금 당장 비번 바꾸세요”…애플·구글·페북 로그인 비번 ‘160억개’ 털렸다’)가 나왔습니다. 사이버뉴스의 기사를 포브스의 한 외부 필자가 요약 인용해 기사화하면서

기타

security

000

6M

앵커 클릭시 부드럽게 이동하게 만드는 CSS 조각

아래처럼 html에 scroll-behavior 속성을 smooth로 설정하면 앵커(#으로 시작하는 링크)를 클릭해 이동할 때 부드럽게 이동하게 된다. 참고로 그 밑에 scroll-padding-top: 50px;는 이렇게 앵커

CSS

000

7M

[메모] SQLite 클라이언트 자주 쓰는 명령어 정리

MySQL에서는 MySQL 설정을 하거나 구조를 확인할 때도 show tables, desc table_name 같은 식으로 SQL 쿼리 비슷하게 명령을 내린다. 하지만 SQLite는 .으로 시작하는 명령으로 그런 것을 한다. 일

Memo

sqlite

000

8M

scp로 파일 전송이 중단됐을 때 이어서 전송하는 방법

scp를 사용해 큰 파일을 전송하다가 인터넷이 끊기거나 세션이 종료되면 난감하죠. 예를 들어, 2GB 파일을 전송 중 1.3GB까지 전송된 후 중단된 경우 다시 scp를 실행하면 처음부터 다시 전송합니다. 하지만 rsync를 사용

리눅스

서버

rsync

+ 더보기

000

8M

[메모] PostgreSQL 클라이언트 psql 기본 명령어

MySQL만 사용하던 사람들은 psql의 명령어가 생소할 것이다. 간단한 메모다. 현 디비의 모든 스키마 나열 사용자 생성 PostgreSQL에서는 User가 아니라 Role이 있고 Role이 그룹이나 사용자로 작동한다. 아래 예

Memo

백엔드

postgresql

000

10M

Javascript로 텔레그램 인앱 브라우저 여부 감지하기(일단 iOS)

iOS 텔레그램 인앱 브라우저 여부를 확인하려면 window.TelegramWebviewProxy 객체가 있는지 보면 됩니다. (안드로이드는 제가 해보지 않아서 모르겠는데 한번 해 보시고 알려 주시면 감사하겠습니다.) naviga

javascript

telegram

000

10M

라라벨 로컬 개발시 폰에서 접속해 테스트하는 방법

로컬에서 웹개발을 할 때 스마트폰에서 접속해서 테스트를 해야만 하는 경우가 생깁니다. 브라우저 모바일 뷰로도 재연할 수 없는 이슈가 있기 때문입니다. 예컨대 저는 텔레그램 인앱 브라우저에서만 발생하는 이슈를 테스트해야 하는 경우가

기타

0055

11M

SUIT 폰트 화살표 꼬리(샤프트) 나오게 하기(CSS, font-feature-settings)

SUIT 폰트는 글꼴도 예쁘고, 모든 굵기를 한 파일에 다 넣은 Variable 폰트의 woff2 용량도 700KB가 채 안 돼 웹폰트로 쓰기 아주 좋습니다. 그런데 화살표 모양이 →, ←인 것이 일반적 사용에 좋지 않습니다. 그

CSS

webfont

0049

1y

PHP glob() 함수로 간편하게 파일 검색하기: 기본부터 활용까지

PHP의 glob() 함수는 파일 시스템에서 패턴에 맞는 파일명을 검색할 때 매우 유용하게 사용할 수 있는 함수입니다. 이 글에서는 glob() 함수의 기본적인 사용법과 장점, 그리고 몇 가지 예제 코드를 통해 자세히 알아보겠습니

PHP

TIP

0050

1y

[메모] 우분투에서 여러 버전의 PHP-FPM 설치하기, 버전 전환해 가며 쓰기

아래는 php8.3에서 php8.1로 전환할 때 사용하는 명령어 예시다. 아파치의 conf를 비활성화한 다음, 구 php-fpm 프로세스를 종료한 뒤 새 php-fpm 프로세스를 실행하고 아파치를 리로드한다. 사실 이 명령을 하려

PHP

서버

005