본문 바로가기

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..
[React] 리액트에서 Swiper.js 를 사용해보자. Swiper 슬라이드 사용예제, Navigation의 arrow 버튼 커스텀하기 스와이프 기능이 있는 슬라이드를 만들어야 할 때 유용한 Swiper 라이브러리를 리액트에서 사용하는 방법과 예제를 포스팅해보려고 한다 Swiper Swiper.js는 스와이프 기능이 있는 슬라이드 UI를 제공하는 라이브러리이다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 공식사이트의 Demos 에서 다양한 형태의 슬라이드를 확인할 수 있고 이 중에서 필요한 슬라이드를 선택해서 적용하면 되는데, 이번..
[MongoDB] 몽고DB에서 Join을 해보자 - $lookup으로 Join하기, MongoDB Join 예제 NOSql인 MongoDB는 Join을 지원하지 않는다. 하지만, MongoDB 3.2 버전부터는 Join과 비슷한 역할을 하는 '$lookup'을 지원하고 있다. MongoDB의 Aggregation에서 사용할 수 있는 '$lookup'으로 컬렉션끼리 Join하는 방법을 알아보자. Products 컬렉션 db.products.insert([ {"_id" : objectId('111111111111'), "title" : "책제목1", "category" : '시'}, {"_id" : objectId('222222222222'), "title" : "책제목2", "category" : '소설'}, {"_id" : objectId('333333333333'), "title" : "책제목3", "catego..
[Heroku] 헤로쿠로 Node.js 웹사이트 배포하기, 설치부터 배포까지 헤로쿠 사용법 1. heroku에 가서 계정 생성 https://www.heroku.com Cloud Application Platform | Heroku Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. www.heroku.com 2. heroku CLI 설치 https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up Getting Started on Heroku with Node.js | Heroku Dev Center This tutorial will have you..
[GitHub] 아직 코드리뷰가 익숙하지 않은 분들을 위한... 코드리뷰는 어떻게 해야할까? (+ GitHub에서 PR로 코드리뷰 하는 법 ) 최근 약 한 달 전부터 넥스트스텝의 '블랙커피' 스터디에 참여하며 매주 스터디원들과 함께 상호 코드리뷰를 하고 있다. 스터디를 시작하기 전까지는 코드리뷰를 받아보기만 했고, 직접 리뷰를 해본 경험은 없었어서 처음엔 내가 코드리뷰를 한다는 것 자체가 낯설기도 하고, 막막하기까지 했었다. 하지만 매주 코드리뷰를 반복적으로 진행하다 보니 어느덧 지금은 처음보다 코드리뷰가 훨씬 익숙해지게 되었다. 아직은 많이 부족하지만, 코드리뷰를 많이 해보지 않은 분, 코드리뷰가 처음인 분들에게 나의 경험이 조금이나마 도움이 되길 바라며 코드리뷰에 대해 간단히 포스팅해본다. 코드리뷰? 코드리뷰는 간단히 말해 상대방의 코드를 검토해보고 피드백을 남겨주는 것이다. 여러 서비스 기업에서 이미 코드리뷰의 장점을 알아 코드리뷰 문화가..
[Git] 다른 사람의 pr을 로컬에서 확인하는 법, pull request 가져오기 코드리뷰를 하다보면 다른 사람의 pull request를 로컬로 가져와 실행해볼 때가 있다. 다른 사람의 pr을 로컬에서 확인하려면 아래처럼 실행하면 된다. $ git clone ${ 저장소 주소 } $ cd ${ 저장소 이름 } $ git config --add remote.origin.fetch "+refs/pull/*/head:refs/remotes/origin/pr/*" $ git fetch origin $ git checkout -t origin/pr/${ 가져오고 싶은 pr 번호 } 예시 ) js-calculator라는 저장소의 pr 7번을 가져오기 $ git clone https://github.com/hyewon3938/js-calculator.git $ cd js-calculator $ ..
[Git] 커밋을 해도 잔디가 안 심어질 때, fork한 repository의 커밋으로도 잔디를 심어보자, 저장소의 커밋 기록까지 전부 복사해오기 ! 열심히 개발한 날엔 왠지 잔디를 한 번씩 확인해보게 된다. 잔디 심기에 푹 빠져있는 건 아니지만 그래도 채워져 있는 잔디를 보면 기분이 좋아지니까 말이다. 하지만 최근 스터디를 하면서 꽤나 열심히 커밋을 해왔는데, 잔디가 채워지지 않았길래 알아보니. 나의 repository의 커밋은 반영되지만, fork 한 repository에서의 커밋은 잔디에 적용되지 않는다고 한다. 왠지 억울하니 지금까지의 수고를 보상받기 위해 fork 한 repository의 커밋으로도 잔디를 심을 수 있는 방법을 알아보자 fork 한 repository를 새로운 repository에 복사해오는 방법 ※ fork했던 'js-calculator'라는 저장소의 커밋까지 전부 'javascript-calculator'라는 개인 저장소로..
728x90
반응형

티스토리툴바