HA. simple moive app with server

five1star·2020년 10월 13일

TIL

목록 보기
16/25

HA.

오늘은 basic web Hiring Assessment.

Node JS와 React를 사용해 간단한 영화 순위 페이지를 구현했다.

HA 전날은 시험 울렁증때문에 잠을 편하게 못자는편이라 아침부터 컨디션이 영 좋지 않았던것은 사실이었다. 다행히 redux는 테스트 범위 외였고, 리액트는 그래도 페이지는 만들수있다는 생각은 있었지만 Express가 조금 자신 없어서 전날 Express위주로 강의, 공식홈페이지를 복습하고 몇번이나 실습을 했다.

테스트는 임의의 영화 Api를 담은 로컬 JSON파일을 가지고 진행했다.

  • Server
    서버는 Express를 통해서 구현하는것이 목표였고, 특정 라우터로 특정 데이터에 대한 요청이 왔을때 이를 처리할수 있는가가 큰 과제였다.

  • Client
    클라이언트는 리액트를 사용해 페이지를 구현할수있는지가 목표였다. 컴포넌트 단위로 이미 페이지는 작성되어 있었고, State 끌어올리기를 통해 컴포넌트간 상호작용 처리를 할 수 있는지, 비동기로 api를 받아올 수 있는지가 큰 과제였다.

다행히 숙지한 범위 내에서 테스트가 나왔고, 중간 중간 콘솔을 무지막지하게 찍어가며 시간내 테스트를 제출할 수 있었다.

결과물

먼저 서버를 열고

리액트를 구동하면

짠 멀쩡하게 작동한다!

테스트간 어려움을 겪었던 점

1.API를 웹에서 받아오는 연습만 하다보니 잠시 로컬 폴더에 저장된 JSON파일을 어떻게 보내지....? 연습했던 내용이 기억나지 않아 당황했고 꽤나 시간을 소비했다.

2.또 멍청하게도ㅋㅋㅋㅋ 엇....iTerm에서... 서버를 열었는데...엇...?서버 작동중인데 리액트는 어떻게 실행하지...? 하는 생각에 거의 30분을 소비했다. 아! 두 종류의 터미널을 열어야겠구나, iTerm과 terminal을 따로 구동시켰다가 한참 뒤에야 iTerm새탭 열었던건....이렇게 바보다^^^^^

3.데이터를 원활하게 받아오지 못했을때 if문을 통해 다른 jsx를 리턴하는부분을 꽤나 버벅거렸다. 리액트에 대한 전반적인 이해와 Node JS특히 Express 에 대한 이해가 더 필요.

보충할것

오늘 오후부터 이번주는 솔로위크다. 다음주부터 DB에 들어가는만큼 배운것을 어느때보다 단단하게 만들어놓을 필요가 있다.

  • 현재까지 배운것에 대한 복습(JS, 특히 비동기에 대해서 짚고 넘어갈것)

  • React 특히 Hooks에 대한 학습(이번 HA 함수형 컴포넌트로 리팩토링)

  • Node JS 특히 Express와 fs에 대한 복습( + Koa설치해보고 express와 비교해보기)

  • 알고리즘 풀지못했던 문제 다시 생각해보기

    그리고 하나 더 해볼것은 리액트 작은 프로젝트를 해보는것. 지금 생각나는것은 pre과정때 해보았던 야구 스토리를 리액트 버전으로 다시 짜보는것. 추가로 생각해 하나 이상 만들어보자.

profile
자라나라 코드코드

0개의 댓글