본문 바로가기

Web/react

(11)
[React.js] 노마드코더 Movie App 서비스 만들기 #2 JSX & Props - React의 역할 = 에다 element(모든 react application)는 넣는다. - index.js를 살펴보면 ReactDomm이 App(application)을 render시키려고 하는 것을 알 수 있다.(위 그림 참고) - 개발자도구를 통해 보면 html안에 내가 만든 element를 찾아볼 수 없다. - application이 로드 할 때, 빈 html을 로드하고 react가 html을 밀어넣어준다. - React 가 빠른 이유 : Virtual이라 존재하기 않아서이다 Component란? React는 Component와 함께 동작한다. 모든 것은 Component 이다 Component는 data를 보여준다. Component는 html을 반환하는 함수이다. JSX란? 꼭 알아야할 ..
[React.js] 노마드코더 Movie App 서비스 만들기 #1 Setup 1. 리액트 앱 생성 및 실행 생성하고 싶은 위치로 이동한 다음에 터미널에서 React app을 생성한다. npx create-react-app movie_app_practice 성공적으로 만들어졌으면 내가 생성한 리액트 폴더(movie_app_practice) 로 이동한 후, npm이나 yarn을 시작한다. cd movie_app_practice yarn start 성공한다면 다음과 같은 창이 뜬다. 2. 프로젝트 초기화 App.js를 초기화 하는 작업이다. 필요없는 것들은 빼고 우리가 필요한 상태로 만들어보자. - logo.svg -serviceWorker.js -index.css -App.test.js -App.css - 남아 있는 파일들을 확인해보고, 위에 있는 파일이 import가 되어있다면 찾..
[React.js] React npm start 안될 때, 다시 초기화시켜보기 npm을 오랜만에 사용하면서 터미널에서 npm start 를 쳐도 사이트에 보안 연결할 수 없음, ERR_SSL_PROTOCOL_ERROR 위와 같이 뜨길래 다시 한번 공부를 하면서 내 머릿 속에 순서 없이 있는 것들을 정리하기 위해 이 글을 작성하게 되었다. 필자의 경우는 window를 사용하고 있기 때문에 cmd창에서 이행한다. 자 그럼 react를 사용하기 위한 환경을 설정해보자! 1. node.js, npm를 설치한다. npm은 node.js와 함께 설치됨. node.js는 nodejs.org에서 다운 받으면 된다. node.js와 npm이 설치가 되었는지 확인하기 위해서는 node. -v, npm -v와 같이 각각 치면 된다. 2. npx를 설치한다. npm install npx -g 3. re..