5-5. AWS S3 버킷 / 도메인 연결 / Firebase로 배포 우리는 AWS S3와 파이어베이스, 이것들을 이용하여 총 두 번의 배포를 해볼 것임. 1. AWS S3 버킷. - S3 버킷이란? : S3(Simple Storage Service)는 단순 스토리지 서비스예요! 이미지나 파일을 저장할 수 있습니다. html, css, js 같은 정적 자원을 올리고, 정적 웹 사이트를 호스팅할 수도 있어요. 우리가 컴퓨터에 폴더 만드는 것처럼 버킷을 만들고 사용할 수 있어요! AWS를 부트캠프에서 사용한 적이 있는데, 그 뒤에 계정을 삭제해서 계정을 새로 만들기 너무 힘들더랬다...ㅋㅋㅋ 계정을 만드는 과정에서 비자 카드를 필요로 하는데 내가 비자 카드가 없다는 게 문제...ㅋㅋㅋㅋ 결국 오빠의 비자 체..

5-1. 리덕스에서 Firestore 데이터 가져다 쓰기 1. 미들웨어란? : firebase에서 데이터를 가져올 때 비동기 통신을 하고, 리덕스에서 비동기 통신을 할 때 필요한 것. 리덕스 데이터를 수정할 때 [액션이 디스패치 되고 → 리듀서에서 처리] 하던 과정 기억하시죠? 미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리 같은 거예요! 즉! [액션이 일어나고 → 미들웨어가 할 일 하기 → 리듀서에서 처리] 이 순서로 처리하게 됩니다! 미들웨어도 종류가 굉장히 다양한데, 우리가 이번에 사용할 것은 미들웨어인 thunk 입니다. redux-thunk는 뭐하는 미들웨어일까? 우리 액션 생성 함수가 뭘 반환한다고 했었죠? 맞아요! 객체 반환하죠.🙂 redux-thunk는 객체 대신..

4-2. Firebase - 웹의 동작 방식은? : 웹은 요청과 응답으로 굴러감. 클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답. - 서버가 하는 일 : 서버가 하는 일은 엄청 많음. 데이터 관리, 분산처리, 웹 어플리케이션 돌리기 등... - 서버리스란 무엇인가? : 서버리스는 서버가 없다는 것이 아니라, 서버를 신경쓸 필요가 없다는 것을 의미. 그냥 우리에게 필요한 서버를 필요한 만큼만 빌려쓰면 됨. 이미 누군가가 구축해둔 서버의 일부분을 빌려서 사용할 수 있음. => 우리가 직접 인프라를 구축하고, 서버 스펙을 고민할 필요 없다는 얘기. - BaaS는 무엇을 빌려오는 것인가? : BaaS는 Backend as a Service의 약자. => 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는..

4-1. Keyframes keyframes는 styled-components 안에 이미 들어있음. 웹에서 애니메이션을 구현할 때는 transition과 animation이라는 스타일 속성을 많이 사용. - transition : 1. 단순한 앨리먼트 상태변화에 쓰기 좋음. 2. 효과가 일정한 시간(duration)에 걸쳐 일어남. 3. 스스로 작동할 수 없기 때문에 onClick 함수나 hover와 함께 쓰임. - animation : 1. 다이나믹한 효과를 주는데 쓰기 좋음.(transition에 비해 훨씬 구현할 수 있는 요소가 다양함.) 2. 이벤트 없이 스스로 시작, 정지, 반복을 제어할 수 있음. 3. @keyframes로 이루어져 있음.(keyframes는 animation에서 사용하는 속성..

7. EDIT PROFILE 7-1. Get My Own Nweets 이제 해야 할 것은 프로필을 가져오는 것. => 프로필 화면을 만들 거임. 기존에 만들어뒀던 EditProfile.js은 없애고 Profile에서 작업을 해줄 거임. 7-2. Update Profile 7-3. Update Profile Bugfix

6. FILE UPLOAD 6-1. Preview Images - 게시글에 글과 함께 사진도 올리고 싶음. 이럴 때 쓰는 게 Storage. Storage는 이미지, 오디오, 동영상 같은 사용자가 생성한 파일을 저장하고 가져올 수 있게 하는 저장소. test mode로 해서 bucket 생성. bucket은 파일을 넣는 곳임. 이제 사진을 함께 올릴 것이기 때문에 Nweet하는 방법을 바꿔야 함. Home.js에 코드 추가. 이 input은 모든 이미지로 된 파일만 받아들인다는 의미. 그럼 화면에 이렇게 나타남. 우리가 원하는 것은 파일을 선택하고 이미지 선택을 눌렀을 때 사진을 미리보기 하는 것. 고로 우리는 파일이 string 형식으로 들어왔을 때 그걸 읽어올 수 있어야 함. onFileChange라..