자기계발 (34) 썸네일형 리스트형 MCP와 Claude + Cursor 연결 A부터Z까지 + 크롤링 구현 최근 대학교에서 진행하는 프로젝트에서 AI를 많이 접해 자연스럽게 AI관련 기술에 대해 관심이 가게 되어 MCP가 핫하다는걸 알게 되었습니다. 알게된지는 좀 되었으나 이제서야 블로그로 기록을 남기네요ㅜ그럼 이제 MCP와 Claude + Cursor를 활용해 크롤링을 구현시켜보겠습니다.크롤링 해주는 FireCrawl MCP를 이용해 크롤링을 해온 뒤 Claude에서 유의미한 내용들을 수집 및 요약 정리를 하고 Cursor로 보내 Cursor에서 내용 확인을 할 수 있는 그런 기능을 구현하려고 합니다. 먼저 FireCrawl 에 접속해 회원가입하고 API를 발급 받으시면 됩니다.해당 API키를 복사해와Smithery 사이트에 접속해 회원가입하고 FireCrawl MCP를 검색해줍니다.검색 후 API키를 넣어.. 총정리) main,dev 브랜치 별로 배포하는 방법 (windows) Windows에서 환경 변수가 Vite에서 읽히지 않아 각종 삽질을 끝에, cross-env 패키지를 사용해 문제를 해결할 수 있었습니다. (이 글을 읽으시는 windows 사용자 분은 그냥 아래 방법때로 따라하시면 됩니다...) cross-env 설치npm install --save-dev cross-env package.json 스크립트 수 "scripts": { "dev": "vite", "build": "vite build", "build:main": "cross-env VITE_BRANCH=main vite build", "build:develop": "cross-env VITE_BRANCH=develop vite build", "lint": "eslint .", .. React 프로젝트에 Github Actions + AWS IAM로 CI/CD 구축하는 방법 CI/CD와 관련된 요소들의 개념과 작동 과정CI/CD내가 수동으로 commit하고 push하고 build하고 deploy했던걸 자동화하는 것이다.CI/CD 환경을 구축하는 이유코드의 수정이 일어날 때마다 S3의 파일들을 바꿔주고 클라우드 프론트에 가서 캐쉬 무효화 작업을 해주는 귀찮은 과정을 반복하지 않기 위해 CI/CD 환경을 구축하는 것CI/CD의 작동과정 Github Actions는 현업에서도 많이 쓰이고 무료로 사용할 수 있고, 빌드용 서버가 따로 필요없기 때문에 CI/CD 구축할 때 자주 쓰인다. Github ActionsJenkins는 빌드용 서버를 따로 구축해야하기 때문에 패쓰~ 자세한 차이점은 추후 알아보기 .. AWS 해커톤 (AWS JAM) 소개: AWS JAM에 참여하게 된 동기와 기대AWS JAM에 참여하게 된 계기는 AWS 서비스에 대한 실질적인 이해와 문제 해결 능력을 높이고 싶었기 때문입니다. 특히 클라우드 환경에서의 네트워크 및 보안 구성을 실습하며 실제 업무에 도움이 될 수 있는 인사이트를 얻고 싶었습니다. AWS JAM은 실전에서의 기술 활용을 중요시한다는 점에서 저에게 꼭 필요한 경험이 될 것 같았고, 이를 통해 AWS에 대한 자신감을 더욱 쌓고자 하는 기대감도 컸습니다.AWS JAM의 주제와 진행 방식제가 참여한 AWS JAM의 주제는 **‘네트워크 보안 및 계층화’**로, VPC와 네트워크 ACL, 보안 그룹을 비롯한 다양한 AWS 서비스들을 통한 네트워크 격리 및 보안 강화가 주요 내용이었습니다. JAM의 진행 방식은 .. CloudFront에서의 코드 업데이트 방법 1. DNS에 대한 개념과 작동 과정DNSDNS문자를 IP주소로 변환해주는 DNS 서버를 만들게 되었다컴퓨터가 처리하기 쉬운 값의 형태는 문자가 아니라 숫자이기에IP특정 컴퓨터의 주소를 가르킨다. ( naver.com → 61.41.153.2 )Port13.250.15.132:3000 에서 :3000 이 부분이 Port기본값으로 (크롬.익스플로어 등) 80번 포트로 통신을 보내게 설정되어 있기 때문이다.이렇게 규약을 통해 역할이 정해진 포트들을 말한다.80번(HTTP) : HTTP로 통신을 할 때 사용(꼭 지키지 않아도 된다)443번(HTTPS) : HTTPS로 통신을 할 때 사용ex) 22번 (SSH, Secure Shell Protocol) : 원격 접속을 위한 포트번호Well-Known-Port: .. 도메인 생성 후 AWS 연결 S3와 Cloud 서버 위치가 어디든간에 꼭 버지니아 북부로 선택하세요!! 아니면 인증서 발급이 안됩니다!! 별칭정보가 맞지 않는다라고 뜰땐 뒤에 .을 지우고 수정하기 버튼을 누르면 된다!항목추가 누르시고 연결할 도메인 주소 입력하시면 연결 끝입니다~! CRA + VITE + Next.js 프로젝트 정적 웹 호스팅 방법! CRA 웹 호스팅 방법이전 제 최근글을 참고하시면 여기까지 오는법은 알거라 생각합니다.기존 연습했던 필요없는 버킷은 지워주고 새로 실습할 버킷을 이전과 동일하게 생성합니다~ 권한탭을 눌러서 버킷 정책 편집을 이전과 동일하게 진행합니다~"Principal": "*", 왼쪽처럼 값을 변경해주시고~변경사항 저장! 그리고 속성탭 젤 아래 정적 웹 사이트 호스팅 편집을 아래와 같이 설정해줍니다.인덱스 문서 index.html 다시 따라치세요~!그리고 visualcode에서 npx create-react-app myfirstaws-web을 생성 후(또는 본인이 올린 파일)npm run build를 통해 빌드파일을 만들고 그 폴더를 올리는것이 아닌 그 내부에 있는 파일들을 드래그해서 올리면 끝! VITE 프로.. AWS 정적 웹 호스팅 방법 상세정리( S3 ) • S3에 웹 프로젝트를 호스팅 하는 방법 정리 S3 검색후 상단 S3 클릭 익명의 사용자가 접근할 수 있도록 이 버킷의 퍼블릭 액세스 차단설정 해제! 이제 권한칸으로 가서 버킷정책을 작성해준다(권한을 정의하는 JSON) 버킷정책 옆 끝에 편집버튼을 누르고 새 문 추가 버튼을 누른다!오른쪽 검색창에 S3 검색 후 클릭getobject 검색 후 체크 후 리소스 추가버튼 누르기! arn:aws:s3:::{BucketName}/{ObjectName} 중괄호 포함 모두 대체!{BucketName} -> 자신의 프로젝트명 = myfirstaws991909{ObjectName} -> 모든 파일 = *sid는 그냥 이 정책에 대한 id 표시principal은 아래 effect와 action을 누가 s3에 저장되어.. 이전 1 2 3 4 5 다음
