📌 Front End80 [FE Article] 프론트엔드 웹 개발 트렌드 용어 참고자료 : https://velog.io/@cookie004/61-frontend-web-development-buzz-words [번역] 모든 개발자가 알아야 하는 61가지 프론트엔드 웹 개발 트렌드 용어친구들이 웹 개발에 대해 토론할 때 소외감을 느끼고 싶지 않다면... 이 글을 읽으셔야 합니다😊velog.io1. API애플리케이션 프로그램 인터페이스의 줄임말로컴퓨터와 애플리케이션이 서로 통신하는 방식2. 애플리케이션 (Application)앱으로 줄여쓰기도 하는 애플리케이션은기능을 수행하도록 설계된 프로그램 의미데스크톱, 모바일 또는 웹 앱을 나타낼 수 있다.3. 속성 (Attribute)속성은 HTML요소의 동작을 제어하기 위해,여는 태그 내에서 사용되는 특별한 단어4. 중단점 (Breakpo.. 2023. 3. 10. [jQuery] 전역 함수와 매개변수 처리 방법 jQuery에서 전역 함수는 다음과 같이 생성합니다.javascript에서 단순 함수를 만들어 사용해도 되는 부분이지만 jQuery에서는 이렇게 사용하는 것도 가능하다는 것만 참고로 하면 될 것 같습니다. $.[함수명]의 형태로 선언한 뒤에 원하는 함수를 구현하고$.[함수명]의 형태로 호출합니다.만약 함수를 호출하는데 선택자가 사용되어야 한다면 jQuery의 fn속성을 사용해야 합니다.$.fn.myfunc = function () { $(this).animate({ opacity: 0.2 }, 'slow', function() { alert('완료'); });};$(function () { $('img').myfunc();});이때 this는 선택자에.. 2023. 3. 10. [jQuery] 변수앞에 달러를 붙이는 이유 jqeury 를 사용해서 받은 것을 변수에 넣었다는것을 표시하기위해서 $을 붙이는 이유는 jquery 객체라는 의미 2023. 3. 10. [jQuery] $.fn.extend({ }) vs $.extend({ }) 비교하기 객체 형식 ▶ { , } $.fn.extend({ })메서드 확장 정의jQuery 를 확장 즉 커스터마이징jQuery 의 기본 함수에 추가하는 내가 쓰고자 하는 함수를 넣어서 확장.fn -> 아직 정해지지 않은 자바스크립트에서 지원하는 오브젝트 전체를 뜻하는 가명 .fn 으로 생성된 메소드는 아무나 이용하고 접근할 수 있는 메소드가 된다.jquery prototype(원본의) property 확장.$.fn.extend() 의 경우 jquery prototype의 prototype을 확장한다는 의미로 $.fn.extend({ method1 : function(){} })와 같이 선언한다.다른 jquery method들 처럼 $("div").method1(); 로 호출.. 2023. 3. 10. [jQuery] JQuery를 이용한 AJAX통신 AJAX란 무엇인가?자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.비동기 방식이란?웹페이지를 리로드 하지 않고 데이터를 불러오는 방식웹페이지에서 기타 코드들을 요청할 경우, 웹 페이지를 리로드 하면서 불필요한 리소스가 낭비 되는데, 비동기 방식을 이용하면 필요한 데이터만 불러오면서 리소스 낭비를 줄일 수 있다.AJAX는 XMLHttpRequest 객체를 통해 서버에 request 한다.JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다. AJAX의 장점웹페이지 속도향상서버의 처리가 완료될 때까지 기다리지 않고 처리 가능기존 웹에서 불가능했던 UI를 가능하게 해줌.. 2023. 3. 10. [HTML] 폼(form)의 이해 1. 폼 태그 동작방법1. 폼이 있는 웹페이지를 방문합니다.2. 폼 내용을 입력합니다.3. 폼 안에 있는 모든 데이터를 웹 서버로 보냅니다.4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘깁니다.5. 웹 프로그램은 폼 데이터를 처리합니다.6. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보냅니다.7. 웹 서버는 받은 html 페이지를 브라우저에 보냅니다.8. 브라우저는 받은 html 페이지를 보여줍니다. 2. 폼 태그 속성폼 태그 속성에는 name, action, method, target 등이 있습니다.폼 속성을 이용하여 전송할 때 어디로 보내야 하는지, 어떤 방법으로 보낼지 정합니다.폼 태그 속성은 다음과 같습니다.action : 폼을 전송할 서버 쪽 스크립트 파일을 지정합니.. 2023. 3. 10. [JavaScript] 문서와 리소스 로딩 (DOMContentLoaded, load, beforeunload, unload) 참고자료 : https://ko.javascript.info/onload-ondomcontentloaded DOMContentLoaded, load, beforeunload, unload 이벤트 ko.javascript.info HTML 문서의 생명주기에 3가지 주요 이벤트 관여● DOMContentLoaded브라우저가 HTML을 전부 읽고 DOM트리를 완성하는 즉시 발생이미지 파일 / 스타일시트 등의 기타 자원은 기다리지 않는다.● loadHTML로 DOM트리를 만드는게 완성되었을 뿐만 아니라이미지, 스타일시트 같은 외부자웝도 모두 불러오는 것이 끝났을 때 발생● beforeunload / unload사용자가 페이지를 떠날 때 발생 3가지 이벤트는 다음과 같은 상황에서 활용이 가능 ● DOMConte.. 2023. 3. 10. [JavaScript] 자바스크립트 window 객체 WindowWindow 인터페이스는 DOM 문서를 담은 창을 나타냅니다. document 속성이 창에 불러온 DOM 문서를 가리킵니다. 반대로, 주어진 문서의 창은 document.defaultView를 사용해 접근할 수 있습니다.JavaScript 코드에 노출된 전역 변수 window는 현재 스크립트가 작동 중인 창을 나타냅니다.Window 인터페이스는 다양한 함수, 이름공간, 객체, 생성자가 머무는 장소입니다. 그 중엔 사용자 인터페이스로서의 창 개념과는 직접 관련되지 않은 것도 존재하며, 대신 전역적으로 접근할 수 있어야 하는 항목에 적합합니다. 많은 수의 항목이 JavaScript 참고서와 DOM 참고서에 문서화되어 있습니다.탭 기능이 있는 브라우저에서는 각각의 탭을 각각의 Window 객체로 나.. 2023. 3. 10. [JQuery] 이벤트 처리 방법(event binding) jQuery를 사용할 때 이벤트 처리는 아주 빈번하게 사용하는 기능 가운데 하나입니다. 이 글에서는 jQuery 내부에서 이벤트를 어떻게 처리하는지 설명합니다.먼저 jQuery에서 사용할 수 있는 다양한 이벤트 처리 방법을 살펴보고, jQuery의 이벤트 객체와 구조를 살펴보겠습니다. 마지막으로 이벤트를 처리하는 각 단계에서 실제 어떤 흐름을 거쳐 이벤트를 처리하는지 확인하겠습니다.이 글에서 설명하는 내용은 jQuery 2.2.0을 기준으로 작성했습니다.jQuery의 다양한 이벤트 처리 방법일반적으로 이벤트 하나에 이벤트 핸들러 하나를 등록해 이벤트를 처리한다. 그러나 jQuery에서는 같은 이벤트를 여러 번 처리하거나 같은 이벤트 핸들러를 여러 이벤트에 등록해 이벤트를 처리할 수 있다.네임스페이스의 사.. 2023. 3. 10. 이전 1 ··· 3 4 5 6 7 8 9 다음 728x90 반응형
