항해 99 5기 TIL_20

▶ Today I Learned

 

<CS 스터디>

 

그동안 동기와 비동기라는 개념을 반대로 이해하고 있었다..

동기가 동시에 여러가지가 일어나는 것이라 생각했는데 다시보니

한 작업의 결과가 나올 때까지 대기하는 것이 동기이며

결과가 나올 때까지 다른 일을 해주는 것이 비동기였다.

 

그럼 ajax는 response가 올 때까지 기다려야하니까 비동기인 것이라고 할 수도 있다.

하지만 ajax는 동기이다.

필요한 데이터를 받아올 때 페이지 전체를 업로드하고서 그다음 받아오는 것이 아닌 ajax로 요청해서 딱 그 부분만 받아올 수 있기 때문이다.

상세한 설명은 아래 링크를 참조했다.

 

https://private.tistory.com/24

https://sjparkk-dev1og.tistory.com/27

 

 

<홈페이지 구현 - 숙련>

 

 

[node app.js 미실행]

파일을 처음 만들고 코드를 붙여넣은 뒤 한번 실행해보았다.

하지만 서버가 실행되지 않았는데 심지어 커맨드를 입력해도 오류조차 나오지 않았다..

알고보니 이는 파일을 저장하지 않은 채 실행해서 파일의 실행자체가 안되었던 것이다..!

한동안 긴가민가했는데 이것도 사용시 파일을 command + s를 통해 저장해주어야 하나보다.

업데이트 할 때마다 꾸준히 저장해야지..!

 

 

[Ajax vs Axios vs fetch]

 

해당 링크를 참조해보았다.

https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch

지난번 클라이언트-서버 간의 통신은 모두 Ajax로 구현하였다.

이번에는 튜터님께서 추천해주신 fetch와 Axios중에 하나 이상을 사용해보려한다.

 

fetch는 내장 라이브러리이기에 별도의 다운로드가 필요없으며 불안정한 프레임워크에서도 잘 작동한다는 점,

Axios는 크로스 브라우징에 신경을 써서 브라우저 호환성이 더 좋다는 점이 장점인 듯하다.

둘다 Promise 기반이기에 다루기 쉽다는 것은 공통적인 장점이라고 한다.

 

▶ 느낀 점

 

현재 새롭게 짜보는 홈페이지는 이미 짜두었던 것에서 ajax를 axios로 바꾸는 것이기에 그리 어렵지 않았다.

중간에 문법에 대해 애매한 부분이 있었지만 팀원 분들의 도움으로 쉽게 이해할 수 있었다.

내일 마저 더 구현하고 이제 새로운 기능들을 추가해보아야겠다..!

화이팅팅!! 

 

▶ 공부 시 참고 링크들

 

https://ko.javascript.info/fetch

fetch

 

https://momentjs.com/

Moment.js | Home

 

https://inpa.tistory.com/114

[AXIOS] 📚 설치 - 특징 - 문법 💯 정리

 

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Document.getElementById() - Web APIs | MDN