HappyCoding/JavaScript
[JavaScript] script async 와 defer의 차이점
head안에 script 포함 parsing HTML 브라우저가 한줄 한줄 분석한다. parsing + css와 병함 -> DOM 요소로 변환 -> 많은 시간이 걸린다. head안 script + async사용 -> 병렬적 정의된 스크립트 순서에 상관없이, 먼저 다운로드 되는 파일 실행 장점 : fetching이 parsing하는 동안에 병렬적으로 일어나서 다운받는 시간 절약 단점 - html이 parsing되기도 전에 javascript가 실행이 됨 -> 원하는 요소가 아직 정의되어있지 않을 수 있어 위험 - 페이지 보는 동안, parsing HTML 멈추고 blocked되어있을 수 있어서, 페이지보는데 시간 오래 걸림. head안 script + defer사용 -> 병렬적 정의된 스크립트 순서에 맞게..
[JavaScript] 왜 fetch를 두고 axios를 사용하는지?
fetch web APIs와 Axios의 차이점 브라우저에서도 node.js에서도 많이 사용하는 Axios 라이브러리 axios 설치package.json 파일에 추가된 것 확인할 수 있다. yarn add axios import import axios from 'axios'; https://github.com/axios/axios fetch 대용으로 사용할 수 있는 api https://github.com/axios/axios#browser-support 여기를 살펴보면, 다른 브라우저 상에서 호환이 잘되도록 만들어져 있다. can i use 확인 https://caniuse.com/?search=fetch 이 라이브러리를 사용한다면, 이전 브라우저 버전과 호환이 된다. fetch는 예전 브라우저, i..
[JavaScript] NodeJS : JS런타임 환경
목차 node.js란 무엇일까? 왜 node.js를 배워야 하지 node의 특징 4가지 node 동작 방식, 내부 구조 살펴보기 전통적인 서버와 node 서버의 장점 단점 node.js란 무엇일까? html, css만으로 웹사이트 만들었는데, 95년 js가 도입되면서 많은 브라우저에 javascript engine이 탑재된다. 사파리(JavaScriptCore), 파이어폭스(SpiderMonkey), MS 인터넷 익스플로러(Chakara), 크롬(V8, JIT: Just-in-time compilation), MS에지(2021, V8차용) JS와 JS엔진 성능이 좋아지고, 웹 시장 전 세계적으로 호응도 얻게 되면서 많은 개발자들이 JS 배우고 웹사이트 웹 애플리케이션 만들게 된다. 1981 Ryan Da..
[NodeJS] Organizing_pic
Organizing_pic node.js를 활용한 사진 정리 스크립트 만들기. google photo에 사진 파일 업로드 시, 사용하는 스크립트 1. Pictures 폴더 안에 달별로 폴더 만들어 준다. 2. 사진과 동영상을 분리 3. video폴더에 video file 넣고 4. duplicated 폴더에 수정한 파일이 있을 때만 그 원본사진 IMG_****.jpg 넣어주기 5. captured 폴더에 screenshots.png, IMG_####. aae(사진 편집하면 생김) 넣기 실행 방법 node node organizing_photo test 어떻게 처리되었는지 알 수 있는 간단한 로그도 보여준다. 실행 후 폴더 구조 파일 이름 : └─Pictures └─jan : ├─captured : ├─d..