npm create vite@lastest오늘은 react 2번째 공부입니다. react를 시작하기 전에 설치부터 해야겠죠? react 설치방법을 알려 드리도록 하겠습니다. 제가 설치하는 방법은 vite를 사용해서 설치합니다.    vite 공식문서 바로가기react 공식문서 바로가기 왜 react 앱이라고 하는가?react 설치 방법은?react 폴더별 설명   왜 react앱이라고 하는가?웹 브라우저에서 동작하는 애플리케이션 같아서 그렇게 부르고 있습니다. react 설치 방법은?- 아무 폴더 생성- vs code에서 해당 폴더 열기로 열어주기- 새 터미널 열기- *vite와 함께 react 설치해 주기 *vite:차세대 프런트엔드 개발자 툴*기타 도구 설치 및 설정하는 것이 입문자에게 어렵기 때문에..

안녕하세요. react를 하고자 하는 개발자입니다. 제가 배운 것을 토대로 가르쳐 드리도록 하겠습니다. react 공식문서에 더 욱 정확하게 적혀 있으니 함께 읽으시면 좋을 것 같습니다.react 공식문서 바로가기 react 다운로드하기 react란?- META 즉 페이스북에서 개발한 오픈소스입니다. 커다란 웹 서비스 *UI를 개발하기 위해 만들어진 기술입니다.- react가 사용된 애플리케이션: 넷플릭스, 페이스북, 인스타, 노션 등 *UI : 사용자 인터페이스 즉, 브라우저에서 눈에 보이는 것들을 말합니다. 왜 react를 많이 사용할까?컴포넌트 기반으로 UI 사용가능화면 업데이트 구현이 용이하다.화면 업데이트가 빠르게 처리된다. react 컴포넌트? - 한 화면을 네모 박스로 구분하여 각 박스를 컴..

react설치 개발환경 1. nodejs 설치 https://nodejs.org/ko LTS다운받기 안되면 오른쪽꺼 설치 2. vscode 설치 https://code.visualstudio.com/ 3. 리액트설치 - 바탕화면에 작업용 새폴더 만들기 - vscode에서 방금 만든 폴더 열기 - 위쪽에 터미널 >> 새터미널 열기 - 터미널에 "npx create-react-app 이름" - 설치가 완료 되었다면 다시 vscode에서 이름 폴더 열기 react 폴더 구성 설명 node_modules폴더 : 라이브러리 코드 보관함 public폴더 : static 파일 모아놓는 곳 src폴더 : 코드 짜는 곳 src/app.js가 index라고 생각하면 됨 (app.js가 script로 public/index..

Component 예시 component 만드는 방법/ 특징 동적인 ui만들기 삼항연산자 Component의 예시 제목 날짜 상세내용 이거를 function Modal() { return ( 제목 상세내용 ); } function App() { return ( ); } 요렇게 사용이 가능게 만들어줍니다. 만들 때 주의점 1. component 작명할 땐 영어대문자 2. return () 안의 첫번째 코드는 무조건 로 감싸줘야한다. 형제태그로 못들어갑니다. 3. function App(){} 외부에서 만들어야 합니다. 왜냐면 function App(){} 이것도 하나의 컴포넌트 생성문법입니다. component 안에 component 를 만들 수는 없습니다.. 4. 이렇게 써도 되고 이렇게 써도 됩니다. ..

리액트의 useState를 쓰는 이유와 함께 자동랜더링해서 완성하는 법을 알아보도록 합시다. jsx 문법 자바스크립트 안에 html 언어를 넣는 것을 jsx라고 생각하면 됨. 쓰는 이유 쉽고 간단하게 토드를 짜기 위해 class가 아닌 className html에서는 clas=""를 사용했지만 jsx에서는 className이라고 사용해줘야합니다. 중간에 대문자를 조심해야 합니다. 한가지 더 가 아닌 맨 상단에 import './style.css';로 연결해줘야합니다. 변수와 데이터 바인딩 변수란 자료를 잠깐 저장해주는 집이라고 생각하면 됩니다. 데이터 바인딩은 useState를 말합니다. useState는 아래에서 더 자세하게 알려드리겠습니다. 변수 사용법 function App() { const nam..

리액트 인강을 구매하고 싶지만 인강을 구매하기에는 귀찮으신 분들, 저의 얇은 지식으로 도움 드릴테니 같이 공부해봅시다. 리액트를 배우기 이전에 html , css, javascript의 기초 지식이 없으신 분들은 이것부터 공부하고 오셔야 이해하는데 도움이 될 것입니다. 위의 언어들을 모르는데 굳이 보시겠다면 굳이 말리지는 않겠습니다. 액트를 쓰는 이유 javascript로 만들면 매우 긴 코드가 필요하여 javascript로 된 라이브러리인 리액트로 사용하면 간결하고 가독성 있는 코드를 만들수 있습니다. html을 함수, array, object로 보관하여 재사용이 가능합니다. 개발 환경셋팅 - Node.js를 검색후 LTS버전 설치 - 코드 편집기 설치(저는 vsCode를 사용합니다. 이 블로그에서는 ..