SIKI TISORY

MyBatis 사용하기 MyBatis란?MyBatis는 SQL Mapper Framework로, 개발자가 JDBC 코드를 직접 작성하지 않아도 MyBatis가 많은 기능을 자동으로 처리해줍니다. SQL을 XML 파일에 작성하여 가독성이 높으며, 기존 SQL 문법을 그대로 사용할 수 있어 편리합니다.  MyBatis 설치 및 설정1. Maven 의존성 추가pom.xml 파일에 다음과 같은 의존성을 추가하여 MyBatis와 Spring 연동에 필요한 라이브러리를 설정합니다    org.springframework   spring-jdbc   ${org.springframework-version}   commons-dbcp   commons-dbcp   1.4   com.oracle   ojdbc..

Lombok 사용하기 Lombok이란?Lombok은 자바에서 자주 사용되는 메서드(예: getter, setter, toString 등)를 어노테이션으로 선언하여 자동으로 생성해주는 라이브러리입니다. 이를 통해 반복적인 코드 작성을 줄이고, 코드의 가독성을 높일 수 있습니다. Lombok 설치 방법1. Lombok 다운로드구글에서 Lombok을 검색한 후, Lombok 공식 사이트에서 다운로드합니다.2. 설치 명령어 실행 - 명령 프롬프트(cmd)를 열고 Lombok을 다운로드한 경로로 이동합니다:cd [Lombok 설치 경로]예시: cd D:\Users\Downloads - 그 후, Lombok 설치 파일을 실행합니다:java -jar Lombok.jar 3. Lombok 설치 - 만약 아래와 같은 화..

스프링 프레임워크 기초 제어의 역전(Inversion of Control, IoC)IoC는 객체의 생성과 관리에 대한 제어권이 개발자에서 외부(스프링)로 넘어가는 것을 의미합니다. 보통 개발자가 직접 객체를 생성하고 의존성을 해결하지만, 스프링에서는 이러한 제어권을 외부로 넘깁니다. 이 개념은 스프링의 핵심 요소 중 하나입니다.IoC 컨테이너(= 스프링 컨테이너)객체 생성의 생명주기 관리 등 책임지고 관리해주는 컨테이너 * 컨테이너 : 객체들을 담는 공간 BeanFactory vs ApplicationContextBeanFactory : 스프링 컨테이너의 최상위 인터페이스로, 관리/조회 역할을 담당Application Context : BeanFactory의 기능을 모두 상속받아 사용하며 부가 기능들을 ..

차세대 작업 준비하기Axios baseURL 설정baseURL을 설정하면 Axios 코드를 작성할 때 URL을 생략할 수 있음* axiosConfig.js 파일 수정 * 이클립스에서 작성한 톰캣 서버 코드로 요청가도록 설정 포트 번호 변경Vite 설정에서 포트 변경vite.config.js 파일에서 기본 포트를 80으로 설정합니다. 이는 웹 서버가 기본적으로 HTTP 요청을 처리하는 포트입니다.Tomcat 포트 변경이클립스에서 Tomcat 서버의 포트 번호를 8080으로 변경합니다.시스템 구조DNS, 웹, WAS, DB 간 통신 흐름웹 브라우저에서 React로 작성된 페이지를 요청하고, 동적 데이터는 Spring을 통해 처리됩니다.Spring은 Oracle DB에서 데이터를 조회한 후, 웹 페이지에 반영..

Axios 사용하기Axios란?• AxiosVue.js에서 권고하는 Promise 기반의 HTTP 통신 라이브러리 * 우선은 JavaScript의 ajax와 같은 기능을 수행한다고 생각하면 됨 * Vue 진형에서 권고 하지만, React에서도 널리 사용되는 라이브러리중의 하나 • Promise자바스크립트에서 비동기 작업을 수행하기 위한 방법 중 하나-> Callback, Promise, Promise + generator, async/await • Axios 설치npm install axios • Axios 테스트 - 1아래 폴더 구조에 맞춰 폴더 및 파일 생성  • Axios 테스트 - 2axiosConfig.js 파일에 아래와 같이 코드 작성 • Axios 테스트 - 3testApi.js 파일에 아래..

React-Redux를 활용한 상태 관리Redux란?Redux는 컴포넌트 간 데이터 흐름이 복잡해지는 문제를 해결하기 위해 고안된 자바스크립트의 상태 관리 라이브러리입니다. 기존 방식에서 컴포넌트가 많아질수록 데이터 전달이 복잡해지는 문제를 보완해줍니다.  Redux의 주요 개념StateState는 컴포넌트에서 사용하는 동적인 값, 즉 상태 데이터를 의미합니다. 일반적으로 사용하는 변수와 유사한 개념이지만, Redux에서 관리하는 상태는 보다 중앙화된 방식으로 처리됩니다.ActionAction은 상태에 변화를 줄 때 발생하는 객체입니다. 이 객체는 반드시 type 필드를 가져야 하며, 그 외의 데이터는 선택적으로 포함될 수 있습니다.Action CreatorAction Creator는 액션 객체를 생성하..

상태 관리 (State Management)State란?State는 컴포넌트 내부에서 변경되는 데이터를 다루기 위해 사용되는 객체입니다. 일반적인 변수와 달리 state가 변경되면 컴포넌트가 자동으로 리렌더링되어 화면에 변화를 반영합니다.State 관리 방법초기 상태 설정: 컴포넌트가 처음 렌더링될 때 기본 상태값을 설정합니다.상태 변수와 상태 변경 함수 생성: useState를 사용해 상태를 생성하고, 상태를 변경하는 함수를 설정합니다.상태 업데이트: 상태 변경 함수를 호출하여 값을 업데이트하고 리렌더링을 유도합니다. • count 확인하기 - 1 • count 확인하기 - 2count 변수가 증가하지 않는 내용 확인 • state 사용하기 - 1 • state 사용하기 - 2state를 사용하며 리렌..

조건부 렌더링조건부 렌더링이란?특정 조건에 따라 표시해야 할 항목이 다를 경우, if문 또는 삼항 연산자를 사용하여 조건에 따라 JSX를 렌더링할 수 있습니다.조건부 렌더링 사용 예시부모 컴포넌트에서 전달된 name 값이 특정 조건을 만족할 때만 특정 데이터를 출력합니다.예를 들어, name 값이 ‘nabi’일 때는 고양이 사진을, 그렇지 않으면 다른 메시지를 출력할 수 있습니다.반환할 값이 없을 경우에는 return null을 사용하여 아무것도 렌더링하지 않도록 할 수 있습니다.&& 연산자 활용하기아래의 코드는 name이 nabi가 아닐때는 ‘고양이가 아닙니다’를 렌더링함name이 nabi일 때만 필요한 DOM 요소를 렌더링&&의 왼쪽에는 boolean이 나와야하기 때문에, 숫자를 사용할 수 없음cou..

Props (데이터 주고 받기)Props란?Props는 컴포넌트끼리 서로 통신하며 데이터를 전달하는 방식입니다. 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용됩니다. 부모 컴포넌트 vs 자식 컴포넌트일반적으로 import된 컴포넌트가 자식 컴포넌트가 됩니다.부모 컴포넌트는 자식 컴포넌트에게 데이터를 전달하고, 자식 컴포넌트는 이 데이터를 받아 처리합니다. 데이터 전달하기 (Props 사용)자식 컴포넌트를 호출할 때, 키-값 형태로 데이터를 전달해야 합니다.anima는 JSX 괄호 안의 객체로, '키:값'의 형태를 가집니다.size는 하나의 값을 저장하는 변수로 사용됩니다. 데이터 전달받기 (Props 받기)자식 컴포넌트는 전달받은 데이터를 받을 때 **( ) 안에 { }**를 사용해야 하며,..

JSX (JavaScript Syntax Extension)JSX란?JSX는 JavaScript의 확장된 문법으로, HTML과 유사한 형태의 마크업을 JavaScript 코드 내에서 작성할 수 있도록 도와줍니다. 이는 React와 자주 함께 사용되지만, JSX와 React는 서로 별개의 개념입니다. React는 JavaScript 라이브러리이며, JSX는 그저 문법일 뿐입니다. 따라서 JSX 없이 React를 사용하거나, JSX를 다른 환경에서도 사용할 수 있습니다.JSX의 규칙부모 태그로 감싸기JSX에서 여러 개의 엘리먼트를 반환할 때는 반드시 하나의 부모 태그로 감싸주어야 합니다. 이를 지키지 않으면 오류가 발생합니다. 부모 태그로 사용할 수 있는 것은 HTML의 , 과 같은 모든 태그가 해당됩니다...