🍪 Study/웹
-
3.0 Class Components and State State 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 변하는 데이터, 조재하지 않는 데이터 생겨나고선 사라지고 변경되는 데이터, 하나에서 2개 또는 0이 되는 그런 종류의 데이터들 -> state가 필요하다. function component VS class component function component : function/ 무언가 return/ screen에 표시O class component : class/ react component로부터 확장/ screen에 표시O - render method 내부에 넣어야만 ㅎ나다. 📌 react는 자동적으로 모든 class component의 render method를 실행한다. - cl..
#3 STATE3.0 Class Components and State State 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 변하는 데이터, 조재하지 않는 데이터 생겨나고선 사라지고 변경되는 데이터, 하나에서 2개 또는 0이 되는 그런 종류의 데이터들 -> state가 필요하다. function component VS class component function component : function/ 무언가 return/ screen에 표시O class component : class/ react component로부터 확장/ screen에 표시O - render method 내부에 넣어야만 ㅎ나다. 📌 react는 자동적으로 모든 class component의 render method를 실행한다. - cl..
2021.01.10 -
2.0 Creating your first React Component Component : HTML을 반환하는 함수이다. ex) react는 component를 사용하여 HTML처럼 작성하려는 경우에 필요하다. javascript와 HTML 사이의 이러한 조합을 JSX라고 한다. 새로운 component Potato를 만들어보자 index.js에서 한 번에 둘 이상의 component를 rendering하려하면, 오류가 발생한다. ⛔ react application은 하나의 component만을 rendering해야 한다. -> 올바르게 사용한 예시 react는 Component를 가져와 Browser가 이해할 수 있는 평범한 일반 HTML로 만든다. 📌 react application은 하나의 com..
#2 JSX & PROPS2.0 Creating your first React Component Component : HTML을 반환하는 함수이다. ex) react는 component를 사용하여 HTML처럼 작성하려는 경우에 필요하다. javascript와 HTML 사이의 이러한 조합을 JSX라고 한다. 새로운 component Potato를 만들어보자 index.js에서 한 번에 둘 이상의 component를 rendering하려하면, 오류가 발생한다. ⛔ react application은 하나의 component만을 rendering해야 한다. -> 올바르게 사용한 예시 react는 Component를 가져와 Browser가 이해할 수 있는 평범한 일반 HTML로 만든다. 📌 react application은 하나의 com..
2021.01.10 -
💡 #0 Introduction에 Requirements가 포함되어 있으니 꼭 읽고 넘어오세요. 1.0 Creating your first React App npx create-react-app movie_app_2020 VSCode로 해당 폴더를 Open한다. code movei_app_2020 package.json scripts 원래는 test, eject도 있지만 remove 나머지 config들은 신경 안 써도 된다. 파일들 중 yarn.lock은 default로 생성된다. 노마드코더에서는 필요없기 때문에 Delete yarn은 npm과 같은 역할을 한다. VSCode의 terminal에서 npm start를 입력한다. (본인 기준 시간이 좀 걸렸음) server starting 메시지가 뜨고 ..
#1 SETUP💡 #0 Introduction에 Requirements가 포함되어 있으니 꼭 읽고 넘어오세요. 1.0 Creating your first React App npx create-react-app movie_app_2020 VSCode로 해당 폴더를 Open한다. code movei_app_2020 package.json scripts 원래는 test, eject도 있지만 remove 나머지 config들은 신경 안 써도 된다. 파일들 중 yarn.lock은 default로 생성된다. 노마드코더에서는 필요없기 때문에 Delete yarn은 npm과 같은 역할을 한다. VSCode의 terminal에서 npm start를 입력한다. (본인 기준 시간이 좀 걸렸음) server starting 메시지가 뜨고 ..
2021.01.10 -
노마드코더 영상을 보면서 React를 공부해보자!nomadcoders.co/react-fundamentals ReactJS로 영화 웹 서비스 만들기 - 노마드 코더 Nomad CodersReact Fundamentalsnomadcoders.co Requirements1. Node.js2. npm3. npx4. git CMD에서..Node.js + npm설치node -vnpm -v(node.js 는 npm이랑 같이 옴 -> 따로 설치 안 해도 됨) npx 설치(npm instal npx -g)npx -v git --version없으면 설치 VSCode 설치(다른 코드 에디터도 가능) HTML, CSS, Jnode.js, package.json 도 알면 좋지만 몰라도 강의에서 설명해줌Why React?거..
#0 INTRODUCTION노마드코더 영상을 보면서 React를 공부해보자!nomadcoders.co/react-fundamentals ReactJS로 영화 웹 서비스 만들기 - 노마드 코더 Nomad CodersReact Fundamentalsnomadcoders.co Requirements1. Node.js2. npm3. npx4. git CMD에서..Node.js + npm설치node -vnpm -v(node.js 는 npm이랑 같이 옴 -> 따로 설치 안 해도 됨) npx 설치(npm instal npx -g)npx -v git --version없으면 설치 VSCode 설치(다른 코드 에디터도 가능) HTML, CSS, Jnode.js, package.json 도 알면 좋지만 몰라도 강의에서 설명해줌Why React?거..
2021.01.10