반응형

IT 64

React_01 (특징, JSX)

React - 자바스크립트 라이브러리로 유저 인터페이스를 만드는 데 사용. 지속적으로 데이터가 변화하는 대규모 애플리케이션에 사용. 오직 V(View)만 담당 => 뷰에만 신경쓰는 라이브러리 이므로 기타 기능은 직접 구현해야 하지만 라우팅에는 리액트 라우터, Ajax 처리에는 axios / fetch, 상태 관리에는 redux / MobX를 사용. 초기 렌더링 - render() {} 함수 컴포넌트가 어떻게 생겼는지 정의하는 역할 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지 정보를 지닌 객체를 반환 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 우리가 정하는 실제 페이지의 DOM 요소 안에 주입. Virtual DOM - 실제 DOM에 접..

IT/React 2021.03.12

Chrome 브라우저에서 Ajax 테스트

서버에 올리지 않은 로컬의 HTML 파일에서 크롬을 통해 Ajax 테스트를 하는 경우 Access to XMLHttpRequest at 'file:///xxxxxx' from origin 'null' has been blocked by CORS policy:Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 의 오류가 발생함. 이러한 오류를 해결하기 위해선 크롬 브라우저 별도의 작업이 필요하다. 1. 모든 크롬창을 닫는다. 2. 크롬 바로가기 아이콘을 만든다. 3. 우클릭 > 속성 > 바로가기 > 대상 맨 끝 xxxxxxxxxxxxxxx\chrome.exe"의 뒤에..

IT/Etc. 2018.11.22

[jQuery] Ajax 관련 메서드

load()- 외부 콘텐츠를 가져올 때 사용 $(요소선택).load(url, data, 콜백 함수) $.ajax()- 데이터를 서버에 HTTP POST, GET 방식으로 전송이 가능하며, (X)HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드 $.post(), $.get(), $.getJSON() 메서드의 기능을 하나로 합쳐 놓은 것이라고 보면 됨. $.ajax({url : '전송 페이지(액션 페이지)', // 데이터 전송 및 요청할 외부 주소를 입력type : '전송 방식", // get, postdata : '전송할 데이터',dataType : '요청한 데이터 타입' // 서버로부터 반환 받아올 데이터 형식을 지정// html, xml, json, text, jso..

Ajax 란 무엇이고, jQuery를 이용한 Ajax 사용법

Ajax (Asynchronous JavaScript and Xml) 란? - Ajax는 Asynchronous JavaScript and Xml의 약자로 비동기식 서버와 통신하는 방식입니다. 이 때 XML을 이용하고, 최근에는 JSON (JavaScript Object Notation)을 많이 사용합니다. 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미를 지닙니다. (비동기성을 통해 페이지 전체를 refresh 하지 않고 일부분만 업데이트를 할 수 있습니다.) 결과가 주어지는 시간이 길어져도 그 시간 동안 다른 작업을 할 수 있으므로 조금 더 효율적으로 자원을 사용할 수 있는 장점이 있습니다. jQuery를 이용한 Ajax jQuery에서는..

[jQuery] 키보드 접근성을 위한 이벤트 등록법

키보드 접근성이란 - 마우스 이벤트를 등록했을 때 만약 현재 마우스가 없더라도 제이쿼리로 만든 최소한의 기능을 키보드만으로 사용할 수 있도록 보장하는 것을 말함. 키보드 접근성을 고려하여 마우스 이벤트를 등록할 때는 포커스를 이동할 수 있는 요소들인 와 태그, 또는 입력 요소인 , , 태그 에 이벤트를 등록해야 함. 마우스 이벤트 마우스 이벤트에 대응하는 키보드 이벤트 mouseover() 마우스 커서가 선택한 요소에 올라갔을 때 이벤트 발생 focus() 선택한 요소에 포커스가 이동했을 때 이벤트 발생 mouseout() 마우스 커서가 선택한 요소에 벗어났을 때 이벤트 발생 blur() 선택한 요소에 포커스가 다른 요소로 이동되어 사라졌을 때 이벤트 발생 $('.btn').on('mouseover, f..

[jQuery] selector(선택자) 란 / selector 예제

[jQuery] selector(선택자) 란 / selector 예제 selector (선택자) 란- jQuery의 selector는 DOM의 요소들의 집합에 쉽게 접근할 수 있도록 제공하는 기술입니다. 선택자를 사용해 요소를 먼저 선택해 오고, 선택한 요소에 스타일(CSS) 또는 속성(Attribute)을 적용할 메서드(Method)를 작성 jQuery 선택자에는 직접 선택자인접 선택자- 이미 선택한 요소를 기준으로 근접한 요소의 관계를 따져 선택함.탐색 선택자- 선택된 요소 중 더 세밀하게 선택할 수 있는 선택자 라는 html이 있다고 가정 합니다. 기존 javascript에서는 document.getElementById(“test”); 위와 같은 문법으로 input 태그에 접근이 가능했지만, jQu..

[jQuery] 제이쿼리란, 제이쿼리의 특징

jQuery란 - 자바스크립트를 이용해 만든 라이브러리 언어 라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합 jQuery의 특징 - 웹에서 자주 사용하는 기능의 간편화. ( ex. 복잡한 Ajax프로그래밍을 손쉽게 처리 가능. )- CSS 셀렉터 : html의 구조를 명료하고 읽기 쉬운 형태로 사용 및 표현 가능.- 플러그인 아키텍처 : 중복되는 기능을 최대한 피하고 이미 개발된 수많은 플러그인들을 사용할 수 있음- 메서드 체인 : 여러 개의 동작(기능)을 한 줄에 나열하여 임시 변수의 사용을 최소화 하여 불필요한 코드의 반복을 피할 수 있습니다.- 크로스 브라우저 지원 : 브라우저별로 처리 방법이 다른 이벤트 처리나 함수들의 문장을 하나의 표현으로 사용가능. jQuery API 구조 - ..

[자바스크립트] 제어문 (조건문, 선택문, 반복문)

1. 제어문이란 - 프로그램의 흐름을 제어할 수 있도록 도와주는 실행문. 2. 제어문 종류 - 조건문 : 조건 여부에 따라 제어if, else, else if - 선택문 : 변수에 일치하는 경우의 값에 따라 제어switch - 반복문 : 특정 실행문을 여러 번 반복 실행for, while, do while 3. if 문과 switch 문 if문은 만족하는 데이터가 여러 개일 경우 주로 사용.switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 실행문을 실행시킬 때 사용. 4. break 문 조건식과 상관없이 강제로 반복문을 종료 5. continue 문 반복문에서만 사용할 수 있다.continue문 다음 실행문을 건너뛰고 조건식, 증감식을 수행한다.

[자바스크립트] 자바스크립트란, 자바스크립트 특징

1. 자바스크립트란 - 어떤 동작을 취했을 때, 그 동작에 대응하여 반응이 일어나도록 해주는 언어입니다. 2. 특징 - 인터프린터 언어: 순차대로 구문 분석합니다. 에러가 발생한 다음 줄부터는 구문 분석을 하지 않습니다. - 클라이언트 스크립트 언어: 서버에서 실행되는 것이 아니라, 사용자 컴퓨터에서 실행됩니다. (서버의 부하를 줄일 수 있음.) 클라이언트 스크립트 언어로 처리해야할 프로그래밍을 서버 스크립트 언어인 PHP, JSP, ASP로 모두 처리한다면, 서버의 일처리가 가중되어 부하 걸리게 됨. - 객체 기반 언어 - 공개된 언어 - 다양한 라이브러리 활용: 라이브러리란 자바스크립트를 이용하여 다양한 기능을 쉽게 구현할 수 있도록 한 함수들의 집합입니다.ex) jQuery, jQM, NODE JS 등

반응형