유틸리티

웹 개발 입문자가 알아야 할 무료 도구 36가지

웹 개발 배우면서 쓰는 무료 도구들

HTML, CSS, JavaScript 배우기 시작했으면 이런 도구들 알아두면 좋음. 전부 무료고 브라우저에서 바로 쓸 수 있음.

JSON/데이터

JSON 포매터 - API 응답 데이터 정리해서 보기. 들여쓰기 자동으로 해줌. Base64 변환은 이미지 인라인으로 넣을 때.

정규식

정규식 테스터 - 이메일, 전화번호 검증 패턴 테스트. 처음엔 어렵지만 익숙해지면 필수임.

URL/인코딩

URL 인코더 - 쿼리스트링 인코딩. 한글이나 특수문자 포함된 URL 처리할 때. 해시 생성은 비밀번호 해싱 개념 이해.

UUID/ID

UUID 생성기 - 고유 ID 만들 때. 데이터베이스 primary key로 쓰기도 함.

타임스탬프

타임스탬프 변환 - Unix timestamp 개념 이해. 날짜 데이터 다룰 때 필수.

진법 변환

진법 변환기 - 2진수, 16진수 변환. 색상 코드나 비트 연산 이해할 때.

색상

색상 변환기 - RGB, HEX, HSL 변환. CSS에서 색상 다룰 때 필수. 컬러 팔레트는 배색 조합 찾을 때.

이미지

이미지 리사이즈 - 웹 최적화 사이즈로. 이미지 압축은 로딩 속도 개선, 파비콘 생성은 사이트 아이콘.

텍스트

글자수 세기 - textarea maxlength 테스트. 로렘 입숨은 더미 텍스트, 텍스트 변환은 대소문자.

QR/바코드

QR코드 생성 - 모바일 테스트할 때 URL QR로. 바코드는 재고 관리 시스템 만들 때.

네트워크

내 IP 확인 - 로컬 개발 환경 설정. IP 조회는 접속 로그 분석, 화면 크기는 반응형 테스트.

시간

타이머 - 뽀모도로로 코딩 집중. 디데이는 프로젝트 마감일.

비밀번호

비밀번호 생성 - 안전한 비번 생성 원리 이해.

기타

퍼센트 계산, 단위 변환, 화면 비율 - 레이아웃 계산.

개발 배우면서 이런 도구들 직접 만들어보는 것도 좋은 연습임. 다 무료.