SUIN

지난번 CD 연결이 성공한 줄 알고 방치시켜놨던 action에서 알고 보니 CloudFront 무효화 처리가 안되고 있었던 것이었다.. 기존 코드 - name: Deploy env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} run: | aws s3 cp --recursive --region ap-northeast-2 build s3://${{secrets.S3_BUCKET_NAME}} - name: Invalidate CloudFront Cache uses: chetan/invalidate-cloudfront-action@master env: AW..

프로젝트를 진행하는중 로컬에서 카멜표기법으로 표시하지 못하고 push를 해버렸다... 두둥탁 사건의 제목 mypage -> myPage 로 폴더명을 로컬에서 변경을 해도 원격스토리지는 적용되지 않은 상황이 발생 폴더를 제거할 때 필요한 명령어 git rm --cached -r 폴더명 git rm --cached -r 폴더명 파일을 제거할 때는 다음과 같이 명령 git rm --cached -r 파일명 또는 git rm --cached 파일명 --cached : 원격저장소의 폴더 또는 파일을 삭제한다고 알려주는 옵션 -r: 폴더명이 주어졌을 때 recursive removal을 허용하게 해주는 옵션 이렇게만 해서 원격저장소에 있는 폴더와 파일이 즉각 삭제되는 것은 아니고 commit을 해주고, push를 ..

git 작업 상태 기록 git init 파일명 // 깃 작업폴더 감시 git add 파일명1 -> git add file.txt or git add 파일명1 파일명2 -> git add file1.txt file2.txt or git add .(모든파일 스테이징) // 업로드파일 staging area git commit -m ‘메세지’ // 작업 메세지 repository(저장소) staging area : commit을 하기 전에 commit 할 파일들을 골라놓는 곳 그리고 staging area에 파일 넣는 행위를 staging이라고 한다. repository : commit된 파일의 버전들을 모아놓는 곳 git commit을 통해 repository(저장소)로 옮겨지게 된다. Q. 얼마나 자주 c..

로컬 저장소에서 바로 merge 하는 방법도 있지만 협업을 하면서 merge전 검토 과정을 거치게 된다. 1. 3-way merge 새로운 commit branch 생성 git flow : feature/develop 브랜치에서 많이 사용 2. fast-forward merge main branch -> 신규 commit이 없을 경우 자동으로 fast-forward merge 발동 git merge —no-ff : 강제 3-way merge 가능 3. rebase and merge branch의 시작점을 이동시켜 3-way merge → fast-forward merge처럼 만들어줄 수 있다. rebase: branch 시작점을 다른 commit으로 옮겨주는 행위 rebase 쓰는 이유 : 3 way-m..

themoviedb API를 사용해서 왓 차피 디아 클론 코딩을 하며 react query, slick 를 처음 사용해보면서 아직까지 생소한 부분들이 많아 천천히 공부 중이다 API Docs developers.themoviedb.org react- slick 패키지를 적용하며 슬라이드를 구현하는중 slider의 style 부분을 carousel slick-theme을 import 해주어야 하는데 왜 슬라이드가 되지 않냐며 오늘도 나는 삽질을 했다... themoviedb API 에서 poster img url 이 자꾸 null 로만 내려와서 너무 당황스러운 일들만 가득했다.. 아마 최근 포스터여서인지 대부분의 poster_path 경로의 이미지 url이 null로 내려오나 보다.. null로 데이터가 ..

왓차 피디아 클론 코딩 강의를 공부하며 emotion css 적용 중 first-child를 사용해서 첫 번째 항목을 제외한 스타일 효과를 적용을 하던 중 first-child가 실제 화면에서는 적용이 되지만 개발자 모드에서 콘솔 에러가 확인이 되는 것을 알 수 있었다. ...component... /* 1번째 메뉴*/ ...로고 /* 2번째 메뉴 */ 영화 TV 프로그램 ...style... const Menu = styled.li` display: flex; align-items: center; height: 62px; flex-shrink: 0; &:not(:first-child){ //첫번째 항목이 아닐 경우 margin-left: 24px; } `; ":first-child"는 서버 측 렌더링을..

CORS(Cross-Origin Resource Sharing) - 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다 - CORS 관련 이슈는 모두 CORS 정책을 위반했기 때문에 발생하는 것이다. - 개발하는 입장에서는 정책 때문에 신경써야 하는 것들이 늘어나니 귀찮을 수도 있지만, 사실 CORS라는 방어막이 존재하기 때문에 우리가 이 곳 저 곳에서 가져오는 리소스가 안전하다는 최소한의 보장을 받을 수 있는 것이다. 출처(Origin)란? - 출처(Origin)란 URL 구조에서 살펴본 Protocal, Host, Port를 합친 것을 말합니다. 브라우저 개발자 도구의 콘솔 창에 locati..

GET - GET 은 클라이언트에서 서버로 어떠한 리소스로 부터 정보를 요청하기 위해 사용되는 메서드 - GET을 통한 요청은 URL 주소 끝에 파라미터로 포함되어 전송되며, 이 부분을 쿼리 스트링 (query string) 이라고 부른다. GET 방식 특징 URL에 쿼리 스트링(데이터)을 붙여서 서버에 전송 데이터를 Header(헤더)에 포함하여 전송 URL에 정보들이 그대로 노출되기 때문에 POST 방식보다 상대적으로 보안에 취약 캐싱이 가능 POST 방식보다 상대적으로 전송 속도가 빠름 전송하는 데이터양에 한계가 있음 (브라우저마다 GET 요청 길이 제한 존재) 브라우저 히스토리에 기록이 남음 POST - POST는 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용 ..