키모스토리

App.js (배열데이터를 ,react에서 반복 표시)import "./App.css";function App() { const list = [1, 2, 3]; return ( {list.map((n) => ( {n} // key 속성 추가 ))} );}export default App;

JSX(Javascript Syntax eXtension)는 Javascript 확장한 문법이다.  JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 기본적으로 HTML, JS, CSS 구문을 그대로 이용이 가능하며{ } 블럭 안에서 변수, 상수, 함수 등을 호출하여 사용 할 수 있다. JSX 기초(1) App() 함수 밖에 혹은 안에 변수, 상수, 함수 선언가능 (2) return 시에 하나의 Dom만 리턴할 수 있다. (하나의 Dom안에 구조를 생성하라) (3) if문 사용안됨, 대신 3항 연산자를 사용 ( (조건) ? 참일때 : 거짓일때 ) (4) 조건부 렌더링 (조건 && 값..

react 프로젝트가 실행이 되면 home\src\index.js  파일이  실행이 됨 코드를 보면 root element를 찾아서 root.render() 안에 있는 컴포넌트를 실행하도록 되어 있음 const root = ReactDOM.createRoot(document.getElementById('root'));root.render( ); 이때  /pulbic/index.html 파일 안에 있는 안에 의 내용을 삽입해 준 뒤에 브라우저로 랜더링이 된다.  /publc/index.html tag. To begin the development, run `npm start` or `yarn start`. To create a productio..

필요사항 Node.js v14.0.0 이상npm v6.14.0 이상VS Code  #  사용법$ npx create-react-app  # 실제 사용 예제$ npx create-react-app my-app # 경로변경 (change directory)$ cd my-app # 애플리케이션 실행$ npm start 리액트 웹개발을 위한 기본 템플릿이 설치되고 샘플 페이지가 실행이 된다. 예) D:\ReactHome\my-app 경로로 프로젝트를 생성하려면1. vscode => Open Folder 경로를 D:\ReactHome\ 지정하여 오픈2. Terminal > New Terminal 선택 하여 터미널창 열기 3. npx create-react-app my-app 입력 엔터 4. 설치 완료 확인  - ..

React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있습니다.싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다.  리액트의 장점빠른 업데이트 & 렌더링 속도Virtual DOM Component-Based - 재사용성(Reusability) - 개발 기간이 단축됨 - 유지 보수가 용이함모바일앱 개발에 용이함 (React Native) 리액트의 단점방대한 학습량 - Virtual DOM, JSX, Componet, State, Props 등등의 새로운 개념높은 상태관리 복잡도

웹에서 SPA는 Single Page Application의 약자로, 단일 페이지 애플리케이션을 뜻합니다. 서버로부터 새로운 페이지를 불러오지 않고, 현재 페이지를 동적으로 다시 작성하여 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다.  SPA의 장점은 다음과 같습니다.  배포가 간단합니다웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번만 다운로드합니다전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않습니다네이티브 앱과 유사한 사용자 경험을 제공합니다SPA의 단점은 다음과 같습니다.  초기 구동 속도가 상대적으로 느립니다검색엔진 최적화(Search Engine Optimization, SEO) 이슈가 있습니다SPA는 모바일의 중요성이 커지면서 모바일 ..

웹에서 CSR은 Client Side Rendering의 약자로, 클라이언트 측에서 페이지를 렌더링하는 방식을 의미합니다.  CSR의 특징서버에서 페이지를 미리 준비해 보여주는 것이 아닌, 사용자의 브라우저에서 동적으로 생성되어 렌더링 됩니다  서버로부터 받아온 데이터를 클라이언트에서 JavaScript를 통해 동적으로 조작하여 렌더링합니다  모든 로직, data fetching, templating 및 라우팅은 서버가 아닌 클라이언트에서 처리합니다  CSR과 비교되는 방식CSR과 비교되는 방식으로는 서버에서 페이지를 미리 준비해 보여주는 Server Side Rendering(SSR)이 있습니다  SSR은 인터넷 연결이 느린 사용자에게 유익할 수 있습니다  렌더링이란?렌더링이란 HTML, CSS, Ja..