개인과제 결과물
https://youtu.be/ZhZG-2LLzJI
깃허브
https://github.com/guswls1419/React-study-week-3
지난주 redux의 개념을 배우고 redux에대해 공부를 지속적으로 해오던 중
새로운 주차가 시작되었고, 이번주차에는 redux와 지금까지 배웠던 기능들을 모두 사용해 어떠한 작업물을 만드는 과제가 주어졌다.
과제의 자세한 내용은 아래와 같다.
< 로그인 사용자용 매거진 사이트 만들기>
✅ 기능 목록
1. 게시글
- 목록 가져오기
- 추가하기 (+이미지 업로드하기)
- 삭제하기
- 수정하기
- 회원가입하기
- 로그인하기
- 파이어베이스 or S3로 배포!
✅ 페이지별 상세페이지별 상세
1. 회원가입 페이지
- 이메일 형식 체크, 비밀번호 체크할 것
- 로그인 페이지
- 이메일, 패스워드 미기입 시 로그인 버튼 활성화 막을 것
- 메인 페이지(게시글 목록 페이지)
- 게시글 목록 노출
- 게시글 하나는 작성자, 작성 시간, 이미지 미리보기, 텍스트 내용으로 구성
- 게시글 하나를 클릭 시, 게시글 상세 페이지로 이동
- 글 작성 페이지
i. 레이아웃 선택 버튼
- 3가지 레이아웃 중 선택하도록 한다.
- 이미지가 오른편에, 텍스트는 왼편에 위치한 레이아웃
- 이미지가 왼편에, 텍스트는 오른편에 위치한 레이아웃
- 텍스트가 위에, 이미지는 아래에 위치한 레이아웃
- 레이아웃 선택 시, 게시글 레이아웃(모양새)대로 보이도록 한다.
- 텍스트, 이미지 중 입력 안된 게 있다면 게시글 작성 버튼 비활성화
- 작성 완료 시 메인 페이지로 이동
- 게시글 상세 페이지
- 게시글 레이아웃에 맞춰 이미지, 텍스트 위치 조절해서 노출
과제의 양이 저번주와 비교도안돼게 구현해야할 양이 너무 많았다.
그리고 로그인기능을 제대로 구현해 본적이 없어서 로그인 로직조차 몰랐던 나로썬
너무나도 멘붕이었다.
우선은 심화 react 강의를 보며 하나씩 따라해보며 익혀보기로 하였다. 하지만 강의를 본 이후 더 멘붕이었던 것 같다.
심화 과정이라 그런지... 강의에서는 컴포넌트를 나누는 방식부터 달랐고 defaultProps를 사용하여 props 초기값 설정해주는 방식으로 프로젝트하나를 만들어 나갔다..
마치.. 이때까지 내가 조금 알았던 react는 react가 아니었던 느낌이었다.
정말 하나도 모르겠어서 일단은 내가 모르는 방식이니깐 무작정 강의를 보며 코드를 따라치며, 강의에서 설명해주는 내용을 주석으로 표기해 두었다.
이해를 하면서 만든다라는 느낌이 들지않아 중간중간에 현타가 오기도 하였다.
지금 이 방식이 정말 맞는것인지... 하지만 강의를 보지않으면 이번주 과제를 절대 절대 완성할수 없었기에 계속 강의를보며 코드를 따라 쳤던것 같다.
강의를 따라하고나니 과제의 반이상이 완성되어있었고, 거기에 추가적으로 저번주차에 배웠던내용 기억을 되살려 게시물 삭제하기, 그리고 이번주차 강의에서 배웠던 버튼 비활성화기능 등 추가적으로 기능을 구현하여 과제를 완성하였다.
과제 제출을 하기전 마지막으로 제대로 기능들이 구현이되는지 확인을 하던중, 게시물에 붙어있는 삭제하기 버튼을 눌렀을때 바로 삭제가안돼고 상세보기 화면으로 넘어가야 삭제가 되는 현상이 일어났다.
왜 이런현상이 일어나는지 도저히 찾을수가 없어, 기술매니저님께 질문을 드렸더니 이벤트 전파에대해 한번 찾아보라는 답변을 받았다.
📌react 이벤트 전파란?
- 이벤트 버블링(Event Bubbling)
한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다.
가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하는데 이것을 이벤트 버블링이라고 한다.
- 버블링의 순서
이벤트발생요소 -> 이벤트발생부모요소 -> 이벤트발생조상요소
- 이벤트 캡쳐링(Event Capturing)
캡쳐링은 버블링의 반대 개념으로, 한 요소에 이벤트가 발생하면, 최상단의 요소부터 처음 발생한 요소까지 핸들러가 동작하는 것을 말한다.
- 캡쳐링의 순서
이벤트발생조상요소 -> 이벤트발생부모요소 -> 이벤트발생요소
- 이러한 이벤트를 중단하려면 event.stopPropagation()를 이용해 중단시킬 수 있다.
이벤트 캡쳐링으로 인해 삭제버튼이 제대로 작동이 되지않았고, event.stopPropagation() 를 이용해 이벤트 전파를 중단시켜 제대로 작동이 될수있도록 구현해 낼 수 있었다.
5주차 핵심키워드
Axios
Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리로
쉽게 말해 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다.
- axios 특징
운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
Promise(ES6) API 사용
요청과 응답 데이터의 변형
HTTP 요청 취소
HTTP 요청과 응답을 JSON 형태로 자동 변경- Axios 사용법
axios({ url: 'https://test/api/cafe/list/today', // 통신할 웹문서 method: 'get', // 통신할 방식 data: { // 인자로 보낼 데이터 foo: 'diary' } });
5주차 회고
이번주는 나스스로 해내고 있다는 생각이 너무나도 크게들어 좌절감과, 불안함을 많이 느꼈던 한주였다.
갑자기 양이 늘어난 과제에, 접해보지 못한 코드작성법, 로그인기능 등등 너무 벅찼던 한주였다.
과제를 하는동안에는 강의코드만 따라치는 앵무새같은 느낌이 많이 들었었는데, 막상 과제를 제출하고 다시한번 작성한 코드와, 달아놓았던 주석들을 읽어보니 그래도 얻은것이 하나도 없진 않다는 것을 알게되었다.
확실히 주석을 달아놓았던것이 도움이 되었고, 한번 강의를 따라하며 완성해보니 다시한번 코드를 보았을때 이해가 더 쉽게 되었다.
컴포넌트를 elements 단위로 따로 빼서 사용하고, defaultProps를 주고 초기값을 설정하는것이 컴포넌트 재사용성이 좋다는것을 알게 되었고, redux개념에대해 조금더 깊게 이해할수 있었으며,
아직 완벽하진않지만 로그인 로직이 어떻게 흘러가는지에대해 조금 이해할수 있게 되었다.
과제를 하는 동안은 계속해서 스스로에게 해낼 수 있을지에 대한 의심을 계속하였고, 시간을 허비하고있다는 느낌을 많이 받았지만 끝내고 나서 다시한번 복습을 하니 결코 헛된 시간이 아니었음을 깨달을 수 있었다.
하지만 강의없이 다시한번 메거진 사이트를 혼자 구현해보라고하면 절대 불가할것 같다.
아직 현재의 나는 더 많은 공부가 필요하다.
더더 많이 공부해서 언제가 혼자서 이 모든 기능을 구현해낼 수 있는 날이 오길 바래본다.
