* 연습과제 1 import './App.css'; import React from 'react' import styled, { css } from 'styled-components' const Button = styled.button` all: unset; color: white; cursor: pointer; border-radius: 5px; font-weight: bold; margin-left: 10px; display: inline-flex; align-items: center; justify-content: center; &:hover{ opacity: 0.7; } /* 버튼의 크기 설정 */ ${props => { const size = props.size || 'medium' switch..

* Styled Components 의 개념 Tagged Template Literal 을 이용하여 자바스크립트 파일 안에서 컴포넌트 스타일링을 한다. * styled-components 모듈 설치하기 npm install styled-components 위의 명령어를 실행하여 모듈을 설치하자! * Tagged Template Literal 의 개념 Tagged Template Literal 은 Template Literal 과 유사하다. Template Literal 은 문자열 안에서 달러와 중괄호를 사용하여 아래와 같이 자바스크립트 표현식을 삽입할 수 있다. import './App.css'; import React, { Component } from 'react' function App() { co..

* 연습과제 1 import React from 'react' import './Button.scss' function Button({ children, size, color, width, handleClick, disabled }){ return {children} } export default Button; Button.defaultProps = { size: 'medium', color: 'tomato', disabled: false } @use "sass:list"; $colors: blue, tomato, grey; $hover-colors: skyblue, lightsalmon, lightgray; $sizes: large, medium, small; $default-height: 50px; ..

https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com npm 설치없이 sass 파일을 컴파일하려면 비주얼 스튜디오 편집기에서 위의 확장프로그램을 설치하면 된다. index.html 파일을 위와 같이 작성한다. 그리고 style.scss 파일을 생성하고 링크를 걸어준다. 이때 주의할점은 html 문서에서 링크를 연결할때는 style.css 로 작성하는 것이다. 그런 다음 비주얼 편집기 우측 하단의 Watch Sass 버튼을 클릭하면 style..

* 연습과제 1 import Button from './Button' import './Nav.css' function Nav(){ const navigate = (url) => { window.location.href = url } return ( navigate("https://google.com")}>구글 navigate("https://naver.com")}>네이버 ) } export default Nav .nav-container{ display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 70px; box-shadow: 0 4px 10px 2px grey; position: fixed; z-index: ..

* 연습과제 2 import './App.css'; import React, { Component } from 'react' class App extends Component { state = { numbers: '' } pickRandomNumber = (min, max) => { return Math.floor( Math.random() * (max-min+1) ) + min } isDuplicated = (numbers, picked) => { return numbers.find(num => num === picked) } getLottoNum = (numbers) => { // console.log("length: ", numbers) const picked = this.pickRandomNumb..

* 연습과제 2 import './App.css'; import React, { Component } from 'react' class App extends Component { render(){ const users = [ {name: 'victoria', age: 13, city: 'seoul', email: 'victoria@gmail.com'}, {name: 'sun', age: 34, city: 'busan', email: 'sun@gmail.com'}, {name: 'johseb', age: 25, city: 'busan', email: 'johseb@gmail'}, // 탈락 {name: 'syleemomo', age: 9.23, city: 'seoul', email: 'syleemomo@n..

* 연습과제 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..