전체 글
-
ReactJS (5)웹개발/JavaScript 2021. 1. 4. 21:38
* Fetching Movies from API · axios : axios는 마치 fetch 위에 있는 작은 layer 터미널에 npm install axios 하여 설치 //async //javascript에게 componentDidMount 함수가 끝날 때까지 약간 시간이 걸릴 수 있다고 말해주고 그걸 기다려줘야 함 async componentDidMount(){ const movies = axios.get("https://yts-proxy.now.sh/list_movies.json"); } * Rendering the Movies getMovies = async () => { const movies = await axios.get("https://yts-proxy.now.sh/list_movies..
-
ReactJS (4)웹개발/JavaScript 2021. 1. 4. 16:27
* Class Components and State · state : 보통 우리가 동적 데이터와 함께 작업할 때 만들어짐 변하는 데이터, 존재하지 않는 데이터 그리고 생겨나고 그러고선 사라지고 또는 변경된 데이터, 하나인 데이터 그리고 두 개가 되고 또는 0이 되는 그런 종류의 것들 -> dynamic data 그리고 이런 props를 우리는 돕지않음 우리가 필요한 건 state · class Component class App extends React.Component{} //필수 (class react component) : react component는 뒤에 많은 것을 가지고 있고 그 중 하나가 우리가 이야기할 state 그리고 매번 우리가 component를 만들 때마다 모든 것을 다 구현하고 싶..
-
ReactJS (3)웹개발/JavaScript 2021. 1. 3. 18:24
* Reusable Components with JSX+Props · jsx : component에 정보를 보낼 수 있음, react가 멋진 이유는 재사용 가능한 component를 만들 수 있다는 점 이 말은 component를 계속해서 반복해서 사용할 수 있다는 것 - component에서 component로, children component로 정보를 보내는 방법 (1) react의 개념: food component에 kimchi라는 value로 prop name을 줌 import React from 'react'; function Food() { return I like Potato; } function App() { return ( Hello ); } export default App; food..
-
ReactJS (2)웹개발/JavaScript 2020. 12. 31. 16:11
· react : 그 곳에 쓰는 모든 요소를 생성한다는 것, 자바스크립트와 함께 그것들을 만들고 그것들을 HTML에 밀어넣음, 모든 react application을 div 사이에 넣음, react는 소스코드에 처음부터 HTML을 넣지않고, HTML에서 HTML을 추가하거나 제거하는 법을 알고 있음 -> application이 이것을 로드할 때, 빈 HTML을 로드하게되고 그런 다음에 react가 HTML을 밀어넣게 됨 (component에 작성해뒀던 것들) · virtual DOM (virtual document object model) : 소스코드에는 존재하지 않음, react가 만들어냄 -> react가 빠른 이유, virtual이고 존재하지 않기 때문 - npm start 상태를 유지해야 함 : ..
-
ReactJS (1)웹개발/JavaScript 2020. 12. 31. 15:04
* Requirements (1) node -v : nodejs 버전 확인 (2) npm : nodejs와 같이 설치됨 (3) npm install npx -g : npx 설치 (4) vscode : 에디터 설치, 다른 코드 에디터 사용해도 됨 (5) git --version : 깃 설치 확인 * Creating your first React App (1) cd Documents (2) npx create-react-app movie_app (3) vscode terminal 에서 npm start 입력 * Creating a Githun Repository (1) git init (2) git add . (3) git commit -m "#1.0 Creating your first React App" ..
-
깃허브 파일 업로드Git 2020. 12. 30. 23:01
(1) git init : git Repositiry 생성 (2) git status (3) git add * : 원하는 폴더나 파일을 git에 추가 (*: 모두) (4) git commit -m "메세지" (5) git remote add origin (원격저장소 주소) (붙여넣기 단축키 Shift + Insert) git remote 명령어를 통해 로컬 저장소의 변동사항을 원격 저장소와 연동 (origin-원격 저장소의 별칭) (6) git push origin master 모든 변동사항이 원격 저장소 github에 업로드 (master-브랜치명)
-
JavaScript (4)웹개발/JavaScript 2020. 12. 30. 15:38
* Image Background - index(1).html DOCTYPE html> Something 00:00 -index(1).css body{ background-color:#2c3e50; } .btn{ cursor:pointer; } body{ color:#34495e; } .clicked{ color:#7f8c8d; } .form, .greetings{ display: none; } .showing{ display: block; } @keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } } .bgImage{ position: absolute; top:0; left:0; width:100%; height:100%; z-index:-1; animat..