728x90 반응형 리액트17 리액트 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. 셀프 코딩 부트캠프 - 리액트 최근 1인 개발을 해보려고 리액트 공부를 시작했습니다. 앱이나 서비스를 만들려면 리액트를 공부하는 게 가장 적합해 보였습니다. 아직 뭘 만들지는 좀 고민 중이지만 개발하는 중간과정들을 블로그에 공유할 예정입니다. 아마 아주 간단한 것부터 연습겸 제작해볼 예정입니다. 진정한 앱테크의 길로… 리액트 react js, react native, node.js 가 자바스크립트를 사용하기 때문에 한번 익숙해지면 풀 스택도 가능할 것 같았습니다. 코드도 공유해서 사용할 수 있고요. 자바스크립트가 타입을 명시하지 않아도 되기 때문에 편한 점들도 있겠지만 저는 불편했습니다. 개인적으로 버그 찾기가 힘든 듯.. 그 문제는 타입 스크립트를 공부하면 해결될 것 같았습니다. react js, react native는 개발 방법.. 2022. 2. 27. 이전 1 2 3 다음 728x90 반응형
