웹개발
-
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" ..
-
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..
-
JavaScript (3)웹개발/JavaScript 2020. 12. 29. 01:00
* Making a JS Clock · setInterval(fn, millisecond) 함수 fn을 millisecond 마다 실행 - index(1).html 00:00 - index(1).css body{ background-color:#ecf0f1; } .btn{ cursor:pointer; } h1{ color:#34495e; transition: color 0.5s ease-in-out; } .clicked{ color:#7f8c8d; } - clock.js const clockContainer=document.querySelector(".js-clock"), clockTitle=clockContainer.querySelector("h1"); function getTime(){ const d..
-
JavaScript (2)웹개발/JavaScript 2020. 12. 28. 22:12
· 함수 function sayHello(name, age){ console.log('Hello!', name, "you have", age, "years of age."); } sayHello("Nicolas", 15); · 출력 형식 console.log('Hello!', name, "you have", age, "years of age."); //공백 자동 생성 console.log('Hello!'+ name + " you have" + age + " years of age."); //공백 자동 생성 x console.log(`Hello! ${name} you have ${age} years of age.`); //변수가 있어야 함 - More Function Fun const calculator ..