본문 바로가기

웹프로그래밍/JavaScript6

[Redux] 1. 리덕스 세팅과 개념정리 Redux(리덕스) 란? 내용작성 제목 내용작성 제목 내용작성 제목 내용작성 제목 내용작성 2021. 7. 27.
[JavaScript] XMLHttpRequest를 이용한 바닐라자바스크립트 ajax XMLHttpRequest를 이용한 바닐라자바스크립트 ajax 웹을 개발하면서 ajax기술은 거의 필수라고 해도 무방할정도로 널리 사용되어지고 있습니다. 하지만 대부분의 ajax들이 과거 jquery가 유행하던 시절에 jquery를 기반으로 하여 작성되어 지다보니 jquery를 사용하지 않는 프로젝트에서는 어떻게 ajax를 작성하는지 궁금해 졌습니다. 더군다나 jquery를 점점 제거하는 추세여서 라이브러리가 없는 순수 자바스크립트에서는 ajax를 어떻게 작성하는지 알아볼 필요가 있다고 생각되어졌고 오늘 이에 대하여 포스팅을 남겨보려고 합니다. 앞서 설명한것처럼 그 어떤 라이브러리 없이 순수한 자바스크립트 즉, 바닐라자바스크립트로만 ajax를 구현하며 서버백단은 java를 이용하여 통신하는 코드를 기술할.. 2019. 5. 14.
<JavaScript>배열과 객체에 함수를 넣어서 사용하기 개인적으로 javascript의 꽃은 객체라고 생각한다. 자바스크립트에서의 객체는 JSON타입의 데이터라고 생각하면 되는데 이 객체 안에는 일반적인 int, string과 같은 데이터 타입외에도 또다른 객체가 들어간다거나 혹은 배열 심지어 함수도 넣어서 사용할 수 있으니 그 활용도가 무궁무진하다. 이 포스팅에서는 배열안에 객체를 넣고 그 객체안에 있는 함수를 호출하여 사용하는 소스코드를 통해서 어떤식으로 객체를 이용하는지 확인해 보고자 한다. 위의 코드의 결과는 아래와 같다. 2019. 5. 14.
<JavaScript>html객체의 style값 가져오기 자바스크립트를 이용해서 html 요소의 속성과 속성값을 가져올 수 있다. 특히 style속성의 속성값을 가져오는 것은 상당히 유용한데 이를 이용해서 style diplay속성값을 none으로 수정하여 html객체를 사라졌다 보였다하게 만드는 toggle(토글)기능도 구현할 수 있게 해준다. 아래의 예시를 통해서 버튼을 누르면 텍스트입력창이 사라지는 기능을 구현해 보겠다. 처음 실행한 화면이다. 위의 화면에서 버튼을 누르면 텍스트입력창이 사라진다. 다시 버튼을 누르면 텍스트입력창이 활성화가 된다 소스코드를 본다면 아마 어렵지 않게 이해가 가능하리라 생각한다. 참고로 아래의 hidden type의 input태그는 보이지가 않는다. 그래서 상태값을 저장하는 변수처럼 사용하는데 이는 개발하는 사람마음이라 hid.. 2019. 5. 14.
<JavaScript>객체 사용법 자바스크립트에서의 객체는 key값과 value값이 있어서 이를 한대 묶어 저장할 수 있습니다. var test = { name : "홍길동", age: 20 }; 자바스크립트의 객체를 보면 JSON이 떠오르는데요 실제로 JSON은 자바스크립트의 객체구조를 본따 서버와 웹브라우저간의 데이터를 주고 받을 때 사용하기 위해서 만들어 졌다고 합니다. 이러한 객체에는 배열처럼 배열안에 숫자나 텍스트 타입의 데이터 뿐만 아니라 함수나 배열도 들어갑니다. 2019. 5. 11.
<Javascript>배열(Array) 선언및 사용방법 1. 자바스크립트 에서의 배열선언 및 개념 자바스크립트(Javascrip)에서 배열을 선언하는 방법입니다. 자바스크립트에서의 배열에는 모든 타입의 데이터가 들어갈 수 있습니다. 함수나 오브젝트, 심지어 배열안에 또다른 배열도 들어가집니다. var test = []; var test = [1, "hi", null, ture, []]; 2. 배열에서 사용할 수 있는 유용한 함수(메소드) var test = [1, 2, 3, 4]; // 배열의 원소에 특정 값이 들어 있는지 확인 // 4가 text[3]에 있음으로 3을 반환한다 // 없으면 -1 반환 alert(test.indexOf(4)); // 배열을 문자열로 합칠 수 있다. // "1,2,3,4" 반환 alert(test.join()); // 배열을 합.. 2019. 5. 10.