? 인턴으로 함께 하게 된 지 어느덧 2달이 다 되어간다. 일주일은 순식간이지만 한 달은 길-었던 시간 동안 많은 것을 배웠다. 일지에 적기엔 작고 큰 문제들이 차고 넘치기에, 리액트랑 한층 더 가까워졌던 이슈들에 대해 중점적으로 얘기해보려 한다.
# 개발일지 1
기본적이지만 중요했던
첫 번째 과제였던 '숨고' 사이트 클론 프로젝트를 2주간 진행하면서 해결했던 이슈에 대해 정리해보려 한다. 프로젝트 진행 전에도 리액트를 공부하면서 혼자서 이것저것 만들어봤던 경험이 있었지만, 상대적으로 (나에게) 대량의 데이터를 가진 사이트를 서버와 협업하여 만들어보는 경험은 처음이었기 때문에 긴장도 되었고 어떤 것을 배우게 될지 설레기도 했다.
⚠️ 문제 발생
문제는 유저 데이터를 불러와 렌더링 하는 과정에서 발생했다. 구현하려고 했던 기능은 사용자가 스크롤을 내려 화면을 이동할 때, 일정 개수만큼 유저 데이터를 가져와 띄워주는 기능이다. 첫 화면에서는 제대로 동작하였지만, 라우팅을 통해 다른 페이지를 이동한 후, 뒤로 가기나 이전 버튼을 통해 돌아오게 되면 엄청난 에러와 함께 1~10번의 유저가 아닌 10~20번대의 유저들을 불러왔다(대환장파티;;).
? 원인 찾기
먼저 원인을 찾기 위해 스크롤 시 데이터를 불러오는 함수 onScroll()를 확인했다. 해당 함수 내의 분기 문은 scroll height가 일정 조건을 만족하면 state가 변경되어 데이터를 가져오는 방식이다. 이해를 돕기 위해 코드를 추가했다.
이 함수는 window의 scroll이 실행되었을 때 발생하는 이벤트 리스너 함수로, 스크롤이 실행되면서 변경되는 scroll height의 값에 따라 작동한다. 발생하는 문제의 원인이 분기 문을 통과하여 유저 배열의 인덱스로 사용되는 preIndex, index 상태 값이 업데이트되는 것 때문이라고 생각했기에, 페이지 이동 시 scroll height를 확인해 보았다. 페이지가 이동하면 1~10까지의 데이터가 불러와지고 scroll height가 대략 1000px 이상이어야 하지만…터무니없이 작은 수가 저장되어 분기 문을 통과하는 것을 알게 되었다. (유레카!)
? 고민의 시간
- 해결을 위해 처음엔 'scroll height를 변경시킬 수는 없을까?'라는 생각이 들었다. 그러기 위해선 미리 scroll height를 저장 시켜 놓아야 했고, 이는 비효율적이라고 판단했다. 유저 리스트를 다른 곳에 저장해놓고 불러오는 방식 또한 다른 데이터 스토어를 이용하지 않고 있었기에 불가했다.
- 'Window에 리스너를 붙이지 않고, 유저를 띄우는 클래스 자체에 리스너를 붙여야 하는가?' 하고 수정해보았지만, 작동이 되지 않았다.
??♀️ 드디어 해결
기본적이지만 중요했다.
기존 코드에서는 컴포넌트가 마운트 될 때 데이터를 가져온 후, 리스너 함수를 붙이도록 구현했다. '분명 데이터를 가져온 후, onScroll() 함수가 실행되도록 구현을 했는데 왜 scroll height의 값은 작은 걸까?' 고민을 하다가 '데이터를 가지고 오기 전에 리스너 함수가 실행되었을 수 있겠다!'라는 생각이 번쩍 들었다.
결과는 역시 데이터를 가져오기 전 scroll의 리스너 함수가 먼저 실행되어 버리는 비동기 처리 방식으로 코드가 짜여 졌기에 문제가 발생한 것이었다….
다음과 같이 데이터를 가져온 후, call back 함수에 리스너 함수를 넣어주는 방식으로 코드를 수정하여 문제를 해결할 수 있었다.
회고
아쉬웠다. 리액트를 공부하면서 외부 api에서 데이터를 받아오는 프로젝트 경험이 있었기에 ajax의 비동기적 처리 방식에 대해선 인지하고 있었지만, 막상 직접 페이지부터 컴포넌트까지 설계하여 구현하다 보니 가장 기본적인 ajax의 특징에 대해서 잊고 문제 해결에 시간이 오래 걸린 것에 대해 아쉬웠다. 하지만 다행이기도 했다. 덕분에 비동기 방식에 대해서 확실히 알 수 있었고, 앞으로 같은 문제가 발생하더라도 더 빠르게 원인을 파악하여 해결할 수 있는 능력을 기를 수 있었기 때문이다.
어떤 이슈를 해결할 때마다 느끼는 점이지만 실패를 거듭할수록 성장하고 있다고 생각한다. 아직 부족한 점이 많지만 앞으로 겪을 실패들을 또 다른 도전, 또 다른 성장이라고 생각하며 차근차근 성장하는 개발자가 되고 싶다.
# 개발일지 2
생각의 폭을 넓히는 습관
최근 진행 중인 프로젝트에서 발견한 놀랍고도 창피한 이슈다. 나만 몰랐던 기분에 절망했지만.. 혹시 나와 같은 개발자들에게 도움이 되고자 일지에 쓰게 됐다. 게시판 구현 중 게시물의 댓글마다 답글이 존재했고, 답글 창을 여닫는 기능을 구현하게 되었다. Material-UI를 이용하고 있기에 Accordion 컴포넌트를 사용하고 있었는데, 이 Accordion을 여닫는데 expanded라는 프로퍼티를 사용했다. 여기서 expanded가 True면 열리고, False면 닫히게 된다.
- 기존에는 이와 같은 핸들러 속성을 boolean 형태의 state로 관리했었다. 예를 들면 ‘expanded={isOpen}’과 같이 boolean 값을 가지는 isOpen 상태 변수로 expanded를 제어했다는 의미이다.
- 이번 경우에서는 위와 같은 방식으로 관리하니 isOpen 상태를 바꾸면 모든 댓글의 답글 창이 함께 열리고 닫힌다. 사실 당연한 일이다. 한 상태로 모든 Accordion이 제어되고 있으니 말이다.
- 해결 방법은 다음과 같다.
- 댓글마다 고유하게 주어진 댓글 ID를 expanded의 조건 값으로 두어서 관리하면 된다.
- 답글 클릭 시 실행되는 handleReComment()에서 인자값으로 가져오는 parent_id를 isExpanded에 저장하도록 한다. 여기서 parent_id는 답글의 상위 댓글이 된다.
- 각 댓글마다 고유하게 주어진 comment_id를 isExpanded에 저장된 parent_id와 비교하여 값이 동일한 답글만 열게 되는 것이다.
? 웹 사이트들에서 열기/접기 기능을 제어하는 방법에 있어서 항상 boolean 값으로 type을 설정했었기에 그 외의 방법은 생각해 본 적이 없었다. 스스로 틀에 갇혀 자유롭게 생각하지 못했다. 다른 사람들의 코드와 내 코드를 비교해보면서 내가 고려하지 못했던 부분들, 더 효율적인 구현 방법들을 고민해 보고 알아가는 과정이 중요하다는 것을 새삼 다시 깨닫게 되었다.
# 문서화하는 연습
프로젝트를 진행하면서 배우는 것들을 틈틈이 끄적끄적 적어 가고 있다. 여차여차 문제를 해결했지만, 며칠 뒤엔 분명 까먹기에.. 발생했던 이슈와 고민했던 것들 해결한 방법들, 새로 배운 것들을 바로바로 써 내려가다 보니 200줄 가까이 되는 것 같다. 중간중간에는 May님과 MIT님께 질문했던 내용도 정리되어 있다.
가끔 기분 나쁠 때는 똑같은 이슈가 두 번 쓰여있을 때이다 :) CORS 에러 저거 저번 포스팅에서도 에러 났었다. 그리고 서버랑 데이터 교환하면서 데이터 변수 혹은 구조나 HTTP 메소드가 변경될 때가 있는데 서로 공유가 되지 않았을 때 한참 ‘안될 이유가 없는데..?’ 하면서 코드랑 실랑이한 적도 있다. ? Jyeon님 제가 더 꼼꼼해질게유..?? 화이팅 하자요..
# 오늘도 HOT한 데일리펀딩 ?
IT 세미나
- 4주 차가 될 때 즈음 IT 기술 세미나를 참석하게 되었다. 시작도 전에 내가 다 떨렸던 것 같다. 꽤 오랜 기간 준비해서 열린 세미나라고 들었기에 일과 발표 준비까지.. 정말 바쁘실 것 같았지만 모든 분이 꼼꼼히 준비해오신 것 같아 존경스러웠다??
- 학교에서 배운 내용이 있어 반가웠지만, 사실 이해할 수 있었던 내용이 많진 않았다. 하지만, 이해하기 쉽게 설명해 주시고 모르는 용어들을 정리하다 보니 생각보다 재밌었던 시간이었다!
- 코로나 때문에 화상 회의와 함께 진행되어서 아쉬웠지만, 세미나를 통해서 다양한 지식을 공유할 수 있어 좋았고 내가 공부한 것들을 다른 사람들한테 알기 쉽게 설명해 줄 수 있는 것 또한 중요한 개발자의 역량이라는 것을 느꼈다. 지금부터라도 내 코드를 누군가에게 설명할 수 있는 연습을 해보면서 찬찬히 노력해봐야겠다!
무안한 내 손 ?
엄마를 많이 좋아하는 친구들인 것 같다. 손 내밀면 가버리고 나한테 관심이 없다...ㅠㅠ
나도 너희 예쁘게 찍어줄 수 있는데.. 단풍이(?)는 사진도 찍지 못했다..
우리 집 막내 강아지도 데리고 오고 싶었다 ?
그래도 일하는 내내 이곳저곳 돌아다니는 귀여운 강아지들 덕분에 강아지 오는 날이면 덜 힘들고 웃음이 나는 것 같다 ( ˃̶͈ᴗ˂̶͈ )
# 나의 하루
? 주린이가 되었다. 사실 주식의 주자도 몰랐다. ‘주가 도대체 뭐지’ 하면서 런닝맨 송지효랑 같은 표정 짓고 있을 때가 있었는데 참.(물론 지금도 제대로 아는 게 없는 건 안 비밀)
회사에 다니면서 프로젝트 겸 이것저것 검색하다 보니 자연스럽게 투자가 궁금해지고 금융 지식도 늘고 있다. 요새는 ‘밀리의 서재' 앱을 알게 되어 퇴근하면서 평소 좋아하던 소설이나 에세이를 읽고 있는데 내 서재에 ‘모르면 호구 되는 경제 상식’ 책을 담아놨다. 완독해서 호구 되지 말아야지.
??? 맥린이가 되었다. 최근 맥북을 선물받아 사용법을 익히면서 개발 공부가 더 재밌어질 뻔했다가 손에서 익숙했던 나의 복붙 단축키 위치가 바뀌니 개발 공부할 맛이 안 나고 있다.. 맥북은 가만히만 있어도 너무 이쁘긴 하지만 아직 readme에서 코드 블럭 만들 때 사용하는 애도 어디 있는지 모르겠다. 어떡하지.