SIKI TISORY

차세대 작업 준비하기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의 , 과 같은 모든 태그가 해당됩니다...

React 개요React는 단일 페이지 애플리케이션(SPA)을 개발하기 위한 대표적인 자바스크립트 라이브러리입니다. SPA는 하나의 페이지에서 필요한 부분만 변경되기 때문에 빠른 페이지 전환 속도를 제공하며, 서버 자원을 효율적으로 사용할 수 있습니다.React의 장점방대한 커뮤니티와 레퍼런스를 보유컴포넌트 기반 구조로 모듈화된 개발 가능모바일 앱 개발 지원 (React Native)JSX를 사용하여 자바스크립트만으로 UI와 DOM 구현 가능React의 단점JSX와 컴포넌트 기반 접근 방식에 대한 러닝 커브가 높음지원되는 라이브러리가 많아 선택에 어려움이 있을 수 있음복잡한 상태 관리프로젝트 규모가 커질수록 성능 저하 가능성주요 라이브러리react-router: 리액트 내에서 페이지 이동(URL 이동)을..

◈  비동기 ◈   • 동기적(Synchronus)동기적은 하나의 작업이 모두 수행될 때 까지 다른 작업을 수행 하지 못함  • 비동기적(Asynchronous)비동기는 작업의 결과를 기다리는 동안 다른 작업을 미리 수행하는 것 오래 걸리는 작업들에 대해 백그라운드에서 처리되며 그동안 다른 작업을 계속 수행할 수 있도록 함  • 비동기 작업의 대표적인 예시와 함수/문법1. Ajax, setTimeout2. Callback 함수, Promise, async/await • 비동기 확인하기예상했던 코드의 동작과 콘솔 로그에 찍히는 로그의 차이점 확인하기-> 비동기적  ◈  setTimeout 흐름 파악하기 ◈     ◈  setTimeout 흐름 파악하기 -2◈  • 상황  setTimeout이 0초로 설정되..

◈ 이벤트, 이벤트 핸들러, 이벤트 리스너 ◈  • 이벤트사용자의 동작이나 브라우저의 상태 변화와 관련하여 발생하는 사건을 의미 • 이벤트 핸들러특정 이벤트가 발생했을 때 실행되는 함수 • 이벤트 리스너JavaScript에서 지원하는 addEventListener() 메소드를 의미함 ◈ 이벤트의 종류 ◈  • 이벤트의 종류  ◈ 이벤트 핸들러 예시 ◈ • 이벤트 핸들러 예시 ◈ 이벤트 리스너 예시 ◈ • 이벤트 리스너 예시 ◈ 클릭 이벤트 ◈ • 클릭 이벤트사용자가 요소를 클릭할 때 발생하는 이벤트 • 클릭 이벤트 예시(이벤트 리스너 – 콜백 함수)  • 클릭 이벤트 예시(이벤트 리스너 – 일반 함수)  ◈ 마우스 이벤트 ◈ • 마우스 이벤트마우스와 관련된 동작에 대한 이벤트로써 여러가지가 있지만, 클릭..