본문 바로가기

분류 전체보기189

[React] 복잡한 컴포넌트 제작 아무리 복잡한 사용자 인터페이스래도 단순하고, 이해하기 쉽게 만들수 있는 체계적인 방법이 있다. >> 1. 주요 비주얼 요소의 식별 >> 쪼개기 2. 컴포넌트로 만들 대상의 선별 >> 식별한 비주얼 요소 중에 어떤 것을 컴포넌트로 만들지 따져봐야 한다. 모든 비주얼 요소를 컴포넌트로 만들 필요는 없으며, 반대로 극도로 복잡한 몇개의 컴포넌트만 만드는것도 좋지 않다. >> 하나의 컴포넌트는 하나의 역할만 해야 한다. 3. 총 3개의 컴포넌트로 나눴다. 전체의 큰 Frame역할인 Card, 색상을 보여주는 Square, 글씨를 보여주는 Label 이제 하나씩 채워 가보도록 하자 1. 프레임 역할을 하는 Card를 채워보자 >> cardStyle 객체를 생성하여 div 에 Style적용을 시켜주었다. 다음으로.. 2022. 11. 29.
[React] 리액트 스타일링 위와 같이 div div div 엘리먼트에 스타일을 적용하게 되면 다른 div div div 에도 적용이 된다 따라서 리액트가 생성하는 HTML을 좀더 쉽게 스타일링 할수 있는 방법을 사용해 보도록 하자 1. 안쪽 div 엘리먼트에 letter라는 값의 class 속성을 갖게 하자 >> 여기서 보면 class 가 아닌 className을 사용한것을 주의 깊게 보자 2. div div div 에 줬던 CSS 셀렉터를 .letter로 변경하자 ** 리액트 방식의 스타일링 - 리액트는 CSS를 사용하지 않는 인라인 방식의 스타일링을 선호한다. - 컴포넌트 안에 스타일을 지정하는 방법은 CSS 속성과 값을 콘텐츠로 갖는 객체를 정의 하는 것이다. 1. 스타일 객체 만들기 2. 만든 객체를 스타일링 하고자 하는 .. 2022. 11. 29.
[React] React Component ReactComponent 를 사용 하기 위한 방법중 Class를 사용하는 방식으로 기본 틀을 보여준다 Class에서의 render는 ReactDOM.render() 에서와 동일하게 JSX를 처리할수 있는 책임이 있다. render(){}에서 Hello, componentized world! 를 리턴하도록 나타내어 주고 있다. 이제이 컴포넌트를 사용하려면 호출만 해주면 된다. ReactDOM.render() 메서드를 통해서 호출하는 방법이 특이한데, 클래스를 태그 안에 감싸 주면된다. ================================================================ Hello, componentized world! 에서 componentized world 부분을 인자로 .. 2022. 11. 29.
[React] 리액트의 기본형 리액트를 사용하기 위해서 react, react-dom, babel을 import 해줘야 한다. 기본적인 리액트 기본 틀은 다음과 같다. 리액트에서 화면에 출력해주기 위해서는 ReactDOM.render( 1, 2) 메서드를 사용하게 된다. 매개변수 1. 화면에 출력하고 싶은 html(jsx) 2. 해당 jsx를 렌더링 해 보여줄 DOM의 위치 보여주고자 하는 html 은 SangNamja 태그이며, 보여줄 위치는 ID=CONTAINER인 태그이다. 2022. 11. 29.
[DB/ORACLE] TOP-N QUERY -- TOP-N QUERY : 상위 N 개의 행을 조회하는 쿼리이다. -- 3가지 방법으로, ROWNUM 방식, 분석함수 방식, ROW LIMITING 절을 알아보자 --ROWNUM 방식 : ORDER BY 절로 행을 정렬하고, 정렬된 행을 ROWNUM 슈도 칼럼으로 제한한다. SELECT EMPNO, SAL, ROWNUM AS RN FROM EMP; -- ROWNUM 슈도 칼럼은 1부터 시작하고 행이 반환될때 마다 순번이 증가하기 때문에 ROWNUM = 2는 항상 FALSE이다. SELECT EMPNO, SAL, ROWNUM AS RN FROM EMP WHERE ROWNUM = 2; -- ROWNUM 슈도 칼럼은 HAVING -> SELECT -> ORDER BY 순서.. 2022. 11. 29.
[DB/ORACLE] 분석함수 및 활용(선형 보간, 선분이력) --NTILE() 으로 나눈 그룹 SELECT C1, COUNT(*) AS C2, SUM(SAL) AS C3 FROM (SELECT SAL, NTILE(4) OVER (ORDER BY SAL) AS C1 FROM EMP WHERE DEPTNO = 30) GROUP BY C1; --CEIL() 으로 나눈 그룹 SELECT C1, COUNT(*) AS C2, SUM(SAL) AS C3 FROM (SELECT SAL, CEIL( ROW_NUMBER() OVER (ORDER BY SAL, EMPNO) / (COUNT(*) OVER() / 4 )) AS C1 FROM EMP WHERE DEPTNO = 30) GROUP BY C1; --ㅡMOD() 으로 나눈 그룹 SELECT C1, COUNT(*) AS C2, S.. 2022. 11. 28.
[DB/ORACLE] 분석함수 -- 분석함수 -- 집계 함수는 행 그룹으로 값을 집계하고 // 행 그룹별로 단일 행을 반환 하기 때문에 데이터 집합이 변경됨 -- 분석 함수는 파티션과 윈도우로 값을 집계한다. // 데이터 집합을 변경하지 않고 값을 집계하므로, 원본값과 집계 값을 함께 분석할수 있다. SELECT A.EMPNO, A.SAL, B.SAL AS C1, A.SAL / B.SAL AS C2 FROM EMP A , (SELECT DEPTNO, SUM(SAL) AS SAL FROM EMP GROUP BY DEPTNO ) B WHERE A.DEPTNO = 10 AND B.DEPTNO = A.DEPTNO ORDER BY 1; -- 분석 함수를 사용하면 EMP 테이블을 1번만 조회하면 된다. -- SUM(), RATIO_TO_REPO.. 2022. 11. 25.
[JAVASCRIPT] SCOPE / $(document).ready() 호출 순서 ! a1, a111, a11 순서 대로 호출되었다. JS는 위에서 아래로 순서대로 호출된다. 그러면 a1, a11, a111 순서대로 호출되어야 하는데 a1, a111, a11순서대로 시작되었다. 즉 $(document).ready(function(){ }) 는 모든 DOM이 로드 된 후에 실행된다는 것을 확인할 수 있다. 또한 $(document).ready(function(){ }) 범위 내에서 Scope가 document로 나타나는 것을 확인 할 수 있다. $(document).ready(function(){ }) 범위 안에서 $(document).ready(function(){ }) 밖에 외부에서 호출된 함수를 실행할경우에 Scope가 Window(Global Scope) 로써 매개변수.. 2022. 9. 25.
[Linux/C] 배열은 포인터다! 비교 조건 \ 비교 대상 포인터 배열 이름 있음 있음 나타내는것 메모리 주소 메모리 주소 변수인가 상수인가 변수 상수 * 배열 이름은 = 상수 포인터이다. arr ==> 주소를 나타내고 해당 주소를 ptr에 넣어주므로 arr과 ptr은 같아진다. 주소를 나타내므로 포인터의 연산 해당 포인터의 선언된 타입에 따라 증감하면 해당 바이트 크기만큼 증감된다. arr[ i ] == *(a+i) 으로 나타낼수있다. 문자열은 문자열 배열은 변수이고 ==> char str1[5] = "abcd"; -> 변수 str1 문자열 문자는 상수이다 ==> char *str1 = "abcd"; -> 상수 *str1 또한 문자열 상수의 경우는 "두개의 문자열 상수가 완전히 똑같을 경우" 문자열은 한개의 메모리 공간에 저장되고, 두.. 2022. 9. 13.
[C/Linux] 배열의 선언 배열을 선언할때 초기화를 바로 해주면 해당 배열의 크기를 지정해주지 않아도 해당 초기화를 통해서 배열의 크기가 정해진다. int arry[] = {1,2,3,4,5}; 로 선언과 동시에 초기화 하고있으므로 int arry[5] = null; arry[0] = 1, arry[1] = 2, arry[2] = 3, arry[3] = 4,arry[4] = 5 와 동일하다. 또한 C언어에서는 arr.length 라는 함수가 없으므로 arry 의 size를 구하여 해당 int 타입의 size로 나눠주면 해당 배열의 길이를 파악할 수 있다. sizeof(arry) / size(int) 문자열 배열같은 경우는 char[] 로 나타낼수 있다. 또한 해당 문자열을 나타낼 떄는 %c를 통해소 char문자 한개 한개 요소를 .. 2022. 9. 12.

티스토리툴바