S2 Unit 11. 미니 해커톤 회고

나현·2022년 10월 18일

section_2 코드스테이츠 프론트엔드 학습일지

학습일지

목록 보기

28/53

💡 이 포스트에는 Section2의 Unit 11. 미니 해커톤의 과제를 하고 회고를 정리했다!
(누군가에게는 너무 쉬워 하품이 나올 수 있습니다.🥲)

과제에 대한 코드를 전부 공개할 순 없지만, 완성한 배포 페이지와 작업과정, 작업하며 느꼈던 점들을 정리했다.

과제 소개

지난 번 섹션1의 미니 해커톤에서 만들었던 My Agora States 과제를 Section2에서 배운 내용으로 바꾸는 시간이었다.
지난 번 사용했던 더미 데이터를 express를 사용해 서버로 만들고,
지난 번에는 HTML, CSS, JS를 사용해 만들었다면 이번에는 React를 사용해 페이지를 만들었다. (CSS는 그대로 사용했다)

지난 번에 만들었던 HTML 버전 배포 링크이다.
🔗 신나현 | My Agora States
(이번 것은 top버튼, pagination이 없고 다른 모양은 비슷하다.)

TODO
- 지난 번 사용했던 더미 데이터로 서버를 만든다.(express를 사용)
- 서버를 실행해보고 데이터 응답이 제대로 오는지 확인한다.
- 지난 번 작업했던 페이지를
과제 페이지 구조: 지난 번과 같다.
다만 차이점이 있다면 이번에는 React를 사용했기에 컴포넌트 단위로 작업했다.
- 제목 영역 -> Header 컴포넌트
- 새 질문 영역(새로운 질문을 등록하는 폼) -> Form 컴포넌트
- 질문 목록 영역(데이터 렌더링하여 리스트 형태로 변환)
  -> Discussions 컴포넌트
  - 개별 질문 영역: SingleDiscussion 컴포넌트
Pull request 내용
기존 과제 프로젝트를 fork한 후, pull request로 과제를 제출해야 했다.

과제 진행

1) 과제 파일 다운받기

이제 git으로 과제 정도는 쉽게 clone 한다!

2) TODO 확인하기

BMR = TODO

이번에는 BMR을 하려면 Option과제를 할 수 밖에 없어서 그냥 다 해야했다. 나는 최대한 기본 과제에 적용하려고 했는데, 소그룹회고를 하다보니 다들 React에 적용한 것 같았다. 나도 결국은 React로 바꾸었는데... 사정이 있었다.

서버 만들기(express 사용)
- 미들웨어 적용: 모든 경로의 CORS 요청 허용
- 요청시 데이처 조회하여 응답 처리
- 주어진 경로로 라우팅 적용
- 로컬 환경에서 서버 실행
기존 My Agora States에 데이터 연동
- 기존 과제의 더미 데이터를 만든 서버의 데이터로 대체
- 데이터 조회하여 클라이언트에 렌더링
- Option) 기존 과제 React로 변경 -> 필수나 다름 없다...

3) 서버 만들기

express를 사용하니 보다 쉽게 서버를 만들 수 있었다.
처음 사용할 때는 나름 해매기도하고 어려웠지만 막상 만들어보니 정말 간편해서 사용하기 편했다.
특히 하나의 기능을 전체 작업하는 것과 (app.use())
라우팅 기능( router.get('/url',router)처럼 사용 )이 제일 편했다.
그리고 서버 만들기는 오래 걸리지 않았다.

4) 기존 My Agora States에 데이터 연동

► 기존 과제의 더미 데이터를 서버 데이터로 대체

기존에 HTML, CSS, JS로 만들었던 과제에 더미 데이터, 로컬 스토리지 데이터 설정을 걷어내고 서버의 데이터로 대체해야 했다.
그러기 위해서 fetch를 통해 서버의 데이터를 받아와야 했는데, 여기서 문제가 생겼다. 😫

► fetch 데이터 전역변수에 할당하기?

되는 줄 알았는데 결국 해결 할 수 없었다. 정확히 말하면 방법이 아예 없지는 않지만 내 상황에서는 해결이 어려웠다. 이유는 알 수 있었다.

왜냐하면 비동기로 데이터를 받아오기 때문에 작업이 순서대로 진행되지 않기 때문이다.
즉, 전역변수를 선언하고, 이 변수에 데이터를 할당하는 작업이 순서대로 진행되지 않는다.
만약 해결하려면 동기적으로 데이터를 받아와 할당해야 한다.
여러 방법이 있으나 그 중에서도 fetch를 사용한다면 동기적으로 실행되어야 할 작업은 then메서드 안에 작성해야 한다.

그러나 내 기존 코드는 처음에 모든 더미 데이터를 변수에 할당하여 그 변수를 활용하고 있었고 그러려면 기존 코드를 좀 많이 수정해야 했다.
시간은 점점 흐르고, 이 문제를 해결하기 위해 해결책을 생각해보았다.
해결방법은

기존의 작업들을 then 메서드 안에서 호출 -> 코드 전면 수정 필요

리액트로 전환 후 Effect Hook 사용

이렇게 2가지 방법이 있었는데 1,2번으로 하려고 폭풍검색으로 시간을 다 날리고 말았다.😭 해보니까 오히려 리액트로 바꿔서 하는 게 빠를 것 같아 결국 3번의 방법을 선택하게 되었다.

► Option) 기존 과제 React로 변경하기 -> Option 아니고 필수

그렇게 최소 요구조건을 만족하기 위해 React로 기존 페이지를 변경했는데,
저번에 도전과제로 만들었던 pagination은 구현할 시간이 없어 포기하고 작업했다. 소그룹 회고 전까지는 더 시간이 모자라서 컴포넌트만 만들어 조립하고 과제를 제출했다.
그렇게 미완성인 상태에서 발표도 하고 동기에게 피드백도 받았는데, 고맙고도 아쉽지만 그렇게 큰 도움은 되질 못했다. 동기가 열심히 해주었지만 오히려 문제의 원인만 확실해졌다. (그래도 블로깅에는 도움이 되었어요ㅠㅠ)

► 이야 잔업이다! React로 데이터 받아오기

정규 수업이 끝나고 대충 완성했던 React를 완성하고, 서버 데이터를 연결시켰다. 기존 HTML 작업과 다르게 React는 Effect Hook을 사용하면 데이터를 제대로 받아올 수 있다.

useEffect의 두번째 인자를 생략하면 react 컴포넌트가 렌더링 될때마다 첫번째 인자인 실행함수가 실행된다. 이 때 첫번째 인자인 실행함수와 useState를 이용해 데이터를 원하는 변수에 할당(setState 기능 활용)할 수 있다.
useEffect의 두번째 인자인 배열(종속성 배열)에 useState의 데이터변수를 넣어주면, 이 변수의 값이 변할 때마다 첫번째 인자인 실행함수가 실행된다. 이 때 마찬가지로 첫번째 인자인 실행함수와 useState를 이용해 데이터를 원하는 변수에 할당(setState 기능 활용)할 수 있다.

const [data, setData]=useState([]);
useEffect(()=>{
  getRowData()
  .then(result=>{
    setData(result);
  })
}, [data]);//data값이 바뀔 때마다 실행
//만약 [data]부분을 생략하면 컴포넌트가 새로 랜더링될 때마다 실행된다.

결국 기존 과제의 pagination은 구현하지 못했지만, 과제를 해결할 수 있었다.

배운 점, 느낀 점, 아쉬운 점

배운점

비동기에 대해서 항상 자신이 없었는데, 문제의 원인을 파악하고 해결하는 과정에서 비동기에 대해 좀 더 알게 되었다. 삽질하느라 async-await, fetch-then 메서드 사용은 좀 익숙해졌다.
React를 배우고 네트워크를 배우는 동안 React가 가물가물했는데, 이렇게 react 실습을 해보니 좀 더 익숙해졌다. 막상 해보니 코드가 바로바로 튀어나오지는 않지만 state, props, Effect Hook은 이제 이해하고 쓸 수 있다.

아쉬웠던 점

아무래도 기존 HTML 과제에서 전역 변수에 fetch 데이터 할당하는 방법을 찾지 못했고, 그나마 해결하는 방법마저 제대로 구현하지 못한 것이 제일 아쉽다. 이번 과제에서 제일 아쉽고 시간도 오래 걸려서 기분이 좋지 않아...
나중에 시간이 난다면 다시 코드를 리팩토링 해보고 싶은데 점점 시간이 부족하다.

-> 221019 내용 추가 :
결국 위에서 분석한 문제점이 맞았고, 후에 시간을 두고 1번의 방법(fetch로 데이터를 받아오고, then 메서드에 코드 작성)대로 HTML 버전을 수정했다. then메서드 안에 기존 데이터를 사용하는 코드를 모두 넣어주었다.
그러자 HTML모드도 정상적으로 돌아갔다.
HTML, CSS, JS는 레퍼런스가 없어도 페이지를 바로바로 만들 수 있지만, React는 하다보니 그렇지 않아 복습의 필요성을 세게 느꼈다. 머리로 이해했지만 아직 내 손이 덜 이해하고 있다.
지난 번에는 손쉽게 advanced 과제를 했는데 이번에는 그렇지 못했다. 지금까지의 방법보다 좀 더 공부하고 열심히 해야한다. 안그래도 없는 쉬는 시간 더 줄여야 하나???

느낀점

네트워크를 배운 section2의 후반부 유닛부터 잠이 모자라서 피곤하다보니 컨디션이 저조해지고 있다. 더 열심히 해야하는 상황에서 오히려 컨디션이 조금 떨어지다보니 그게 이번 미니 해커톤에도 영향이 간 것 같다.
왜 힘든 일은 항상 몰아서 오는가... 집에 사정이 좀 있어 안 그래도 모자란 시간 좀 더 투자하기가 힘들었다.
내용도 점점 어려워져서 공부를 예전보다 더 열심히 해야하는데, 그게 체감이 되고 있다. section2가 끝난 지금 더 큰 파도가 몰려올 예정이다. WOW
이 적은 시간 어떻게 하면 좀 더 효율적으로 쓰면서 스트레스 관리할 것인가! 대책을 생각해보자!

나현

프론트엔드 개발자 NH입니다. 시리즈로 보시면 더 쉽게 여러 글들을 볼 수 있습니다!