📒 React 심화
5주차 심화주차의 개인 과제는 매거진 사이트를 완성하고 파이어베이스 or S3로 배포까지 완료하는 과제이다.
과제 요구사항
✅ 기능 목록
- 게시글
- 목록 가져오기
- 게시글 추가하기 (+이미지 업로드)
- 게시글 삭제하기
- 게시글 수정하기
- 회원가입
- 로그인
- 파이어베이스 or S3로 배포
✅ 페이지별 상세
- 회원가입 페이지
- 이메일 형식 체크, 비밀번호 체크
- 로그인 페이지
- 이메일, 패스워드 미기입 시 로그인 버튼 활성화 막기
- 메인 페이지
- 게시글 목록 노출
- 게시글 하나는 작성자, 작성 시간, 이미지 미리보기, 텍스트 내용으로 구성
- 게시글 하나 클릭 시, 게시글 상세 페이지로 이동
- 무한 스크롤
- 글 작성 페이지
- 레이아웃 선택 버튼
- 3가지 레이아웃 중 선택
- 이미지가 오른쪽, 텍스트는 왼쪽에 위치한 레이아웃
- 이미지가 왼쪽, 텍스트는 오른쪽에 위치한 레이아웃
- 텍스트가 위에, 이미지가 아래에 위치한 레이아웃
- 레이아웃 선택 시, 게시글 레이아웃대로 보이게 한다.
- 텍스트, 이미지 중 입력 안된게 있다면 게시글 작성 버튼 비활성화
- 작성 완료 시 메인 페이지로 이동
- 3가지 레이아웃 중 선택
- 레이아웃 선택 버튼
- 게시글 상세 페이지
- 게시글 레이아웃에 맞춰 이미지, 텍스트 위치 조절해서 노출
- 알림 페이지
- 알림 기능
📌 이 과제를 통해서 익힐 수 있는 것
- 파이어베이스 Auth를 이용해 회원가입, 로그인 기능을 만들 수 있다.
- 파이어스토어를 사용해 데이터 입력, 수정, 삭제, 읽기를 만들 수 있다.
- 게시글 마다 타입 지정해 해당 타입 별로 다른 레이아웃을 보여줄 수 있다.
심화주차 과제 완성 페이지 : https://image-community-31e55.web.app/
개인 과제 깃허브 주소 : https://github.com/durukim/react-page.git
📒 5주차를 통해 공부한 것
-
기획서 보기 : 피그마 를 이용해 기획서를 만들고 보면서 프로젝트를 어떻게 진행할지 생각하는 능력을 배웠다.
-
컴포넌트 관리 : 기획서를 보면서 최소단위 컴포넌트를 쪼개는 방법을 배웠다. 예를 들어 로그인 페이지가 있다면 인풋, 버튼 하나 하나 컴포넌트로 만들어서 다른 페이지에서도 쓸 수 있게 해준다.
-
Promise : 비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체이다. 프로미스를 쓰면 비동기 메서드를 마치 동기 메서드처럼 값을 반환할 수 있다. 전통적인 콜백 패턴으로 인한 콜벡 헬 때문에 ES6에서 도입한 또다른 비동기 처리 패턴이다.
콜백이란?
콜백은 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나이다.
전통적인 콜백 패턴은 일명 콜백 헬로 불리는 중첩 문제가 생기기 쉽다.콜백 헬
꼬리에 꼬리를 무는 비동기 처리가 늘어나면 호출이 계속 중첩되고, 코드가 깊어지고, 관리가 어려워진다. 이런 깊은 중첩을 콜백 헬이나 멸망의 피라미드라고 부른다.promise chaining
프라미스는 후속 처리 메서드를 체이닝해서 여러개의 프라미스를 연결할 수 있다.
이를 통해 콜백 헬을 해결할 수 있다.aync, awit
aync : 함수 앞에 aync를 붙여서 사용하고 항상 프라미스를 반환한다.
awit : aync와 함께 사용해야 하며 함수 안에서만 동작한다. 프라미스가 처리될 때까지 기다렸다가 그 이후에 결과를 반환한다. -
토큰 기반 인증 (OAuth2.0) : OAth2.0이란 외부 서비스의 인증 및 권한부여를 관리하는 프레임워크이다.
OAuth 동작 방식
클라이언트와서버사이에 인증(로그인)을 하면 서버가access_token을 준다.클라이언트는access_token을 이용해 API 요청을 할 수 있닫.서버는 API 요청을 받고,access_token을 가지고 권한이 있나 없나 확인해서 결과를클라이언트에 보내준다.
-
Throttle vs Debounce : Throttle 와 Debounce 는 자주 사용되는 이벤트나 함수들의 실행되는 빈도를 줄여 성능상의 유리함을 가져오기 위한 개념이다. 즉 이벤트를 제어하는 방법이다. 예를 들어 스크롤 이벤트에서 사용자가 스크롤을 움직일 때 마다 스크롤 이벤트가 발생한다. 매번 스크롤 이벤트에 대한 콜백이 발생하고 그 콜백이 수행하는 일이 매우 큰 리소스를 잡아먹는다. 이는 결국 서비스의 성능 저하를 발생시킨다. 이를 해결하기 위한 해결책이 바로 Throttle 와 Debounce 개념.
📒 5주차에 아쉬웠던 점
지난 2주동안 배우고 익혔던 리액트와는 완전 다른 느낌이였다. 내가 그동안 배웠던건 뭐지? 하는 느낌.. 컴포넌트를 최소단위까지 쪼개는 것을 보고 아 이렇게 해야되는구나... 라고 느꼈다. 한 주동안 매우 많은 내용이 머리속에 들어왔는데 너무 많은 내용을 받아들이다보니 완전히 내 것으로 만든 부분은 너무 적은 것 같다. 앞으로 있을 프로젝트에서 계속해서 배운 내용을 복습해 나가면서 내 것으로 만들어야겠다.
📒 다음주차에 공부할 것
6주차에는 1주차에 했던 미니프로젝트와 비슷한 프로젝트를 처음으로 프론트와 백이 협업해서 진행하는 주차이다. 아무래도 처음 협업하는것이다 보니 서로가 서로를 잘 모르고 어떤걸 할 수 있는지를 모르기 때문에 소통하는 부분이 제일 중요해 보인다. 6주차 미니프로젝트에서 가장 중요한 부분을 정리해 보자면
- 백엔드 파트와의 의사소통
- axios 를 이용한 백엔드와의 협업
- css 부분 좀 더 신경쓰기
