What I Learned
이번 주차에서 리액트를 활용해 magazine 사이트 만들기를 진행했다. magazine 사이트에는 기본적으로 로그인과 회원가입 기능, CRUD 기능 등이 들어갔는데 웹에서 가장 기본적인 부분을 학습할 수 있었다. 일주일만에 이 기능을 모두 구현하기까지 어려움은 있었지만 강의 내용을 꼼꼼하게 따라하며 최종적으로 완성을 할 수 있었다. 아직 강의를 보고 따라하는 수준이라고 생각하는데 이 코드를 다시 되돌아보며 어떤 로직으로 돌아가고 있는 것인지를 확실하게 다시 공부할 필요가 있어 보인다.
- Axios란?
Axios는 브라우저와 백앤드를 위한, Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드와 프론트엔드 통신을 쉽게 하기 위해 Ajax와 비슷하게 활용된다.
프로젝트 기간 : 2022.04.01~2022.04.05 (총 5일간)
개인과제명 : magazine 사이트 만들기
필수 포함 사항
- 게시글 페이지
- 목록 가져오기
- 상세페이지는 게시글 레이아웃에 맞춰 이미지와 텍스트 위치를 조절해서 노출
- 추가하기(+ 이미지 업로드)
- 3가지 레이아웃 중 선택하기 : 이미지가 오른쪽, 이미지가 왼쪽, 이미지가 아래쪽
- 레이아웃 선택시, 게시글 레이아웃대로 게시글 보이게 하기
- 텍스트와 이미지 중 입력이 안된게 있다면 게시글 작성 버튼 비활성화
- 작성 완료시 메인페이지로 이동
- 삭제하기
- 목록 가져오기
2. 회원가입하기
- 이메일과 비밀번호 형식 체크
3. 로그인하기
- 이메일과 패스워드 미기입시 로그인 버튼 비활성화
4. 파이어베이스 or S3로 배포
구현한 페이지 및 기능
1. 게시글페이지(메인)
- 게시글 보여주기
- 게시글 추가시 선택된 레이아웃 형식으로 글 보여주기(사진은 오른쪽 이미지 정렬 레이아웃)
- 게시글 클릭시 상세페이지로 이동
- 로그인 시 본인의 게시물이 맞다면 수정과 삭제 버튼 표시
2. 로그인, 회원가입 페이지
- 로그인과 회원가입
- 아이디와 비밀번호 유효성 검사
- 로그인 성공시 메인페이지로 이동
- 회원가입 시 메인페이지로 이동
3. 개시글 작성 및 수정 페이지
- 게시글 확인 및 수정페이지
- 레이아웃 선택
- 이미지 미리보기
- 게시글 내용 및 이미지 중 하나라도 입력이 안되어있으면 버튼 비활성화
- 게시글 작성 성공시 메인페이지로 이동
4. 추가 기능
- 무한스크롤 구현 완료
5. 깃허브 레파지토리
GitHub - JIEUN24/React_3_magazine: 항해99 리액트 심화 3주차 magazine 사이트 만들기입니다. (로그인, 회원
항해99 리액트 심화 3주차 magazine 사이트 만들기입니다. (로그인, 회원가입, CRUD, 무한스크롤 구현 완료) - GitHub - JIEUN24/React_3_magazine: 항해99 리액트 심화 3주차 magazine 사이트 만들기입니다. (로그인
github.com
5주차를 마무리하며 짧은 시간 내에 여러가지 가능을 구현해볼 수 있었다. 아직 기능이 완전하지 않아 오류가 발생하기도 하고 그 오류를 해결해나가는 과정에서 조금은 성장한 것 같다는 생각이 든다. 구현한 기능 코드가 완벽히 내 것은 아니지만 내 것이 되도록 복습하고 또 복습해볼 필요가 있을 것 같다. 다음주는 미니프로젝트 기간으로 백엔드와 첫 협업을 진행하는데 벌써부터 긴장되고 걱정이 된다. 배운 것을 바탕으로 조금씩 활용해보려고 노력해야겠다.
