❓ 프리 프로젝트(Pre-Project)

말그대로 pre-project 한 달간에 메인 프로젝트를 시작하기 전 준비 운동(?)을 하는 프로젝트라고 보면 되겠다.

⌨️ { "프로젝트-주제": "클론-코딩" }

프리 프로젝트의 주제는 stack overflow 사이트 클론코딩이다. 지금까지 배워온 지식으로 프로젝트에 최대한 녹여내면 된다.

🎐 새로운 도전, tailwindcss

새로운 도전이랄 것도 없다. 이번 프리 프로젝트로 css 라이브러리인 tailwindcss를 사용해보기로 했다.

어떤 방법으로 css로 작성해볼지 의논하다 여러 방법이 나왔다. 그 중 styled-components, 일반적인 css, tailwindcss 세가지 방법이 나왔다.

스타일 컴포넌트 탈락

스타일 컴포넌트는 다른 컴포넌트들과 구분하기 어려워 가독성을 많이 해친다는 의견이 만장일치였다.

일반적인 css 탈락

일반적인 css는 파일이 컴포넌트마다 하나씩 더 생겨 파일 수가 많이 생긴다는 단점이 있다라는 의견.

테일윈드 채택!

• 테일윈드는 스타일 컴포넌트와 달리 className에 css를 직접 작성하듯 작성할 수 있다.
• className을 고민할 필요가 없다. 일반적인 css는 className을 통해 css를 전달하기 때문에 className을 고민해야하지만 테일윈드는 정해진 className을 바로 작성하면 된다.

테일윈드가 사용성이 매우 좋다 판단하였고 사용하기로 했다.
그리고...
처음 사용해보는 거니까! 아 ㅋㅋ

<-- tailwindcss 공식 홈페이지에 나오는 자랑 영상 -->

🐈‍⬛ 깃허브

칸반, 이슈, 프로젝트...

이번에 처음 사용해본 깃허브 기능들이다. 잘 사용했는지 모르겠다. 허허... 깃허브로 협업하기 깃허브로 협업하는 방법으로 잘 정리된 블로그 글이다.

📈 우여곡절

조회수가 2개씩 올라!? 2배 이벤트?

질문 게시글을 조회할 때마다 조회수가 2씩 오르는 현상이 있었다.

백엔드 팀원 : 요청이 두번씩 들어오고 있어요! 🥸

처음 의심이 갔던 부분은 데이터를 요청하는 useEffect 부분이었다. 콘솔을 찍어보니 useEffect가 두번 실행되는 것이 확인했다.

그리고 이 문제는 이 블로그의 글을 보고 해결할 수 있었다.
useEffect가 두번 실행된다고

원인은 <React.StrictMode> 태그. 이 태그가 <App/>을 감싸고 있으면 개발모드에서 (개발 단계에서 오류를 잘 잡기위해서) 두 번씩 렌더링 한다는 것이었다.

배포 후 문제가 될만한 이슈를 미리 잡아준다하여 사용했으나 조회수 2배 이벤트만 발생시켰다... 😂

📖 새로 얻은 인사이트

• 인라인 요소(inline element)는 width와 height를 지정해도 무시된다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문이다. 또한, margin, padding 속성은 좌우 간격만 반영되고, 상하 간격은 반영 되지 않는다.

• window.scrollTo로 손쉽게 클라이언트 뷰 위치를 컨트롤 할 수 있다. 리액트 라우트의 Link 태그를 사용하면 새로고침이 일어나지 않아 뷰 위치가 그대로이다. 상황에 따라 질문 상단부터 보여지지 않고 하단부터 보여져 좋지 않은 UX를 제공하고 있었다. window.scrollTo를 통해 이를 손쉽게 해결할 수 있었다.😊

🤔 회고하며...

• 2주 간에 시간이 주어졌을 때 생각보다 널널할 것이라고 예상하였다. 하지만 생각보다 2주는 짧은 시간이었다. css 디테일을 조금 덜 생각하고 모든 기능을 구현할 수 있도록 기능에 집중했다면 좋았을 것 같다.

• 조금만 덜 조급하게 생각하고 코드를 작성했으면 좋았을 것 같다. 한 함수가 여러 개의 동작을 하고 재사용할 수 있는 함수를 분리하지 않았고... 클린 코드에 전혀 관심을 두지 못했다. 다음 메인 프로젝트에선 차근차근 작성해보도록 노력해야겠다.

• 기록하는 습관을 들여야겠다. 이번 2주 동안 프로젝트를 진행하며 수많은 에러를 만났지만 지금 와서 생각하려고하니 최근 에러 몇개도 생각나지 않는다... 하루에 한 번 마무리하며 짧게나마 회고하고 기록 해야겠다.

• 새로운 것에 도전하지 않고 배운 대로 해왔던 대로 진행하려고 했던 것을 반성한다. 팀원들의 학습욕(?)을 보고 나 자신이 부끄러워졌다...🥲

• 테일윈드도 장점만 있는 것이 아니었다. 클래스명이 너무 길어지는 단점이 있었다. 중복되는 부분을 변수로 빼내는 방법이 있었지만 이는 className을 작명하는 것과 다를 바 없었다. 그래도 빨리 쳐낼 수 있어서 좋아...

마크다운까지 완-벽