sprint-chatterbox-client 코딩과정

첫번째 고비(window)

방법1 -> 제대로 작동안함

npm test 돌리면 fetch 가 정의되지 않았다고 나옴
-> fetch 는 브라우저에서만 돌아간다는 걸 인지하고 있었음
-> node 환경에서 돌리는 방법을 생각함
-> 라이브러리 다운받고, 파일 상단에 아래 코드 작성함

const fetch = require('node-fetch')

방법2

오피스아워시간에 관련 내용 배움
우리는 웹앱을 만드는중.
fetch는 브라우저에서만 작동
웹에서 (window.fetch 치면 나옴)

window.fetch === fetch // true

타겟 앱은 브라우저라 노드에 라이브러리 다운받아도 소용없음.
테스트는 npm 으로 하지만 우리는 브라우저에서 구현.
(원래는 window 안써도되는데 테스트 돌리기위한 목적으로 써야함)

두번째 고비 (Provisional headers are shown)

[코딩과정]

1. 글 추가 버튼을 두세번누르면 한번추가되는 수준으로 작동함.
   
2. 포스트 버튼을 누르면 개발자도구 네트워크창에서 에러가뜸.
   (스택오버플로우 찾아봤는데 도움이 안됨.)
3. 헬프데스크에 글을 쓰고 네트워크 창 보면서 키워드 세세하게 검색.
   
4. form 태그 + 버튼타입 submit = 요청을 두 번 하게 되는 시스템. 크롬이 오류로 보고 서버전송 막은듯. 참고한링크
5. submit을 button으로 바꾸니까 서버와 통신 원활.

세번째 고비 (클라이언트 화면에 내용 안보임)

1. 추가 버튼을 누를 때 화면에 안 보임 근데 새로고침을 하면 보임
2. 서브밋 타입이 새로고침하는건가? 라고 가정하고 form 태그를 div 로변경함
3. 틀이 다 뒤틀려서 css연결해주고
4. 자바스크립트 파일에 들어가서 버튼과 연결된 메소드 확인해서 데이터 뿌리는 방식으로 코드 수정 후 완성
5. 그런데 의문. 왜 뿌리는걸 안해도 화면에보여줬을까. 이건 폼 태그에 새로고침 기능이 있다는 내 생각에 힘을 실어줌. (21.02.09 form 태그의 button 을 누르면 창이 refresh됨)

후기

처음 개발자에 관한 정보들을 찾아봤을 때, 왜 사람들이 그렇게 프로젝트를 진행해보라고 했는지 이해된다. 단순하게 강의를 보면서 코드를 따라지는 것과 왜 이런 코드를 작성해야하는지 직접 오류를 마주하며 보완하는 것은 차원이 다르다. 그리고 디버깅했을때의 쾌감이란..

개발자들이 진행과정을 왜 기록하는지도 이해했다. 처음으로 기억에 의존하는 것이 아닌 단계별로 내가 막힌 부분과 해결한 방법을 기록하면서 진행했다. 아마 이번에도 기억에 의존했다면 세세한 정보들을 남겨두지 못했을 것이다.

앞으로도 많은 시행착오를 겪겠지만, 적어도 한 번 겪어본 문제는 수월하게 해결 할 수 있는 개발자가 되고싶다. 나중에 에러메세지를 보는 순간, 오 나 이거 알아! 하고 뚝딱! 고치는..! 상상만해도 멋지다. 상상에만 그치지 않게 열심히 해야겠다.

+맨위 사진을 보면 관리자 메시지가 있다. 내가 알기로는 기존에 저장되어 있던 데이터인데 분명 지우고 내 데이터들로 채웠었다. 그런데 지금 열어보니 기존 데이터만 저장되어있었다. 아마 다음주에 서버관련 스프린트가 있는데 그때 조정을 하는건가? 아무튼 헬프데스트에도 문의해놨고 당장 다음주면 내용을 알 수있으니 기다려봐야겠다.(21.02.10 API에 24시간마다 데이터 초기된다고 명시되어있었다.)