* 연습과제 1 import logo from './logo.svg'; import './App.css'; import React, { Component } from 'react'; class App extends Component { state = { cnt: 0 } countNumber = () => { this.setState({cnt: this.state.cnt + 1}) } render(){ const {cnt} = this.state return ( 카운트: {cnt} change name ) } } export default App; * 연습과제 2 import logo from './logo.svg'; import './App.css'; import React, { Component } f..

* 연습과제 1 import React from 'react'; class Friend extends React.Component { render() { const { name, age, city } = this.props return ( {name} {age} {city} ----------------- ) } } export default Friend; 해답 1 import logo from './logo.svg'; import './App.css'; import Friend from './Friend' function App() { return ( ); } export default App; 해답 2 import React, { Component } from 'react' import Friend ..

* 연습과제 1 해답 1 const fruit = 'apple' let printB = null function printA(){ const fruit = 'banana' printB = function(){ console.log(fruit) } printB() } printA() // banana printB() // banana 해답 2 const fruit = 'apple' let printB = null function printA() { const fruit = 'banana' function printB() { console.log(fruit) } printB() return printB } printB = printA() // banana printB() // banana * 연습과제 2 f..

함수 참고문서 2 함수 - JavaScript | MDN 함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범 developer.mozilla.org * 함수 스코프 - 렉시컬 스코프(Lexical Scope) 또는 정적 스코프(Static Scope) 스코프 참고 블로그 자바스크립트 - 렉시컬 스코프(Lexical Scope) 들어가기에 앞서, Closure(클로져)를 이해하기 위해서는 반드시 렉시컬 스코프(Lexical Scope)를 이해해야 한다. 렉시컬 스코프란(Lexical Scope)란? 함수를 어디서 호출하는지가 아니라 어디에 선언하였 ljtaek2.ti..

* 연습과제 1 해답 1 function findMaxValue(...args){ let max = -Infinity for(let arg of args){ if(max < parseFloat(arg)){ // 숫자가 아닌 값들은 NaN 이며 NaN 과 비교하면 모두 false 이므로 조건문을 건너뛴다 max = parseFloat(arg) } } return max } // 테스트 케이스 console.log(findMaxValue(-3, 7, -345, 41, 9, 137, 69)) console.log(findMaxValue(-31, 8, null, -26, false, 92, {}, 284, 923, [], "2045.8", 'zip', 54, "1024")) 해답 2 function findMa..

* 연습과제 1 function pickRandomNumber(min, max){ return Math.floor( Math.random() * (max-min+1) ) + min } function createTesters(len){ const group = [] for(let i=0; i= 0.37 && qos { tester.calQualityOfSleep() // console.log('----------------------') // console.log(tester.timeToAsleep) // console.log(tester.timeToWakeup) // console.log(tester.numsOfWakeup) // console.log(tester.numsOfMove) // consol..

* 연습과제 1~3 let sofaPrice = 360000 let sizeOfShoes = 275 const PI = 3.14 * 연습과제 4 const name = "sunrise" const message = "Happy halloween, " // 구현하기 console.log(message + name) console.log(`${message} ${name}`) * 연습과제 5 const letter = 'Dear syleemomo. \n\ Hello, syleemomo ^^ \n\ My name is kiki. Your sincere friend \n\ How are you thesedays? \n\ Are you busy or not? \n\ I guess you haven\'t sleep..

* 연습과제 1 // 컨테이너 생성 const photoContainer = document.createElement('div') photoContainer.id = 'photo-container' // 컨테이너에 추가하기 for(let i=0; i

* 연습과제 1~3 보여주고자 하는 4개의 사진이 필요함 body{ height: 200vh; } #section{ display: flex; justify-content: center; align-items: center; margin-top: 400px; } .contents{ background-color: brown; width: 300px; height: 300px; text-align: center; line-height: center; margin-right: 10px; opacity: 0; transition: all .5s ease; overflow: hidden; } .contents img{ width: 100%; height: 100%; } .up{ /* y 좌표를 아래쪽으로 100..

* 연습과제 1 body{ margin: 0; padding: 0; background: #0e1111; } .color-box{ background-color: #0e1111; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; } #color-input{ all: unset; width: 300px; height: 50px; border: 2px solid lightgreen; padding: 10px; border-radius: 15px; color: lightgreen; font-size: 1.2rem; font-weight: bold; position: absolute; left: 50%; top: 50%; transform: tr..