리액트심화반 썸네일형 리스트형 [리액트 심화반] 5주차 개발일지 1. 배운 내용 firebase 호스팅 이용해서 프로젝트 배포하기 검색 엔진 최적화 pre-rendering meta tag core web vitals를 사용해 성능 체크 (+firebase analytics 연동) React.memo 사용해보기 2. 새로 알게 된 내용 1) firebase 호스팅 이용해서 배포하기 - 파이어베이스 CLI 설치해서 로그인하고 프로젝트 연결해주기 - 우리가 사용하는 서비스 전부 선택 (space bar로 선택, enter 키로 적용) - 프로젝트 선택할 때는 Use an existing project 선택 - 영상에서는 What do you want to use as your public directory? 에서 build로 해줘서 나도 build로 해주었는데 자료에는 .. 더보기 [리액트 심화반] 4주차 개발일지 1. 배운 내용 무한 스크롤 구현 firestore에서 데이터 정렬해서 가져오기 firestore의 복합 쿼리 사용해보기 firebase의 realtime database 사용해보기 2. 새로 알게 된 내용 1) 무한 스크롤 동작 원리 - 게시글을 한번에 여러개를 가져오면 페이지 로드 속도가 엄청 나빠진다. 한 화며냐에 담기는 게시글은 그렇게 많지 않기 때문에 한 화면에 담기는 게시글 수만 가지고 오고 스크롤이 화면 밑에 닿았을 때 다음 게시글을 불러오면 된다. - 무한 스크롤 컴포넌트를 만들고, 게시글 컴포넌트들, 다음 목록을 불러올 함수, 파이어스토어에서 불러오는 중 여부 판별자, 다음글 여부 판별자를 넘겨준다. - 그전에 게시글을 가져올 때, 어디까지 가져왓는지, 다음엔 뭐부터 가져올지 페이징 정보.. 더보기 [리액트 심화반] 3주차 개발일지 1. 배운 내용 파이어스토어로 데이터 관리하기 파이어베이스의 스토리지 서비스를 이용하여 이미지 업로드하기 파일 업로드 전 이미지 미리보기 구현 잦은 이벤트 처리 기법 2. 새로 알게 된 내용 1) 파이어스토어 연동하기 - firebase.js에서 파이어스토어 추가 import "firebase/firestore"; ... const firestore = firebase.firestore(); ... export{auth, apiKey, firestore}; - 파이어스토어에서 데이터 가져오기 import { firestore } from "../../shared/firebase"; ... const getPostFB = () => { return function (dispatch, getState, { .. 더보기 [리액트 심화반] 2주차 개발일지 1. 배운 내용 토큰 기반 인증 파이어베이스 이용해서 로그인 기능 구현 로그인 유지 구현 로그인 권한을 체크하는 컴포넌트 구현 2. 새로 알게 된 내용 1) Promise - 자바스크립트가 비동기처리를 하기 위한 패턴 중 하나로 콜백이 있는데 전통적인 콜백 패턴은 일명 콜백 헬이라고 불리는 중첩 문제가 발생하기 쉽다. 중첩 문제가 발생하면 오류가 발생했을 때도 캐치하기 어렵다. - 콜백 헬이 발생하는 이유는 비동기 처리 함수 내에 또 다른 비동기 작업이 필요할 경우에 중첩이 생기면서 콜백 헬이 발생한다. - Promise : 콜백 헬 때문에 ES6에서 도입한 또다른 비동기 처리 패턴. - Promise 생성 방법 // 프라미스 객체를 만듭니다. // 인자로는 (resolve, reject) => {} 이.. 더보기 [리액트 심화반] 1주차 개발일지 1. 배운 내용 자바스크립트 문법 (변수와 상수, 자료형, 객체, 함수, 콜백함수, 프로토타입) 기획서 쪼개기 메인페이지 만들기 최소단위 컴포넌트 만들기 2. 새로 알게 된 내용 1) TDZ (Temporal Dead Zone, 일시적 사각지대) let, const는 호이스팅이 된다. 스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이(=실행 컨텍스트가) 변수가 있는 실제 위치에 도달할 때까지 액세스를 못할 뿐. 2) const로 선언된 객체는 수정될 수 있다. 객체에 대한 참조를 변경하는 것이 불가능. 3) 콜백 함수 : 함수를 값처럼 전달할 때, 인수로 넘겨주는 함수 4) 프로토타입 : 자바스크립트의 모든 객체는 자신의 부모 객체와 연결되어있다. 좀 더 정확히는 부모 객체의 원형. (.. 더보기 이전 1 다음