다다의 개발일지 6v6

JSON (JavaScript Object Notation) 이란?JSON은 JavaScript 객체 표기법을 기반으로 만든 데이터 형식.사람이 읽기 쉽고, 기계가 해석하기 쉬운 구조로 되어 있어서, 서버와 클라이언트 간 데이터 교환에 가장 많이 사용된다.  JSON은 key-value(키-값) 쌍으로 이루어져 있다.JSON은 자료형 리스트와 딕셔너리를 섞어놓은 것처럼 생겼음 📌 JSON 데이터 예시 (문자열 형태로 저장됨){ "name": "Alice", "age": 25, "isStudent": false, "skills": ["JavaScript", "Python", "Java"], "address": { "city": "Seoul", "country": "Korea" }} ..

jQuery는 자바스크립트를 더 쉽고 간편하게 사용할 수 있도록 도와주는 라이브러리이다. 직접 JS 코드를 작성해서 모든 기능을 구현할 수도 있지만, 코드가 복잡하고 브라우저 간 호환성을 직접 고려해야한다는 점 때문에 전문 개발자가 작성한 라이브러리를 가져와서 사용하면 편하다. 부트스트랩 css 파일을 사용할 때처럼 온라인 상의 파일을 참조 해서 import 하면 된다. JQuery와 순수 JavaScript의 코드를 비교해보자 JS에서 elememt란 id를 가진 요소를 감추려면 복잡하다.document.getElementById("element").style.display = "none"; JQuery로는이렇게 간단하고 직관적으로 쓸 수 있다. $('#element').hide();  주요 특징 (아..

✅ Ajax란?Ajax(Asynchronous JavaScript and XML)는 자바스크립트에서 클라이언트(브라우저)와 서버의 비동기적 API 통신 방식이다.즉, 페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있게 하는 기술.Ajax 에 XML이 들어간 이유Ajax가 처음 등장했을 때, 서버와 데이터를 주고받는 형식으로 XML (eXtensible Markup Language) 이 주로 사용되었음. 그러나 XML은 너무 복잡하고 불편해서 현재는 JSON을 사용(표준)함. 훨씬 간단하고 JS에서 바로 사용할 수 있기 때문이다 Ajax를 구현하는 방법과거에는 Ajax를 사용하려면 XMLHttpRequest(XHR)라는 복잡한 객체를 써야 했다.jQuery가 등장하면서 $.ajax(), $.ge..

전 글에서 호이스팅에 대해서 공부를 했는데 변수 호이스팅만 다루고 함수 호이스팅은 따로 빼놨다.함수 호이스팅에 대해서 자세히 알아보자!! 함수 호이스팅이란?JavaScript 엔진이 함수 선언을 코드 실행 전에 메모리에 미리 저장하는 동작을 의미즉, 코드가 작성된 순서와는 다르게, 함수의 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작한다.하지만 실제로 코드의 위치가 변경되는 것이 아니라, JavaScript가 내부적으로 선언을 미리 처리하는 것임. 함수도 호이스팅되지만, 함수 선언 방식에 따라 다르게 동작한다.(1) 함수 선언문 (Function Declaration)👉 function 키워드로 직접 함수를 선언하는 방식hello(); // "Hello, world!" (정상 작동)function ..

var, let, const의 차이점은 크게 변수 선언 방식, 스코프(scope), 호이스팅(hoisting), 그리고 재할당 가능 여부에서 나타난다.1. var (과거 방식)함수 스코프(function scope)를 가진다.변수 선언 전에 사용할 수 있지만 undefined가 할당된다. (호이스팅)동일한 변수명을 중복 선언할 수 있다.재할당 가능.console.log(a); // undefined (호이스팅 때문에 오류가 나지 않음)var a = 10; if (true) { var b = 20; // 블록 내부에서 선언해도 바깥에서 접근 가능 (함수 스코프)}console.log(b); // 20 (의도치 않은 값 변경 가능) ➡ var는 함수 스코프이기 때문에 블록 {} 내부에서 선언해도 바깥에..

spacing, blur, base Color를 변경하면 사진에 그대로 적용되도록 할 예정! 우선 css를 건드려 보았다.hl { color: #f66687;}img { width: 50%; max-height: 600px; object-fit: cover; padding: 10px; background-color: #f66687;}이렇게 기본값으로 고정시키고 각각의 색, spacing을 JS로 변경하려고 했는데 그러면 전체 기본 색이 #F66687로 똑같은데.hl의 color따로 img의 배경색 따로 변경해줘야 한다. 그래서!! 아예 기본 색을 변수로 선언하려고 함. :root와 CSS 변수 (- -base, - -spacing, - -blur):root란?:root는 ..