코드숨_React_10주차_주간회고

Facts (사실, 객관)

• 코드숨 프로젝트 2주차
• 메인 페이지 및 결과 페이지 구현

 

Feelings (느낌, 주관)

생활 패턴이 엉망이다. 체력과 함께 집중력 저하를 느꼈던 한 주였다. 오래 달리기 위해선 균형을 잡을 필요가 있다.

 

라우터 basename 속성을 통해 base url을 설정했다. 로컬 환경과는 달리, 배포 페이지에서 빈 화면을 출력했기 때문에 필요한 작업이었다. base url을 문자열이 아닌 환경변수로 넣어주고 싶었는데 결국 실패했다. 깃허브 레포 설정에서 'Environment secrets'이나 'Repository secrets'에 변수를 설정해봤지만 여전히 환경변수를 찾지 못했다. 아직 정확한 방법을 모르겠다.

 

로컬에서도 환경 변수 설정이 필요하다. React Create App으로 생성한 프로젝트에서 설정하는 방법을 찾았는데, 내 것은 RCA로 생성한 프로젝트가 아니어서 다른 방법이 필요할 것 같다.

 

하나의 구조가 추가되면서 폴더 정리의 필요성을 느끼게 됐다. react folder structure로 검색하니 여러 포스팅을 볼 수 있었다. 정답이 없기 때문에 흥미롭게 느껴졌다.

 

간단한 차트가 필요했는데 도움이 되는 여러 라이브러리가 있다는 사실을 알게 됐다. 그중에서 react-minimal-pie-chart를 선택했다. 단순한 내용인데도 차트로 그려지니 뭔가 있어 보이고 다양한 모양으로 구현할 수 있다는 점이 흥미로웠다.

 

벌써 2주가 흘렀으니 절반의 시간이 남은 셈이다. 구현하고 싶은 내용을 기간 내에 모두 할 수 없다. 어느 정도의 타협이 필요하겠지만, 그래도 최대한 해보고 싶다. 하지만 시간 내에 완성시키는 것만큼이나 중요한 것이 있다.

 

단순히 결과물을 만들어 내는 게 아니라 프로젝트를 진행하는 과정을 배우는 것이라는 트레이너님의 조언을 실천하지 못하고 있다. 여전히 작업 단위가 크고 작업이 우선순위에 부합하지 않는 경우가 많다. 시간에 조급함을 느끼면서 TDD 또한 제대로 실천하지 못하고 있다. 특정 결과의 구현보다는 좋은 코드를 작성하는 습관을 배우는 만큼 배운 대로 실천하는 것에 무게를 실어야 한다.

 

Findings (배운 점)

• react-minimal-pie-chart는 간단한 원형, 도넛형 차트를 그리는데 유용한 것 같다. 가볍다는 것을 장점으로 내세우고 있다.

 

 

• DOM을 직접 조작하기 위해 Ref를 사용할 수 있다. Ref를 통해 render 메서드로 생성된 element에 접근할 수 있는데, 클래스 컴포넌트에서는 createRef() API를 사용하여 Ref 객체를 생성할 수 있다. 하지만 함수형 컴포넌트에서 createRef을 사용하게 되면 렌더링할 때마다 객체를 생성하기 때문에 useRef hook을 사용해야 한다. useRef로 관리하는 대상의 값이 바뀐다고 해서 컴포넌트가 다시 렌더링되지 않기 때문에 값이 바뀌더라도 다시 렌더링 될 필요가 없는 대상을 관리하기에 유용하다. 만약 ref를 커스텀 컴포넌트에 전달하고 싶다면 fowardRef을 사용하면 된다.

 

• Ref를 통해 전달되는 element는 current 속성을 통해 전달된다.

render 메서드 안에서 ref가 엘리먼트에게 전달되었을 때,
그 노드를 향한 참조는 ref의 current 어트리뷰트에 담기게 됩니다.

 

• scrollIntoView 메서드를 통해 element를 스크롤할 수 있다. 

myRef.current.scrollIntoView({
	behavior: 'smooth', 
    block: 'end',
    inline: 'nearest'
});

 

Things to do (해야 할 것들)

• 주 3회 이상 헬스장 가기
• TDD 실천하기
• 알고리즘 문제 풀기

 

Affirmation(자기 선언)

• 기록하는 습관을 가진다.