프로젝트 60

리액트 기초(하나하나 따라해보기) 7편

이렇게 반복되는 리스트를 출력할때 언제나 하드코딩으로 할 수 없다. 그래서 반복문을 자주 사용하게 되는데. 리액트에서 반복문을 사용하는 방법은 map을 사용한다. map 을 사용하는 문법이다. 사용한 state 의 변수이름을 적는다. 나는 상단에 변수로 이런 State 를 만들었기에 반복이라는 이름을 가진 변수가 생성되었다. 여기서 반복.map 을 찍으면 function 내부에서 반복에 있는 배열의 길이만큼 반복시킨다. function 내부 매개변수로 a 만을 써도 되고, a , i 를 같이 써도 되는데. i 는 0인덱스부터 하나씩 차례대로 늘어나는 숫자이고 a 는 각 배열의 각각의 값들을 차례로 찍어준다. 따라서 나같은 경우는 {반복[i]} 를 넣었는데 {a} 이렇게 넣어도 같은 결과값이 찍힌다. 실행..

프로젝트/React 2022.10.09

리액트 기초(하나하나 따라해보기) 6편

동적인 UI 만들어보기 모달을 만들었으니 이제 글을 클릭하면 모달창이 뜨게 만들고 싶다. 이게 기본 모습이고 여기서 글제목 : 병아리 간식 추천을 클릭하면 아래 모달창이 생기게 하고싶다. 그러면 onclick 메서드에 모달창이 뜨게 해주면 된다. html 안에서 if 문은 작동하지 않기 때문에 조건식은 삼항 연산자를 이용하여 작성해준다. 전시간에 만든 모달이 있기 때문에 가져다가 쓰고 싶으면 이렇게 가져가서 사용하면 된다고 했었다. 그렇기 때문에 useState 를 사용하여 modal 이라는 변수에 true를 할당해주고 modal 이 false 이면 모달창이 보이고 아니면 아무것도 뜨지 않게 만들어준다. 첫 상태는 true 인 상태이기 때문에 npm start로 실행하면 아무것도 뜨지 않는다. 하지만 글..

프로젝트/React 2022.10.08

리액트 기초(하나하나 따라해보기) 5편

HTML 삽입 미리보기할 수 없는 소스 모달창 띄워보기 모달창은 이런식으로 페이지 위에 덧씌워서 보여주는 페이지이다. 페이지 이동이 일어나지 않고 해당 페이지에서 띄워주는 것이기 때문에 하나의 html 파일 위에서 코드를 작성하게 된다. 따라서 코드 압축에 유리하다. 모달창을 사용하기 위해 App.js 파일에는 이런 코드를 추가하고 해당 css 에는 이러한 코드를 추가한다. 그뒤 컨트롤 에스를 눌러 저장하면 이러한 화면을 볼 수 있다. 이제 여기서 컴포넌트 문법이라는게 생기는데 제목 날짜 상세내용 이 코드를 이렇게 줄인다. 이렇게 줄일 수 있는데 바로 줄여서 쓰면 동작하지 않고 function App(){} 이 함수 바깥에 Modal 이름이라는 이름을 가진 함수를 추가해주고 리턴문 안에 출력하고 싶은 코..

프로젝트/React 2022.10.02

트리거를 이용한 실습문제(1번)

트리거를 이용한 문제 EMP 테이블에 데이터가 입력되면 EMP_OLD 테이블이 있다면 이 테이블에 INSERT 없다면 EMP_OLD 테이블을 만들고 이 테이블에 INSERT 하는 행 레벨 트리거를 작성하시오. (입력되는 SAL 값이 3000보다 큰 경우에만 트리거가 동작하도록) CREATE OR REPLACE TRIGGER homework_trigger AFTER INSERT ON EMP FOR EACH ROW WHEN (new.sal > 3000) /*트리거 작동 조건*/ DECLARE is_tbl varchar2(20) := null; v_sql1 varchar2(500); v_sql2 varchar2(1000); v_sql3 varchar2(1000); BEGIN BEGIN SELECT table_..

[ORACLE] 트리거 사용 예시

트리거 기본 문법 CREATE [OR REPLACE] TRIGGER 트리거이름 [AFTER/BEFORE] [update or delete] ON 테이블 이름 [FOR EACH ROW] /*행 트리거 여부를 결정, DML의 영향을 받는 레코드마다 트리거 동작*/ [WHEN 조건] DECLARE 선언부 BEGIN 트리거 실행코드 EXCEPTION END; 이러한 문법을 가지고 있는 트리거. 아래 예시 코드로 어떻게 쓰이는 지 확인. 기본 트리거 예시코드 아래 코드는 주말 오전 10시에서 오후 6시 사이 EMP 테이블에 DML 사용 못하게 하는 트리거이다. CREATE OR REPLACE TRIGGER emp_dml_YHY BEFORE INSERT OR UPDATE OR DELETE ON emp BEGIN I..

[ORACLE] 프로시저 기본 사용 예시

프로시저 기본 문법 물류업무를 하다보니 데이터베이스 SQL 이 가장 중요하다는 것을 깨달았고, 다중 조인은 기본에 프로시저 트리거를 모르면 업무가 불가능하다는 것을 깨달았다. 그래서 내가 이해할겸 프로시저 문법을 정리한다. 스칼라 변수 선언 V_EMPNO NUMBER(4) := 100; V_ENAME VARCHAR2(20) := "lks"; 여기서 NUMBER(p, s ) 형식에 대해 추가 설명을 하겠다. p 는 최대 유효숫자 자릿수를 나타낸다. 유효숫자란 0이아닌 수가 몇개인지를 뜻한다. s 는 소수점 기준 자리수를 나타낸다. 예시로 123.74라는 숫자가 있다. 이 숫자에 대해 타입지정을 하나씩 해보겠다. NUMBER(3) 으로 하면 결과는 124가 찍힌다. 이유는 P는 3으로 명시했지만 S 는 명시..

[ORACLE] 오라클 데이터 복구 방법(TIMESTAMP)

오라클 작업중 실수로 데이터를 날렸을 때 방법이다. 오라클 9버전부터 FLASH BACK 이라는 기능이 추가 됬는데. 휴지통 개념이라고 생각하면 된다. 사용방법은 다음과 같다. SELECT * FROM test_table AS OF TIMESTAMP(SYSTIMESTAMP - INTERVAL '10' MINUTE) WHERE id = '1234'; 단위는 SECOND, MINUTE, HOUR, DAY 등이 있고 원하는 단위로 바꿔서 쓸 수 있다.

리액트 기초(하나하나 따라해보기) 4편

버튼을 누르면 첫 글 제목이 바뀌는 기능을 추가해보자. 이렇게 20번째 줄부터 28 번쨰 줄까지 버튼을 넣었다. 그래서 화면에는 이렇게 나왔다. 하지만 버튼을 눌러도 변화하지 않았다. 그래서 코드를 이렇게 고치면 정상적으로 바뀐다. 그전에 수정이 안됬던 이유는 자바 스크립트에서는 copy 라는 변수에 a 를 새로 담는 게 아니라 a라는 데이터가 있는 영역을 copy 가 가르키는 화살표가 되기 때문이다. 그래서 코드상으로 같은 데이터라고 인식이 되는 것이고 결국 같은 데이터를 가르키고 있어서 수정이 이루어지지 않았던 것이다. 하지만 ...으로 묶어버리면 가르키는 대상을 새롭게 생성해서 수정이 가능하다. 쉽게 설명하자면 array 나 object 는 사용할 때 ... 으로 묶어서 사용하고 숫자는 그냥 사용해..

프로젝트/React 2022.09.26

[ORACLE] 프로시저와 트리거 차이

프로시저 저장 프로시저는 미리 데이터베이스 서버에 SQL 명령을 두고 프로시저를 실행하여 SQL 명령을 실행할 수 있도록한다. 프로시저 안에는 제어 명령이나 반복문을 사용할 수 있기에 프로그램도 만들 수 있다. 트리거 트리거는 테이블에 작성한다. 어떤 테이블에 행을 삽입한다든지, 행을 변경, 삭제했을 때 트리거가 설정되어 있으면, 트리거의 SQL 문이 자동으로 실행. 프로시저 트리거 CREATE PROCEDURE 문법 CREATE TRIGGER 문법 생성시 소스코드 실행코드 생성 생성시 소스코드 실행코드 생성 EXECUTE 명령어로 실행 생성 후 자동실행 COMMIT, ROLLBACK 실행가능 COMMIT, ROLLBACK 실행 불가능

[ORACLE] 데이터베이스 문제 사이트 추천

데이터베이스 실력을 끌어올리기 위한 사이트 모음 https://www.w3schools.com/sql/trysql.asp?filename=trysql_select_all SQL Tryit Editor v1.6 WebSQL stores a Database locally, on the user's computer. Each user gets their own Database object. WebSQL is supported in Chrome, Safari, Opera, and Edge(79). If you use another browser you will still be able to use our Try SQL Editor, but a different ver www.w3schools.com 1. 이미 ..