전체 글51 Docker 로컬 환경에서 HTTPS 인증서를 적용하기 위한 OpenSSL 인증서 생성 방법 개발 환경에서 HTTPS를 테스트하거나, 로컬 서버에 보안을 적용하려면 인증서를 생성하여 Docker 컨테이너에 적용해야 하는 경우가 있습니다. 이 글에서는 OpenSSL을 활용하여 로컬 환경에서 사용할 HTTPS 인증서를 생성하고, Docker 컨테이너에 적용하는 방법을 단계별로 설명합니다.1. HTTPS 인증서 생성 준비HTTPS를 적용하려면 SSL 인증서와 개인 키 파일이 필요합니다. 이를 위해 OpenSSL 명령어를 사용하여 로컬에서 인증서를 생성합니다.2. OpenSSL을 활용한 인증서 생성2-1. 개인 키 생성먼저 개인 키 파일(key.pem)을 생성합니다. 이 키 파일은 SSL/TLS 암호화에서 중요한 역할을 하며, 반드시 안전하게 보관해야 합니다.openssl genrsa -out key... 2024. 10. 24. MAC Docker 환경 설정을 위한 자동화 Shell Script ocker 환경을 다수 생성하거나 반복적으로 설정하는 작업은 번거롭고 시간이 많이 소요됩니다. 이를 해결하기 위해, 간단한 Shell Script를 작성하여 Docker 프로젝트를 자동으로 설정하고 구성할 수 있도록 만들어 보았습니다. 이 글에서는 해당 스크립트를 설명하고, 이를 활용해 빠르게 Docker 환경을 구축하는 방법을 안내합니다.Shell Script의 목적이 스크립트는 다음 작업을 자동으로 처리합니다:로컬 호스트에 개발용 도메인 추가프로젝트 디렉토리 및 구조 생성Docker 관련 디렉토리 준비 및 구성프로젝트 저장소를 Clone하여 초기화위 과정을 자동화하면 개발자는 직접 명령어를 입력하는 시간을 줄이고, 빠르게 개발 환경을 구성할 수 있습니다.스크립트 코드 분석아래는 작성된 Shell Sc.. 2024. 10. 24. PDF 페이지 분리 처리: CSS를 활용한 페이지 브레이크 최적화 PDF 문서 생성 시 데이터가 페이지를 넘어가거나 잘리는 문제는 빈번하게 발생합니다. 특히 CSS를 활용하여 PDF를 생성할 때 페이지 분리가 적절히 처리되지 않으면 문서의 가독성과 품질이 저하될 수 있습니다. 이 글에서는 PDF 페이지 분리와 관련된 주요 CSS 기법과 최적화 방법에 대해서 테스트 해보며 알아본 내용에 대해서 정리합니다.1. 기본 초기화: Margin과 Padding 초기화PDF 스타일링에서 레이아웃이 예기치 않게 흐트러지는 문제를 방지하려면 모든 요소의 기본 margin과 padding을 초기화하는 것이 중요합니다.* { margin: 0; padding: 0;}일부 라이브러리는 margin과 padding을 강제로 변경하기 때문에, 초기화 설정을 통해 이후 발생할 이슈를 사전에 .. 2024. 9. 4. MSW를 이용한 Mock API 구현 백엔드 API가 완전히 준비되기 전에 프론트엔드 개발을 시작해야 할 때, Mock API는 효율적인 대안이 될 수 있습니다. **MSW(Mock Service Worker)**는 API 요청을 가로채서 사전에 정의된 Mock 데이터를 반환하도록 도와주는 라이브러리입니다. 이 글에서는 MSW를 활용해 Mock API를 구현하는 과정을 단계별로 설명합니다..백엔드 API가 완전히 준비되기 전에 프론트엔드 개발을 시작해야 할 때, Mock API는 효율적인 대안이 될 수 있습니다. **MSW(Mock Service Worker)**는 API 요청을 가로채서 사전에 정의된 Mock 데이터를 반환하도록 도와주는 라이브러리입니다. 이 글에서는 MSW를 활용해 Mock API를 구현하는 과정을 단계별로 설명합니다.1.. 2024. 5. 22. SEO 성능 개선을 위한 Lazy Load 및 이미지 사전 블러 렌더링 구현 SEO 성능과 사용자 경험(UX)을 개선하기 위해 이미지를 Lazy Load 방식으로 로드하고, 렌더링 중 블러 처리된 작은 이미지를 표시하며, 원본 이미지는 뷰포트에 들어오면 로드하도록 구현했습니다. 이 글에서는 해당 기능의 구현 방법과 주요 코드 로직을 설명합니다.주요 기능 설명Lazy Load:이미지를 뷰포트(viewport) 영역 내에 들어왔을 때만 로드하여 불필요한 네트워크 요청을 줄입니다.IntersectionObserver를 활용하여 효율적으로 뷰포트 내 이미지 감지.블러 처리된 사전 렌더링:원본 이미지를 로드하기 전에 블러 처리된 50x50 작은 이미지를 보여줍니다.원본 이미지를 로드한 후 블러를 제거하여 자연스러운 전환.반응형 및 디바이스 최적화:디바이스 유형(모바일, 데스크톱)에 따라 .. 2024. 5. 22. Textarea 높이 자동 조절 Textarea의 높이를 입력에 맞춰서 자동으로 변경하고 싶을 때는 아래와 같이 할 수 있습니다..auto-height { width: 100%;}.auto-height textarea { width: 100%; resize: none; overflow-y: hidden; padding: 15px 15px 5px; line-height: 1.5;} 메모 $(document).ready(function() { $('.auto-height').on('keyup', 'textarea', function (){ $(this).css('height', 'auto'); $(this).height( this.scrollHeight ); .. 2022. 11. 15. 이전 1 2 3 4 5 ··· 9 다음