JavaScript(3)
-
[Javascript] 객체 다루기
서버에서 통신으로 받아온 객체 형태의 값을 다룰 때 자주 사용해야 하는 객체 다루기 방법들을 정리 📌 객체 안에 키, 값 쌍 더하기 (수정도 방법 동일) food라는 객체 안에 description이라는 키와 'Very cheesy vegetarian pizza' 이라는 값를 추가하려고 한다. const food = { id: 1, cost: "12,000", name: "Vegan Pizza", }; 🔸객체.키 or 객체[키] 사용하기 객체명에 점을 찍고 삽입할 키 이름을 작성한 다음 값을 할당해준다. 동일한 방법으로 대괄호에 키를 넣을 수 있다. 포인트는 대괄호에 key를 따옴표를 붙여 문자 처리를 해주어야 한다. key는 객체명을 따옴표로 묶 못하기 때문에 key명이 숫자나 .이 있는 경우, 공백이..
2023.04.12 -
[Javascript] <script>의 실행 순서를 결정하는 속성 aysnc와 defer
카페24로 일하다 보면 다양하게 스크립트 태그를 적용해야 하는 경우가 있다. 나의 경우는 전역으로 뿌려줘야 하는 함수 등은 common.js로 layout 모듈에 적용을 해두었고 개별 페이지에 적용해야 하는 스크립트는 별도로 로 import를 해주는데 카페24는 나름대로 노코딩 툴이기 때문에 라는 카페24만의 문법이 존재한다. 카페24가 기본적으로 저 문법으로 스크립트를 넣고 있는데, 이 스크립트들의 순서가 꼬이게 되면 원하는 기능이 제대로 작동이 안 되는 경우가 있다. 특히 swiperJS와 같이 외부 스크립트 라이브러리를 불러오는 경우...! DOM은 DOM대로 불러오고 내가 만든 함수는 함수대로 적용되는데 갑자기 스와이퍼 적용이 안되는 경우가 있다. 그래서 가끔은 html 내에 를 직접 넣어서 스크..
2023.03.15 -
[Javascript] fetch에서 HTTP 헤더 사용하기
최근 일하면서 fetch로 백엔드랑 API 통신할 일이 엄청 많아졌는데, fetch를 잘 모르고 통신하다보니 불필요하게 서버에 자주 요청을 보내는 일이 많아졌다 (테스트 하기 위해) 조금이나마 fetch를 알고 사용하기 위해 공부차 기록하기! fetch - 서버에 네트워크 요청을 보내고 정보를 받아오는 일을 한다. - fetch는 AJAX(Asynchronous Javascript And XML)이라는 기술로 서버에서 정보를 '비동기적'으로 가져올 수 있게 해주는 방식 - 페이지의 새로고침(유저 입장에서는 깜빡임) 없이 정보를 브라우저에 표시 - XMLHttpRequest라는 오래된 통신 방식에서 비롯되었다. - fetch는 모던 자바스크립트에서 지원되기 시작한 통신 메소드로 구식 브라우저에서는 폴리필을..
2022.11.12