거니의 velog

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를 템플릿으로 사용하고 템플릿의 각 영역을 어떤 내용을 채울지에 대한 정보를 설정한다. * 하나의 화면을 만들다보면 공통적..

* 리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러 가지 컴포넌트로 구성되어 있다. 예를 들어 뒤에서 만들어 볼 일정 관리 애플리케이션을 미리 살펴보자. * 위 프로젝트는 총 네 가지 컴포넌트를 사용하여 구성했다. 먼저 전체적인 틀을 잡아 주는 TodoTemplate 컴포넌트이다. 이 컴포넌트는 현재 화면의 중앙에 있는 사각형 레이아웃의 역할을 하고 있다. 그리고 새로운 항목을 추가할 수 있는 TodoInput 컴포넌트이다. 위 화면에서는 검정색 영역이 바로 TodoInput이다. 그리고 할 일 항목을 여러 개 보여 주는 TodoList 컴포넌트이다. 마지막으로 TodoList에서 각 항목을 보여 주기 위해 사용되는 TodoItem 컴포넌트이다. * 컴포넌트의 기..

5. ESLint와 Prettier 적용하기 (1) ESLint * ESLint는 문법 검사 도구이고, Prettier는 코드 스타일 자동 정리 도구이다. 해당 도구는 이전에 설치했으며, 이 절에서는 사용하는 방법을 간략하게 알아보자. 혹 아직 설치하지 않았다면 VS Code 마켓플레이스에서 ESLint와 Prettier를 설치하자. * ESLint는 코드를 작성할 때 실수를 하면 에러 혹은 경고 메시지를 VS Code 에디터에서 바로 확인할 수 있게 해준다. * 예를 들어 주석을 잘못 입력해서 입력한 내용이 화면에 그대로 나오고 있는 상황이라면 다음과 같이 에디터에서 확인할 수 있다. * 에디터 하단에 뜨는 문제 탭은 VS Code의 상단 메뉴에서 보기 > 문제를 클릭하여 열 수 있다. * 지금 에디터..

(5) undefined를 렌더링하지 않기 * 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다. 예를 들어 다음과 같은 코드는 오류를 발생시킨다. import React from "react"; import './App.css'; function App() { const name = undefined; return name; } export default App; * 어떤 값이 undefined일 수도 있다면, OR( || ) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다. import React from "react"; import './App.css'; function App() { co..

4. JSX 문법 * JSX는 정말 편리한 문법이지만, 올바르게 사용하려면 몇 가지 규칙을 준수해야 한다. (1) 감싸인 요소 * 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 한번 App.js 파일의 컴포넌트 함수 내부를 지우고 다음과 같이 작성해 보자. 상단에 있는 SVG와 CSS를 import하는 코드도 지워 보자. import React from 'react'; function App() { return ( 리액트 안녕! 잘 작동하니? ); } export default App; * 이런 형태의 코드는 제대로 작동하지 않는다. 코드를 저장한 후 웹 브라우저나 개발 서버를 실행했던 터미널을 열어 보자. 다음 오류가 나타날 것이다. * 요소 여러 개가 부모 요소 하나에 의하여 ..

package kr.or.ddit.controller.database; public class MybatisController { /* * [ 12장. 마이바티스 ] * * 1. 마이바티스란? * * 마이바티스는 자바 퍼시스턴스 프레임워크의 하나로 XML 서술자나 어노테이션을 사용하여 저장프로시저나 SQL문으로 객체들을 연결시킨다. * 마이바티스는 Apache 라이선스 2.0으로 배포되는 자유 소프트웨어이다. * * # 마이바티스를 사용함으로써 얻을 수 있는 이점 * - SQL의 체계적인 관리 * - 자바 객체와 SQL 입출력 값의 투명한 바인딩 * - 동적 SQL 조합 * * # 마이바티스 설정 * * 1) 의존관계 정의 * - 총 6가지 라이브러리를 등록하여 관계를 정의한다. (DatabaseConn..

package kr.or.ddit.controller.database; public class MybatisController { /* * [ 12장. 마이바티스 ] * * 1. 마이바티스란? * * 마이바티스는 자바 퍼시스턴스 프레임워크의 하나로 XML 서술자나 어노테이션을 사용하여 저장프로시저나 SQL문으로 객체들을 연결시킨다. * 마이바티스는 Apache 라이선스 2.0으로 배포되는 자유 소프트웨어이다. * * # 마이바티스를 사용함으로써 얻을 수 있는 이점 * - SQL의 체계적인 관리 * - 자바 객체와 SQL 입출력 값의 투명한 바인딩 * - 동적 SQL 조합 * * # 마이바티스 설정 * * 1) 의존관계 정의 * - 총 6가지 라이브러리를 등록하여 관계를 정의한다. (DatabaseConn..