[Zeros] 1.0.0 마무리

프로젝트를 시작하게 된 계기 

2022년 2월 프론트엔드 공부를 시작하고, 7월 원티드 프리온보딩 코스를 통해 처음으로 다른 프론트엔드 지망생 분들과 협업해 보았다. 

 

나는 주로 강의 듣기 + 실습 하기 + 배운 내용 블로깅하기 방식으로 공부를 해 왔다. 그래서 기업과제를 기반으로 하는 팀 프로젝트가 낯설기도 했지만, 내가 구현하기 어려운 기능이 무엇인지 직접 정의해 보고, 문제를 해결하는 경험을 여러 차례 쌓으며 재미를 느꼈다. 특히 생각한 대로 코드를 작성해 보고, 원하는 대로 동작하지 않을 때 그 문제가 무엇인지 찾아보고 해결하는 과정 자체가 재미있었다. 

 

내가 생각하는 나만의 프로젝트 만들기가 이런 공부의 끝판왕이 되어 줄 것이라는 생각이 들었다.  

프로젝트를 하며 어려웠던 점 (feat. 새로 만난 문제들) 

set up

• create react app 말고, 직접 webpack을 설정해서 프로젝트를 셋업하고 싶었다.
  • 그런데 생각대로 잘 안됐다. 이거 설정하다가는 프로젝트 시작을 못하겠다 싶어 결국 cra로 돌아왔다.
  • +) babel은 ts compiler와 어떤 점이 다른지  찾아보기만 하고 공부는 따로 안했다. 
  • +) 어디에서 막혔었는지 기록해 두지 않은 것이 후회된다. 🙉

postcss 

• 처음에는 color를 :root에서 정의해서 사용하고 있었는데, postcss의 @value로도 변수를 지정할 수 있다는 것을 알게 되었다. 공식 문서를 보니, color 뿐만 아니라 breakpoints도 변수로 지정할 수 있었다! 
  • colors.css 파일을 만들고, 색상 변수를 지정 했다. 그런데 어째서인지 hover 했을 때 background 컬러가 제대로 지정되지 않는 문제가 발생했다. 그래서 color value 지정은 포기하고, breakpoint만 value로 지정해 두었는데, 문제가 발생했던 이유와 해결 방법을 스택오버플로를 통해 알게되었다. + 리팩토링 목록에 추가
  • +) @value는 cra의 postcss 기본 설정에 포함되어 있기 때문에, 별다른 설정 없이도 바로 사용할 수 있다. 

patch data

한 컴포넌트 안에서 데이터를 보여주고 수정하는 작업이 가능하도록 구현했는데, 이때 실시간으로 변경되는 데이터를 어떻게 보여줄 것인지 고민했다.

• 데이터를 수정할 때 마다 firebase에서 데이터를 재요청하고 => 그 데이터를 기반으로 화면을 렌더링 하는 것이 좋지 않다고 생각했다. http 요청이 많아지면 어플리케이션의 속도가 느려지기 때문이다. 
• 그래서 수정된 데이터 state를 따로 만들어서, 사용자가 변경한 데이터를 프론트엔드 측에서 실시간으로 보여주게끔 구현했다. 
• +) 한 컴포넌트에서 너무 많은 역할을 하다 보니 이런 문제가 생긴 것 같다는 생각도 든다.  

여전히 궁금한 점

• firebase의 토큰 유효 시간이 1시간이라는 문서를 읽었는데, 나는 사용자가 마지막으로 로그인 한 시점에서 1일 후 자동 로그아웃 로직을 작성해 두었다. 이런 것도 문제가 될 수 있는지 궁금하다. 
• 내가 만든 프론트 웹 어플리케이션을 백엔드랑 통합할 수 있는 걸까? 된다면 어떻게 하는 거지???
• 프로젝트를 시작할 때, 어떤 체계적인 과정을 거칠 수 있는지 궁금하다.
  • 어떤 기능을 만들다 보면, 그 기능과 관련된 다른 기능을 추가해야 할 것 같다는 생각이 들고... 그러다 보면 원래 하려던 일 + 다른 일 까지 하게 되면서 체계가 없어지는 것 같다. 
  • 필요한 모든 기능들을 충분한 시간 동안 고민해서 정의해 두고, 그에 맞춰 코드를 짜는 것이 바람직한 방법일까?

느낀점

• 확실히 백엔드 지식이 없다보니, 내가 어디서부터 어디까지 구현할 수 있는 건지 감이 오지 않는 경우가 많았다. next.js를 이용하면 풀스택 어플리케이션을 만들 수 있다고 들었는데, next.js를 하루 빨리 공부해 보고 싶다!
• create react app 없이도 멋지게 프로젝트를 셋업해 보고 싶다.