log

AWS S3로 CRA 배포 + GitHub Actions로 자동화 (2)

🏝 GitHub Actions로 배포 자동화 프로젝트에 CICD.yml 파일 생성 루트 디렉토리에 .github/workflows 폴더를 생성한다. 해당 경로에 CICD.yml 파일을 생성하고 원격에 업로드한다. name: CI/CD on: push: branches: - main workflow_dispatch: jobs: cicd: runs-on: ubuntu-latest steps: - uses: actions/checkout@main - run: npm ci - run: npm run build - name: deploy to s3 uses: jakejarvis/s3-sync-action@master with: args: --delete env: AWS_S3_BUCKET: ${{ secrets.A..

AWS S3로 CRA 배포 + GitHub Actions로 자동화 (1)

🏝 정적 웹 사이트 배포 AWS 콘솔에서 S3 서비스 사용 AWS 콘솔로 이동한다. https://us-east-1.console.aws.amazon.com/console/home https://us-east-1.console.aws.amazon.com/console/home us-east-1.console.aws.amazon.com 검색을 통해 S3 서비스로 이동한다. 버킷 만들기 좌측 메뉴에서 버킷 탭으로 이동한다. 여기서 버킷은 하나의 저장소 구획이라고 볼 수 있다. 버킷 만들기를 통해 버킷을 생성한다. 버킷 이름와 AWS 리전 세팅한다. 객체 소유권은 권장하는 세팅인 ACL 비활성으로 둔다. 버킷의 퍼블릭 액세스 차단 설정으로 이동한다. 프로젝트 배포를 위해 차단을 해제한다. 버킷 만들기를 통해 ..

[일러스트레이터] PSD 파일 SVG로 변환하기 + 텍스트 패스화

PSD 파일 SVG로 변환하기 + 텍스트 패스화 1. 일러스트레이터에서 [파일 - 열기] 또는 ctrl + O로 PSD 파일을 열어준다. 2. 원하는 옵션에 체크하고 확인을 클릭한다. (포토샵에서 작업한 레이어를 보존하고 싶다면 '레이어를 오브젝트로 변환' 옵션을 선택하고 하나로 합치고 싶다면 '레이어를 단일 이미지로 병합'을 선택) 3. SVG에서 텍스트를 패스로 다루기 위해 일러스트레이트 내에서 오브젝트화해주는 작업을 진행한다. 선택 도구(v)로 변환할 요소를 선택해준다. 3. [문자 - 윤곽선 만들기] 또는 shift + ctrl + O로 요소를 패스로 변환한다. 4. [파일 - 내보내기 - 내보내기 형식] 클릭 후 파일 형식을 SVG로 세팅해서 PSD를 SVG로 저장한다. 5. 코드 에디터로 SV..

Three.js로 3D 회전목마 구현하기

3D 회전목마 구현 Three.js는 자바스크립트를 이용해서 웹페이지에 3D 오브젝트를 표현할 수 있도록 도와주는 라이브러리이다. 위의 이미지도 Three.js로 회전목마를 구현한 것인데, 그 과정을 기록해보고자 한다.🎊 디자인 레퍼런스로는 아래 코드펜을 참고했다. See the Pen Responsive Houdini 3D Carousel 🐴 by Jhey (@jh3y) on CodePen. Three.js 환경 구성 아래는 Three.js 라이브러리를 개발 환경에 맞게 추가하는 방법들이다. 이번에는 직접 라이브러리 파일을 다운로드 받아서 임포트하는 방식으로 사용했다. npm 패키지로 설치하는 방법 # three.js npm install --save three # vite npm install --s..

[JS] 시간 포매팅 (요일, 시간, AM/PM)

See the Pen Untitled by 23651 (@23651) on CodePen. function getDate() { const week = new Array('SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'); const today = new Date(); const dayName = week[today.getDay()]; const hours = today.getHours() % 12 ? today.getHours() % 12 : 12; const minutes = today.getMinutes() < 10 ? '0' + today.getMinutes() : today.getMinutes(); const..

[Chrome] 크롬으로 간단하게 로컬 웹 서버 구축하기

Github 데모나 웹페이지를 테스트하고 싶을때 크롬의 Web Server for Chrome 앱으로 쉽고 간단하게 환경을 구성 해볼 수 있다. 1. 설치 크롬 웹 스토어에서 Web Server for Chrome을 설치한다. https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb Web Server for Chrome A Web Server for Chrome, serves web pages from a local folder over the network, using HTTP. Runs offline. chrome.google.com 2. 앱 실행 chrome://apps/ 에 접속 ..

[CSS] 형광펜 밑줄 효과

html HIGHLIGHT TEXT css 방법 1 : box-shadow span { /* inset | offset-x | offset-y | color */ box-shadow: inset 0 -20px 0 #bfffa1; } 방법 2 : background span { background: linear-gradient(to top, #bfffa1 40%, transparent 40%); } 방법 3 : pseudo element span { position: relative; } span:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background-color: #bfffa1; z-in..

[포토샵] 곱하기 블렌딩 모드 레이어를 PNG로 저장하는 방법

※ multiply 블렌딩 모드 레이어와 완벽하게 똑같은 이미지를 얻는 방법은 아닙니다. 투명도 등을 적용해서 최대한 비슷한 이미지를 만드는 방법입니다. 그림자같은 간단한 텍스처를 단독으로 가져와야 할 때 활용할 수 있습니다. 1. multiply가 적용된 레이어를 복사합니다. (ctrl + a, ctrl + c) 2. 새 레이어를 추가 한 후 검정색으로 채워줍니다. (ctrl + shift + n, alt + delete) 3. 레이어 마스크를 추가합니다. (레이어 패널에서 선택) 4. 레이어 마스크를 선택한 후 multiply 이미지를 붙여넣습니다. (alt + 클릭, ctrl + v) 5. 이미지를 반전시켜줍니다. (ctrl + i) 6. 레이어의 불투명도를 조절하여 multiply 이미지와 비슷하..

[Excel] 엑셀에서 &nbsp(공백 특수문자) 제거하기

엑셀 내부 컨텐츠를 복사해서 에디터로 붙여넣기하면 소스에서는 보이지는 않지만 &nbsp가 숨겨져 있는 경우가 있다. ↓ 엑셀 내부 컨텐츠를 복사하기 전에 컨텐츠 내 &nbsp를 삭제해주어야 한다. 1. Ctrl + H 2. 찾을 내용 : Alt + 160 3. 바꿀 내용 : 띄어쓰기 4. 모두 바꾸기

[VSCode] 탭 키가 안 될 때 해결법

하단 상태바에 'tab으로 포커스 이동'이 활성화 되어있는지 확인 활성화 되어 있다면, Ctrl + M 으로 해제