최근 진행했던 개인 프로젝트 개발이 끝나 배포 방법을 고민하던 중 Netlify 배포 포스팅을 해 보고 싶어서 시작... AWS 배포보다 간단하다고 한다. 정적 배포가 가능하지만 Netlify + Github Action 을 통해서 자동 배포를 해 보자!배포를 하려면

이 포스팅은 부트캠프 수료를 앞둔 시점에서 마지막으로 진행되는 메인 프로젝트 회고이다. 메인 프로젝트 하기 전에 Stack Overflow 사이트를 클론하는 free project 를 했었다. 비전공자로 작년 10월부터 1월 초까지 기본기를 공부하고 바로 클론 코딩을

나의 접근 방법은 벽을 n 만큼의 구역으로 나뉜다고 하였으니 n 만큼의 구역으로 나뉘어진 배열을 만들었다. 배열의 요소로는 각 구역에는 왼쪽부터 순서대로 1번부터 n 번까지의 번호를 붙였다고 하였으니 각 요소를 1, 2, 3, 4... 와 같은 형식으로 n까지 만들어

프로젝트에서 외부 API를 이용해 추천 도서의 데이터를 가지고 오려고 API 요청을 보냈다......... 오호호 잘 도착했을 내 아이들을 기대하며 확인했는데....CORS 에러...........................제기랄\~\~~퇴치하겠다.고오오....어떻게

s3와 cloudfront를 연동하기 위해서는 우선 s3에 버킷을 생성하여야 한다. s3 버킷 생성 방법에 대해서는 지난 번 포스팅을 하였기 때문에 생략하도록 한다!CloudFront 로 이동 후, 배포 생성 클릭원본 도메인 선택이 부분에서는 s3 버킷 이름으로 설정한

🌱 Intro > 일반적으로 데이터는 Props을 통해 컴포넌트에 전달 되는데 항상 문제가 되는 건 state를 여러 컴포넌트를 통해 전달하는 경우이다. 즉 기본적으로는 Props을 활용해 다른 컴포넌트에 데이터를 전달한다. 상위 컴포넌트의 데이터를 하위 컴포넌트가

처음에는 카드 뭉치1에서 빼고 카드 뭉치2에서 빼고 왔다갔다 하는 줄 알았는데 한 뭉치에서 연속으로도 뽑을 수 있는 경우를 빼먹고 있었다 😅 그래서 초기에 설정했던 카드 뭉치1과 카드 뭉치2를 순회하던 이중포문을 없애버리고 goal를 순회해야겠다! 생각을 하다가 써버

Side Effect란 애플리케이션에서 일어나는 다른 모든 것을 의미한다. 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우나, React 컴포넌트가 화면 렌더링 이후 비동기 처리되어야 하는 부수적인 효과이다.Side Effect가 일어났다고 하는 경우는 다음과

AWS에서 발급받은 AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY를 github secret 추가하자리포지토리 Settings 클릭New repository secret 클릭해서 AWS_ACCESS_KEY_ID, AWS_SECRET_ACCES

📌 AWS 회원가입 / 로그인 AWS 서비스 회원가입 후 > 콘솔 로그인 📌 S3 접근을 위한 사용자(IAM) 추가하기 로그인 후 상단에 IAM 입력 > 액세스 관리: 사용자 클릭 > 사용자 추가 클릭 🔥 사용자 세부 정보 지정 다음과 같이 지정하여 자동 생성

feat/route라는 브랜치를 생성하고 삭제를 했다. 작업이 끝나 Github에서 브랜치를 삭제했음에도 불구하고 로컬에서 git branch -al로 모든 브랜치 목록을 확인 했을 때...당당하게 남아있는 모습...망할\~\~~ 내일이 되면 사라질 것 같아서 그냥 두

관련된 상태끼리 다루기 위해서 여러 slice를 다루는 방법을 알아보자. 모든 slice는 각 slice를 구분하기 위해 name이 필요하다.slice를 생성해 주기 위해서 아래와 같은 형식을 가진다.초기값으로는 다음과 같이 지정해 줄 수도 있고따로 객체를 선언한 변수

리덕스의 상태 데이터가 많아질수록 객체 내부의 데이터의 양이 방대해진다. 그럴 때마다 액션 로직 또한 해당 객체의 양식을 그대로 리턴해야 되기 때문에 리덕스 코드가 길어지고, 파일이 무거워질 수밖에 없다. 이런 경우 어떻게 할까? 실수로 중첩된 데이터 등을 바꿀 수 없

📌 Store src/store/index.js 📌 Function Component src/components/Counter.js 📌 Class Component src/components/Counter.js

한 애플리케이션 당 하나의 Store를 가진다.Store는 현재의 앱 상태와 리듀서를 가지며, 추가적으로 몇 가지의 내장 함수들이 있다.변화를 일으키는 함수, 기존 상태와 액션 두 가지 파라미터를 받는다.현재의 상태와 전달받은 액션을 참고하여 새로운 상태를 리턴한다.

시계모드로 해 두면 해당 파일을 컴파일을 계속 하지 않아도 자동으로 컴파일 됨규모가 큰 프로젝트에서는 이렇게 사용하지 않음파일을 지정하지 않아도 시계모드로 프로젝트 전체 폴더를 확인해 변경 사항이 적용될 수 있는 모든 타입스크립트 파일을 다시 컴파일 할 수 있음

오브젝트, 레퍼런스 형태가 아닌 실제 값을 저장하는 자료형프리미티브 형의 내장 함수를 사용 가능한 것은 JS 처리 방식 덕분booleannumberstringsymbol (ES2015)nullundefinedPrimitive Types은 모두 소문자

📌 TypeScript 우리가 사용하고 있는 JavaScript에 타입을 추가하여 확장시킨 것을 말한다. 코드를 실행하기전에 에러를 잡거나 고치는 듯 시간을 절약시켜 주는 이점을 가진다. 프로그래밍 언어로서, 자바스크립트에 있는 것을 강화 시키고 타입을 추가한 언어

위의 사진은 Texteditor로 받아온 value의 값을 확인해 봤을 때의 모습입니다... title 밑에 content 내용을 넣어 줬는데 Texteditor react-quill를 사용하여 입력한 value의 값을 출력하니 html 태그 모습이 그대로 적용된

빠빠빨간맛 프로젝트의 시작으로 pull을 받아와서 npm 설치 후에 본 에러다.오류를 부숴 보자...구글링을 통해서 나온 해당 에러는 근본적으로 컴퓨터 OS별로 다른 줄바꿈 타입을 사용해서 나는 오류라고 한다. Prettier에서는 CRLF 대신 LF 사용을 권고하고