React.js 인터뷰 - 기술 제출 및 자세한 피드백

Update: The public links are down due to the company didn't wanted to have the assignment code shared. Sorry to say but the repo cannot be public anymore. Thanks for the everyone's feedback.

나는 최근에 내가 인터뷰하고 있는 MNC 중 하나를 위해 React.js 프로젝트를 만들었고 그들은 내 과제 제출에 대한 정말 자세한 피드백을 제공했습니다.

코드베이스와 회사에서 제공한 피드백을 여기에서 공유하여 누구나 혜택을 받을 수 있습니다.

요구 사항: 주식을 나열하는 앱React.js을 만들고 주식을 클릭하면 주식 시세 목록이 있는 주식 세부 정보 페이지로 이동합니다.

여과 가능해야 합니다.

주식 시세를 날짜별로 정렬할 수 있습니다.

시세가 만료되면 새 시세를 가져옵니다[폴링].

React.js를 사용해야 합니다.

제출: (지금은 비공개입니다)

GitHub: Sensible Stock Portfolio

라이브 URL: Sensible-Stocks

📃 자세한 피드백

@Negatives
- code look messy and unnecessarily made complicated
- created a common http get service around axois, the implementation is not proper
- unnecessary component wrappers, just for using some CSS classes
- usage of error boundary is not in the recommended way
- unnecessarily added new functionality rather than concentrating on the complete solution
- unnecessarily suppressing lint rules
- not handling mobile responsiveness

@Instruments page / stock listing
 - api call twice on page mount
 - using 2 different state for search results and default view
 - filter function will always runs

@Quotes page / stock detail page
 - api call twice on page mount
 - polling is implemented but the implementation is messy and won't work
 implementation details
      - spawn a web worker and listen for post message, inside this if the quotes list length is 0 make an api call to update the quotes
      - providing the user a control to update the interval (1,2,3,5,10 ms) for checking expired quotes
      - there's  a  set interval run on this interval (1..10 ms) inside this posting a web worker message
      - web worker will run the loop for checking the quote's expiry and the expired leg is removed from the list
      - once all items have been removed from the list, initiate the api call to fetch new quotes, this time frontend will hit the server at least 100-300 times (sometimes more than 1800 requests)       reasons for this the web worker will receive a message every 1-10ms and hit the server
 - not properly clearing set interval, leads to calling the previous apis as well, now the loop will hit the server more than 5k times
 - Use string split and replace T and Z to convert the timezone for comparing the time
 - timestamp not converted to IST in the table listing

@Positives
- Using typescript
- Using error boundaries
- segregating code by spliting components and util functions
Instruments page
- implemented search
Quotes page
- implemented sort

We thank you for the time, energy, and effort you invested in our process and we wish you the very best in your future endeavours.

동의하지 않는 점.

이 피드백에서 도움이 되지 않은 점은 코드가 지저분해 보인다는 것입니다. 전적으로 동의하지 않습니다. 여기 있는 사람들은 이것에 대한 피드백을 줄 수 있으며 이것은 매우 도움이 될 것입니다.

또한 반응은 v18의 개발 모드에서 모든 것을 2번 렌더링하므로 API가 두 번 호출되지만 프로덕션에서는 발생하지 않습니다.

날짜 작업을 더 잘 수행하려면 API에서 수신하는 타임스탬프가 Unix 타임스탬프 또는 UTC여야 합니다. 저는 split 및 replace로 시간 변환을 수행하는 데 어려움을 겪었습니다. 이 1 작업에 순간을 사용하고 싶지 않았습니다.

필터 기능은 항상 실행됩니다. 여기서 수행하려는 작업은 사용자가 s 검색 필드에 항목을 입력할 때마다 필터 기능이 실행되어야 한다는 것입니다.

오류 경계 사용이 권장되는 방식이 아닙니다. 권장되는 방식은 무엇입니까?

결국 그것은 정말 좋은 경험이었고 새로운 것을 알게 되었습니다.

읽어주셔서 감사합니다 🤓