241107 TIL

• 상위 호환 버전 TODO APP 만들기
• API에 요청을 보내고, 받아온 응답을 처리하는 경험이 부족했는데, 많은 연습이 됐다.
• 오늘 연습해 보면서 알게 된(또는 다시 기억하게 된) 내용들
  • fetch로 보낸 요청의 응답은 프로미스 객체다. 응답의 결과를 확인하기 위해선 then 키워드를 사용하거나, 아니면 asnyc-await 문법을 사용해야 한다.
  • fetch 요청의 두번째 인자를 보내지 않으면 GET 요청이 된다. POST 요청을 보내기 위해선 두 번째 인자에 객체를 전달해야 하고, 객체엔 method, headers, body 정보가 담겨있어야 한다. POST 할 데이터는 body에 담아서 보낸다.
  • fetch로 body에 데이터를 담아 보낼 땐 직렬화(Serialization)를 해야 한다. JSON객체의 Stringify 메서드를 사용하면 쉽게 직렬화할 수 있다.
  • 마찬가지로 받아온 응답을 역직렬화(Desirialization) 해야한다. JSON 객체의 parse 메서드를 사용하면 쉽게 역직렬화 할 수 있다.
  • fetch 요청으로 받아온 응답은 .json() 메서드를 갖는다. 해당 메서드로 JSON 객체를 사용하지 않고도 역직렬화할 수 있다.
  • fetch의 응답은 프로미스 객체이기 때문에, .json()으로 역직렬화할 때에도 비동기로 처리해줘야 한다. then 메서드를 사용하거나, 아니면 await 키워드로 처리해줘야 한다.
  • history 객체와 window 객체로 popstate 이벤트를 캐치하면 SPA 애플리케이션의 라우팅을 처리할 수 있지만, URL 접근 시 기본 index.html을 바로 요청하기 때문에, 전환된 페이지로 바로 접근을 할 시 문제가 생길 수 있다. index.html에 들어가서 script로 추가된 다른 자바스크립트 파일들을 파싱해야 변경된 경로의 페이지들로 접근이 가능한데, 기본적으로 서버에 요청이 갈 땐 / 경로로 가기 때문에 문제가 생길 수 있다.
  • 해당 문제를 해결하기 위해선 서버에서 '어떠한 경로의 접근이 와도 index.html 파일을 내려주도록' 설정해야 한다. 즉, 서버의 설정이 함께 이뤄져야 하는 방식이고, 클라이언트 단독으론 완벽한 라우팅을 처리하기 어렵다(별도의 도구들을 사용하면 가능하다).
  • 대신 window.location.hash를 사용하면 클라이언트에서 라우팅이 처리된 것 같이 동작하도록 만들어줄 수 있다.
  • window.location.hash에 넣어준 값은 URL에 # 뒤쪽에 값이 오고(/#login), 서버로 요청이 갈 땐 # 뒤의 내용은 같이 요청이 가지 않기 때문에, 어떠한 경로로 접근하더라도 서버에는 동일하게 index.html 요청만 가게 된다. 그리고, 클라이언트에서 별도 로직을 처리하여 뒤로 가기-앞으로 가기-특정 경로로의 접속을 모두 동적으로 처리할 수 있게 된다.
• HTML과 CSS도 하다 보니 함께 익숙해지고 있는데, 오늘 추가로 공부한 내용들도 기록해 둔다(주로 form 태그에 대한 내용들이다).
  • form 태그로 묶여있는 input과 button은 submit 이벤트로 이벤트 캐치가 가능하다. 그리고, input을 제출하는 용도로 사용하는 button엔 type="submit"을 붙여주자.
  • input 태그에 type="password"로 주면 자동으로 숫자를 (***처럼) 암호화해서 보여준다.
  • input 태그에 들어가는 placeholder 값에 css를 먹이고 싶으면 {input 태그 css 선택자}::placeholder 형태로 사용하면 된다.

오늘 생각보다 진도를 많이 나가진 못했는데, 내일부터 다시 집중해서 개발 들어가 봐야겠다. 가능하면 이번주 주말까진 상위 호환 TODO APP 완성하고 다음 주부턴 React 공부에 들어가야겠다.