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 [TypeScript][React] CRA(Create React App) ※ node 버전 14 이상 필요 CRA 설치 CRA 이용 CRA 진행 시작 React App 실행 접속 참고 글... ReactCRAtypescriptCRA 🔯 create-react-app(1) 브라우저 및 문법 지원 리액트를 프로젝트를 구성할 때 항상 cra(creat react app)패키지를 사용하였다. 오늘은 일단 CRA에서 지원하는 브라우저 및 문법 지원에 관해서 알아보겠다. react project를 구성할 때에 웹팩 및 바벨 설정 등 기본적인 설정들을 갖춘채로 프로젝트를 진행할 수 있도록 하는 패키지이다. npx create-react-app [project name] npm create re... CRAReactCRA [React] CRA 개발환경 설정하기 - Typescript CRA 설치 시 옵션으로 typescript를 설정할 수 있다. Typescript 설정 파일 설명은 에서 볼 수 있어요 :) tsconfig.json 파일을 수정해서 기본 경로를 설정 path와 alias 설정은 따로 하지 않을 거라, webpack config를 변경하지 않아도 src를 기준으로 절대 경로 사용이 가능하다 :) 🖐 혹시 이상하거나 틀린 점들은 언제든지 아래 댓글로 남겨주세... CRAReacttypescriptCRA React Basic : Create-React-App CRA는 페이스북 팀에서 오픈 소스로 만든 React 개발 환경 구축 툴입니다. React 개발을 시작할 때, React와 React DOM 설치하셨던 것 기억나시나요? CRA는 이러한 기본 패키지 설치부터 시작해서, 보편적으로 쓰이는 React 개발 환경 설정을 간편식처럼 제공해주는 툴입니다. 밑에서 설명하겠지만, 간단한 명령어 몇 줄로 React 프로젝트 하나를 뚝딱 준비할 수 있습니다.... CRAReactreact-basicCRA TIL#26 React ) intro 리액트는 가상 돔(Virtual DOM) 을 통해 UI 를 빠르게 업데이트 한다. 리액트가 화면을 A 에서 B 로 바꾸기 위해서는 여러번의 DOM 조작이 필요할 수 있다. 리액트는 실제 DOM 이 아니라 가상의 DOM 을 만들어서 유지하고 있다. 이러한 텍스트들이 실제 의미를 가지려면 자바스크립트 코드를 읽어서 실행을 시킬 수 있는 도구들이 필요하다. 이렇게 자바스크립트를 읽어서 실행할 수 ... virtual DOMCRAReactNodenpm선언적TILcomponentCRA [MarketBully] - 초기 셋팅 This Week은 이번주에 할일과 목표설정을 작성하고, In Progress는 현재 진행중인 상황을 자세히 파악할 수있다. 협업할때 팀원들이 현재 진행상황이 어떠한지 파악 할 수있고, 그에 맞춰서 프로젝트를 진행할 수 있다. 체크리스트는 내가 정한 목표들을 적어놓고, 완료되면 체크하는 방식으로 사용 할 수있다. 보다 체계적으로 내가 할일들을 파악할 수 있어서 매끄럽게 진행 할 수있다. 이렇... CRAnotiontrelloCRA
[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 [TypeScript][React] CRA(Create React App) ※ node 버전 14 이상 필요 CRA 설치 CRA 이용 CRA 진행 시작 React App 실행 접속 참고 글... ReactCRAtypescriptCRA 🔯 create-react-app(1) 브라우저 및 문법 지원 리액트를 프로젝트를 구성할 때 항상 cra(creat react app)패키지를 사용하였다. 오늘은 일단 CRA에서 지원하는 브라우저 및 문법 지원에 관해서 알아보겠다. react project를 구성할 때에 웹팩 및 바벨 설정 등 기본적인 설정들을 갖춘채로 프로젝트를 진행할 수 있도록 하는 패키지이다. npx create-react-app [project name] npm create re... CRAReactCRA [React] CRA 개발환경 설정하기 - Typescript CRA 설치 시 옵션으로 typescript를 설정할 수 있다. Typescript 설정 파일 설명은 에서 볼 수 있어요 :) tsconfig.json 파일을 수정해서 기본 경로를 설정 path와 alias 설정은 따로 하지 않을 거라, webpack config를 변경하지 않아도 src를 기준으로 절대 경로 사용이 가능하다 :) 🖐 혹시 이상하거나 틀린 점들은 언제든지 아래 댓글로 남겨주세... CRAReacttypescriptCRA React Basic : Create-React-App CRA는 페이스북 팀에서 오픈 소스로 만든 React 개발 환경 구축 툴입니다. React 개발을 시작할 때, React와 React DOM 설치하셨던 것 기억나시나요? CRA는 이러한 기본 패키지 설치부터 시작해서, 보편적으로 쓰이는 React 개발 환경 설정을 간편식처럼 제공해주는 툴입니다. 밑에서 설명하겠지만, 간단한 명령어 몇 줄로 React 프로젝트 하나를 뚝딱 준비할 수 있습니다.... CRAReactreact-basicCRA TIL#26 React ) intro 리액트는 가상 돔(Virtual DOM) 을 통해 UI 를 빠르게 업데이트 한다. 리액트가 화면을 A 에서 B 로 바꾸기 위해서는 여러번의 DOM 조작이 필요할 수 있다. 리액트는 실제 DOM 이 아니라 가상의 DOM 을 만들어서 유지하고 있다. 이러한 텍스트들이 실제 의미를 가지려면 자바스크립트 코드를 읽어서 실행을 시킬 수 있는 도구들이 필요하다. 이렇게 자바스크립트를 읽어서 실행할 수 ... virtual DOMCRAReactNodenpm선언적TILcomponentCRA [MarketBully] - 초기 셋팅 This Week은 이번주에 할일과 목표설정을 작성하고, In Progress는 현재 진행중인 상황을 자세히 파악할 수있다. 협업할때 팀원들이 현재 진행상황이 어떠한지 파악 할 수있고, 그에 맞춰서 프로젝트를 진행할 수 있다. 체크리스트는 내가 정한 목표들을 적어놓고, 완료되면 체크하는 방식으로 사용 할 수있다. 보다 체계적으로 내가 할일들을 파악할 수 있어서 매끄럽게 진행 할 수있다. 이렇... CRAnotiontrelloCRA