티스토리

조이일보

검색하기

블로그 홈

조이일보

joyful-development.tistory.com/m

개발 일지와 영화 리뷰 쓰는 블로그

구독자: 1

방명록 방문하기

주요 글 목록

[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. 프로젝트의 루트 디렉터리 혹.. 공감수 2 댓글수 0 2023. 9. 11.
[AWS] AWS를 이용한 정적 웹페이지 호스팅 및 도메인 연동 방법 (S3 + CloudFront + Route53을 이용한 프론트 프로젝트 배포 방법, 배포 후 403 뜨는 경우 해결 방법) 정적 웹페이지 배포하기 고정된 데이터를 그대로 보여주는 정적 웹페이지(ex. 회사 소개 페이지, 포트폴리오 페이지...)는 AWS를 이용해 간단하게 배포가 가능하다. AWS의 S3와 CloudFront 서비스를 이용해 웹페이지를 배포하고, Route53으로 개인 도메인을 연동하는 방법까지 알아보자! 배포 방법 1. S3 버킷 생성 및 설정 1-1. 우선 AWS 콘솔에 로그인하여 S3 서비스에 접속한 다음 [버킷 만들기] 버튼을 클릭한다. 1-2. 버킷 이름과 AWS 리전을 설정해 준다. AWS 리전은 가까운 곳으로 설정해 주는 것이 좋다. 1-3. 버킷의 퍼블릭 액세스 차단 설정에서 모든 퍼블릭 액세스 차단 체크 박스를 해제해 준다. 우리는 정적 웹 사이트 호스팅을 할 예정이기 때문에 퍼블릭 액세스가 필.. 공감수 3 댓글수 0 2023. 4. 9.
2022년 회고 (2년차 주니어 프론트 개발자의 회고) 처음으로 개발자로서 온전한 1년을 보낸 2022년을 기념하기 위해 그리고 지난날을 되돌아보며 셀프 칭찬과 동기부여도 하고, 아쉬웠던 점과 더 노력해야 할 점을 찾아 개선도 할 겸, 2022년 회고를 작성해보려고 한다. 그렇다면 시작! 2022 서비스 개발 2022년 처음으로 맡은 프로젝트는 서비스 전체의 UI 개편 작업이었다. 사실 원래는 UI 개편이 아닌 특정 기능 고도화 프로젝트를 맡을 예정이었지만, 팀 내에 기획자와 디자이너가 없어 개발자가 주도적으로 기획과 개발을 동시에 진행해야 했던 당시 우리 팀 상황을 미루어보았을 때... 아직 입사한 지 얼마 되지 않아 도메인 지식이 깊지 않던 내가, 기능에 대한 이해와 깊은 도메인 지식이 필요한 기능 고도화 프로젝트를 담당하는 것이 걱정되기도 했고, 동시에.. 공감수 1 댓글수 4 2023. 1. 31.
[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.. 공감수 14 댓글수 4 2022. 8. 3.
[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 에서 다양한 형태의 슬라이드를 확인할 수 있고 이 중에서 필요한 슬라이드를 선택해서 적용하면 되는데, 이번.. 공감수 13 댓글수 4 2021. 9. 20.
[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.. 공감수 11 댓글수 0 2021. 8. 6.
[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.. 공감수 9 댓글수 0 2021. 6. 30.
[GitHub] 아직 코드리뷰가 익숙하지 않은 분들을 위한... 코드리뷰는 어떻게 해야할까? (+ GitHub에서 PR로 코드리뷰 하는 법 ) 최근 약 한 달 전부터 넥스트스텝의 '블랙커피' 스터디에 참여하며 매주 스터디원들과 함께 상호 코드리뷰를 하고 있다. 스터디를 시작하기 전까지는 코드리뷰를 받아보기만 했고, 직접 리뷰를 해본 경험은 없었어서 처음엔 내가 코드리뷰를 한다는 것 자체가 낯설기도 하고, 막막하기까지 했었다. 하지만 매주 코드리뷰를 반복적으로 진행하다 보니 어느덧 지금은 처음보다 코드리뷰가 훨씬 익숙해지게 되었다. 아직은 많이 부족하지만, 코드리뷰를 많이 해보지 않은 분, 코드리뷰가 처음인 분들에게 나의 경험이 조금이나마 도움이 되길 바라며 코드리뷰에 대해 간단히 포스팅해본다. 코드리뷰? 코드리뷰는 간단히 말해 상대방의 코드를 검토해보고 피드백을 남겨주는 것이다. 여러 서비스 기업에서 이미 코드리뷰의 장점을 알아 코드리뷰 문화가.. 공감수 15 댓글수 0 2021. 6. 15.
[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 $ .. 공감수 6 댓글수 0 2021. 6. 14.
[Git] 커밋을 해도 잔디가 안 심어질 때, fork한 repository의 커밋으로도 잔디를 심어보자, 저장소의 커밋 기록까지 전부 복사해오기 ! 열심히 개발한 날엔 왠지 잔디를 한 번씩 확인해보게 된다. 잔디 심기에 푹 빠져있는 건 아니지만 그래도 채워져 있는 잔디를 보면 기분이 좋아지니까 말이다. 하지만 최근 스터디를 하면서 꽤나 열심히 커밋을 해왔는데, 잔디가 채워지지 않았길래 알아보니. 나의 repository의 커밋은 반영되지만, fork 한 repository에서의 커밋은 잔디에 적용되지 않는다고 한다. 왠지 억울하니 지금까지의 수고를 보상받기 위해 fork 한 repository의 커밋으로도 잔디를 심을 수 있는 방법을 알아보자 fork 한 repository를 새로운 repository에 복사해오는 방법 ※ fork했던 'js-calculator'라는 저장소의 커밋까지 전부 'javascript-calculator'라는 개인 저장소로.. 공감수 14 댓글수 3 2021. 6. 14.
[최적화] 이미지 압축과 사이즈 조절로 웹 사이트 최적화하기,로딩속도와 TBT 개선 (+이미지 압축 사이트 추천) 현재 개발 중인 예약관리 서비스에 이미지 최적화를 적용해보려고 한다. 사이트 첫화면 로그인 컴포넌트 아래에 서비스에 대해 설명하는 부분이 있다. 보다 효과적으로 서비스를 어필하기 위해 스크롤에 반응하는 애니메이션 효과를 입힌 이미지와 설명을 넣어 구현했는데... 최적화 전 - 사이트 화면 화면이 버벅이면서 뭔가 매끄럽지 않은 느낌이 든다 - 개발자 도구를 켰을 때 화면 크롬 개발자도구를 켜놓고 보면 더욱 눈에 잘 보인다 상단에 있는 대표 배경이미지가 다시 로드되는 게 눈에 보이고 이미지 애니메이션이 버벅이는 건 물론 폰트가 뒤늦게 적용되는 모습까지 다 보인다... 이대로는 안 되겠다 😫 개선해보자...! 이미지 최적화 하기 현재 서비스 첫 화면에서 사용하고 있는 이미지들이다 이미지의 크기를 보니 작게는 .. 공감수 1 댓글수 0 2021. 2. 24.
[Naming] register? create? 회원가입 컴포넌트 네이밍 register? create? 회원가입 시 사용할 단어 계정 로그인/로그아웃 컴포넌트명을 login,logout으로 결정하면서 회원가입 컴포넌트 명 후보 중 sign up은 탈락했다. (지금 생각해보니 sign up / sign in / sign out 으로 관리하는 것도 나쁘지 않은 것 같다.) register account ? create account ? 둘 중에 어떤 단어를 써야할까 고민하며 여러 글을 읽어보던 중 아래와 같은 글을 발견했다. I faced this topic in for several projects and I’ve to say that is stil not 100% clear if, as UXs, we have to pay attention to it. In terms of .. 공감수 2 댓글수 0 2021. 2. 22.
[Webpack] file-loader와 url-loader 비교 차이점 정리 file-loader와 url-loader? 웹팩 설정 중 둘의 차이가 궁금해 알아보며 공부했던 내용을 정리해봅니다 file-loader The file-loader resolves import/require() on a file into a url and emits the file into the output directory. - 파일에 import/requrie 구문을 만들어주고, 파일을 output 폴더에 생성해주는 로더 → 파일 자체를 가져옴 url-loader A loader for webpack which transforms files into base64 URIs. ->The url-loader works like the file-loader, but can return a DataURL .. 공감수 2 댓글수 0 2021. 2. 20.
[최적화] lazy loading 레이지 로딩으로 로딩 속도를 개선해보자 지난 프로젝트 때 만들었던 에어비엔비 클론 사이트 날짜, 인원, 요금 범위를 지정해 원하는 조건의 숙소를 검색하는 기능을 가지고 있다. 처음 메인 화면에서 전체 숙소를 보여주는데, 서버에서 총 2999개의 숙소 데이터가 한번에 넘어온다. 3000개에 가까운 데이터가 한번에 화면에 나오니 당연하게도 로딩 속도가 굉장히 느렸다. Lazy Loading 적용 전 기나긴 로딩.. 중간에 잠깐 멈추는 듯 하더니 폭발적으로 request를 보낸다.. 총 3010개의 request를 보내고 데이터를 전부 로드하는데 42.11s가 걸렸다 내가 유저라도 이정도로 느린 사이트는 안 쓸 것 같다. 이대로는 안 되겠다. 사용자가 보는 첫화면의 이미지만 미리 로드하고 이후의 이미지는 나중에 로드하는 Lazy Loading(레이.. 공감수 1 댓글수 0 2021. 2. 4.

728x90

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.