Ellen's Web Note

state란? - 컴포넌트 내부에서 바뀔 수 있는 값. - 부모 컴포넌트에서 state를 props로 넘겨줄 경우 하위 컴포넌트는 state를 읽는 용도로만 사용할 수 있음. - 부모 컴포넌트로부터 넘겨받은 state값을 수정해야하는 경우 부모 컴포넌트에서 직접 state를 수정해야 함. - 컴포넌트 타입에 따라 state 사용 방법이 다름. 1. 클래스형 컴포넌트 (state) - this.state에서 state값을 초기화 하고, 값을 변경할 때에는 this.setState를 사용. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 ..

컴포넌트(component)란? * 재사용을 위한 특정 부분(기능)의 코드뭉치(모듈)의 단위 이미지와 같은 레이아웃을 생성할 때 일정관리(헤더) 컴포넌트, 검색 컴포넌트, 일정역역 컴포넌트, 각 일정(input 라인) 컴포넌트 총 4개의 컴포넌트로 구성됨. 컴포넌트 선언방식 1. 함수형 1. 클래스형 컴포넌트보다 선언이 쉬움. 2. 클래스형 컴포넌트보다 메모리가 가벼움. 3. 빌드했을 때 배포 파일이 클래스형 컴포넌트보다 작음. 4. React Hooks가 도입되면서 함수형에서도 state와 라이프사이클 사용이 가능해짐. 2. 클래스형 1. state기능 및 라이프사이클 기능을 사용할 수 있음. 2. 임의의 메서드를 정의할 수 있음. 3. render()함수가 꼭 있어야 하고, 그 안에서 JSX를 반환해..

1. ESLint - 문법 검사 도구 - warning은 초록색, error는 빨간색 밑줄 - 밑줄이 있는 위치에서 Alt+F8을 입력하면 오류내용 표시 2. Prettier - 코드 스타일 자동정리 도구 - 들여쓰기 적용, 세미콜론(;)자동 추가, 작은 따옴표(')를 큰 따옴표(")로 변경 등 - 적용방법 : VS Code에서 F1 -> 'fotmat Document' -> Enter 또는 VS Code설정에서 단축키 지정(file -> settings -> Text Editor -> Formatting -> Format On Save 체크)

script 모듈 이전의 브라우저에서는 모듈의 개념이 없어서 브라우저에서는 필요한 모듈들을 네트워크를 통해 비동기적으로 다운로드 받고 나서야 사용이 가능했다. 코드를 작성할때에도 파일의 선언 순서에 따라 충돌이 발생할 수도 있기 때문에 주의가 필요했다. ES6 Module 2015년 JavaScript의 표준 모듈 시스템이 명세되었으나 일부 구버전 브라우저(IE)에서는 모듈이 나눠진 스크립트를 실행하지 못하여 스크립트를 처리하는 별도의 라이브러리가 필요. 번들러(bundler) 번들러는 파일(모듈)들을 하나로 만들어서 브라우저에서 실행 가능한 환경을 만들어주는 도구. (런타임에 모듈을 가져오는 모듈 로더에 반해 빌드 시 모듈을 묶어버리기 때문에 추가적인 로드가 필요 없음) 번들러 도구 : webpack,..

리액트 프로젝트 만들기 yarn create react-app 'project_name' npm create-react-app 'project_name' 디렉터리 구조 node_modules - Node.js 기본 도구 모음 - npm, yarn으로 설치한 패키지 파일 모음. public - 실제 화면에 보여지는 파일 - Index.html : 화면에 출력되는 HTML : jsx에서 리턴한 가상 DOM을 에 추가해서 실행. - manifest.json : 앱의 홈화면에 보여지는 아이콘, 이름 등을 설정 - Robots.txt : 사이트맵 설정 src - React를 구현할 폴더 - Index.js : 프로젝트 실행 시 제일 처음 접근하는 파일. 경로(route) 설정 - App.js : 프로젝트 실행 시..

아래의 query로 읽으면 된다. 리스트 전체를가져와 1부터 번호(idx)를 매기고, idx를 조건으로 가져오는 방법. select * from (select row_number() over (order by idx)as sn, * from table ) data where sn between #{start_sn} and #{last_sn} sql.xml파일. select * from (select row_number() over ) data where sn between #{start_sn} and #{last_sn} (order by idx)as sn, * from table 페이징처리도 하지만 동일한 리스트를 엑셀파일로 다운받는 경우, 부분출력 또는 전체 출력도 해야하기 때문에 start_sn과 l..

See the Pen ZEEmYxM by wonmi (@ellen_b) on CodePen. ajax 통신할 때 효과를 주려는 경우 https://ellen92.tistory.com/40

ajax 선언 myApp.service('myService',['$http',function ($http){ this.requestAjax = function(url, param, type, succ){ $.ajax({ method: type, url: url, data: param, async : false, crossDomain: true, beforeSend : function(xhr){ xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8"); xhr.setRequestHeader("Ajax", "true"); }, success:function(data, status){ succ(data, sta..