preproject ~ 04/18

1. 목표

• Stack Overflow 클론코딩
• 백엔드 분들의 결과물을 합하기 전까지 각 페이지별 디자인 미리 해놓기
• 내가 할 것
  • https://stackoverflow.com/questions
  • https://stackoverflow.com/questions/:id
  • https://stackoverflow.com/
  • https://stackoverflow.com/questions/ask
  • https://stackoverflow.com/jobs/companies

 

2. 진행 상황

2-1. /questions

• 현재 데이터가 없기 때문에 임시로 더미 데이터를 만들어서 적용하였다.
• 제일 위의 Stack Overflow 헤더와 왼쪽의 메뉴바를 제외한 부분을 디자인하였다.
• 밑의 페이지 버튼같은 경우에는 아직 데이터가 없어서 임시로 버튼 개수를 설정하였다.
• 말 그대로 디자인만 한 상황이라 페이지 버튼을 눌러도 반응하지 않는다.
• 질문에는 react-router-dom의 Link를 이용하여 /question/:id로 이동할 수 있게 하였다.
• media query를 이용히여 화면의 width가 줄어들 때 반응하도록 하였다.

 

2-2. /question/:id

• /questions 와 마찬가지로 데이터가 없기 때문에 임시로 제목 등을 작성하였다.
• 실제 Stack Overflow의 상세 질문에는 그냥 문장도 있고 코드도 있다. 이를 구현해야 한다.
• 위와 마찬가지로 media query를 이용하여 width가 줄어들면 이에 따라 반응하게 구현하였다.

 

2-3. /companies

• 처음에는 Stack Overflow를 웬만하면 전부 구현하고 싶었으나, 회의를 통해 companies는 제외하기로 하였다.
• 근데 그 전에 구현하긴 했기에 기록한다.

 

2-4. /questions/ask

• 캡쳐가 이상하게 되어서 각 블록의 width가 달라 보이지만 그렇지 않다.
• 이 부분은 디자인보다도 각 항목별로 입력한 후 next 버튼을 누르면 다음 입력 블록이 활성화가 되는데 이를 구현하는데 살짝 긴장을 했었다.
• 정확히는 구현할 수 없을 것 같다기보다는 변수나 state가 엄청 많아질 것 같아서 두려웠다.
• 하지만 react-hook-form을 이용해서 state의 수를 예상보다 많이 줄일 수 있었다.

 

3. 어려웠던 점

• 현재까지는 디자인에 집중을 했기에 크게 어려웠던 점은 없었다.
• 하지만 나중에는 질문과 답변의 CRUD나 계정 생성, 로그인, 로그아웃 등을 구현해야 할텐데 이 부분이 심히 걱정이다.