어쩌다 보니 3탄까지 가게 되었습니다. 1탄 : https://pabeba.tistory.com/175 2탄 : https://pabeba.tistory.com/176 slideToggle html에 작성된 내용이 스르륵 내려오는 형태를 보여줍니다. 정보 더보기 호소세 출생 2000년 13월 36일, 서울특별시 국적 대한민국파일:대한민국 본관 호소 호씨[3] 신체 185.7cm 80kg 가족 부모님, 남동생, 형, 누나, 언니, 오빠 이번에 새로 추가된 내용입니다. document ready를 작성하지 않아도 저렇게만 작성하여도 dom이 생성되고 함수를 사용할 수 있게 되었습니다. 코드가 줄었네요 ㅎㅎ 그래서 아이디가 toggleSpan 인 태그를 누르면 숨겨진 내용이 나오게 됩니다. 직접 코드를 옮겨서..
jQuery란? jQuery는 JavaScript 기반의 오픈 소스 프론트엔드 라이브러리입니다. 웹 개발을 위한 도구로 사용되며, HTML 문서의 요소를 선택하고 조작하는 데 특히 유용합니다. jQuery는 단순하고 직관적인 API를 제공하여, 복잡한 JavaScript 코드를 간결하게 작성할 수 있도록 도와줍니다. 웹 페이지의 동적인 요소를 조작하고 애니메이션 효과를 적용하며, 서버와의 데이터 통신을 쉽게 처리하는 등 다양한 기능을 제공합니다. jQuery는 여러 가지 기능을 갖춘 다양한 모듈로 구성되어 있으며, 기본적인 선택자, 이벤트 처리, 애니메이션, AJAX와 같은 웹 개발에 필요한 다양한 기능을 포함하고 있습니다. 하지만 최근 웹 개발의 발전과 JavaScript의 표준화로 인해 jQuery의..
Ajax란? AJAX는 Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법입니다. 이름에 XML이라고 명시되어있긴 하지만 JSON이나 일반 텍스트 파일과 같은 다른 데이터 오브젝트들도 사용 가능해서 요즘엔 XML을 잘 안 쓰고 십중팔구 JSON을 다룬다고 합니다. 용어와 실제 기술 간의 차이가 커져서 요즘에는 약어가 아닌 고유명사 취급하고 있습니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분..
DOM이란? 텍스트 파일로 만들어져 있는 웹 문서(HTML 파일, XML, SVG)를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 합니다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 합니다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM입니다. DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영됩니다. 그림을 보면 브라우저는 웹 문서(HTML 파일,XML, SVG)를 로드한 후 파싱하여 DOM을 생성합니다. 이러한 웹 문서의 동적 변경을..
이제서야 JS의 기본을 알게 되어 기쁩니다. 처음에 들었을 때는 뭐야 이게 하고 지나갔지만, 점점 코드를 생성하다 보면 이것이 왜 필요한지 알게 되더라고요. 더 높은 빌딩을 위해 더 좋은 기초가 필요하듯이요. 어?쓰흡... 하아... 님의 글을 읽으면서 이해가 잘되어 제 블로그에도 살짝 포스팅하고 싶네요. 감사합니다. Execution Context(실행 컨텍스트)란? 자바스크립트 엔진이 코드를 실행하기 위해선 코드에 대한 정보들이 필요합니다. 코드에 선언된 변수와 함수, 스코프, this, arguments 등을 묶어, 코드가 실행되는 위치를 설명한다는 뜻의 Execution Context라고 부릅니다. 자바스크립트 엔진은 Execution Context를 객체로 관리하며 코드를 Execution Co..
Promise를 통한 비동기 코딩(복습) https://pabeba.tistory.com/84 Promise로 비동기 동작을 하는 것을 복습해 봅시다. 어떤 원격 REST API를 호출을 하여 게시물 작성자의 이름을 리턴하는 함수를 작성하고 그 함수를 호출해보았습니다. function fetchAuthorName(postId) { return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`) .then((response) => response.json()) .then((post) => post.userId) .then((userId) => { return fetch(`https://jsonplaceholder.typicode.com/users/..
