[WIL] 항해99 5주차 회고록 - React 심화

 

 

 

 

 

 

 

일주일 동안 무엇을 했나?

 

📍 리액트 심화 과제

 

이번 주는 항해의 5주차로, 리액트에 대해서 더 깊게 배우는 주차이기도 했다.

 

여느 주차와 마찬가지로 개인 과제가 주어졌는데,

이번 과제에서 필수로 요구되는 대부분의 사항들이 개인적으로 나에게는 모든 게 어렵게 느껴졌다.

 

 

필수로 구현해야 하는 기능은 아래와 같다.

 

---

 

1. 게시글

 

목록 가져오기

- 무한 스크롤

- 게시글 하나에 작성자, 작성 시간, 이미지 미리보기, 텍스트 내용으로 구성

- 게시글 하나 클릭 시 게시글 상세 페이지로 이동

- 게시글 레이아웃에 맞춰 이미지, 텍스트 위치 조절해서 노출

- 게시글 중 하트 버튼을 클릭하면 하트 색이 바뀌면서 좋아요 개수가 +1, 다시 클릭하면 하트가 다시 회색이 되면서 좋아요가 -1 되도록 구현

 

추가하기 (+이미지 업로드하기)

- 세 가지 레이아웃 중 선택하도록 만들기

- 레이아웃 선택 시 게시글이 레이아웃대로 보이도록 만들기

- 이미지 업로드, 텍스트 입력 중 안 된 게 있으면 게시글 작성 버튼 비활성화

- 작성 완료 시 메인 페이지로 이동

 

삭제하기

 

수정하기

 

 

2. 좋아요

 

게시글에 좋아요하기

게시글에 좋아요 취소하기

 

 

3. 회원가입하기

 

이메일 형식 확인하기

비밀번호 재확인하기

 

 

4. 로그인하기

 

이메일, 비밀번호 미기입 시 로그인 버튼 비활성화 하기

 

5. 배포하기

 

파이어베이스 or S3로 배포

 

---

 

 

이 중에서 이미지를 업로드하거나 수정하는 것, 회원가입과 로그인 구현은

강의 내용에 나와 있어서 강의를 보면서 구현할 수 있었지만

레이아웃 선택과 좋아요 기능은 스스로 찾아보면서 구현해야 했다.

 

결과적으로 레이아웃은 구현을 했지만 좋아요 기능은 100% 완벽하게 구현하지 못 했다.

 

좋아요 기능의 핵심은 유저가 로그인 상태이면 그 상태를 읽어서

해당 유저가 이미 좋아요를 클릭한 게시물의 하트는 그 유저한테만 컬러로 보이게 해야 하는데

좋아요를 클릭한 후 새로고침하면 좋아요 개수는 유지되었지만 하트 버튼의 색이 다시 회색으로 돌아왔다.

 

기능을 구현하는 것만으로도 빠듯해서 결국 그 외의 CSS 같은 나머지들은 신경을 쓰지 못 했다.

리액트를 배운 3주 동안의 과제 중 가장 만족스럽지 못한 결과물이 나와서 아쉽다.

 

 

그래도 1주차 미니 프로젝트 때 구현 방법이 궁금했던 기능들을

어느 정도 익힐 수 있게 된 점은 좋았다.

 

 

---

메인 페이지 - 로그아웃 상태

 

 

 

메인 페이지 - 로그인 상태

 

 

 

모바일로 확인해보니 포스트 추가 버튼이 왜저랩 버튼이 되어 버렸다.

내 버튼 돌려줘요 흑흑

 

 

 

모바일

---

 

 

📍 알고리즘 스터디

 

 

오늘은 알고리즘 스터디를 시작한 이래 처음으로 각자 담당한 문제의 풀이를 리뷰했다.

 

백준에서 단계별로 문제를 풀고 있는데

이번 주 문제들은 정말 정말 쉬운 문제들이어서 한 문제를 리뷰하는 데 1분도 걸리지 않았다.

 

그래도 여러 명이 모이다 보니 일부 문제는 풀이가 각각인 것들도 있어서

앞으로도 다양한 풀이 방법들을 볼 수 있다는 생각에 즐거웠다.

 

 

 

일주일 동안 무엇을 배웠나?

 

 

📍 회원가입, 로그인 기능 구현

 

아직 완벽하게 이해하지는 못 했지만 회원가입과 로그인 기능을 구현할 수 있게 되었다.

이번에는 파이어베이스의 인증 서비스를 이용했는데

서비스에 이미 내장되어 있는 기능들도 있어서 편했다.

 

 

📍 이미지 업로드 및 파일 저장

 

이것 또한 파이어베이스의 스토리지 서비스를 이용했다.

업로드하는 것 보다도 파일을 저장하지 않은 상태에서 경로를 읽어서

작성하기 전에 이미지의 프리뷰를 보여주는 기능이 너무 신기했다.

 

세상은 넓고 공부해야 하는 건 많다.

 

 

📍 moment 라이브러리

 

게시글에 포함되어야 하는 작성 시간을 moment 라이브러리를 이용해서 출력했다.

 

강의에서는 포맷을 YYYY-MM-DD hh:mm:ss 로 해서 데이터를 저장하는데

나는 게시글에 작성시간이 2021-12-05 11:00:00 형태로 보이는 게 싫어서 moment에 대해서 찾아본 뒤 조금 수정했다.

 

moment 라이브러리에 diff 라는 좋은 내장 메소드가 있어서

단순히 작성한 시간이 아닌, 현재 시간으로부터 작성한 시간이 얼마나 되었는 지로 출력되도록 만들었다.

 

 

작성한 지 1시간 내이면 ~분 전으로,

1시간에서 24 시간 사이면 ~시간 ~분 전으로,

24시간을 초과했으면 ~일 전 으로 출력하기 위해서 일 차, 시간 차, 분 차를 각각 구하고

분으로 출력할지, 시간으로 출력할지, 일로 출력할지 비교할 때는 세 개 중 최소 단위인 분 차를 이용했다.

 

구현하면서 아래의 두 가지 문제에 직면했다.

 

 

1. diff 메소드 에러

 

현재 시간을 now 라는 변수에 moment().format("YYYY-MM-DD hh:mm:ss") 의 형태로 할당한 후

diff 메소드를 이용하여 시간 차를 구한 후 실행했더니 diff 가 function이 아니라는 에러가 발생했다.

 

찾아보니 diff 메소드는 moment 객체로만 사용할 수 있기 때문에 발생하는 문제였다.

그래서 현재 시간을 const now = moment() 로 수정하였더니 잘 작동하였다.

 

 

2. 시간 차이가 12시간 플러스되어 출력되는 문제

 

 

위와 같이 수정한 후 게시글을 보니 내가 예상한 대로 시간 차 출력이 안 되었다.

 

내가 지금 막 게시글을 작성했다면 작성 시간은 0분 전으로 출력되어야 하는데

실제로는 12시간 전으로 출력되고 있었다.

 

찾아보니 작성 시간 데이터로 설정한 포맷인 hh:mm:ss 는 12시간 기준이어서 그런 거였다.

그래서 포맷을 다시 24시간에 맞게 HH:mm:ss 로 수정했더니 내가 원하는 대로 잘 되었다.

 

 

// 생략


// 현재 시간
const now = moment();


// 일 기준 차이
const daysGap = Math.floor(
	moment.duration(now.diff(props.insert_dt)).asDays());
    
// 시간 기준 차이
const hoursGap = Math.floor(
    moment.duration(now.diff(props.insert_dt)).asHours());
    
// 분 기준 차이
const minutesGap = Math.floor(
    moment.duration(now.diff(props.insert_dt)).asMinutes());


// 생략


// 작성한 지 1시간 이내인 경우
{minutesGap < 60 && <Text size="10px">{minutesGap}분 전</Text>}

// 작성한 지 1시간 ~24시간 사이인 경우
{minutesGap > 60 && minutesGap < 1440 && (
	<Text size="10px">
	{hoursGap}시간 {minutesGap % 60}분 전</Text>)}
    
// 작성한 지 24시간을 초과한 경우
{minutesGap > 1440 && <Text size="10px">{daysGap}일 전</Text>}
           
           
// 생략

 

 

 

📍 조건부 렌더링

 

이번 과제에는 유독 조건부 렌더링을 해줘야 하는 게 많았다.

 

 

1. 로그인 여부에 따라서 헤더의 버튼을 다르게 설정

2. 로그인 여부에 따라서 수정, 삭제 버튼 보이거나 안 보이게 설정

3. 로그인 여부에 따라서 하트 버튼을 누르거나 못 누르게 설정

4. 로그인 여부에 따라서 댓글을 작성하거나 작성하지 못 하게 설정

5. 로그인 여부에 따라서 포스트 작성 버튼이 보이거나 보이지 않도록 설정

6. 레이아웃 선택 여부에 따라서 레이아웃대로 포스트가 보이도록 설정

 

 

유독 로그인 상태를 확인해야 하는 게 많았다.

그만큼 중요하다는 뜻이기도 하다.

 

 

 

📍 무한 스크롤

 

무한 스크롤은 지난 주 숙련 주차의 개인 과제에서 추가적으로 해보면 좋은 기능에 포함되어 있었는데

찾아보다가 결국 구현하지 못 한 기능이기도 했다.

 

지난 주에 구현하지 못한 이유 중 가장 컸던 건 나의 부족한 이해력이었는데

강의를 보면서 차례대로 하다 보니 어느 정도 프로세스가 머리에 들어왔다.

 

 

 

📍 리액트 어플리케이션의 구조

 

 

이번 주 개인 과제에서는 폴더 구조를 세분화하여 컴포넌트들을 더욱 잘게 쪼개서 사용했다.

 

아토믹 디자인은 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로

효과적인 인터페이스 시스템을 만드는 디자인 패턴인데 

개인 과제는 스코프가 굉장히 좁기 때문에 장점을 완전히 경험하지는 못 한 것 같다.

 

그래도 재사용이라는 측면에서는 장점이 뚜렷한 디자인이라는 생각이 든다.

 

 

아토믹 디자인

 

 

 

 

 

 

일주일 동안 무엇을 느꼈나?

 

 

📍 체력 관리와 마인드셋

 

 

이번 주는 나뿐만 아니라 많은 사람들이 힘들어 했던 주이다.

 

항해를 시작한 지 한 달이 지난 시점이기 때문에

체력적으로도, 정신적으로도 조금씩 고갈이 되고 있는 상태에서 난이도 높은 과제를 완성하기 쉽지 않았을 것이다.

 

실제로 몸이 안 좋아서 병원에 다녀오는 사람도 많았고,

밝았던 사람들의 표정이 어두워지기도 했다.

 

그래서 이번 주의 개인 과제가 유독 어려웠음에도 불구하고

아이러니하게도 체력 관리와 마인드셋이 가장 중요하다는 걸 다시 한 번 느끼게 됐다.

 

 

 

📍 데이터

 

 

적절한 데이터를 요청해서 -> 받아 온 데이터를 -> 상황에 따른 최적의 형태로 그리는 일이

중요한 만큼 어렵다는 걸 다시 한번 느끼게 되었다.

 

주특기를 배우는 기간 동안에는 내가 서버리스 서비스를 이용해서

필요한 데이터 컬렉션과 필드를 만들어서 저장하고 사용했지만

백엔드 분들과 협업할 때에는 충분한 커뮤니케이션을 거쳐야겠다는 생각이 들었다.

 

 

 

📍 한정된 자원을 효율적으로 사용하기

 

 

한정된 자원을 효율적으로 사용해야 한다는 건 언제 어디서나 관통하는 주제인 것 같다.

자원이라는 건 때에 따라 사람이 될 수도 있고, 돈이 될 수도 있고, 데이터가 될 수도 있고, 기타 물리적 자원이 될 수도 있다.

 

현재의 나에게 자원은 시간이다.

 

나를 위해 쓸 수 있는 시간을 확보하기 위해 잠을 줄이기는 했는데

늘어난 시간을 십분 활용하지는 못 한 것 같다.

 

우선순위도 물론 중요하지만,

나에게 주어진 시간을 일주일이 아닌 하루로 크게 보고,

24시간을 컴포넌트처럼 잘게 쪼개서 활용하는 습관들 들여야겠다.

 

 

 

다음 일주일을 맞이하며

 

 

내일부터 다시 백엔드와 협업해서 완성해야 하는 미니 프로젝트 주차가 시작된다.

어떤 분들과 함께 하게 될지 기대되면서도 걱정이 된다.

 

그래도 가장 걱정이 되는 건 나 자신이다.

5주 전의 나와 비교했을 때 얼마나 달라졌는지 아직 잘 모르겠다.

 

리액트를 배운 3주 동안 뚝딱거리면서 뭔가를 만들기는 했지만,

그동안 배운 것들이 100% 내 것이 되었는 지는 의문이다.