FRONT-END/JQUERY5 [jQuery] 로그인 시, ID를 쿠키에 저장하기 웹 브라우저에서 서버에 데이터를 요청하고 응답받는 과정에서 응답(response)에는 여러 데이터와 원하는 페이지 정보가 존재하게 된다. 응답(response)에는 웹 브라우저에 저장하고자 하는 쿠키(cookie)라는 것도 존재하는데 브라우저에 쿠키를 저장하면 유저가 해당 웹사이트에 방문할 때마다 브라우저는 요청(request)할 때 해당 쿠키도 같이 보내게 된다. 쿠키에는 유저의 정보 뿐만 아니라, 해당 웹사이트의 언어설정을 변경하면 서버에서는 쿠키를 주고 유저가 선택한 언어를 저장하게 된다. 다음 포스팅에서 자세히 설명하겠지만 쿠키와 세션(session)의 가장 큰 차이점은 쿠키는 브라우저에 저장 되는 것이고, 세션은 서버에 저장된다는 점이다. 이번 포스팅에서는 쿠키를 이용해서 유저의 아이디를 저장해.. 2023. 2. 22. [jQuery] AJAX로 서버에 다양한 데이터 주고 받기 웹 페이지, 웹 어플리케이션(Client)은 특정 데이터를 가지고 서버에 데이터를 요청하면 서버는 그에 응당하는 데이터를 클라이언트에게 전송한다. 이번 포스트에서 다뤄볼 주제는 데이터를 서버에 요청하고 객체 타입의 데이터들을 비동기방식으로 클라이언트에 전송하는 것이다. 특정 데이터를 가지고 서버에 데이터 요청하고 응답받기 1. String 데이터를 응답받기 클릭 $(document).ready(()=>{ $("button").on("click", function() { $.ajax({ url:"./hello", type: "get", data: {"id" : "abc", "pw" : "123}, success: function(data){ console.log(data); $("#demo").text(d.. 2023. 2. 8. [jQuery] AJAX AJAX AJAX(Asynchronous JavaScript And XML)는 웹 브라우저의 기본 객체인 XMLHttpRequest를 이용해서 클라이언트와 서버가 비동기 방식으로 데이터를 주고 받는 것을 의미한다. (* 비동기 방식: 웹 브라우저의 페이지 전환 없이 서버와 통신하는 방식) AJAX 사용법 AJAX 통신 방식을 사용하기 위해서는 JavaScript, jQuery, Axios 세 가지 방법을 이용할 수 있는데 이번에는 jQuery 라이브러리를 활용하여 AJAX 통신 방식에 관해 포스팅 할 예정이다. 1. 문법 // jQuery 라이브러리를 CDN 방식으로 이용 Click me! 전체적인 문법은 위와 같으며, Attribute를 하나씩 따져가면서 서버와 비동기적으로 통신을 해보자. 2. 데이터.. 2023. 2. 8. [jQuery] append(), prepend(), attr() append(), prepend() 위와 같은 table이 있고 데이터 추가 버튼을 클릭했을 때 입력한 데이터를 테이블에 추가하려면 jQuery의 append() 함수를 이용하면 손쉽게 테이블에 데이터를 추가할 수 있다. 1. 코드 위의 코드처럼, append() 함수는 일치하는 요소 세트(예제에서는 )의 각 요소 끝에 마지막 자식으로 매개변수에 지정된 콘텐츠를 삽입하는 함수이다. 반대로, 첫 번째 자식으로 삽입하려면 prepend() 함수를 사용하면 된다. 2. 실행 이처럼, 에 데이터를 입력하고 데이터 추가 버튼을 클릭하면 테이블에 데이터가 잘 삽입된 것을 확인할 수 있다. 2.1 prepend() 실행 $("table").prepend( $("").append( $("").append(no), $(.. 2023. 2. 5. [jQuery] jQuery 정의 및 함수 jQuery란? 10년전의 JavaScript 코드는 못 생기고, 웹 브라우저마다 코드를 따로 작성해야 하는 번거로움이 있었다. 이 두 가지의 문제점을 해결하기 위해 나온 JavaScript 기반의 라이브러리가 jQuery이다. jQuery는 기존의 JavaScript 코드를 간결화, 경량화하고 하나의 코드로 모든 웹 브라우저에 호환을 할 수 있다는 큰 장점이 있다. jQuery 문법 우리는 JavaScript에서 HTML 태그에 접근해 값을 조작하기 위해서 DOM 객체를 이용했지만 jQuery에서는 $('tag name') 이라고 작성하면 해당 태그에 접근해서 값을 가져오거나 조작할 수 있다. 예를 들어, p 태그의 내용을 변경하는 다음과 같은 JavaScript 코드가 있다고 가정하자. HELLO W.. 2023. 2. 3. 이전 1 다음
