개발일지📝

Ajax ?AJAX ( Asynchronous Javascript and XML) 은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술입니다. 웹 어플리케이션에서 데이터를 가져올 때 서버쪽 데이터가 필요할 때 ajax기법을 사용하게 됩니다.이 작업은 시간이 오래 걸릴 수도 있기 때문에 비동기적으로 처리하게 됩니다.비동기(asynchronous)는 요청이 끝날 때 까지 기다리는 것이 아니라, 동시에 여러 작업을 수행하게 됩니다.나중에 react에서는 다른 서버의 REST API와 통신을 이용하여 데이터베이스 데이터를 가져올 수 있습니다.  ES6 fetch 를 이용해 데이터 처리 (리액트)Promise = fetch(요청주소) 📍 이벤트 클릭시 처리하기데이터를 가져와서 useState()에 저장하는 작..

◈ 프로젝트 구조package.json >> build.gradle / pom.xml 과 동일 (라이브러리 , 버전 명시)라이브러리와 그 버전을 명시하여 프로젝트의 의존성을 관리하는 항목 dependency  : 라이브러리와 그 버전을 명시하여 프로젝트의 의존성을 관리하는 항목  scripts 명령문 : 자주 사용되는 명령어를 스크립트로 정의하여 쉽게 실행할 수 있도록 하는 항목eslintConfig : 기본 프로그램 도움 (코드 품질을 보장하기 위해 JavaScript 코드 스타일을 검사하는 도구인 ESLint의 기본 설정을 정의하는 항목)browserlist : 프로젝트가 지원해야 하는 브라우저의 범위를 명시 ( 브라우저 호환성을 유지하기 위해 필수 )◈  web pack loader자동 리로드됨 (..

😺 React 라우터에 대해 알아보기 전에 SPA 의 개념에 대해 알아보자. 📍 SPA란? (single page application)하나의 페이지로 만들어진 어플리케이션을 의미한다.전통적인 방식은 Server가 html 파일 만들고 data 실어서 응답하지만,spa 방식은 클라이언트에 html 세워두고 데이터만 요청응답을 통해 바꾼다.  SPA는 html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax통신을 이용해서 처리합니다.브라우저에서 사용자가 상호작용 하면 필요한 부분만 업데이트 해서 처리합니다.멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용됩니다. 📍 SPA의 단점 (CSR방식)앱의 규모가 커지면, JS파일도 너무 커져서 로딩이 오래걸리게 됩..

1. React 에 CSS 적용  😺 리액트에 CSS 적용하는 방법을 알아보자!   📍 css 파일 이름 규칙 컴포넌트의 이름을 반드시 포함해서 만듬EX) App.js - App.css     📍  태그에 직접 지정하기태그에 직접 디자인을 적용 할 때는 {}로 묶어줍니다css속성중 - 은 카멜표기법으로 대체됩니다.style={{css속성: 값, css속성: 값}}안녕하세요!!   📍  일반 css파일로 적용하기일반CSS문법으로 디자인을 해주면 되고 import로 가져오면 됩니다./* App.css */.app_header { height: 50px; line-height: 50px; background-color: #000; margin: 0; padding: 0;}//..

1. 훅(HOOK)  😺 리액트에는 hook 훅 이라는 개념이 있다. 📍 Hook 이란? 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉩니다.리액트 훅은 새로운 기능으로 React 16.8버전에 새로 추가된 기능함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부릅니다. (useState, useEffect 등)리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.    😺 훅에도 규칙이 있다 !  📍 Hook 규칙최상위 에서만 Hook을 호출해야 한다반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일..

1. 컴포넌트 반복 Iteration  😺  리액트에서의 반복 Iteration 에 대해 알아보자 !!  📍 리액트에서의 반복 목록 요소들을 반복처리 할때는 map함수를 이용 합니다.반복 컴포넌트에는 반드시 key props를 전달해야 합니다.    😺  배열과 관련된 map과 filter 메서드에 대해서 알아보자.  📍  map 함수는 실행한 결과를 가지고, 새로운 배열을 만들 때 사용한다.array.map(callbackFunction(currenValue, index, array), thisArg)currenValue: 현재값index: 현재인덱스array: 현재배열,thisArg: callbackFunction 내에서 this로 사용될 값const IterationComponent = ()..

1. React Event 리액트 이벤트  😺 리액트에서 이벤트 규칙을 알아보자 ! 📍 리액트 이벤트 규칙 이벤트의 이름은 전부 카멜 표기법으로 표현됩니다. onkeyup -> onKeyUp이벤트를 전달할 때는 {함수} 형태로 사용합니다   😺 이제 리액트 이벤트를 사용해보자. 기본적인 Input 값부터 핸들링 해보자 ! 📍 Input 값 핸들링const EventComponent = () => { const [name, setName] = useState(''); let handleName = (e) => {//2.event객체 활용 setName(e.target.value);//3.state변경 (input의 value도 변경) } return ( ..

1. State 😺  state 가 무엇일까 ?? 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다state가 체인지 되면 변화를 감지하여 리렌더링을 수행합니다.클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다릅니다.함수형 컴포넌트에서는 훅 Hook개념을 이용해서 더욱 쉽게 사용 가능 합니다. 2.  useState - hook  useState(초기값) - 함수(hook)  📍  useState() : 배열반환 첫번째 배열의 요소에는 현재값을, 두번째 요소는 상태를 변경하는 (setter) 를 반환합니다.const [data, setData] = useState('초기값') state는 어떤 타입이던 상관 없습니다. (str, number, object, array, bool..

https://ko.legacy.reactjs.org/docs/components-and-props.html Components와 Props – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org  1. 컴포넌트😺 리액트 컴포넌트에 대해 알아보자 :)  😺 리액트의 컴포넌트는 Tree 구조로1. 함수형2. 클래스형2가지를 가진다.   📍 함수형function Welcome(props) { return Hello, {props.name};}  📍  클래스형class Welcome extends React.Component { render() { return Hello, {this.props.name}; }..

1. 리액트 기본개념 ◈ 리액트란?리액트(React)는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 리액트의 주요 특징과 개념은 다음과 같습니다:컴포넌트 기반: 리액트는 재사용 가능한 UI 조각인 컴포넌트를 사용하여 애플리케이션을 구축합니다.가상 DOM (Virtual DOM): 실제 DOM의 가벼운 복사본을 사용하여 성능을 최적화합니다.단방향 데이터 흐름: 데이터는 부모 컴포넌트에서 자식 컴포넌트로 한 방향으로만 흐릅니다.JSX: JavaScript의 확장 문법으로, HTML과 유사한 구문을 사용하여 컴포넌트의 구조를 정의합니다.상태 관리: 컴포넌트의 데이터를 관리하고 업데이트하는 메커니즘을 제공합니다.리액트는 웹 애플리케이션 개발에 널리 사용되며, 효율적이고 유지보수가 용이..