거니의 velog

2. ref 사용 * 이제 프로젝트에서 ref를 사용해 보자. ref를 사용하는 방법은 두 가지이다. (1) 콜백 함수를 통한 ref 설정 * ref를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것이다. ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 된다. 이 콜백 함수는 ref 값을 파라미터로 전달받는다. 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 준다. * 콜백 함수 사용 예시 {this.input=ref}} /> * 이렇게 하면 앞으로 this.input은 input 요소의 DOM을 가리킨다. ref의 이름은 원하는 것으로 자유롭게 지정할 수 있다. DOM 타입과 관계없이 this.superman = ref 처럼 마음대로 지정한..

* 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다.* DOM 요소의 id * 특정 DOM 요소에 어떤 작업을 해야 할 때 이렇게 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 우리가 다루는 리액트 프로젝트에서 사용하는 public/index.html 파일에도 id가 root인 div 요소가 있다. * 그리고 src/index.js 파일 중에는 id가 root인 요소에 리액트 컴포넌트를 렌더링하라는 코드가 있다.const root = ReactDOM.createRoot(document.getElementById('root'));* 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 ..

* 사진 미리보기 기능(파일 업로드/다운로드 아님) [pom.xml] com.google.code.gson gson 2.8.2 package kr.or.ddit.controller.crud.notice; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.io.PrintWriter; import java.util.UUID; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.lan..

2. 예제로 이벤트 핸들링 익히기 * 그럼 예제로 이벤트 핸들링을 익혀 보자. 앞으로 실습할 각 단계는 다음과 같다. (1) 컴포넌트 생성 및 불러오기 [1] 컴포넌트 생성 * 실습을 시작하기에 앞서 새 컴포넌트를 만들어 보자. src 디렉터리 내부에 EventPractice.js 파일을 만들자. 그리고 컴포넌트 초기 코드(rcc)를 작성하자. import React, { Component } from 'react'; class EventPractice extends Component { render() { return ( 이벤트 연습 ); } } export default EventPractice; [2] App.js에서 EventPractice 렌더링 * App 컴포넌트에서 EventPractice ..

* 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행한다. form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다. HTML을 사용한 적이 있다면 매우 익숙할 것이다. HTML에서 DOM 요소에 이벤트를 설정하는 방법을 한번 살펴보자.* 다음 코드를 HTML 파일로 저장하여(프로젝트 디렉터리 외부에 저장하자) 웹 브라우저로 열어보거나, JSBin에서 코드를 입력하여 테스트해 보자. 여기서는 JSBin을 사용해 보자.https://jsbin.com/?html,output JS BinSample of the bin:jsbin.com..

package kr.or.ddit.controller.tiles; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import lombok.extern.slf4j.Slf4j; @Slf4j @Controller @RequestMapping public class TilesSettingController { /* * [ 부트스트랩을 이용한 CRUD를 진행해 보자! ] * * 1. Tiles란? * * 어떤 JSP를 템플릿으로 사용하고 템플릿의 각 영역을 어떤 내용을 채울지에 대한 정보를 설정한다. * 하나의 화면을 만들다보면 공통적이고 반복적으로 생성해야 ..

-- notice table 생성 create table notice( bo_no number(8) not null, bo_title VARCHAR2(300) not null, bo_content VARCHAR2(4000) not null, bo_writer VARCHAR2(150) not null, bo_date date not null, bo_hit number(8) DEFAULT 0 null, CONSTRAINT pk_notice PRIMARY KEY(bo_no) ); -- notice sequence 생성 create sequence seq_notice increment by 1 start with 1 nocache; -- noticefile table 생성 create table noticefi..

4. state * 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 한다. 예를 들어 현재 상황에서는 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꾸어 주어야 값이 변경될 수 있는 것이다. 반면 MyComponent에서는 전달받은 name 값을 직접 바꿀 수 없다. * 리액트에서는 두 가지 종류의 state가 있다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state이다. (1)..

3. props * props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(현 상황에서는 App 컴포넌트가 부모 컴포넌트이다)에서 설정할 수 있다. (1) JSX 내부에서 props 렌더링 * 우선 MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정해 보자. props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다. props를 렌더링할 때 이전에 배웠던 것처럼 JSX 내부에서 { } 기호로 감싸 주면 된다. import React from 'react'; const MyComponent = (props) => { return 안녕하세요, 제..

* 타일즈 관련 CRUD package kr.or.ddit.controller.tiles; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import lombok.extern.slf4j.Slf4j; @Slf4j @Controller @RequestMapping public class TilesSettingController { /* * [ 부트스트랩을 이용한 CRUD를 진행해 보자! ] * * 1. Tiles란? * * 어떤 JSP를 템플릿으로 사용하고 템플릿의 각 영역을 어떤 내용을 채울지에 대한 정보를 설정한다. * 하나의 화면을 만들다보면 공통적..