2020년에는 직장을 그만두고 집에서 하루하루 넉넉한 시간을 보냈습니다. 그래서 저는 개발 중에 직면하는 문제를 해결하거나 특정 기술 개념에 대한 더 깊은 이해를 돕기 위해 개발 관련 도구를 개발하기 시작했습니다.

매일 소소한 도구를 쓰며 하루하루 시간이 흘러갑니다. 돌이켜보면 이 경험은 사실 꽤 흥미로웠습니다.

처음에는 이러한 도구의 UI가 실제로 매우 초보적이었습니다. 하지만 시간이 지날수록 그들의 모습은 계속해서 좋아졌습니다. 지금은 여전히 ​​정교하다고 여겨지지 않지만 상당한 발전을 이루었습니다.

솔직히 말해서 이러한 도구에는 사용자 지침과 문서가 거의 없습니다. 마치 나만의 작은 세계와 비슷합니다. Google Analytics 데이터를 통해 마이크로 이미지 호스팅과 같은 일부 도구에는 나만 사용자가 있을 수 있다는 사실을 발견했습니다. 하지만 바로 제가 직접 사용하고 있기 때문에 최근 새로운 도구를 추가하는 빈도가 줄어들었음에도 꾸준히 유지하고 있습니다.

만족스러운 점은 이러한 도구 중 일부를 Ruan Yifeng 씨의 블로그에 제출했고, 많은 작은 도구가 그의 추천을 받았다는 것입니다. 이것은 나에게 큰 격려가 되었습니다.

심층 원칙과 관련된 일부 도구

이러한 도구는 개발자가 몇 가지 기본 개념과 기본 원칙을 더 깊이 이해할 수 있도록 설계되었습니다.

IEEE754 부동 소수점 변환

이 도구는 IEEE 754 표준의 배정밀도 부동 소수점 숫자의 내부 표현을 이해하는 데 도움이 됩니다. 십진수를 해당 이진수 표현으로 변환하여 부호 비트, 지수 비트 및 가수 비트를 명확하게 표시할 수 있습니다. 이는 컴퓨터가 부동 소수점 숫자를 처리하는 방법을 이해하는 데 매우 유용합니다.

IEEE754 표준에 따르면 Infinity의 부동 소수점 변환은 다음과 같습니다. 모든 지수 비트는 1이고 모든 가수 비트는 0입니다.

Infinity에 대한 부동 소수점 변환은 다음과 같습니다.

IEEE754 표준에 따르면 0에 대한 부동 소수점 변환은 다음과 같습니다. 부호 비트는 0, 모든 지수 비트는 0, 모든 가수 비트는 0입니다.

0에 대한 부동 소수점 변환은 다음과 같습니다.

UTF-8 인코딩 변환

UTF-8은 가변 길이 문자 인코딩입니다. 이 도구는 유니코드 문자가 UTF-8로 인코딩되는 방식을 이해하는 데 도움이 됩니다. 모든 유니코드 문자를 입력할 수 있으며 도구는 UTF-8로 인코딩된 이진 표현을 표시하므로 인코딩 프로세스를 시각적으로 볼 수 있습니다.

Base64 인코딩 변환

Base64는 특히 바이너리 데이터를 처리할 때 일반적으로 사용되는 인코딩 방법입니다. 이 도구는 Base64 인코딩의 원리를 이해하는 데 도움이 될 뿐만 아니라 편리한 인코딩 및 디코딩 기능도 제공합니다. 이진 데이터를 텍스트 환경에서 전송해야 하는 시나리오에 특히 유용합니다.

파일 유형 감지

이 도구는 파일 매직 넘버를 통해 파일 형식을 결정하는 방법을 이해하는 데 도움이 됩니다. 파일을 업로드하면 도구가 파일의 바이너리 데이터를 읽고 매직 넘버를 기반으로 파일 형식을 결정합니다. 이는 알 수 없는 파일을 처리하거나 파일 형식을 확인할 때 매우 유용합니다.

예를 들어 JPEG는 Magic Number가 FF D8 FF DB이므로 식별됩니다.

이미지 관련

이미지 처리는 웹 개발의 중요한 측면입니다. 이미지 처리와 관련된 몇 가지 도구는 다음과 같습니다.

마이크로 이미지

이미지 품질을 크게 저하시키지 않으면서 이미지 파일의 크기를 줄이는 데 도움이 되는 빠른 이미지 압축 도구입니다.

다양한 이미지 형식을 지원하며 파일 크기나 수량에 제한이 없습니다. 이 도구는 웹사이트 로딩 속도를 최적화하는 데 특히 유용합니다.

가장 중요한 점은 프런트엔드 기술을 사용하여 구현되어 서버 비용이 필요하지 않으므로 개인 정보 보호 문제에 대해 걱정할 필요가 없다는 것입니다. 구현은 Squoosh와 유사하며 둘 다 WebAssembly를 활용합니다.

마이크로 이미지 호스팅

GitHub 저장소를 개인 이미지 호스트로 사용할 수 있는 개인 이미지 호스팅 도구입니다. 간단한 업로드 및 관리 기능을 제공하여 기사나 웹페이지에서 이미지를 참고할 때 편리합니다. 이는 온라인에서 이미지를 자주 공유해야 하는 개발자를 위한 매우 실용적인 도구입니다.

이미지 공유

이 도구를 사용하면 소셜 미디어 공유 또는 간단한 포스터 제작에 적합한 텍스트가 포함된 이미지를 빠르게 생성할 수 있습니다. 텍스트와 이미지를 결합하는 과정을 단순화하여 복잡한 이미지 편집 소프트웨어를 사용하지 않고도 매력적인 이미지를 만들 수 있습니다.

이미지 자리 표시자

이것은 사용자 정의 크기 및 색상이 지정된 자리 표시자 이미지를 신속하게 생성할 수 있는 이미지 자리 표시자 생성 도구로, 개발 과정에서 사용하기에 매우 적합합니다. 실제 이미지가 아직 준비되지 않은 경우 페이지 레이아웃의 무결성을 유지하는 데 도움이 될 수 있습니다.

인코딩 및 암호화

웹 개발에서는 다양한 인코딩과 암호화를 처리해야 하는 경우가 많습니다. 관련 도구는 다음과 같습니다.

URL 인코딩

이 도구는 URL 인코딩 및 디코딩을 수행하는 데 도움이 되며, 이는 특수 문자가 포함된 URL을 처리하는 데 매우 유용합니다. 다양한 환경에서 URL이 올바르게 전송되고 구문 분석되는지 확인할 수 있습니다.

HTML 엔터티 인코딩

HTML 엔터티 인코딩 도구를 사용하면 특수 문자를 HTML 엔터티로 변환하여 HTML에서 올바르게 표시되도록 할 수 있습니다. 이는 XSS 공격을 방지하고 HTML 문서의 올바른 렌더링을 보장하는 데 중요합니다.

해시 생성기

이 도구는 MD5, SHA1, SHA256 등을 포함하여 일반적으로 사용되는 다양한 해시 값을 생성할 수 있습니다. 데이터 무결성 확인 및 비밀번호 저장과 같은 시나리오에서 매우 유용합니다.

컬러 도구

색상은 웹 디자인에서 중요한 요소입니다. 다음은 색상 관련 도구입니다.

색상 변환

이 도구는 RGB, HSL, CMYK 등과 같은 다양한 색상 모델 간에 변환할 수 있습니다. 디자이너와 개발자가 다양한 색상 표현 방법 간에 자유롭게 전환하는 데 도움이 될 수 있습니다.

팔레트 생성기

이 도구는 색상의 색조와 음영을 생성하는 데 도움이 되며, 이는 일관된 색상 테마를 만드는 데 매우 적합합니다. 조화로운 색상 구성을 빠르게 구축하여 디자인 효율성을 높일 수 있습니다.

명암비 계산기

이 도구는 두 색상 간의 명암비를 계산하여 배경 텍스트의 가독성을 보장합니다. 접근성 표준을 충족하는 디자인을 만드는 것은 매우 중요합니다.

결론

어떤 도구는 나 혼자만 사용할 수도 있지만, 이러한 지속적인 학습과 창조의 과정이 나를 성취감과 행복으로 느끼게 합니다.

저는 이 도구를 계속 유지하고 개선할 것이며 모든 사람이 이 도구를 사용하고 피드백을 제공하는 것을 환영합니다.