프로그래밍&IT (155) 썸네일형 리스트형 [Fast Campus , React] 1. React란? React란? 사용자 인터페이스 (UI)를 만들기 위한 Javascript 라이브러리 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용. Vue.js나 Angular.js와 많이 비교하게 된다 Angular, Vue는 프레임워크. React는 라이브러리 React 나무위키 링크 Framework vs Library 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다 라이브러리는 어떠한 특정 기능들을 모듈화 해놓은 것 React가 라이브러리인 이유는 전적으로 UI를 렌더링 하는데 관여하기 때문 화면을 바꾸는 라우팅은 react-router-dom 모듈을 사용 상태 관리를 위해선 redux, mobx 등 빌드를 위해선 webpack, npm 등 테스트를 위해서는 Jest, Mocha 등 .. [Database] 데이터베이스 정규화. (1,2,3 정규화) 간만에(?) SQL Server를 다시 공부하게 되면서, 기존에 애매하게 공부했던 내용부터 다시 공부하기로 했다. 정규화 (Normalization) 데이터베이스에서 정규화(Normalization) 란, "각 각의 엔티티가 하나의 릴레이션에 의해 표현된다"라는 것을 보장하는 과정. 기본 목표는 "테이블 간에 중복된 데이터의 존재를 허용하지 않는다"는것. 제대로 정규화된 데이터베이스인 경우, 데이터를 변경하더라도 논리적인문제가 발생하지 않으며 완벽성을 손상시키지 않고서도 데이터 중복을 최소한으로 유지할 수 있다. 무결성 (Integrity)을 유지. DB의 저쟝용량 역시 줄일 수 있다. 이를 위해 테이블을 분해하는 정규화 단계에 대해서, Codd박사가 제시한 1,2,3 정규화에 대해 알아보면 1정규화 릴.. PL/SQL 블록 구조 이번 프로젝트에 투입되면서 오라클 특히 프로시저 부분을 다시 만지게 되었다. Stored Procedure 자주 실행해야 하는 업무 흐름을 미리 Database에 저장해 두고 필요할 때마다 호출해 실행 기본적인 Procedure의 block 구조 CREATE [OR REPLACE] PROCEDURE 프로시저_이름 ( 변수 1 [MODE (IN/OUT) ] data-type 1 , ... 변수 n [MODE (IN/OUT) ] data-type n ) IS [사용할 변수 선언부] BEGIN 로직 처리/실행 [EXCEPTION] [예외 처리부] END; 1. CREATE OR REPLACE PROCEDURE 프로시져_이름 - 프로시저 선언부 보통은 [OR REPLACE] 부분을 붙이고 한다. 2. 프로시저의.. RNR? R&R? 프로젝트를 투입하고 업무 미팅을 진행하다보면 RNR (R&R)이란 표현을 듣게 된다. Role & Responsibility 즉, 프로젝트 수행시 역할 & 책임 소재의 약어이다. [Ajax (Asynchronous Javascript and XML)] 비동기 방식으로 자바스크립트를 이용해, 화면 전환없이(전체 페이지가 깜빡임없이..) 서버에 자료 (XML , HTML , JSON, 텍스트 유형 등)를 요청/수신할 때. 종류 설명 load() 외부 콘텐츠 가져올 때 사용한다. $.ajax() 데이터를 서버에 GET , POST 방식으로 전송이 가능한 데이터를 요청할 수 있는 통합적인 메서드. $.post() , $.get() , $.getJSON() 메서드의 기능을 하나로 합쳐놓은 거라 볼 수 있다. $.post() 데이터를 서버에 POST 방식으로 데이터를 송수신할 때 $.get() 데이터를 서버에 GET 방식 방식으로 데이터를 송수신할 때 $.getJSON() GET 방식으로 데이터를 전송한 이후에, 서버측 응답을 JSON 형식으로 받을 때 $.ge.. [JQuery] 효과 / 효과 제어 메서드 효과 메서드의 종류 종류 설명 hide() 노출되어 있는 요소를 숨긴다 show() 숨겨져있던 요소를 보여준다. toggle() 숨겨져있던 요소는 보여지고, 노출되어 있던 요소는 숨긴다. fadeIn() 숨겨져있던 요소가 점점 선명해지면서 보여진다 fadeOut() 노출되어 있던 요소가 점점 투명해지면서 숨겨진다. fadeToggle() 노출되어 있던 요소는 점점 투명해지며 사라지고, 사라져 있던 요소는 선명해지면서 보여진다. fadeTo() 노출되어 있던 요소에 투명도를 지정한 만큼 숨긴다 slideDown() 숨겨져 있던 요소가 밑으로 펼쳐지며 보여진다. slideUp() 숨겨져 있던 요소를 위로 접으며 숨긴다. slideToggle() 숨겨져 있던 요소는아래로 펼쳐지며 보여지고, 보여지고 있던 요소.. [JQuery] 이벤트 / 그룹 이벤트 등록 메서드 이벤트 등록 메서드 구분 종류 설명 로딩 이벤트 load() 선택한 이미지나 프레임 요소에 연동된 소스가 로딩이 완료된 후 이벤트가 발생 ready() 지정한 html 문서 객체가 로딩이 완료된 후 이벤트가 발생 마우스 이벤트 click() 선택한 요소 클릭했을 때 이벤트 발생 dbclick() 더블 클릭했을 때 mouseout() 선택한 요소의 영역에서 마우스가 벗어났을 때 이벤트 발생. 하위 요소의 영향을 받는다 mouseover() 선택한 요소의 영역에 마우스를 올렸을 때 hover() 마우스를 올렸을 때와 벗어났을 때 각각 이벤트 발생 [over + out] mousedown() 선택한 요소에서 마우스 버튼 눌렀을 때 mouseup() 마우스 버튼을 눌렀다가 떼었을 때 mouseenter() 선택.. [JQuery] 속성 / 요소 수치 조작 / 격체 편집 메서드들 속성 조작 메서드 종류 사용법 설명 html() $("요소선택").html() $("요소선택").html("새로운 요소") 선택한 요소에 하위 요소들을 반환하거나, 새 요소로 변환 text() $("요소선택").text() $("요소선택").text("새 텍스트") 선택한 요소에 포함하는 텍스트를 반환하거나 새 텍스트로 변환 css("속성") css("속성", "값") $("요소선택").css("color") $("요소선택").css("color", "blue") 선택한 요소에 CSS 속성값을 반환 또는 변환 removeAttr("속성") $("요소선택").removeAttr("title") 지정한 속성을 삭제 attr("속성") attr("속성", "값") $("요소선택").attr("href") $(.. [JQuery] 그외 선택자 그 외 선택자 콘텐츠 탐색 선택자 요소나 속성의 포함 여부에 따라 특정요소를 선택. 종류 사용법 설명 $("요소선택:contains(텍스트)") $("li:contains("내용")") 요소 중 "내용"이라는 텍스트를 포함하는 요소만 선택 $("요소선택").contents() $("p").contents() 선택한 요소의 하위 요소 중 가장 가까운 하위 요소 선택 $("요소선택:has(요소명)") $("요소선택").has(요소명) $("li:has("span")") 요소 중 을 포함하는 요소만 선택 $("요소선택:not(:제외요소)") $("요소선택").not(:제외요소) $("li:not(:first)") 요소 중 첫번째 요소만 제외하고 선택 $("요소선택").filter(필터요소) $("li").fi.. [JQuery] 탐색 선택자 / 속성 선택자 탐색 선택자 직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 선택할 때. 위치 탐색 선택자 : 요소의 위치를 기준으로 선택 속성 탐색 선택자 : 요소의 지정된 속성을 기준으로 선택. 위치 탐색 선택자 종류 요소의 위치나 인덱스 번호를 이용해 특정 요소를 좀 더 정확하게 선택. 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first() $("li:first") $("li").first() 전체 요소 중 첫번째 요소만 선택 $("요소 선택:last") $("요소 선택").last() $("li:last") $("li").last() 전체 요소 중 마지막 요소만 선택 $("요소 선택:odd") $("li:odd") 요소 그룹 중 홀수번째 요소만 선택 $("요소 선.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 16 다음
