공부를 하면서 부트캠프를 정말 잘 선택했다는 생각이 주기적으로 든다.
지난 몇주동안
1. 클라이언트 만들기
2. 서버만들기
3. 클라이언트와 서버 연동하기
를 배웠다.
새로운 기술들을 배우는 만큼 기초를 다지려고 공식문서를 꼼꼼하게 공부했다.
http,express 그리고 React
진짜 멋진 내용들이다.
많았던 과제들을 후루룩 마무리하고 오늘 HA 시간이 다가왔다.
과제내용은
1. 목업되어있는 클라이언트를 컴포넌트를 이용해 동적으로 연결시키기
2. 서버를 생성하고 요청이오면 데이터를 보내주기
3. 클라이언트와 서버를 연결시키기
🌈 Hello World
파일 구성
- App : 최상위 컴포넌트 (class로 구현해야한다)
- currentMovie : 리스트중 선택한 영화를 메인으로 보여준다. (App의 자식)
- movieList : 영화를 리스트로 보여준다. (App의 자식)
- movieListEntry : 리스트속 각 영화정보 (movieList의 자식)
🌈 클라이언트 구현
- 넘겨준 props에 대해 undefined 에러
movieListEntry 관련 테스트를 통과하기 위해 App - movieList - movieListEntry 순서로 props 를 넘겨주었다.
movies를 props 이름으로 쭉넘겼는데, 자꾸 테스트에서 undefined 에러가 떠서 테스트 코드를 확인해봤다. movie로 되어있어서 수정했다.
테스트코드를 확인해야 통과할 수 있는 사항이었다.
- currentMovie 에서 넘겨받은 props에 대해 자꾸 null 뜸
확인해보니 관련 태그들에 className 없었음.
그래서 테스트들이 해당 태그의 innerHTML을 찾을 수가 없었음(나름 함정)
태그를 꼼꼼하게 확인해야 했다. (허전하다고 생각하긴했다)
- 영화정보가 없을 때(빈배열로 입력)해서 넘기면 length 에러 뜸
"영화를 선택하세요" 메세지 뜨게 구현했는데, 이것도 테스트케이스 찾아보니
영화정보 없는 경우를 빈배열에서 null 로 바꿔줌
테스트코드를 확인해야 통과할 수 있는 사항이었다.
- img elements must have an alt prop... 에러
테스트는 다 통과했는데, 터미널과 클라이언트 개발자도구 콘솔에 에러가 떴다.
리액트에서 img 태그 버그 를 참고해서 이미지 태그에 alt="profile"를 추가해줬다.
더 찾아보니 alt=""이런식으로만 추가해도 된다고 한다.
처음보는 에러다. 리액트는 규칙이 참 많은 것 같다. 잘 지켜줘야 겠다!
클라이언트 10:45
🌈 서버 구현
- 서버 여는 명령어를 실행하면 에러가 떴다.
스크립트에 start 가 없어서 node ./index.js 로 추가해줬다.
nodemon을 깔기전에 서버 잘 열리나 확인해보려고 했는데, 제대로 열리지 않았다.
에러 메세지를 확인하니 이미 서버가 열려있다고 해서, 클라이언트 서버를 닫아줬다.
(그런데 의문. 클라이언트는 왜 서버를 사용할까?
여태 클라이언트 앱을 만들 때, 서버를 열어서 확인한 적이 없다.
가설: 아마 리액트로 구현한 화면을 보기위해서는 서버를 이용하는 것 같다.
-> 유어클래스를 다시 확인하면
터미널을 열고 npm run start 실행 후에는 http://localhost:3000 주소를 통해 실행 결과를 확인할 수 있을 것입니다. 이렇게 명시되어있다. 실행결과는 무조건 서버를 이용해야 하나보다.)
이미 리액트로 구현된 클라이언트가 해당 서버를 쓰고있어서 닫아줬다.
- express 가 기억이 안나서 공식문서를 통해 코드 하나하나 다시 공부했다.
서버 12:00
- 요청받는 url이 굉장히 다양했다. 각 영화별로 키에 해당하는 url을 받으면 해당 url 정보를 넘겨주는 작업이 필요했는데, 어떻게 구현해야 하나 많이 고민했다.
그러다가 콘솔확인용으로 작성한 코드가 눈에 들어왔다.
const logger = function(req, res, next) {
console.log(`http method is ${req.method}, url is ${req.url}`)
next() // 콘솔만 찍고 넘기기
}
app.use(logger) // 로그 확인위 예시처럼 filter로 들어온 url이 영화 id 들 중에 있는지 확인하고, 맞으면 대한 데이터를 반환하는 코드를 작성하였다. (이 과정에서 타입을 제대로 맞추지 않아 삽질 많이했다. url은 string, id는 number을 간과했다.)
- 서버를 연 후, 클라이언트 열기 (1번과 연관이 있다.)
아까 클라이언트, 서버 순으로 start(실행 명령어) 할 땐, 에러가 떴었다.
반면에 서버, 클라이언트 순으로 start 하니까, 이미 해당 서버를 사용하고 있으니 다른 url 로 열어도 되는지 물었다. (아마 리액트의 친절함 같다.)
사실 안열리면, 서버랑 클라이언트를 어떻게 연결해야하나 고민했는데, 원활하게 열려서 다행이다. (해시테이블의 해시충돌이 생각난다 ^^ 옆방에 넣어주는)
🌈 클라이언트 서버 연결
- 전체데이터와 영화 1개 선택하면 받아오는 데이터 각각 fetch 했다.
fetch 를 두번 할 수 도 있구나. 깨달았다. 이렇게 사용할 생각은 안했기 때문이다. (의문. 이렇게 하면 더 효율이 좋은가? 데이터관리는 서버가 일을 하게 하는게 좋으니까? 그래야 클라이언트가 가벼워지니까? 더 찾아봐야겠다.)
- 클라이언트 마우스이벤트 관련 테스트가 패스되지 않았다.
서버를 연결하고 다시 클라이언트 테스트를 돌리니 항목 2개가 통과되지 않았다.
아마 서버연결 후 까지 고려해서 테스트를 하면, 클라이언트만 구현했을 때 잘 작성했는지 확인할 길이 없어서 이렇게 한 것 같다.
state 기본값을 테스트도 통과할 수 있게 맞추고, 추가적으로 조건문을 만들어서 테스트를 억지로 통과시켰다.
테스트도 구현도 다 지배할 수 있다는 자신감을 얻게 되었다.
HA 15:05
🌈 후기
HA를 앞두고 걱정스럽긴 했다. 리액트에 집중하다보니 그 전에 배웠던 서버부분이 흐릿해졌기 때문이다. 그래도 조급하게 진행하지 않아서 잘 마무리한 것 같다.
처음 HA때는 시간제한도 있고, 평가를 받는다는 생각에 에러메세지를 보자마자 패닉상태에 빠졌었다. 그러다보니 시원찮게 마무리되고, 자신감이 떨어졌었다.
하지만 이제는 내가 할 수 있는 범위에서, 페어와 구현했던 것들을 나 혼자 해보자! 라는 느낌으로 진행을 해서 부담이 줄어들었다. 지금까지 스프린트를 열심히 진행했으니 그 노력들이 쌓여서 오늘도 통과할 수 있을 거라는 믿음이 있었다. 그래서 정말 기분좋게 매듭지은 것 같다.
서버에 대해 흐릿했던 부분도 다시 구현해보면서 복습할 수 있는 계기가 되었다.
다음주부터 또 새로운 것들을 배우면서 달려야한테니, 이번 주말은 여태 배운 내용들을 상기시키며 복습하는 시간을 가져야겠다. 수고했어 오늘도.
