diff --git a/CHANGELOG.md b/CHANGELOG.md index 123cf12..b4b44fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,28 @@ 본 프로젝트는 [시맨틱 버저닝(Semantic Versioning)](https://semver.org/lang/ko/) 규칙을 따릅니다. 버전 표기 방식은 `MAJOR.MINOR.PATCH`(예: 1.2.3)입니다. +## [1.2.1] - 2025-12-12 + +**Branch**: `YD-v1.2.1-포스팅가지치기` + +### Added 새로운 기능 + +- docs: v1.2.1작업내용문서 + +### Changed 기존 기능의 변경사항 + +### Deprecated 곧 지워질 기능 + +### Removed 지금 지워진 기능 + +- posting: 옛날에 쓴 단순 정보성 블로그들 전체삭제 + +### Fixed 버그 픽스 + +### Security 취약점이 있는 경우 + +--- + ## [1.1.3] - 2025-12-02 **Branch**: `YD-v1.1.3-반응형헤더컴포넌트제작` diff --git "a/_posts/AWS/aws-cicd-\354\232\251\354\226\264\354\240\225\353\246\254.md" "b/_posts/AWS/aws-cicd-\354\232\251\354\226\264\354\240\225\353\246\254.md" deleted file mode 100644 index 51734f1..0000000 --- "a/_posts/AWS/aws-cicd-\354\232\251\354\226\264\354\240\225\353\246\254.md" +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: "AWS CI/CD 용어정리" -excerpt: "AWS로 CI/CD를 구축하며 배운 용어정리글 입니다." -coverImage: "/assets/blog/posts/aws-cicd-words/cover.png" -date: "2024-06-19T18:07:00" -ogImage: - url: "/assets/blog/posts/aws-cicd-words/cover.png" ---- - -## 🤔 Bastion 호스트/서버 - -- Bastion : 수호자, 보루, 요새 -- 인프라, 네트워크의 입구에서 허용된 사람만 출입할 수 있는 역할을 수행 -- DB에는 중요한 정보들이 가득해 퍼블릭한 접근을 불허해야 함 -- 하지만 개발시 로컬에서 접근해 간편하게 접근을 해야하는 경우 존재 -- Bastion서버를 통해 특정 서버에서만 DB접근을 허용해 간편하게 사용 - -## 🤔 IAM (Identity and Access Management) - -- 액세스 관리: AWS 서비스와 리소스에 대한 접근 권한을 관리 -- 사용자 및 그룹: 사용자와 그룹을 생성하고, 각기 다른 권한을 할당합니다. -- 정책: 세밀한 권한 관리를 위해 JSON 형식의 정책을 사용하여 액세스를 제어합니다. -- 이를 통해 AWS 서비스와 리소스에 대한 올바른 권한을 가진 사용자 및 역할 설정 - -## 🤔 S3 (Simple Storage Service) - -- AWS에서 제공하는 파일 저장 서비스 -- Bucket 이라는 단위로 구성 -- 스토리지: 파일, 이미지, 비디오 등을 저장할 수 있는 객체 스토리지 -- 백업 및 복구: 데이터 안전하게 백업, 복구 -- 호스팅: 정적 웹사이트 호스팅 지원 -- Github Actions에서 빌드된 결과물(zip)이 업로드 되는 장소 - -## 🤔 CodeDeploy - -- 자동 배포: 애플리케이션을 EC2, Lambda, 온프레미스 서버에 자동으로 배포 -- 배포 전략: 블루/그린, 롤링 업데이트 등 다양한 배포 전략을 지원 -- S3 버킷에 저장된 결과물(zip)을 다운로드하여 EC2 인스턴스에 배포 - -## 🤔 로드밸런서 (Elastic Load Balancing) - -- 서버에 가해지는 부하를 분산해주는 장치, 기술 -- 클라이언트와 서버풀(분산 네트워클르 구성하는 서버들의 그룹) 사이에 위치 한 대의 서버로 부하가 집중되지 않도록 트래픽을 관리. 이를 관리하는 2가지 방법 존재 -- Scale-up: 서버 자체의 성능을 확장 -- Scale-out: 기존 서버와 동일하거나 낮은 성능의 서버를 두 대 이상 증설하여 운영하는것을 의미, 로드밸런싱이 반드시 필요 - -## 🤔 오토 스케일링 - -- 클라우드의 유연성을 돋보이게 하는 핵심 기술 -- CPU, 메모리, 디스크, 네트웍 트래픽과 같은 시스템 자원들의 메트릭 값을 모니터링 하여 서버 사이즈를 자동으로 조절 -- 트래픽 급증시 자동으로 인스턴스 추가 - -## 📂 출처 - -- https://aws.amazon.com/ko/s3/faqs/ -- [https://velog.io/@ghldjfldj/AWS-S3란-무엇인가](https://velog.io/@ghldjfldj/AWS-S3%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80) -- [https://velog.io/@moduri/로드밸런싱과-오토-스케일링](https://velog.io/@moduri/%EB%A1%9C%EB%93%9C%EB%B0%B8%EB%9F%B0%EC%8B%B1%EA%B3%BC-%EC%98%A4%ED%86%A0-%EC%8A%A4%EC%BC%80%EC%9D%BC%EB%A7%81) diff --git a/_posts/AWS/aws-s3-deploy.md b/_posts/AWS/aws-s3-deploy.md deleted file mode 100644 index 2620ed0..0000000 --- a/_posts/AWS/aws-s3-deploy.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: "AWS S3로 React배포하기" -excerpt: "Github action CI/CD구축을 위한 빌드업" -coverImage: "/assets/blog/posts/aws-s3-deploy/cover.jpg" -date: "2024-03-17" -ogImage: - url: "/assets/blog/posts/aws-s3-deploy/cover.jpg" ---- - -## 0. AWS S3로 배포하는데 사용한것 - -> IAM, S3, CloudFront, Route 53, 가비아 - -### IAM - -- Identity and Access Management로 AWS 리소스에 대한 엑세스를 안전하게 제어할 수 있는 웹 서비스 -- 리소스를 사용하도록 인증 및 권한 부여된 대상을 제어 - -### S3 - -- Simple Storage Service(S3)는 최고의 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스 -- 데이터를 버킷 내의 객체(해당 파일을 설명하는 모든 메타데이터)로 저장하는 객체 스토리지 서비스 - -### CloudFront - -- .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스 -- CDN(Content Delivery Network or Content Distribution Network) : 콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장해서 제공하는 시스템 -- Edge Location이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공 -- 중간 캐시 서버에서 콘텐츠 전달 - 캐싱을 통해 사용자에게 더 빠른 전송 속도를 제공 (서버 부하 감소) -- 손쉽게 http 요청을 https로 리다이렉션 가능 - -### Route 53 - -• 도메인 등록, DNS 라우팅, 상태 확인 등을 실행할 수 있는 Domain Name System (DNS) 웹 서비스 - -### 가비아 - -• 도메인 구매 사이트 - -## 1. IAM 사용자 생성 - -1. 사용자생성 - 이름입력 - -![](/assets/blog/posts/aws-s3-deploy/1.png) - -1. 권한정책 - AmazonS3FullAccess, CloudFrontFullAccess 체크 - 생성된 csv 다운로드 - -![](/assets/blog/posts/aws-s3-deploy/2.png) - -## 2. S3 버킷 만들기 - -1. 버킷만들기 - 이름입력 - ACL활성화 - 모든퍼블릭 엑세스차단 체크버튼 해제! - 현재설정으로 인해~ 부분만 체크 - 버킷만들기 - -![](/assets/blog/posts/aws-s3-deploy/3.png) - -![](/assets/blog/posts/aws-s3-deploy/4.png) - -1. 생성한 버킷의 속성탭으로 이동 - -![](/assets/blog/posts/aws-s3-deploy/5.png) - -정적웹사이트 호스팅탭 - 편집 이동 - 활성화 체크 - 인덱스문서, 오류문서 index.html로 설정해주고 저장. - -1. 생성한 버킷의 권한탭으로 이동 - -![](/assets/blog/posts/aws-s3-deploy/6.png) - -버킷정책 탭 - 편집 - 정책 생성기 - -![](/assets/blog/posts/aws-s3-deploy/7.png) - -Step 1 : S3 Bucket Policy 체크 - -Step 2 : Effect = Allow, Principal = _, Actions = GetObject , ARN = 정책탭의 버킷 ARN을 그대로 가져와서 /_ 를 붙여줍니다 - -![](/assets/blog/posts/aws-s3-deploy/8.png) - -generate policy후 생성된 json 복사 - 버킷 정책탭에가서 붙여넣기 - -![](/assets/blog/posts/aws-s3-deploy/9.png) - -여기서 해당 버킷에들어가서 빌드파일 업로드 해도됩니다. - -## 3. S3에 코드 업로드 - -AWS CLI사용을 통한 간편업로드 - -https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html -문서를 참고해 운영체제에 맞게 AWS CLI설치 - -AWS CLI 설치가 완료되면 터미널에 다음과 같은 명령어를 입력한다 - -aws configure --profile [IAM 사용자 이름] - -Key ID : IAM 사용자 추가할 때 다운받았던 CSV 파일의 Access key ID - -Access Key : IAM 사용자 추가할 때 다운받았던 CSV 파일의 Secret access key - -region name : ap-northeast-2 - -output format : json - -입력하면 사용자 설정 완료!! - -이후 아래명령어를 입력하면 버킷 배포완료 - -aws s3 sync ./build s3://[S3 버킷 이름] --profile=[IAM 사용자 이름] - -![](/assets/blog/posts/aws-s3-deploy/10.png) - -## 4. CloudFront 설정 - -![](/assets/blog/posts/aws-s3-deploy/11.png) - -Origin domain = 만든 버킷 도메인 입력 - -원본 액세스 = Legacy access identities 체크, 원본 OAI가 없으면 생성해주고 선택 - -뷰어 프로토콜 정책 = Redirect HTTP to HTTPS 체크 - -도메인설정 Route53으로 해줄예정이므로 CloudFront 킵해두고 Route53으로 이동 - -## 4. Route53 설정 - -![](/assets/blog/posts/aws-s3-deploy/12.png) - -![](/assets/blog/posts/aws-s3-deploy/13.png) - -호스팅 영역생성 - 도메인이름(저는 가비아에서 구매한 도메인입력했습니다) - -## 5. 다시 CloudFront 이동 - -대체 도메인에 도메인 입력 - 인증서요청(aws certificate manager로 이동합니다) - -![](/assets/blog/posts/aws-s3-deploy/14.png) - -도메인입력 - 요청 - -![](/assets/blog/posts/aws-s3-deploy/15.png) - -검증대기중인 도메인탭에서 Route 53에서 레코드 생성을 선택에서 CNAME생성해야한다 - -![](/assets/blog/posts/aws-s3-deploy/16.png) - -30분정도 기다리면 검증대기중에서 발급됨으로 변경된다고 한다.(1시간이지나도 안되는 상황 - [가비아 도메인 연결안해놓고 삽질…](https://velog.io/@whljm1003/AWS-S3%EB%B0%B0%ED%8F%AC%EB%B6%80%ED%84%B0-HTTPS%EC%A0%81%EC%9A%A9%EA%B9%8C%EC%A7%80-2)) - -발급완료 이후 - CloudFront로 이동해서 SSL인증서 선택 - 기본값 루트객체 index.html 설정 후 배포 - -![](/assets/blog/posts/aws-s3-deploy/17.png) - -cloudFront 무효화탭 이동후 무효화 생성 경로 /\* 등록 - -## 6. Route53 A레코드 추가 - -CloudFront 주소와 Route 53 도메인 연결 해주기위해 A레코드를 추가해야한다고한다 - -레코드 유형 A -트래픽 라우팅 대상 CloudFront -선택후 레코드생성. - -결과물 -https://ht-global-test.store/ - -## 참고자료 - -- [https://velog.io/@krkorklo58/AWS-S3로-React-배포하기#3-s3에-코드-업로드](https://velog.io/@krkorklo58/AWS-S3%EB%A1%9C-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0#3-s3%EC%97%90-%EC%BD%94%EB%93%9C-%EC%97%85%EB%A1%9C%EB%93%9C) -- [https://velog.io/@whljm1003/AWS-S3배포부터-HTTPS적용까지-2](https://velog.io/@whljm1003/AWS-S3%EB%B0%B0%ED%8F%AC%EB%B6%80%ED%84%B0-HTTPS%EC%A0%81%EC%9A%A9%EA%B9%8C%EC%A7%80-2) diff --git a/_posts/AWS/aws-s3-githubaction.md b/_posts/AWS/aws-s3-githubaction.md deleted file mode 100644 index ab0afb6..0000000 --- a/_posts/AWS/aws-s3-githubaction.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: "AWS S3, Github Action 으로 CI/CD 구축하기" -excerpt: "Github action yaml 작성방법 편" -coverImage: "/assets/blog/posts/aws-s3-githubaction/cover.png" -date: "2024-03-20" -ogImage: - url: "/assets/blog/posts/aws-s3-githubaction/cover.png" ---- - -## 개발환경 - -> React, Vite, pnpm, aws s3, Iam, cloudfront - -## 0. Github Action CI/CD 구축에앞서 - -yaml 키값 입력을 위해서는 AWS S3, Iam등을 미리 만들어 키를 발급해야한다. - -자세한 방법은 [여기](https://youngduck-devlog.vercel.app/posts/aws-s3-deploy)를 참고해주세요 - -## 1. github action 파일 생성 - -![](/assets/blog/posts/aws-s3-githubaction/1.png) - -- 루트폴더에 .github> workflows> front-build.yaml 파일 생성 -- 파일명은 자유롭게 설정하셔도 됩니다. - -## 2.yaml 파일 기본내용 작성하기 - -```yaml -# name 자유롭게 설정해주면 됩니다. -name: Front Deployment - -# main 브랜치에 push가 되었을때!, develop등 다양한 브랜치로 설정가능 -on: - push: - branches: - - main - -# jobs: 여기서부터 트리거에따라 실행되는 파트 -# runs on: ubuntu 환경 -jobs: - build: - name: Build and Deploy - runs-on: ubuntu-latest -``` - -## 3. pnpm 빌드코드 작성하기 - -```yaml -# pnpm의 경우는 아래코드로 yaml 빌드를 설정해야합니다. -steps: - - name: Checkout - uses: actions/checkout@v3 - - - name: Setup pnpm - uses: pnpm/action-setup@v2 - with: - version: 8 - - - name: install dependencies and build - run: pnpm install --frozen-lockfile && pnpm run build -``` - -## 4. AWS 연동코드 작성하기 - -```yaml - - name: Configure AWS credentials - uses: aws-actions/configure-aws-credentials@v1 - with: - aws-access-key-id: ${{ secrets.AWS_S3_ACCESS_KEY_ID }} - aws-secret-access-key: ${{ secrets.AWS_S3_SECRET_ACCESS_KEY_ID }} - aws-region: ap-northeast-2 - - - name: Upload to S3 - env: - BUCKET_NAME: ${{ secrets.AWS_S3_BUCKET_NAME}} - run: | - aws s3 sync \ - ./dist s3://$BUCKET_NAME - - - name: CloudFront Invalidation - env: - CLOUD_FRONT_ID: ${{ secrets.AWS_CLOUDFRONT_ID}} - run: | - aws cloudfront create-invalidation \ - --distribution-id $CLOUD_FRONT_ID --paths /* -``` - -## 5. Github env값 등록해주기 - -- Github 레포지토리 Settings 이동 - -- Security탭 - Actions 이동 - New repository secret 클릭 - -![](/assets/blog/posts/aws-s3-githubaction/2.png) - -- 이후 아래의 aws 값들을 넣어줍니다. - -> **AWS_S3_ACCESS_KEY_ID** : aws iam에서 발급받은 엑세스 키**AWS_S3_SECRET_ACCESS_KEY_ID** : aws iam 에서 발급받은 시크릿 키**AWS_S3_BUCKET_NAME** : S3 버킷 이름
**AWS_CLOUDFRONT_ID** : cloudfront Id - -## 5. 결과 코드 - -```jsx -name: Front Deployment - -on: - push: - branches: - - main - -jobs: - build: - name: Build and Deploy - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v3 - - - name: Setup pnpm - uses: pnpm/action-setup@v2 - with: - version: 8 - - - name: install dependencies and build - run: pnpm install --frozen-lockfile && pnpm run build - - - name: Configure AWS credentials - uses: aws-actions/configure-aws-credentials@v1 - with: - aws-access-key-id: ${{ secrets.AWS_S3_ACCESS_KEY_ID }} - aws-secret-access-key: ${{ secrets.AWS_S3_SECRET_ACCESS_KEY_ID }} - aws-region: ap-northeast-2 - - - name: Upload to S3 - env: - BUCKET_NAME: ${{ secrets.AWS_S3_BUCKET_NAME}} - run: | - aws s3 sync \ - ./dist s3://$BUCKET_NAME - - - name: CloudFront Invalidation - env: - CLOUD_FRONT_ID: ${{ secrets.AWS_CLOUDFRONT_ID}} - run: | - aws cloudfront create-invalidation \ - --distribution-id $CLOUD_FRONT_ID --paths /* -``` - -## 출처 - -- [pnpm yaml 작성법](https://jonghoonpark.com/2023/08/26/firebase-hosting-deploy-via-github-aciton-with-pnpm) -- [React 프로젝트 Github action으로 cicd 구축하기](https://s0ojin.tistory.com/48) diff --git a/_posts/CS/cs-study-frontend-1.md b/_posts/CS/cs-study-frontend-1.md deleted file mode 100644 index 67ae9bd..0000000 --- a/_posts/CS/cs-study-frontend-1.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: "브라우저 렌더링 과정" -excerpt: "브라우저 렌더링 과정, Reflow, Repaint 개념에 대한 정리글입니다." -coverImage: "/assets/blog/posts/cs-study/fe-cover.png" -date: "2024-03-29T15:11:00" -ogImage: - url: "/assets/blog/posts/cs-study/fe-cover.png" ---- - -## 브라우저 렌더링 원리 - -브라우저가 화면에 나타나는 요소를 렌더링할때, **렌더링엔진** (웹킷, 게코, 블링크) 사용. - -렌더링엔진 HTML,CSS,JS렌더링시 **CRP** 프로세스 사용. - -## CRP(Critical Rendering Path, 중요 렌더링 경로) 과정 - -- HTML 파싱, DOM트리 구축 -- CSS 파싱, CSSOM트리 구축 - -- JavaScript 실행(HTML중간에 스크립트 존재시 HTML 파싱 중단) - -- DOM,CSSOM 조합, 렌더트리 구축 -- 뷰포트 기반 렌더트리의 각 노드 위치,크기 계산(Layout 단계) -- 계산한 위치,크기 기반 화면에 그림(Paint 단계) - -## Reflow 실행시점 - -1. DOM 엘리먼트 추가, 제거, 변경 -2. CSS 스타일 추가, 제거, 변경 -3. CSS 스타일을 직접변경하거나, 클래스 추가시 레이아웃이 변경될 수 있습니다. 엘리먼트의 길이를 변경하면, DOM 트리에 있는 다른 노드에 영향을 줄 수있습니다. -4. CSS 애니메이션,트랜지션. 애니메이션 모든프레임 리플로우발생 -5. offsetWidth,offsetHeight 사용. 해당 속성 읽을시 초기 리플로우가 트리거되어 수치계산. -6. hover, 텍스트입력, 창 크기조정 등 유저행동에 의해 트리거 - -## Repaint 실행시점 - -- 가시성이 변경되는 순간 EX) opacity, visiblity -- Reflow 가 실행된 순간 뒤에 실행 - -## 용어정리 - -### 파싱 - -파싱은 하나의 프로그램을 런타임환경이 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환하는것. -즉 파싱은 문서의 내용을 토큰으로 분석하고, 문법적의미와 구조를 반영한 파스 트리를 생성하는 과정 - -### DOM (Document Object Model) - -웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체모델. -DOM은 HTML과 JavaScript를 서로 이어주는 역할을함. - -### CSSOM (CSS Object Model) - -DOM처럼 CSS의 내용을 해석하고 노드를 만들어 트리구조로 만든것. - -### 렌더트리 (Render Tree) - -CSSOM, DOM트리의 결합으로 만들어짐. -Layout계산, Paint 과정 프로세스를 위해 존재 - -### Layout - -뷰포트 내에서 노드의 정확한 위치와 크기 계산하는 단계. - -### Paint - -렌더링 트리의 각노드를 화면의 실제 픽셀로 변환하는 마지막 단계, '페인팅', '래스터화' 라고함. - -### Reflow - -생성된 DOM 노드의 레이아웃 수치(너비,높이,위치 등) 변경시 영향받은 모든노드 수치를 다시계산하여, 렌더트리를 재생성하는 과정. - -### Repaint - -Reflow 과정이끝난후 재생성된 렌더트리를 다시그리게 되는데 이과정을 Repaint라 함. - -## 참고 자료 - -- [프론트엔드 면접질문 중요도별 정리](https://github.com/Esoolgnah/Frontend-Interview-Questions?tab=readme-ov-file) diff --git a/_posts/CS/cs-study-network-1.md b/_posts/CS/cs-study-network-1.md deleted file mode 100644 index 9a91d4c..0000000 --- a/_posts/CS/cs-study-network-1.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: "네트워크 1편" -excerpt: "네트워크 처리량, 지연시간, 토폴로지, 병목현상, 성능분석 방법에 대해 공부합니다." -coverImage: "/assets/blog/posts/cs-study/cover.png" -date: "2024-03-15" -ogImage: - url: "/assets/blog/posts/cs-study/cover.png" ---- - -## 네트워크 - -- 컴퓨터등의 장치들이 통신기술을 이용하여 구축하는 연결망 -- 노드와링크가 서로연결되어있으며 리소스를 공유하는 집합 - -## 처리량 - -- 링크를 통해 전달되는 단위시간당 데이터의양(**bps**,bits per second) -- 트래픽,대역폭,하드웨어 스펙에 영향을받음 - -## 지연시간(latency) - -- **요청이 처리되는 시간**, 즉 어떤 메시지가 두 장치 사이를 왕복하는 데 걸린 시간 -- 매체 타입(무선, 유선), 패킷 크기, 라우터의 패킷 처리 시간에 영향을 받음 - -## 네트워크 토폴로지 - -> topology : 망구성방식, 쉽게말해서 **연결방식** - -1. 트리 토폴로지, 계층형 토폴로지 - - 장점: 노드 추가,삭제 용이 - - 단점: 길이 하나기때문에 가는길에 존재하는 노드의 영향을 받음 - -2. 버스 토폴로지 (LAN에서 사용) - - 장점: 노드 추가,삭제 용이, 다른 노드의 영향을 받지않음 - - 단점: 패킷을 악의적으로 다른노드로 전달하는 스푸핑 공격 취약 - -3. 스타 토폴로지 (중앙집중) - - 장점: 노드 추가,삭제 용이, 다른 노드의 영향을 받지않음, 에러발견 쉬움 - - 단점: 중앙노드 에러발생시 네트워크 전체마비, 설치비용 높음 - -4. 링형 토폴로지 (고리형) - - 장점: 노드 수가 증가해도 네트워크상의 손실이 거의 없고, 충돌 발생 가능성 적음 - - 단점: 네트워크 구성 변경이 어렵고, 장애 발생시 전체 네트워크에 영향을 크게 끼침 - -5. 메시 토폴로지 (그물망) - - 장점: 단말장치 장애시 네트워크 사용, 트래픽 분산처리가능 - - 단점: 노드추가 어려움. 구축,운용비용 높음 - -## 병목현상 - -- 전체 시스템의 성능이나 용량이 하나의 구성 요소로 인해 제한을 받는 현상 -- 네트워크 토폴로지는 이 병목 현상을 찾을 때 중요한 기준, 특정 노드에 트래픽이 몰려 병목 현상이 발생했을 때, 어떤 노드 사이에 회선을 추가해야 병목 현상을 해결할 수 있는지 판별할 수 있기 때문이다. -- 병목현상의 주된원인 - - 네트워크 대역폭 - - 네트워크 토폴로지 - - 서버 CPU, 메모리 사용량 - - 비효율적인 네트워크 구성 - -## 네트워크 종류 - -> 규모를 기준으로 LAN, MAN, WAN 으로 구분 - -- LAN : 사무실과 개인적으로 소유 가능한 규모 -- MAN : 대도시 영역 네트워크 -- WAN : 광대역 네트워크, 국가 또는 대륙 같은 넓은 지역에서 운영 - -## 네트워크 성능분석 명령어 - -> 애플리케이션 코드상에는 전혀 문제가 없는데 사용자가 서비스로부터 데이터를 가져오지 못하는 상황에서 네트워크 관련 테스트와 네트워크와 무관한 테스트를 통해 ‘네트워크로부터 발생한 문제점’인 것을 확인한 후 CMD 환경에서 네트워크 성능 분석 필요. - -1. ping - - ping(Packet INternet Groper)은 네트워크 상태를 확인하려는 대상 노드를 향해 일정 크기의 패킷을 전송하는 명령어. 해당 노드의 패킷 수신 상태와 도달하기까지 시간 등을 알 수 있으며 해당 노드까지 네트워크가 잘 연결되어 있는지 확인할 수 있음. ping은 TCP/IP 프로토콜 중에 ICMP 프로토콜을 통해 동작. _ping 사이트 주소_ 입력을 통해 테스트 가능 - -2. netstat - - netstat 명령어는 접속되어 있는 서비스들의 네트워크 상태를 표시하는데 사용되며 네트워크 접속, 라우팅 테이블, 네트워크 프로토콜 등 리스트를 보여줌. 주로 서비스의 포트가 열려 있는지 확인할 때 사용. - -3. nslookup - - DNS에 관련된 내용을 확인하기 위해 사용. 특정 도메인에 매핑된 IP를 확인하기 위해 사용. - -4. tracert - - 윈도우에서는 tracert이고 리눅스에서는 traceroute라는 명령어로 실행 됨. 목적지 노드까지 네트워크 경로를 확인할 때 사용하는 명령어. 목적지 노드까지 구간들 중 어느 구간에서 응답 시간이 느려지는디 등을 확인할 수 있음. - -## **네트워크 프로토콜 표준화** - -네트워크 프로토콜이란 다른 장치들끼리 데이터를 주고받기 위해 설정된 공통된 인터페이스. IEEE또는 IETF라는 표준화 단체가 정함. - -## 참고 자료 - -- https://taemham.github.io/posts/CS_Network/ -- https://github.com/devSquad-study/2023-CS-Study/blob/main/Network/network_basic.md diff --git a/_posts/CS/cs-study-network-2.md b/_posts/CS/cs-study-network-2.md deleted file mode 100644 index dc1caec..0000000 --- a/_posts/CS/cs-study-network-2.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: "네트워크 2편" -excerpt: "네트워크 대역폭, TCP/UDP, 에 대해 공부합니다." -coverImage: "/assets/blog/posts/cs-study/cover.png" -date: "2024-10-07" -ogImage: - url: "/assets/blog/posts/cs-study/cover.png" ---- - -## 대역폭 Bandwidth - -> 공학에서는 대역폭을 특정 기능을 수행 할 수 있는 주파수 범위의 폭으로 정의한다. 신호 주파수의 높고 낮음과는 관계가 없다. -> 네트워크에서 대역폭이란 단위시간당 전송할 수 있는 데이터의 최대 용량을 의미한다.단위시간당 전송 용량이라는 용어에 많은 사람들이 네트워크 속도와 연관지어 설명한다. 네트워크 속도가 대역폭값에 근접할 경우 대역폭을 늘리면 속도가 빨라질 가능성이 있으나 무조건적인 조건은 아니다. 데이터 처리량과 네트워크 성능, 속도에 큰 영향을 미치지만 실제로 대역폭은 용량Capacity과 더 밀접한 관계를 가지고 있다. - -1. 단위 [bps] - -- bps bits per second 초당 '비트'수 - - 일부 BPS 혹은 Bps 등으로 표기하는 경우 잘못된 표기 - - BPS, Bps는 Bytes per second - -2. 유/무선 인터넷에서 대역폭 - -- 유선 인터넷에서 주파수 대역폭 - - 인터넷 회선 약정시 500M급 100M급 인터넷이라고 표현하는데 이는 데이터 전송 대역폭을 표현 - - 10Gbit 이더넷을 사용하더라도 네트워크 상황에 따라 성능이 저하될 가능성이 있다. -- 무선 인터넷에서 주파수 대역폭 - - 흔히 사용하는 Wifi는 통상 2.4GHz(2.4~2.462GHz), 5GHz(5.180~5.850GHz) 두가지 주파수를 사용한다. - - 간혹 미디어나 일상에서 2.4GHz 대역폭, 5GHz 대역폭이라고 표현하는데 이는 틀린 표현 - -3. 네트워크 처리량과 대역폭 관계 - -- 처리량은 단위시간당 실제로 처리되는 데이터의 양을 나타내고 대역폭 용량을 초과할 수 없다. - - 물탱크에서 수도까지 펌프를 통해 물이 흐르는 파이프가 있다고 가정했을때 흐르는 물의 양은 처리량, 파이프를 통해 최대로 흐를 수 있는 물의 양이 대역폭 - - 파이프를 100% 다 사용하는 경우 파이프 내경이 클수록 더 많은 물이 흐르지만 언제나 100% 다 사용하지 못하는것과 같은 것 - -4. 대역폭에 따른 병목현상 발생 가능성 - -- 100의 네트워크 출력을 가진 노드가 대역폭이 1인 회선을 이용하는경우 최대 출력으로 데이터 전송 하는 경우 -- 다수 노드로부터 한 노드에 집중되는 트래픽이 회선 대역폭을 초과하는 경우 등 - -## 대역폭 예상질문 - -- 대역폭이 낭비되는 경우, 원인에는 어떤게 있을까? - - 주파수 분할 다중화기를 사용하는경우 일정한 대역폭 안에서 연결된 노드별로 대역폭을 할당한다. 이 때 신호 간섭을 예방하기위해 대역별 마진을 두는데 이로인한 대역폭 손실이 발생한다. ex) 라디오, TV - - 다만 최근 IT 기기들은 보통 시분할방식을 기반으로 채널을 나눈다. 이는 대역폭 낭비가 아닌 점유 시간 손실로 해석해야함 -- 모바일/웹 사용자 인증을 위해 사용되는 JWT 토큰의 길이가 길어질수록 매 통신마다 큰 데이터를 주고 받아야하므로 대역폭의 낭비가 심화될 수 있다. - -## TCP / UDP 란? - -> 전송계층에서 사용하는 프로토콜 - -## 참고자료 - -- https://github.com/devSquad-study/2023-CS-Study/blob/main/Network/network_bandwidth.md diff --git a/_posts/Editor/vscode-setting-1.md b/_posts/Editor/vscode-setting-1.md deleted file mode 100644 index ae2bb7f..0000000 --- a/_posts/Editor/vscode-setting-1.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: "VSCode 프론트엔드 세팅추천 - 1" -excerpt: "프론트엔드 개발에 있어 설치하면 좋을만한 방법을 알려주는 간단한 정리글입니다." -coverImage: "/assets/blog/posts/vscode-setting-1/cover.png" -date: "2024-04-22T16:35:00" -ogImage: - url: "/assets/blog/posts/vscode-setting-1/cover.png" ---- - -> **VScode**를 사용하며 습관처럼 사용하는 **단축키**와 개발 생산성에 도움을 주는 **꿀팁**을 정리해볼까 합니다. - -## 새파일, 새폴더 단축키 설정하기 - -> **IntelliJ**처럼 단축키(**ctrl+shift+n**, **ctril+n**)를 통해 새파일 새폴더 만들기 - -### shortcut 등록하기 - -Command Pallet를 열고(Ctrl + shift + p ) > Open Keyboard shortcut(JSON)에 해당 코드 입력 - -```jsx -[ - { key: "ctrl+n", command: "explorer.newFile", when: "!editorFocus" }, - - { key: "ctrl+shift+n", command: "explorer.newFolder", when: "!editorFocus" }, -]; -``` - -## Reactjs code snippets - -> **rsc** 단축키를 통해 **React 컴포넌트**를 쉽게 만들 수 있습니다. - -VSCode 좌측의 Marketplace를 선택하고 Reactjs code snippets 검색, (제작자,charalampos karypidis) 설치 - -### Reactjs code snippets 단축키 목록 - -| 단축키 | 설명 | -| ------ | -------------------------------------------------------- | -| rcc | 클래스 컴포넌트 생성 | -| rrc | 클래스 컴포넌트와 react-redux를 연결해서 생성 | -| rccp | 클래스 컴포넌트와 propTypes을 생성 | -| rcfc | 클래스 컴포넌트와 모든 라이프사이클 메소드 포함해서 생성 | -| rwwd | import 없는 클래스 컴포넌트 생성 | -| rsc | 화살표 함수형 컴포넌트 생성 | -| rsf | 함수형 컴포넌트 생성 | - -## Thunder Client - -> postman없이 **api통신**을 테스트할 수 있습니다. - -저의 경우는 postman을 따로 띄어서 api 통신을 테스트 하기보다는 thunder client를 통해 vscode 자체에서 api 호출을 테스트하는 편입니다. - -![](/assets/blog/posts/vscode-setting-1/1.png) - -2023-08-18일부로 **유료화**가 되었다고 합니다. (혼자 테스트 하기에는 아직 유용할 것 같습니다.) - -## Git bash 기본터미널 설정 - -### Git 설치 - -Source Control 탭의 Download Git for windows를 클릭하여 git을 설치해 줍니다. - -![](/assets/blog/posts/vscode-setting-1/2.png) - -운영체제 맞는 Setup을 설치해 줍니다. - -![](/assets/blog/posts/vscode-setting-1/3.png) - -Git 설치 완료후 Git Bash도 설치하겠냐는 질문에 체크 해주면 세팅끝! - -### Git bash 기본 터미널 설정 - -![](/assets/blog/posts/vscode-setting-1/4.png) - -1. 설정 창 열기: Ctrl + , -2. terminal.integrated.defaultprofile.windows 입력 후 Windows 기본 터미널 프로필을 Git Bash로 설정 -3. VScode 재부팅시 설정 완료 diff --git a/_posts/NextJS/nextjs-eslint-prettier-husky-setup.md b/_posts/NextJS/nextjs-eslint-prettier-husky-setup.md deleted file mode 100644 index 5c480cd..0000000 --- a/_posts/NextJS/nextjs-eslint-prettier-husky-setup.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: "[NextJS] ESLint, Prettier, Recoil, React-Query, Storybook, Jest 설정 - 1편" -excerpt: "NextJS의 ESLint, Prettier, Husky를 세팅하는 글입니다." -coverImage: "/assets/blog/posts/nextjs-eslint-prettier-husky/cover.png" -date: "2024-03-30T15:16:00" -ogImage: - url: "/assets/blog/posts/nextjs-eslint-prettier-husky/cover.png" ---- - -> 1편은 NextJS에 TypeScript, Tailwind, ESLint, Prettier, Husky를 설정하는 내용입니다. - -## 1. NextJS, TypeScript, TypeScript 설치 - -```bash -npx create-next-app@latest -``` - -![](/assets/blog/posts/nextjs-eslint-prettier-husky/1.png) - -## 2. ESLint (airbnb 방식) 설정 - -### eslint-config-airbnb 라이브러리,패키지 설치 - -```bash -npx install-peerdeps --dev eslint-config-airbnb -``` - -### eslint에 필요한 타입스크립트 추가 - -```bash -npm install -D eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --legacy-peer-deps -``` - -### eslint-config-airbnb-base 설정 - -```bash -npx install-peerdeps --dev eslint-config-airbnb-base -``` - -.eslintrc.json 설정 변경 - -```bash -{ - "env": {"browser": true,"node": true}, - "extends":"airbnb-base", - "rules": { - "linebreak-style": 0 - } -} -``` - -## 3. Prettier 설치, ESLint 연결 - -### Prettier, 플러그인 설치 - -```bash -npm install -D prettier eslint-plugin-prettier eslint-config-prettier -``` - -- eslint-plugin-prettier : eslint에서 prettier랑 충돌하는 규칙 비활성화 -- eslint-config-prettier : 포매팅시 prettier 사용 - -### .prettierrc 파일 생성 후 코드추가 - -```bash -{ - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "all", - "printWidth": 80, - -} -``` - -- Nextjs는 세미콜론을 기본적으로 사용하지 않는다고합니다. -- [속성 정리 링크](https://velog.io/@dltmdwls15/.Prettier-%EC%98%B5%EC%85%98-%EC%A2%85%EB%A5%98) -- [속성 예제](https://hj-blog.github.io/frontend/Prettier/) - -### eslintrc.json 설정 - -- [리액트 컴포넌트 eslint 옵션](https://velog.io/@nemo/Function-component-is-not-a-function-declaration) - -```bash -{ - "root": true, - "parser": "@typescript-eslint/parser", - "plugins": ["@typescript-eslint", "prettier"], - "parserOptions": { - "project": "tsconfig.json", - "createDefaultProgram": true - }, - "env": { - "browser": true, - "node": true, - "es6": true - }, - "ignorePatterns": ["node_modules/"], - "extends": [ - "airbnb", - "airbnb-typescript", - "next/core-web-vitals", - "plugin:@typescript-eslint/recommended", - "plugin:prettier/recommended", - "prettier" - ], - "rules": { - "react/react-in-jsx-scope": "off", - "react/jsx-props-no-spreading": 0, - "@typescript-eslint/semi": "off", - "react/jsx-filename-extension": ["warn", { "extensions": [".ts", ".tsx"] }], - "no-useless-catch": "off", - "react/function-component-definition": [ - 2, - { "namedComponents": ["arrow-function", "function-declaration"] } - ] - } -} - -``` - -## 4. Husky, lint-stated로 commit 파일 eslint, prettier 자동실행 - -### husky 설치 ( 주의 git repo랑 연결되어있어야 합니다.) - -> git hook(커밋,푸시 등) 제어하는 라이브러리 - -```bash -npx husky-init && npm install -``` - -### lint-staged - -> staged된 파일만 특정 명령어 실행하는 도구 - -package.json에 해당 명령어 설정 (commit 파일 prettier,eslint 적용) - -```bash -"lint-staged": { - "*.{js,jsx,ts,tsx}": [ - "prettier --write", - "eslint --fix" - ] - } -``` - -### .husky/pre-commit 에 명령어 추가 - -```bash -#!/usr/bin/env sh. "$(dirname -- "$0")/_/husky.sh" - -npx lint-staged # 추가 -``` - -### 실행화면 - -![](/assets/blog/posts/nextjs-eslint-prettier-husky/3.png) -git commit을 실행하게되면 eslint,prettier가 체크되는 모습 - -### Result 공유 - -[nextjs 세팅 Github](https://github.com/youngduck/next-eslint-prettier-husky-boilersetting/releases/tag/1.0) - -## 참고자료 - -- [eslint,Prettier 설정](https://velog.io/@xmun74/Next.js-TS%EC%97%90%EC%84%9C-ESLint-Prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0) -- [https://velog.io/@picpal/코드에-eslint-prettier-자동-적용하기-근대-이제-github-커밋-체크까지-곁들인](https://velog.io/@picpal/%EC%BD%94%EB%93%9C%EC%97%90-eslint-prettier-%EC%9E%90%EB%8F%99-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-%EA%B7%BC%EB%8C%80-%EC%9D%B4%EC%A0%9C-github-%EC%BB%A4%EB%B0%8B-%EC%B2%B4%ED%81%AC%EA%B9%8C%EC%A7%80-%EA%B3%81%EB%93%A4%EC%9D%B8) -- [husky 공식문서](https://typicode.github.io/husky/get-started.html) -- [tsconfig's path parameter and ESLint 오류](https://stackoverflow.com/questions/62474451/tsconfigs-path-parameter-and-eslint) diff --git a/_posts/NextJS/nextjs-jest-rtl-storybook.md b/_posts/NextJS/nextjs-jest-rtl-storybook.md deleted file mode 100644 index e220d5b..0000000 --- a/_posts/NextJS/nextjs-jest-rtl-storybook.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: "[NextJS] ESLint, Prettier, Recoil, React-Query, Storybook, Jest 설정 - 2편" -excerpt: "NextJS의 Jest, React-Test-Library, Storybook을 세팅하는 글입니다." -coverImage: "/assets/blog/posts/nextjs-jest-rtl-storybook/cover.png" -date: "2024-03-30T21:38:00" -ogImage: - url: "/assets/blog/posts/nextjs-jest-rtl-storybook/cover.png" ---- - -> 2편에서는 NextJS에 Jest, React-Testing-Library, Storybook을 설정하는 내용입니다. - -## 1. Jest, React-Testing-Library 설치 - -[공식문서](https://nextjs.org/docs/app/building-your-application/testing/jest)를 참고해 설치했습니다.(eslint와 충돌이 많이 발생해 꽤나 번거롭습니다.) - -Jest, RTL 라이브러리 설치 - -```bash -npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom -``` - -typescript 사용하시는 분들은 아래 코드를 추가적으로 입력해 주어야합니다. - -```jsx - npm i ts-node -``` - -루트 폴더에 jest.setup.ts 생성 후 해당 코드 입력 - -```jsx -import "@testing-library/jest-dom"; -``` - -루트 폴더에 jest.config.ts 생성 후 해당 코드 입력 - -```jsx -import type { Config } from "jest"; -// eslint-disable-next-line import/extensions -import nextJest from "next/jest.js"; - -const createJestConfig = nextJest({ - dir: "./", -}); - -const config: Config = { - coverageProvider: "v8", - testEnvironment: "jest-environment-jsdom", - setupFilesAfterEnv: ["/jest.setup.ts"], - transformIgnorePatterns: [ - "/node_modules/", - "^.+\\.module\\.(css|sass|scss)$", - ], - collectCoverageFrom: [ - "**/*.{js,jsx,ts,tsx}", - "!**/*.d.ts", - "!**/node_modules/**", - "!/out/**", - "!/.next/**", - "!/*.config.js", - "!/coverage/**", - ], - // 절대 경로 사용시 - moduleNameMapper: { - "^@/(.*)$": "/src/$1", - }, -}; - -export default createJestConfig(config); -``` - -### eslint cr 에러 - -![](/assets/blog/posts/nextjs-jest-rtl-storybook/1.png) - -해당 이슈(Delete ␍ eslint prettier/prettier)는 문장의끝 end line sequence에 대한 양식이 지켜지지 않아서 나타난다고 합니다. - -\*\*\*\*eslintrc.json의 rule에 해당 규칙을 추가해주어 해결했습니다. - -```jsx -rules: { - 'prettier/prettier': [ - 'error', - { - endOfLine: 'auto', - }, - ], - }, -``` - -## 2. Jest,React-Test-Library 기본사용법 - -저같은 경우는 test폴더를 따로만들지않고 직관적이게 하나의 폴더에 두는 편입니다. (~~TMI~~) - -![](/assets/blog/posts/nextjs-jest-rtl-storybook/2.png) - -```tsx -//dashboard/index.tsx -const DashBoard = () => { - return ( -
-

하이 대쉬보드야

-
ㅇㅇ
-
- ); -}; - -export default DashBoard; -``` - -```tsx -//dashboard/index.test.tsx -import React from "react"; -import { render, screen } from "@testing-library/react"; -import "@testing-library/jest-dom"; -import DashBoard from "@/app/components/dashboard"; - -describe("Dashboard", () => { - it("shourd dashboard ", () => { - render(); - - const header = screen.getByRole("heading"); - expect(header).toHaveTextContent("하이 대쉬보드야"); - }); -}); -``` - -![](/assets/blog/posts/nextjs-jest-rtl-storybook/3.png) - -## 3. Storybook 설치하기 - -```bash -npx storybook@latest init -``` - -스토리북 설치는 해당명령어만 입력하면 알아서 프로젝트의 프레임워크를 파악해서 설치해줍니다. (~~Jest도 분발합시다~~) - -![](/assets/blog/posts/nextjs-jest-rtl-storybook/4.png) - -- main.ts - 전반적인설정 -- preview.ts - 미리보기화면에 대한 설정 - -![](/assets/blog/posts/nextjs-jest-rtl-storybook/5.png) - -- src폴더의 stories안에서 index.stories.ts 양식으로 사용합니다. - -![](/assets/blog/posts/nextjs-jest-rtl-storybook/6.png) - -- storybook 은 6006번 포트를 사용합니다. -- build-storybook을 통해 원격 서버에 배포하기도 합니다. - -### Storybook ESLint 충돌 이슈 - -또 eslint랑 충돌이 발생했습니다. - -(like "--ignore-pattern '!'”) to ovveride - -![](/assets/blog/posts/nextjs-jest-rtl-storybook/7.png) - -### 해결방법 - -.eslintrc.js에 ignorePatterns에 storybook과 연관된 파일들을 등록해주었습니다. 협업을 해보면서 storybook에도 eslint같은 규칙이 필요하다면 다시한번 고쳐보도록 해봐야겠습니다. - -## 4. Storybook으로 atomic pattern 구현 - -Storybook을 알아보면서 취업공고에서도 봤었던 [atomic pattern에 대한 글](https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/)을 볼 수 있었습니다. 이번 프로젝트에서 atomic pattern을 통해 프로젝트를 만들어보는것도 꽤 좋은 경험이지 않을까 싶습니다. - -## 5. Result 공유 - -[nextjs+tailwind+eslint+prettier+husky 코드](https://github.com/youngduck/next-eslint-prettier-husky-boilersetting/releases/tag/1.0) - -[nextjs+tailwind+eslint+prettier+husky + Jest + RTL + Storybook 코드](https://github.com/youngduck/next-eslint-prettier-husky-boilersetting/releases/tag/1.0) - -## 참고링크 - -[Testing Library와 Jest에 대해 알아보자](https://velog.io/@wlwl99/Testing-Library-Jest) - -[Nextjs Storybook 설치하기](https://cheolsker.tistory.com/82) diff --git a/_posts/NextJS/nextjs-reactquery-recoil.md b/_posts/NextJS/nextjs-reactquery-recoil.md deleted file mode 100644 index 15ed028..0000000 --- a/_posts/NextJS/nextjs-reactquery-recoil.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: "[NextJS] ESLint, Prettier, Recoil, React-Query, Storybook, Jest 설정 - 3편" -excerpt: "NextJS의 React-Query, Recoil을 세팅하는 글입니다." -coverImage: "/assets/blog/posts/nextjs-reactquery-recoil/cover.png" -date: "2024-03-31T18:40:00" -ogImage: - url: "/assets/blog/posts/nextjs-reactquery-recoil/cover.png" ---- - -> 3편은 NextJS에 React-Query, Recoil을 설정하는 내용입니다. - -## React-Query, React-Query-Devtools 설치 - -```bash -npm i @tanstack/react-query @tanstack/react-query-devtools -``` - -### TanstackProvider 컴포넌트 생성 - -```tsx -"use client"; - -import { QueryClientProvider, QueryClient } from "@tanstack/react-query"; -import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; -import { useState } from "react"; - -const TanstackProvider = ({ children }: { children: React.ReactNode }) => { - const [queryClient] = useState(() => new QueryClient()); - - return ( - - {children} - - - ); -}; - -export default TanstackProvider; -``` - -### TanstackProvider layout 적용 - -```tsx -import type { Metadata } from "next"; -import { Inter } from "next/font/google"; -import "./globals.css"; -import TanstackProvider from "./components/providers/TanstackProvider"; - -const inter = Inter({ subsets: ["latin"] }); - -export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - - {children} - - - ); -} -``` - -## Recoil 설치 - -```bash -npm i recoil -``` - -### RecoilRootProvider 컴포넌트 생성 - -```tsx -"use client"; - -import { ReactNode } from "react"; -import { RecoilRoot } from "recoil"; - -interface RecoilRootProviderProps { - children: ReactNode; -} - -const RecoilRootProvider: React.FC = ({ - children, -}) => { - return {children}; -}; - -export default RecoilRootProvider; -``` - -### RecoilRootProvider layout 적용 - -```tsx -import type { Metadata } from "next"; -import { Inter } from "next/font/google"; -import "./globals.css"; -import TanstackProvider from "./components/providers/TanstackProvider"; -import RecoilRootProvider from "./components/providers/RecoilRootProvider"; - -const inter = Inter({ subsets: ["latin"] }); - -export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - - - {children} - - - - ); -} -``` - -### Recoil 예제 - -자세한 내용은 [공식문서](https://recoiljs.org/ko/)에 자세히 나와있습니다. - -```tsx -import { atom } from "recoil"; - -export const sampleAtom = atom({ - key: "sampleAtom", - default: "", -}); -``` - -```tsx -"use client"; -import React from "react"; -import { useRecoilValue } from "recoil"; -import { sampleAtom } from "./recoil/atom"; - -const Home = () => { - const sample = useRecoilValue(sampleAtom); - - return ( -
-
Recoil 값: {sample}
-
- ); -}; - -export default Home; -``` - -## Result 공유 - -> 필요에따라 클론해서 사용하시면 좋을거같습니다. - -- [3편까지 세팅](https://github.com/youngduck/next-eslint-prettier-husky-boilersetting/releases/tag/1.2) - -- [2편까지 세팅](https://github.com/youngduck/next-eslint-prettier-husky-boilersetting/releases/tag/1.1) - -- [1편까지 세팅](https://github.com/youngduck/next-eslint-prettier-husky-boilersetting/releases/tag/1.0) - -## 실행 결과 - -![](/assets/blog/posts/nextjs-reactquery-recoil/1.png) diff --git a/_posts/NextJS/nextjs-svgr.md b/_posts/NextJS/nextjs-svgr.md deleted file mode 100644 index 50379fc..0000000 --- a/_posts/NextJS/nextjs-svgr.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: "[NextJS] SVG파일 React Component로 사용하기" -excerpt: "SVGR을 사용해 SVG 쉽게 관리하는 방법에 대해 소개합니다." -coverImage: "/assets/blog/posts/nextjs-svgr/cover.png" -date: "2024-03-25" -ogImage: - url: "/assets/blog/posts/nextjs-svgr/cover.png" ---- - -## **0. SVGR 이란?** - -SVG를 **React 컴포넌트**로 변환시켜주는 기능으로 NextJS는 CRA와다르게 SVG 기본사용을 지원하지 않아 따로 설정해주어야합니다. - -Next.js Remix, webpack, Command Line, Node.js 환경을 지원하고 있습니다. - -이글에서는 Next.js에서 사용하는 방법에 대해서설명하겠습니다. - -[공식문서](https://react-svgr.com/docs/getting-started) 참조 - -## **1. 라이브러리 설치** - -```bash -npm install --save-dev @svgr/webpack -``` - -```bash -yarn add --dev @svgr/webpack -``` - -## 2. 환경설정 추가 - -next.config.js 에 다음과 같은 코드를 추가해줍니다. - -![](/assets/blog/posts/nextjs-svgr/1.png) - -## 3. 사용하기 - -![](/assets/blog/posts/nextjs-svgr/2.png) - -SVGR을 사용하면 속성값만 주어서 svg 크기, 색깔등을 쉽게 변경할 수 있습니다. diff --git a/_posts/Vercel/json-server-vercel.md b/_posts/Vercel/json-server-vercel.md deleted file mode 100644 index 564caea..0000000 --- a/_posts/Vercel/json-server-vercel.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: "Vercel에서 목서버 사용하기" -excerpt: "json-server를 배포단에서도 사용할 수 있는 유용한 템플릿을 소개합니다." -coverImage: "/assets/blog/posts/json-server-vercel/cover.jpg" -date: "2024-03-19" -ogImage: - url: "/assets/blog/posts/json-server-vercel/cover.jpg" ---- - -## 다룰내용 - -> json-server를 배포단에서도 사용할 수 있는 유용한 템플릿을 소개합니다. - -## 적용방법 - -![](/assets/blog/posts/json-server-vercel/1.png) - -- https://github.com/kitloong/json-server-vercel -- 해당 github 템플릿 소스 클론, use this template 클릭 -- db.json 부분 자신이 쓰는 db.json으로 교체 -- Vercel 로그인 -- Add new New Project - -![](/assets/blog/posts/json-server-vercel/2.png) - -- json-server-vercel 레포지토리 등록 -- [example](https://json-server-in.vercel.app/) - -### **주의사항** - -- json-server-vercel 사용시 return값이 달라지기 때문에 주의할 필요가 있다. - ![](/assets/blog/posts/json-server-vercel/3.png) - ![](/assets/blog/posts/json-server-vercel/4.png) diff --git "a/_posts/\352\270\260\354\210\240\353\270\224\353\241\234\352\267\270/devlog-1.md" "b/_posts/\352\270\260\354\210\240\353\270\224\353\241\234\352\267\270/devlog-1.md" deleted file mode 100644 index 7677fcb..0000000 --- "a/_posts/\352\270\260\354\210\240\353\270\224\353\241\234\352\267\270/devlog-1.md" +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: "기술블로그 게시물 폴더구조 개선하기" -excerpt: "폴더구조 계층화 하기" -coverImage: "/assets/blog/posts/devlog/devlog-1/cover.png" -date: "2025-03-07T00:30:00" -ogImage: - url: "/assets/blog/posts/devlog/devlog-1/cover.png" ---- - -> 기술블로그를 리뉴얼하면서 게시물폴더의 폴더구조를 개선한 내용을 공유하려고 합니다. - -## 문제상황 - -  -저는 게시물을 마크다운 형식으로 작성한 후에 posts라는 루트폴더에 담아두고 Node.js의 fs, path 모듈을 활용해 원하는 게시물을 가져오고 있었습니다. - -  -아직 게시물이 많지 않았지만, posts폴더의 게시물들을 보면 정돈되지 않아 지저분하다고 느꼈고, 이후 게시물 관리가 어려워질 것이라는 생각이 들어 다음과 같이 폴더구조를 도메인별로 계층화 해야겠다고 생각했습니다. -  - -```markdown -- 기존에 사용하던 폴더 구조 - algorithms - ┣ 백준-1번문제-풀이.md - ┗ sql-평균일일대여요금구하기.md - -- 개편하고자 하는 계층형 폴더 구조 - algorithms - ┣ JavaScript - ┃ ┗ 백준-1번문제-풀이.md - ┗ SQL - ┃ ┗ sql-평균일일대여요금구하기.md -``` - -  -  - -### 재귀를통한 구현 - -폴더구조를 계층화 하면서 상위폴더의 폴더명을 카테고리로 활용하면 직접 입력해서 발생할 수 있는 오타나 불일치 문제를 추가적으로 해결 할 수 있겠다 생각했고 해당기능을 Node.js의 path 모듈과 재귀호출을 통해 다음과 같이 구현했습니다. -  - -```tsx -export function getPostSlugs() { - - return fs.readdirSync(postsDirectory); - + const getAllFiles = (dirPath: string, arrayOfFiles: string[] = []) => { - + const files = fs.readdirSync(dirPath); - + console.log(files, "files"); - - + files.forEach((file) => { - + const filePath = path.join(dirPath, file); - + if (fs.statSync(filePath).isDirectory()) { - + arrayOfFiles = getAllFiles(filePath, arrayOfFiles); - + } else { - + // 상대 경로로 저장 (예: sql/file.md) - + const relativePath = path.relative(postsDirectory, filePath); - + arrayOfFiles.push(relativePath); - + } - + }); - - + return arrayOfFiles; - + }; - + return getAllFiles(postsDirectory); -} -``` - -### 재귀방식의 장단점 비교 - -음? 재귀함수? 혹시라도 성능에 영향주는거 아니야? 라는 생각이 들어서 기존의 폴더구조방식과 계층형 폴더구조의 장단점을 비교해봤어요. -  - -기존폴더구조 - -장점 - -1. O(n) 시간복잡도 (n은파일수) -2. 단순한 구현 - -단점 - -1. 파일이 많아지면 원하는 게시물을 찾기 어려움 -2. 카테고리관리를 수동으로 작성해야함, (마크다운에서 frontmatter를 통해 category값을 직접 지정 중) - -  - -계층형 폴더 구조 - -장점 - -1. 논리적인 파일 구조화, 게시물 관리의 이점 -2. 카테고리 자동화, 카테고리 오기입 문제 방지 (하위폴더=카테고리) - -단점 - -1. O(n+d) 시간복잡도 (n은파일 수 , d는 하위폴더 수) -2. 재귀 호출로 인한 약간의 메모리 사용 - -  -장단점을 비교해보니 시간복잡도가 기존의 n에서 n+d로 증가하였고 d의 증가비율은 n보다 적을것으로 예상되었습니다. -  -해당 함수가 쓰이는 페이지는 SSG로 빌드타임에 정적파일로 만들어져 제공되기때문에 실제 사용자 경험에는 영향이 없고 빌드 시간에 영향을 주지만 매우 작게 줄것이라 판단했습니다. 파일관리의 편의성과 카테고리 자동화의 이점이 더 크다고 판단해 해당 폴더구조로 개선작업을 진행했습니다. - -  - -## 마치며 - -되게 간단한 문제였지만 블로깅을 통해 글쓰는 능력을 기르고 사소한 부분부터 최적의 방법으로 사고하고 관리하는 능력을 기르고자 포스팅을 진행하고 있습니다. diff --git a/package.json b/package.json index 2c9d54e..26d786f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "yd-blog", - "version": "1.1.3", + "version": "1.2.1", "private": true, "engines": { "node": ">=22.0.0" diff --git a/public/assets/blog/posts/aws-cicd-words/cover.png b/public/assets/blog/posts/aws-cicd-words/cover.png deleted file mode 100644 index 131be02..0000000 Binary files a/public/assets/blog/posts/aws-cicd-words/cover.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/1.png b/public/assets/blog/posts/aws-s3-deploy/1.png deleted file mode 100644 index dcfd04e..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/1.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/10.png b/public/assets/blog/posts/aws-s3-deploy/10.png deleted file mode 100644 index e36237e..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/10.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/11.png b/public/assets/blog/posts/aws-s3-deploy/11.png deleted file mode 100644 index aa5f94e..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/11.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/12.png b/public/assets/blog/posts/aws-s3-deploy/12.png deleted file mode 100644 index d96b3f4..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/12.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/13.png b/public/assets/blog/posts/aws-s3-deploy/13.png deleted file mode 100644 index 6faca14..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/13.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/14.png b/public/assets/blog/posts/aws-s3-deploy/14.png deleted file mode 100644 index 67850f7..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/14.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/15.png b/public/assets/blog/posts/aws-s3-deploy/15.png deleted file mode 100644 index c7d6a07..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/15.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/16.png b/public/assets/blog/posts/aws-s3-deploy/16.png deleted file mode 100644 index c56654d..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/16.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/17.png b/public/assets/blog/posts/aws-s3-deploy/17.png deleted file mode 100644 index 1ee8a48..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/17.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/2.png b/public/assets/blog/posts/aws-s3-deploy/2.png deleted file mode 100644 index 2000e54..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/2.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/3.png b/public/assets/blog/posts/aws-s3-deploy/3.png deleted file mode 100644 index 098c081..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/3.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/4.png b/public/assets/blog/posts/aws-s3-deploy/4.png deleted file mode 100644 index c023024..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/4.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/5.png b/public/assets/blog/posts/aws-s3-deploy/5.png deleted file mode 100644 index 68aaef9..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/5.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/6.png b/public/assets/blog/posts/aws-s3-deploy/6.png deleted file mode 100644 index 16c4a64..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/6.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/7.png b/public/assets/blog/posts/aws-s3-deploy/7.png deleted file mode 100644 index 1383eb3..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/7.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/8.png b/public/assets/blog/posts/aws-s3-deploy/8.png deleted file mode 100644 index b61bb53..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/8.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/9.png b/public/assets/blog/posts/aws-s3-deploy/9.png deleted file mode 100644 index 6cbc9a6..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/9.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-deploy/cover.jpg b/public/assets/blog/posts/aws-s3-deploy/cover.jpg deleted file mode 100644 index 1f0a9cf..0000000 Binary files a/public/assets/blog/posts/aws-s3-deploy/cover.jpg and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-githubaction/1.png b/public/assets/blog/posts/aws-s3-githubaction/1.png deleted file mode 100644 index 8307272..0000000 Binary files a/public/assets/blog/posts/aws-s3-githubaction/1.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-githubaction/2.png b/public/assets/blog/posts/aws-s3-githubaction/2.png deleted file mode 100644 index 0d9dc30..0000000 Binary files a/public/assets/blog/posts/aws-s3-githubaction/2.png and /dev/null differ diff --git a/public/assets/blog/posts/aws-s3-githubaction/cover.png b/public/assets/blog/posts/aws-s3-githubaction/cover.png deleted file mode 100644 index 78be1f8..0000000 Binary files a/public/assets/blog/posts/aws-s3-githubaction/cover.png and /dev/null differ diff --git a/public/assets/blog/posts/cs-study/cover.png b/public/assets/blog/posts/cs-study/cover.png deleted file mode 100644 index d156f30..0000000 Binary files a/public/assets/blog/posts/cs-study/cover.png and /dev/null differ diff --git a/public/assets/blog/posts/cs-study/fe-cover.png b/public/assets/blog/posts/cs-study/fe-cover.png deleted file mode 100644 index a3f3862..0000000 Binary files a/public/assets/blog/posts/cs-study/fe-cover.png and /dev/null differ diff --git a/public/assets/blog/posts/devlog/devlog-1/cover.png b/public/assets/blog/posts/devlog/devlog-1/cover.png deleted file mode 100644 index daa5691..0000000 Binary files a/public/assets/blog/posts/devlog/devlog-1/cover.png and /dev/null differ diff --git a/public/assets/blog/posts/json-server-vercel/1.png b/public/assets/blog/posts/json-server-vercel/1.png deleted file mode 100644 index f51387c..0000000 Binary files a/public/assets/blog/posts/json-server-vercel/1.png and /dev/null differ diff --git a/public/assets/blog/posts/json-server-vercel/2.png b/public/assets/blog/posts/json-server-vercel/2.png deleted file mode 100644 index afaf0f7..0000000 Binary files a/public/assets/blog/posts/json-server-vercel/2.png and /dev/null differ diff --git a/public/assets/blog/posts/json-server-vercel/3.png b/public/assets/blog/posts/json-server-vercel/3.png deleted file mode 100644 index be1ac31..0000000 Binary files a/public/assets/blog/posts/json-server-vercel/3.png and /dev/null differ diff --git a/public/assets/blog/posts/json-server-vercel/4.png b/public/assets/blog/posts/json-server-vercel/4.png deleted file mode 100644 index 3741753..0000000 Binary files a/public/assets/blog/posts/json-server-vercel/4.png and /dev/null differ diff --git a/public/assets/blog/posts/json-server-vercel/cover.jpg b/public/assets/blog/posts/json-server-vercel/cover.jpg deleted file mode 100644 index 8fdbca7..0000000 Binary files a/public/assets/blog/posts/json-server-vercel/cover.jpg and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-eslint-prettier-husky/1.png b/public/assets/blog/posts/nextjs-eslint-prettier-husky/1.png deleted file mode 100644 index dea9844..0000000 Binary files a/public/assets/blog/posts/nextjs-eslint-prettier-husky/1.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-eslint-prettier-husky/3.png b/public/assets/blog/posts/nextjs-eslint-prettier-husky/3.png deleted file mode 100644 index 125cd6f..0000000 Binary files a/public/assets/blog/posts/nextjs-eslint-prettier-husky/3.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-eslint-prettier-husky/cover.png b/public/assets/blog/posts/nextjs-eslint-prettier-husky/cover.png deleted file mode 100644 index 01e7924..0000000 Binary files a/public/assets/blog/posts/nextjs-eslint-prettier-husky/cover.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-jest-rtl-storybook/1.png b/public/assets/blog/posts/nextjs-jest-rtl-storybook/1.png deleted file mode 100644 index b9900ad..0000000 Binary files a/public/assets/blog/posts/nextjs-jest-rtl-storybook/1.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-jest-rtl-storybook/2.png b/public/assets/blog/posts/nextjs-jest-rtl-storybook/2.png deleted file mode 100644 index 3d02019..0000000 Binary files a/public/assets/blog/posts/nextjs-jest-rtl-storybook/2.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-jest-rtl-storybook/3.png b/public/assets/blog/posts/nextjs-jest-rtl-storybook/3.png deleted file mode 100644 index 003ae00..0000000 Binary files a/public/assets/blog/posts/nextjs-jest-rtl-storybook/3.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-jest-rtl-storybook/4.png b/public/assets/blog/posts/nextjs-jest-rtl-storybook/4.png deleted file mode 100644 index 8a2265f..0000000 Binary files a/public/assets/blog/posts/nextjs-jest-rtl-storybook/4.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-jest-rtl-storybook/5.png b/public/assets/blog/posts/nextjs-jest-rtl-storybook/5.png deleted file mode 100644 index 9a38782..0000000 Binary files a/public/assets/blog/posts/nextjs-jest-rtl-storybook/5.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-jest-rtl-storybook/6.png b/public/assets/blog/posts/nextjs-jest-rtl-storybook/6.png deleted file mode 100644 index 56cc948..0000000 Binary files a/public/assets/blog/posts/nextjs-jest-rtl-storybook/6.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-jest-rtl-storybook/7.png b/public/assets/blog/posts/nextjs-jest-rtl-storybook/7.png deleted file mode 100644 index 474ca8d..0000000 Binary files a/public/assets/blog/posts/nextjs-jest-rtl-storybook/7.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-jest-rtl-storybook/cover.png b/public/assets/blog/posts/nextjs-jest-rtl-storybook/cover.png deleted file mode 100644 index 381818d..0000000 Binary files a/public/assets/blog/posts/nextjs-jest-rtl-storybook/cover.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-reactquery-recoil/1.png b/public/assets/blog/posts/nextjs-reactquery-recoil/1.png deleted file mode 100644 index 1174eea..0000000 Binary files a/public/assets/blog/posts/nextjs-reactquery-recoil/1.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-reactquery-recoil/cover.png b/public/assets/blog/posts/nextjs-reactquery-recoil/cover.png deleted file mode 100644 index 5773095..0000000 Binary files a/public/assets/blog/posts/nextjs-reactquery-recoil/cover.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-svgr/1.png b/public/assets/blog/posts/nextjs-svgr/1.png deleted file mode 100644 index a3ff438..0000000 Binary files a/public/assets/blog/posts/nextjs-svgr/1.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-svgr/2.png b/public/assets/blog/posts/nextjs-svgr/2.png deleted file mode 100644 index d677ed0..0000000 Binary files a/public/assets/blog/posts/nextjs-svgr/2.png and /dev/null differ diff --git a/public/assets/blog/posts/nextjs-svgr/cover.png b/public/assets/blog/posts/nextjs-svgr/cover.png deleted file mode 100644 index 53768f3..0000000 Binary files a/public/assets/blog/posts/nextjs-svgr/cover.png and /dev/null differ diff --git a/public/assets/blog/posts/vscode-setting-1/1.png b/public/assets/blog/posts/vscode-setting-1/1.png deleted file mode 100644 index 4d24387..0000000 Binary files a/public/assets/blog/posts/vscode-setting-1/1.png and /dev/null differ diff --git a/public/assets/blog/posts/vscode-setting-1/2.png b/public/assets/blog/posts/vscode-setting-1/2.png deleted file mode 100644 index b55d26d..0000000 Binary files a/public/assets/blog/posts/vscode-setting-1/2.png and /dev/null differ diff --git a/public/assets/blog/posts/vscode-setting-1/3.png b/public/assets/blog/posts/vscode-setting-1/3.png deleted file mode 100644 index ec17a8f..0000000 Binary files a/public/assets/blog/posts/vscode-setting-1/3.png and /dev/null differ diff --git a/public/assets/blog/posts/vscode-setting-1/4.png b/public/assets/blog/posts/vscode-setting-1/4.png deleted file mode 100644 index ce57eaf..0000000 Binary files a/public/assets/blog/posts/vscode-setting-1/4.png and /dev/null differ diff --git a/public/assets/blog/posts/vscode-setting-1/cover.png b/public/assets/blog/posts/vscode-setting-1/cover.png deleted file mode 100644 index f9b2a69..0000000 Binary files a/public/assets/blog/posts/vscode-setting-1/cover.png and /dev/null differ