반응형 깃허브39 깃허브 액션 - is-website-vulnerable로 웹사이트 취약점 점검하기 Git / GitHub 전체 링크 참고 - https://github.com/lirantal/is-website-vulnerable - github-pages-deploy-action로 리액트 gh-pages 자동 배포하기 인터넷 서점 알라딘의 취약점을 점검하는 깃허브 액션을 만들어 보자. 링크에 있는 예제를 리포지토리의 .github/workflows/check-website.yml에 추가한다. name: Test site for publicly known js vulnerabilities on: push jobs: security: runs-on: ubuntu-latest steps: - name: Test for public javascript library vulnerabilities uses: .. 2024. 4. 18. 깃허브 액션 - github-pages-deploy-action로 리액트 gh-pages 자동 배포하기 Git / GitHub 전체 링크 참고 - gh-pages로 리액트 프로젝트 배포하기 - https://docs.github.com/en/actions/using-jobs/assigning-permissions-to-jobs - https://github.com/JamesIves/github-pages-deploy-action 리포지토리에 코드가 push 되는 것과 깃허브 페이지를 배포하는 것은 별개의 작업이다. (npm run deploy) 리포지토리에 push가 되면 페이지가 자동 배포되도록 깃허브 액션의 yml 파일을 만들어 보자. .github/workflows/push-and-deploy.yml을 만들어 보자. github-pages-deploy-action을 쓰려면 contents의 permi.. 2024. 4. 18. 깃허브 머메이드 - 활동 다이어그램 그리기 (Draw Activity Diagram using GitHub Mermaid) Git / GitHub 전체 링크 참고 - https://mermaid.js.org/syntax/flowchart.html 깃허브 머메이드를 이용해 활동(액티비티) 다이어그램을 그려보자. 머메이드에서 액티비티 다이어그램은 지원하지 않고 Flow Chart를 지원한다. ```mermaid --- title: Activity Diagram --- flowchart TD A --> B ``` 좌우로 그리고 싶다면 "LR" 로 표기한다. ```mermaid flowchart LR A --> B ``` 총 4가지 (TB = TD) 방식을 지원한다. TB - Top to bottom TD - Top-down/ same as top to bottom BT - Bottom to top RL - Right to left.. 2024. 3. 4. 깃허브 머메이드 - 상태 다이어그램 그리기 (Draw Statechart Diagram using GitHub Mermaid) Git / GitHub 전체 링크 참고 - https://mermaid.js.org/syntax/stateDiagram.html - 상태 다이어그램 깃허브 머메이드를 이용해 상태 다이어그램을 그려보자. "[*]"로 Initial State와 Final State를 표시할 수 있고, "-->" 로 transition을 표현할 수 있다. transition 옆에 ":" 로 텍스트를 추가할 수 있다. ```mermaid --- title: Statechart Diagram --- stateDiagram-v2 [*] --> Source Source --> Target : event [guard] / action Target --> [*] ``` 그리고 direction LR로 방향을 좌우로 변경한다. ```me.. 2024. 3. 3. 깃허브 머메이드 - 시퀀스 다이어그램 그리기 (Draw Sequence Diagram using GitHub Mermaid) Git / GitHub 전체 링크 참고 - https://mermaid.js.org/syntax/sequenceDiagram.html - 시퀀스 다이어그램 깃허브 머메이드를 이용해 시퀀스 다이어그램을 그려보자. actor나 participant로 오브젝트(or Role)를 생성할 수 있고 as를 이용해 nickname을 만들 수 있다. ```mermaid --- title: Sequence Diagram example --- sequenceDiagram actor A participant B actor C as Cookie participant D as Dragon A ->> B : step 1 B ->> C : step 2 C ->> D : step 3 ``` participant와 participan.. 2024. 3. 2. 깃허브 머메이드 - 클래스 다이어그램 그리기 (Draw Class Diagram using GitHub Mermaid) Git / GitHub 전체 링크 참고 - https://mermaid.js.org/syntax/classDiagram.html - 클래스 다이어그램 깃허브 머메이드를 이용해 클래스 다이어그램을 그려보자. 비주얼 스튜디오 코드에서 mermaid를 검색하면 Preview 플러그인을 다운 받을 수 있다. 플러그인을 설치하면 아래와 같이 클래스 다이어그램을 미리볼 수 있다. 클래스 다이어그램 화살표 머메이드에서 아래 코드를 작성해보자. ```mermaid --- title: Class Diagram example --- classDiagram classA Navigable Association (A에는 B가 있다. A has B) Realization / Implementation (실체화, 인터페이스 구현).. 2024. 1. 27. 깃허브 액션 - Schedule로 반복 작업하기 Git / GitHub 전체 링크 참고 - https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#schedule 아래의 yml을 repo의 .github/workflow에 추가해 보자. (just-10-minutes.yml) name: Every 10 Minutes schedule on: schedule: - cron: '*/10 * * * *' jobs: ten_minutes_schedule_job: runs-on: ubuntu-latest steps: - name: Display current time run: | echo "Current Time" echo "UTC : $(date +"%Y-%m-%dT%H:%.. 2024. 1. 7. 깃허브 액션 - Push 될 때 메일 보내기 (Send Email using GitHub Actions) Git / GitHub 전체 링크 참고 - Node JS + jest를 GitHub Actions로 실행하기 - nodemailer로 구글, 네이버, 다음 카카오 메일 보내기 - 메일 알림 설정하기 깃허브 액션을 이용하여 repo에 push될 때마다 메일을 보내보자. 먼저 링크를 참고하여 아래의 sendEmail.js를 repository에 저장하자. 참고로 gmail의 경우 from을 설정할 필요가 없다. const nodemailer = require('nodemailer'); async function sendEmail() { const transporter = nodemailer.createTransport({ service: "gmail", secure: false, auth: { user: p.. 2023. 12. 16. 리액트 - 쿠키로 GitHub OAuth 로그인 인증 관리하기 with react-cookie 리액트 전체 링크 Git / GitHub 전체 링크 참고 - 로컬 스토리지 사용 방법과 세션 스토리지 비교 - 댓글 기능 만들기 with react-comments-section - 로그인한 사용자만 댓글 기능 사용하기 - GitHub RESTful API로 댓글 저장하기 - 리액트 쿠키로 GitHub OAuth 로그인 인증 관리하기 - Mui Pagination으로 댓글 페이지로 나누기 현재 로그인 인증은 로컬 스토리지를 이용하여 처리하였다. react-cookie를 이용하여 로그인 인증 정보를 관리해보자. 로컬 스토리지와 쿠키의 차이는 다음과 같다. 로컬 스토리지 쿠키 용량 최소 5MB 이상 최대 4KB 전송 서버에 자동 전송 X (직접 구현) HTTP 요청 헤더에 자동 포함 수명 만료 기간 미설정시.. 2023. 11. 15. 이전 1 2 3 4 5 다음 반응형
