728x90 반응형 개발자11 리액트 JSX 문법 - 셀프 개발자 코딩 부트캠프 # 감싸인 요소 function App() { return ( 하이하이 하이하이2 ); } export default App; 컴포넌트가 여러개 있다면 부모로 한번 감싸야 한다. webpack 5.70.0 compiled with 2 errors in 65 ms ERROR in src/App.tsx:7:5 TS2657: JSX expressions must have one parent element. 5 | function App() { 6 | return ( > 7 | 하이하이 | ^^^^^^^^^^^^^ > 8 | 하이하이2 | ^^^^^^^^^^^^^^^^^^^ 9 | ); 10 | } 11 | 이런 에러가 발생한다 function App() { return ( 하이하이 하이하이2 ); } expo.. 2022. 3. 6. 리액트 타입스크립트 - 셀프 개발자 코딩 부트캠프 리액트를 시작할 때부터 타입 스크립트로 시작하기로 함. 다른 건 몰라도 자바스크립트가 타입을 강제하기 않기 때문에 버그가 많이 발생할 수 있다. 타입 스크립트를 사용하면 이걸 방지할 수 있음(타입이 있는 언어만 주로 사용하다 보니 이 부분이 어려운 것일 수도 있다). 타입 스크립트에는 다른 특징도 많이 있지만 그건 찬찬히 알아 나가기로.. 리액트 타입 스크립트 프로젝트 생성 $yarn create react-app my-app --template typescript tsx확장자로 파일이 생긴다. $yarn start 기존 리액트 프로젝트 처럼 잘 실행된다. 타입스크립트 핸드북 https://www.typescriptlang.org/ko/docs/handbook/intro.html https://jinib.. 2022. 3. 6. 리액트 프로젝트 생성 - 셀프 개발자 코딩 부트캠프 리액트 프로젝트 생성 yarn create react-app $yarn create react-app hello-react 프로젝트에 기본 파일들이 생성된다. $yarn start 를 실행하면 리액트 프로젝트가 실행된다. http://localhost:3000/ 로 접속하면 위와같은 화면이 나온다. 비주얼 스튜디오로 프로젝트를 연다. // 특정 파일 불러오기 import logo from './logo.svg'; import './App.css'; // App 이라는 함수 컴포넌트 새성 function App() { return ( // jsx -> js의 확장 문법으로 번들링 과정에서 js형태로 변함 Edita src/App.js and save to reload. Learn React ); } exp.. 2022. 3. 6. 리액트 - 셀프 개발자 코딩 부트캠프 리액트 페이스북(메타)에서 개발한 View 만을 위한 라이브러리. Virtual DOM(VDOM) 메모리에 가상의 DOM을 만들고 실제 DOM과 동기화. DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화. 데이터를 업데이트 하면 전체 UI를 VDOM에 리렌더링 -> 이전 VDOM과 비교하고 변한 부분만 DOM에 적용. 리액트는 View만 신경쓰기 때문에 라우팅, 상태관리, Ajax처리같은건 다른 라이브러리의 도움을 받아야 한다. Yarn yarn이 npm에 비해 더 빠르고 보안성이 좋다고 한다. 고양이 아이콘이 귀엽다. # yarn 설치 $npm install --global yarn # 리액트 에디터 아무거나 사용해도 상관 없지만 VS Code추천 : 맥, 윈도우 모두 지원하기 때문에 좋다. .. 2022. 3. 6. 깃허브 github 란? git을 무료로 호스팅 해주는 사이트입니다. 원래 공개 프로젝트가 아니라면 유료였는데 마이크로소프트에게 인수된 후에 무료가 되었습니다. (최근에는 블리자드를 인수했죠.. 괴물 회사..). 다양한 기능을 쓰고 싶다면 돈을 내고 써야 합니다. 소스코드만 올리고 내릴 예정이라면 무료 플랜도 충분합니다. 전 회사에도 그냥 무료로 사용..ㅎㅎ 깃허브 기능 너무 기능이 많아서 몇 가지만 설명하겠습니다. ## 소스코드 저장 기능 : 깃허브 서버에 소스코드를 저장할 수 있습니다. 올릴 때마다 변경점이 기록되고 필 때 과거로 돌아갈 수도 있습니다. ## 코드 리뷰 : 내가 올린 코드를 다른 사람이 검토해줄 수 있습니다. 마치 발가벗겨진 느낌을 받을 수 있습니다. ## 브랜치 기능 : 깃에서 가장 중요한 기능입니다. 나무.. 2022. 1. 22. 이전 1 2 다음 728x90 반응형
