OneDev

1️⃣ 리액트란? → 리액트 : 자바스크립트 라이브러리 - 페이스북(Facebook) 주도로 개발되었다 - SPA(Single Page Application) 개발이 편리하다 2️⃣ 리액트 사용 이유 Q. 리액트 왜쓰나요? → 요소(element) 재사용하기 위해 사용 Q. 어떻게 재사용 하나요? → 컴포넌트 만들어 재활용 Q. 컴포넌트가 뭔가요? → 리액트 엘리먼트를 반환하는 것 Q. 리액트 엘리먼트는 뭔가요? → 불변인 순수 자바스크립트 객체 3️⃣리액트의 특징 - UI 요소 중 자주 사용되는 부분을 컴포넌트(Component)화 하여 재활용성을 높여준다 - 가상 돔 (Virtual DOM) 을 제공하여 효율적인 DOM 관리와 화면 처리를 지원한다 기존 DOM 은 요소가 변경될 때마다 렌더링 과정이 ..

@ResponseBody 어노테이션이란? HTTP 통신 프로토콜의 body 부분에 직접 데이터(응답/response)를 반환할 때 사용하는 어노테이션. 데이터를 넘겨주는 방식은 크게 ①문자를 넘겨주는 방식과 ②객체를 넘겨주는 방식으로 나뉜다. 객체를 넘겨주는 경우 기본적으로 데이터를 json 방식으로 변환하여 리턴한다 문자 데이터의 경우 viewResolver가 동작한다 객체 데이터의 경우 HttpMessageConverter가 동작한다. HttpMessageConverter가 동작한 이후의 동작은 데이터의 형에 따라 나뉜다. 문자일 경우 : StringConverter 가 동작 객체일 경우 :jsonConerter가 기본적으로 동작 기본 문자처리 : StringHttpMessageConverter 기본..

async : 기본값 true async : true → 비동기식 처리 async : false → 동기식 처리 : ajax 호출 후 서버에서 응답 기다리다 응답을 모두 완료하면 다음 로직 처리 (예) function() { url:url, data:data, ... ... async:false, success:funtion(){ }, error:function(){ } }

◎ jQuery 메소드의 가장 기본적인 형태 : 문서객체를 다룰 때 사용하는 형태 ◎ 전체 선택자 : * * : HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자 (예시) 모든 문서 객체의 color 스타일 속성에 blue 입력하기 ◎ 태그 선택자 특정한 태그만 선택하는 선택자 태그 이름 사용 (예시) ◎ 아이디 선택자 특정한 id 속성을 가지고 있는 문서객체 선택하는 선택자 ' 태그이름#id ' 또는 ' #id '형태로 사용 (예시) ◎ 클래스 선택자 특정 class 속성을 가진 문서 객체를 선택하는 선택자 ' 태그.(class이름) ' 또는 ' .(class이름) ' 의 형태로 사용 (예시) ◎ jQuery 자식 선택자와 후손 선택자 기본 선택자의 앞에 붙여 사용하며, 기본 선택자의 범위 제한..

※ $(document).ready() 문서 준비가 완료되면 매개 변수로 전달된 함수를 실행하라는 의미 jQuery 이벤트 메소드 중 하나 jQuery 이벤트 메소드는 이벤트로 여러 개의 함수 연결 가능한 장점 ※ 예제 아래의 두 메소드는 비슷한 역할 ※ 약식 표현 $(document).ready() 메소드를 아래와 같이 간단하게 쓸 수도 있다

◎ JQuery 개요 모든 브라우저에서 동작하는 자바스크립트 라이브러리 오픈소스 라이브러리 (무료로 사용가능) jQuery의 제작 목표 DOM과 관련된 처리 쉽게 구현 일괄된 이벤트 연결 쉽게 구현 시각적 효과 쉽게 구현 Ajax 어플리케이션 쉽게 개발 ◎ JQuery 다운로드 : 아래 사이트 접속해 다운로드 가능 http://jquery.com jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with a..

1. 폼(form) 태그 : 기본형 : 폼 요소들 태그의 속성 : 속성 설명 method 사용자가 입력한 내영을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다. Method에서 사용할 수 있는 속성값은 get, post 이다. - get : 데이터를 256~4096 byte까지만 서버로 넘길 수 있음. 주소표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있다 - post : 입력한 내용의 길이에 제한을 받지 않고, 사용자가 입력한 내용도 드러나지 않는다 name 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다 action 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다 target Action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다 사용자가..

1. 태그 : 이미지 삽입 width 속성 : 이미지 크기(폭) 조정 height 속성 : 이미지 크기(높이) 조정 src 속성: 웹 문서 파일의 위치를 기준으로 이미지 경로 지정. alt 속성 : 이미지를 대체하는 텍스트 설정(이미지를 표시할 수 없을 때) title 속성 : 마우스를 올려두었을 때 보여줄 풍선도움말 설정 width 나 height 중 1개만 지정해도 나머지 속성은 자동으로 비율이 계산됨 ※ 태그 사용 예시 단위 설명 예시 % 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기 결정 width = "50%" px 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시 width = "150" 2. 태그 : 오디오 삽입/ 태그 : 비디오 삽입 태그 기본형 : 태그 기본형 : 태그, 태그의..

1. 표의 구성 요소 : 행(row) 와 열(column) 2. 표를 만드는 태그 : 표 제목 ( border속성 사용해 테두리 두께 설정 가능, 기본값 0) : 표 생성 : 행 : 셀 : 제목 셀 (표의 첫 번째 줄을 head로 강조하고자 할때 사용 + 가운데 정렬) (사용 예시) 표의 제목 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 .... ※ 실행결과 HTML 삽입 미리보기할 수 없는 소스 3. 표의 구조 정의하기 표의 구조를 "제목", "본문", "요약" 부분으로 나눈다 , , 태그 사용 웹 브라우저 화면에서 보이지는 않지만, 화면 낭독기나 자바스크립트 등에서 읽을 수 있다 표의 본문이 길 경우 자바스크립트를 이용해 제목과 바닥 부분을 고정하고 본문만 스크롤 가능하도록 할 수..

1. , 태그 : ● 순서가 있는 목록 태그. ● 기본형 : 항목1 항목2 .... .... 항목n ● 각 항목 앞에 숫자가 붙여짐 ● type 속성 : 순서 목록에 붙여지는 숫자 종류 지정 1 : 숫자(기본값) a : 영소문자 A : 영대문자 i : 로마 소문자 I : 로마 대문자 ● start 속성 : 목록의 시작 번호 수 2. , 태그 : ● 순서가 없는 목록 태그 ● 사용법은 태그와 동일하다. ● type 속성 : 순서 목록에 붙여지는 도형 종류 지정 disc :속이 채워진 원, ● circle : 속이 빈 원, ○ quare : 채워진 사각형, ■ 항목 1 항목 2 .... 항목 n 3. , , 태그 : ● 설명 목록 태그/ 제목(이름) 과 값(설명) 형태로 되어 있다 ● 태그 : 제목(이름) ..