[WIL] 항해 99 5주차 리액트 심화 회고 (axios)

What I Learned

이번 주차에서 리액트를 활용해 magazine 사이트 만들기를 진행했다. magazine 사이트에는 기본적으로 로그인과 회원가입 기능, CRUD 기능 등이 들어갔는데 웹에서 가장 기본적인 부분을 학습할 수 있었다. 일주일만에 이 기능을 모두 구현하기까지 어려움은 있었지만 강의 내용을 꼼꼼하게 따라하며 최종적으로 완성을 할 수 있었다. 아직 강의를 보고 따라하는 수준이라고 생각하는데 이 코드를 다시 되돌아보며 어떤 로직으로 돌아가고 있는 것인지를 확실하게 다시 공부할 필요가 있어 보인다.

- Axios란?

Axios는 브라우저와 백앤드를 위한, Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드와 프론트엔드 통신을 쉽게 하기 위해 Ajax와 비슷하게 활용된다. 

---

<항해 99 5주차 리액트 개인 과제>

프로젝트 기간 : 2022.04.01~2022.04.05 (총 5일간)

개인과제명 : magazine 사이트 만들기

필수 포함 사항

1. 게시글 페이지
   • 목록 가져오기
     • 상세페이지는 게시글 레이아웃에 맞춰 이미지와 텍스트 위치를 조절해서 노출
   • 추가하기(+ 이미지 업로드)
     • 3가지 레이아웃 중 선택하기 : 이미지가 오른쪽, 이미지가 왼쪽, 이미지가 아래쪽
     • 레이아웃 선택시, 게시글 레이아웃대로 게시글 보이게 하기
     • 텍스트와 이미지 중 입력이 안된게 있다면 게시글 작성 버튼 비활성화
     • 작성 완료시 메인페이지로 이동
   • 삭제하기

2. 회원가입하기

• 이메일과 비밀번호 형식 체크

3. 로그인하기

• 이메일과 패스워드 미기입시 로그인 버튼 비활성화

4. 파이어베이스 or S3로 배포 

구현한 페이지 및 기능

1. 게시글페이지(메인)

• 게시글 보여주기
  • 게시글 추가시 선택된 레이아웃 형식으로 글 보여주기(사진은 오른쪽 이미지 정렬 레이아웃)
  • 게시글 클릭시 상세페이지로 이동
  • 로그인 시 본인의 게시물이 맞다면 수정과 삭제 버튼 표시

2. 로그인, 회원가입 페이지

• 로그인과 회원가입
  • 아이디와 비밀번호 유효성 검사
  • 로그인 성공시 메인페이지로 이동
  • 회원가입 시 메인페이지로 이동

3. 개시글 작성 및 수정 페이지

• 게시글 확인 및 수정페이지
  • 레이아웃 선택
  • 이미지 미리보기
  • 게시글 내용 및 이미지 중 하나라도 입력이 안되어있으면 버튼 비활성화
  • 게시글 작성 성공시 메인페이지로 이동

4. 추가 기능

- 무한스크롤 구현 완료

5. 깃허브 레파지토리

GitHub - JIEUN24/React_3_magazine: 항해99 리액트 심화 3주차 magazine 사이트 만들기입니다. (로그인, 회원

---

5주차를 마무리하며 짧은 시간 내에 여러가지 가능을 구현해볼 수 있었다. 아직 기능이 완전하지 않아 오류가 발생하기도 하고 그 오류를 해결해나가는 과정에서 조금은 성장한 것 같다는 생각이 든다. 구현한 기능 코드가 완벽히 내 것은 아니지만 내 것이 되도록 복습하고 또 복습해볼 필요가 있을 것 같다. 다음주는 미니프로젝트 기간으로 백엔드와 첫 협업을 진행하는데 벌써부터 긴장되고 걱정이 된다. 배운 것을 바탕으로 조금씩 활용해보려고 노력해야겠다.

5주차 공부시간 기록 : 105시간 39분