CRA [Udemy] React - CRA, JSX, State, Props ☑️ node_modules : 많은 모듈 패키지 설치, node_modules가 없거나 지워져도 package.json이나 package-lock.json 또는 npm i로 다시 설치할 수 있음. ☑️ 컴포넌트 방식 : JSX 문법을 사용해서 웹에 필요한 요소를 함수에 담아서 리턴 후 내보내서 index.js같은 다른 파일에서도 사용할 수 있게 함 ☑️ ESModule System : Co... JSXState유데미udemy한입크기로잘라먹는리액트ReactPropsCRA리액트CRA CRA 가장 쉽고 빠른 서버 세팅 들어가기 전, Back-End : Express.js DataBase : MySQL IDE : Visual Studio Code Root Folder Name : Rakei(내 마음대로..) 기본적으로 리액트 앱과 서버를 한번에 실행하는 구조 서버 따로 실행, 리액트 앱 따로 실행 -> X, Concurrently Package Rakei 폴더 생성 후 VSC로 폴더를 열어준다. (현재 위치... expressiniteasyCRAReactCRA 🔯 create-react-app(1) 브라우저 및 문법 지원 리액트를 프로젝트를 구성할 때 항상 cra(creat react app)패키지를 사용하였다. 오늘은 일단 CRA에서 지원하는 브라우저 및 문법 지원에 관해서 알아보겠다. react project를 구성할 때에 웹팩 및 바벨 설정 등 기본적인 설정들을 갖춘채로 프로젝트를 진행할 수 있도록 하는 패키지이다. npx create-react-app [project name] npm create re... CRAReactCRA [React] CRA (Create-React-App) CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 구성하는 모든 패키지 소스코드가 존재하는 폴더 - 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능 node.modules 와 package.json에서 이중으로 패키지를 관리하는 이유 github 에 올릴 때 내가 작성한 코드와 함께 package.json(추가로 설치한 패키지 정보) 넘긴다. 다른 사람이... ReactCRACRA TIL. 28 React - Basic, Router JavaScript와 기본적인 구성은 비슷하지만, 다른 언어라고 봐도 무방한 것 같으며 HTML, CSS, JS가 모두 포함되어 있다. React(리액트)는 UI를 효과적으로 보여주기 위한 JavaScript의 라이브러리이다. 페이스북의 지속적인 관리로 생태계가 활성화 되어 있으며, 그로인한 여러가지 자료를 원활하게 구할 수 있고, React Native 사용으로 인해 사용자가 꾸준히 증가하... virtual DOMrouterReactspaCRACRA TIL#26 React ) intro 리액트는 가상 돔(Virtual DOM) 을 통해 UI 를 빠르게 업데이트 한다. 리액트가 화면을 A 에서 B 로 바꾸기 위해서는 여러번의 DOM 조작이 필요할 수 있다. 리액트는 실제 DOM 이 아니라 가상의 DOM 을 만들어서 유지하고 있다. 이러한 텍스트들이 실제 의미를 가지려면 자바스크립트 코드를 읽어서 실행을 시킬 수 있는 도구들이 필요하다. 이렇게 자바스크립트를 읽어서 실행할 수 ... virtual DOMCRAReactNodenpm선언적TILcomponentCRA React Basic : Prettier (ESLint 같은 경우에는 기본적인 포맷팅 기능도 같이 탑재되어 있습니다.) Prettier가 가지고 있는 기본 포맷팅 설정은 대부분 보편적인 코드 포맷팅 룰을 준수하고 있으며, 실제로 개발자들이 일부러 설정을 추가할 필요가 거의 없다는 것이죠. 또한 Prettier는 코드를 수정만 해주는 것이 아니라 구문을 분석한 다음 코드를 다시 재작성하는 형태인데, 이 때문에 코드의 실행을 보장하면서... es-lintCRAPrettierReactreact-basicCRA (TIL5) CRA 기초 다지기2 webpack이 깔려있는 환경에서는 import 구문을 대신 활용할 수 있다. index.jsx 코드에 있던 require 구문들을 import 구문으로 변환해보면 다음과 같다. 파일을 불러올때 확장자를 빼고 불러오려면 webpack.config.js 파일에서 그러면 웹팩에서 확장자 없이도 파일을 불러올 수 있도록 처리해줌! 지난번 포스팅에서 index.jsx 파일 안에 App 컴포넌트를 만... componentcompilebuildwebpackbabelimportTILCRACRA
[Udemy] React - CRA, JSX, State, Props ☑️ node_modules : 많은 모듈 패키지 설치, node_modules가 없거나 지워져도 package.json이나 package-lock.json 또는 npm i로 다시 설치할 수 있음. ☑️ 컴포넌트 방식 : JSX 문법을 사용해서 웹에 필요한 요소를 함수에 담아서 리턴 후 내보내서 index.js같은 다른 파일에서도 사용할 수 있게 함 ☑️ ESModule System : Co... JSXState유데미udemy한입크기로잘라먹는리액트ReactPropsCRA리액트CRA CRA 가장 쉽고 빠른 서버 세팅 들어가기 전, Back-End : Express.js DataBase : MySQL IDE : Visual Studio Code Root Folder Name : Rakei(내 마음대로..) 기본적으로 리액트 앱과 서버를 한번에 실행하는 구조 서버 따로 실행, 리액트 앱 따로 실행 -> X, Concurrently Package Rakei 폴더 생성 후 VSC로 폴더를 열어준다. (현재 위치... expressiniteasyCRAReactCRA 🔯 create-react-app(1) 브라우저 및 문법 지원 리액트를 프로젝트를 구성할 때 항상 cra(creat react app)패키지를 사용하였다. 오늘은 일단 CRA에서 지원하는 브라우저 및 문법 지원에 관해서 알아보겠다. react project를 구성할 때에 웹팩 및 바벨 설정 등 기본적인 설정들을 갖춘채로 프로젝트를 진행할 수 있도록 하는 패키지이다. npx create-react-app [project name] npm create re... CRAReactCRA [React] CRA (Create-React-App) CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 구성하는 모든 패키지 소스코드가 존재하는 폴더 - 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능 node.modules 와 package.json에서 이중으로 패키지를 관리하는 이유 github 에 올릴 때 내가 작성한 코드와 함께 package.json(추가로 설치한 패키지 정보) 넘긴다. 다른 사람이... ReactCRACRA TIL. 28 React - Basic, Router JavaScript와 기본적인 구성은 비슷하지만, 다른 언어라고 봐도 무방한 것 같으며 HTML, CSS, JS가 모두 포함되어 있다. React(리액트)는 UI를 효과적으로 보여주기 위한 JavaScript의 라이브러리이다. 페이스북의 지속적인 관리로 생태계가 활성화 되어 있으며, 그로인한 여러가지 자료를 원활하게 구할 수 있고, React Native 사용으로 인해 사용자가 꾸준히 증가하... virtual DOMrouterReactspaCRACRA TIL#26 React ) intro 리액트는 가상 돔(Virtual DOM) 을 통해 UI 를 빠르게 업데이트 한다. 리액트가 화면을 A 에서 B 로 바꾸기 위해서는 여러번의 DOM 조작이 필요할 수 있다. 리액트는 실제 DOM 이 아니라 가상의 DOM 을 만들어서 유지하고 있다. 이러한 텍스트들이 실제 의미를 가지려면 자바스크립트 코드를 읽어서 실행을 시킬 수 있는 도구들이 필요하다. 이렇게 자바스크립트를 읽어서 실행할 수 ... virtual DOMCRAReactNodenpm선언적TILcomponentCRA React Basic : Prettier (ESLint 같은 경우에는 기본적인 포맷팅 기능도 같이 탑재되어 있습니다.) Prettier가 가지고 있는 기본 포맷팅 설정은 대부분 보편적인 코드 포맷팅 룰을 준수하고 있으며, 실제로 개발자들이 일부러 설정을 추가할 필요가 거의 없다는 것이죠. 또한 Prettier는 코드를 수정만 해주는 것이 아니라 구문을 분석한 다음 코드를 다시 재작성하는 형태인데, 이 때문에 코드의 실행을 보장하면서... es-lintCRAPrettierReactreact-basicCRA (TIL5) CRA 기초 다지기2 webpack이 깔려있는 환경에서는 import 구문을 대신 활용할 수 있다. index.jsx 코드에 있던 require 구문들을 import 구문으로 변환해보면 다음과 같다. 파일을 불러올때 확장자를 빼고 불러오려면 webpack.config.js 파일에서 그러면 웹팩에서 확장자 없이도 파일을 불러올 수 있도록 처리해줌! 지난번 포스팅에서 index.jsx 파일 안에 App 컴포넌트를 만... componentcompilebuildwebpackbabelimportTILCRACRA