현재 상태
프리-프로젝트로 프론트엔드 4명 백엔드 3명으로 팀이 만들어졌다.
같이 줌으로 처음 만나서 팀장도 정하고 사용자 요구사항 정의서도 만들었다.
스택오버플로우는 크게 로그인하는 곳, 모든 질문이 나오는 곳, 질문하는 곳, 답변하는 곳, 수정하는 곳 등등 으로 나눌 수 있는데 그 중 랜덤 뽑기를 해서 모든 질문이 나오는 곳, 질문하는 곳 에 당첨되었다.
처음 해보는 Next.js
프론트엔드 팀원분들과 어떤 툴을 쓸건지 의논했는데 요즘 회사들이 next.js를 많이 쓰기도 하고 생각보다 그렇게 어렵지 않다고 해서 한 번 도전하기로 했다.
클론 코딩을 하기 전 주말에 노마드 코더 next.js 인강을 다 들었고 노션에 간단히 정리해놨다.
React보다 훨씬 쉽고 렌더링도 잘 돼서 잘 쓰기만 한다면 훨씬 쉽게 페이지를 만들 수 있겠다는 생각이 들었다.
Styled.jsx
Next.js는 Styed.jsx라는 좋은 라이브러리를 이미 내장하고 있다.
원래는 Styled Components를 써보기로 했으나 Styled.jsx랑 문법이 거의 비슷하고 next.js에서는 Styled Components를 쓰려면 복잡한 과정을 거쳐야 해서 Styled.jsx를 쓰기로 했다.
Redux 사용
주말에 Next.js 뿐만 아니라 예전에 배웠던 Redux도 복습하면서 다시 사용법을 익혔다.
기능 구현할때 아마 props , state를 많이 쓸텐데 그럴 때 Redux가 좀 더 코드를 간단하게 해줄 것 같다! 근데 많이 안 써봐서.. 편하긴 하겠지만 직접 써볼 때 익숙하지 않아서 시간이 오래 걸릴 것 같다는 생각이 든다.
Stack overflow 페이지 Figma
stackover flow 페이지가 이렇게 복잡하게 되어있는지 처음 알았다..
그냥 구글링해서 질문에 들어가기만 해봤더니..몰랐네..
직접 구현하기 전에 Figma로 우리가 작업할 부분을 먼저 만들어보기로 했다.
질문게시글, 답변게시글 쪽을 맡아서 질문 렌더링 되는거랑 질문하는 곳을 유심히 보고 하루동안 간단하게 구현해보았다.
Figma를 해보니
홈페이지를 그냥 봤을 땐 감이 안 잡혔는데 직접 figma를 구현해보니 버튼을 클릭하면 페이지가 넘어가야한다던지 어떤 버튼을 누르면 질문이 추가해야한다던지 등의 기능들이 좀 더 눈에 보여서 도움이 됐다.
