본문 바로가기

Joyful 개발

(14)
[mkcert] localhost에서 https 적용하기 (+ webpack devServer에 설정하는 법) 보안을 위해 현재 개발 중인 프로젝트에서 https를 사용해야만 하는 상황이 생겼다. 기본적으로 개발에 이용하는 localhost 환경에서는 TSL/SSL 인증서가 없어 http를 이용할 수밖에 없지만, 라이브러리를 이용한다면 간단하게 인증서를 발급받아 로컬에서도 https를 사용할 수 있다. mkcert를 이용해 로컬 개발 환경에서 https 통신을 할 수 있는 방법을 알아보자. mkcert 설치와 인증서 발급 (macOS) 1. 터미널을 실행한 뒤 mkcert를 설치한다. brew install mkcert 2. 아래 명령어를 입력하면 로컬 인증 기관(CA)이 생성되고, mkcert로 생성한 로컬 CA는 기기에서 로컬로만 신뢰할 수 있다. mkcert -install 3. 프로젝트의 루트 디렉터리 혹..
[AWS] AWS를 이용한 정적 웹페이지 호스팅 및 도메인 연동 방법 (S3 + CloudFront + Route53을 이용한 프론트 프로젝트 배포 방법, 배포 후 403 뜨는 경우 해결 방법) 정적 웹페이지 배포하기 고정된 데이터를 그대로 보여주는 정적 웹페이지(ex. 회사 소개 페이지, 포트폴리오 페이지...)는 AWS를 이용해 간단하게 배포가 가능하다. AWS의 S3와 CloudFront 서비스를 이용해 웹페이지를 배포하고, Route53으로 개인 도메인을 연동하는 방법까지 알아보자! 배포 방법 1. S3 버킷 생성 및 설정 1-1. 우선 AWS 콘솔에 로그인하여 S3 서비스에 접속한 다음 [버킷 만들기] 버튼을 클릭한다. 1-2. 버킷 이름과 AWS 리전을 설정해 준다. AWS 리전은 가까운 곳으로 설정해 주는 것이 좋다. 1-3. 버킷의 퍼블릭 액세스 차단 설정에서 모든 퍼블릭 액세스 차단 체크 박스를 해제해 준다. 우리는 정적 웹 사이트 호스팅을 할 예정이기 때문에 퍼블릭 액세스가 필..
2022년 회고 (2년차 주니어 프론트 개발자의 회고) 처음으로 개발자로서 온전한 1년을 보낸 2022년을 기념하기 위해 그리고 지난날을 되돌아보며 셀프 칭찬과 동기부여도 하고, 아쉬웠던 점과 더 노력해야 할 점을 찾아 개선도 할 겸, 2022년 회고를 작성해보려고 한다. 그렇다면 시작! 2022 서비스 개발 2022년 처음으로 맡은 프로젝트는 서비스 전체의 UI 개편 작업이었다. 사실 원래는 UI 개편이 아닌 특정 기능 고도화 프로젝트를 맡을 예정이었지만, 팀 내에 기획자와 디자이너가 없어 개발자가 주도적으로 기획과 개발을 동시에 진행해야 했던 당시 우리 팀 상황을 미루어보았을 때... 아직 입사한 지 얼마 되지 않아 도메인 지식이 깊지 않던 내가, 기능에 대한 이해와 깊은 도메인 지식이 필요한 기능 고도화 프로젝트를 담당하는 것이 걱정되기도 했고, 동시에..
[css] 사용자의 입력에 따라 높이가 조절되는 textarea 만들기 (input 줄바꿈하기, textarea 높이 자동 조절하기, textarea 아래에 여백 생길 때) input과 같은 모습을 하고 있지만, 그 형태를 유지하면서 줄바꿈을 할 수 있는 UI를 만들고 싶을 때 ? 자동으로 높이가 조절되는 textarea를 만들어 구현이 가능하다. 자동 높이 조절 textarea ? 기본적인 형태의 textarea는 고정된 높이를 가지고 높이 이상의 줄바꿈이 일어나면 스크롤이 생기는 방식으로 되어있다. 자동 높이 조절 textarea는 고정된 높이값 없이 사용자가 입력하는대로 줄바꿈에 따라 높이가 자동 조절되는 textarea다 자동 높이 조절 textarea 만들기 const textarea = useRef(); const handleResizeHeight = () => { textarea.current.style.height = 'auto'; //height 초기화 te..

728x90
반응형