문제 해결

• Firebase의 onAuthChangeState라는 함수로 자동 로그인을 처리할 수 있는데, onAuthChangeState로만 체크하면 처음 접속 시 정보를 받아올 때 딜레이가 생기는 문제가 있었습니다. 그래서 recoil-persist를 이용하여 로컬 스토리지에 atom 형식으로 자동 로그인 정보를 저장하였습니다. (/~https://github.com/firebase/firebase-js-sdk/issues/5722)

• 코드 하이라이팅을 위해 여러 하이라이터를 찾다가 react-syntax-highlighter 라는 하이라이터를 사용하게 되었습니다. 테마도 많고, 컴포넌트 형태로 되어 있어 리액트에서 사용하기 적합하다고 판단했습니다.

• 코드 에디터 구현 중 처음에는 SyntaxHighlighter 컴포넌트에 contenteditable={true} 속성을 주어 코드를 작성 및 수정할 수 있게 하려고 했습니다. 그러나 하이라이팅이 실시간으로 반영되지 않았습니다. 그래서 textarea를 이용하여 텍스트 입력을 받고, 입력값을 state에 저장 후 SyntaxHighlighter 컴포넌트와 같은 위치에 겹치는 방식으로 에디터를 구현하였습니다. textarea와 SyntaxHighlighter는 부모 div에 display: absolute 속성을 이용하여 겹친 후 textarea의 배경과 글씨 색을 투명화하여 커서는 보이되 하이라이팅된 글자가 비쳐 보이도록 하였습니다.

• 하이라이터에 textarea를 겹쳐놓았기 때문에 textarea는 스크롤이 되지만 하이라이터는 스크롤이 되지 않는 문제가 있었습니다. 그래서 하이라이터 컴포넌트에 useRef 훅을 이용하여 연결한 후 scrollTop 값을 textarea의 scrollTop과 맞춰주려고 했으나, 하이라이터 컴포넌트 안에 ref 속성이 없어서 생각한대로 되지 않았습니다. 그래서 부모 div에 ref를 연결하고 firstElementChild로 하이라이터 컴포넌트에 접근하여 scrollTop을 맞추는 방법으로 해결하였습니다. (https://stackoverflow.com/questions/56484686/how-do-i-avoid-function-components-cannot-be-given-refs-when-using-react-route)

• 코드 카드 컴포넌트에서 설명 부분이 여러 줄일 때 마지막 줄에만 말줄임표를 나타나게 하고 싶어서 방법을 검색하였는데, 웹킷에 line-clamp라는 설정이 있어서 그를 이용하여 구현하였습니다. (https://css-tricks.com/line-clampin/)

• 코드 에디터에서 tab 키를 누르면 포커스 이동이 아니라 들여쓰기가 되게 하고 싶었습니다. event.preventDefault() 를 사용하여 포커스 이동은 막았으나 들여쓰기는 추가 구현이 필요했습니다. 단순히 textarea의 현재 값에 ”\t”를 더하는 것은 먹히지 않았습니다. 검색을 해보니 selectionStart와 selectionEnd라는 속성을 이용하여 들여쓰기를 구현하는 방법이 있었습니다. 둘 다 처음 보는 속성이었는데 공부할 수 있는 기회가 되었습니다. 그러나 들여쓰기가 생각한 대로 되지 않았고 코드의 중간에서 tab 키를 누를 시 커서 위치도 올바르게 나오지 않았습니다. 그러다 setRangeText라는 속성을 발견하였고, 그를 이용하여 해결하게 되었습니다. (https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText)

• 로딩 컴포넌트를 react-query의 isLoading을 사용해서 컴포넌트 개별적으로 적용했었는데, useIsFetching 훅을 이용하여 페칭 중일 때 전역으로 적용되게 변경하였습니다. 그러나 useIsFetching의 기본값이 isFetching이었기 때문에 캐싱된 데이터를 보여줄 때도 로딩 컴포넌트가 보이는 문제가 있었습니다. 그래서 useIsFetching에 predicate옵션을 주었더니 isLoading과 같은 효과를 낼 수 있었습니다.

• styled-component에 props를 넘겨줄 때 파스칼 케이스의 경우에 오류가 떴는데, 에러 메시지에서 제시한 대로 props의 이름을 모두 소문자로 바꾸는 방법도 있긴 했으나 표기법을 통일하고 싶기도 했고 최신이자 깔끔한 방법인 transient props 방법을 사용하기로 하였습니다. props명 앞에 $를 붙여 styled-component에 넘길 props인지 리액트가 분석할 프로퍼티인지 구별하게 하는 방법입니다. (https://styled-components.com/docs/api#transient-props)

• 코드 작성, 수정 시 페이지를 벗어나려 하면 react-router-dom의 useHistory 훅을 사용하여 confirm 창을 띄우려 했지만 v5 때에는 있던 useHistory 훅이 v6으로 업그레이드되면서 사라져서 다른 방법으로 구현하려고 하는 중입니다. (/~https://github.com/remix-run/react-router/issues/8139)