분류 전체보기 (107) 썸네일형 리스트형 React(리액트): props(properties), defaultProps, children 리액트에서 props는 컴포넌트를 사용할 때 특정 값을 전달해주는 역할을 한다. App.js import "./App.css"; import Hello from "./Hello"; function App() { return ; } export default App; App 컴포넌트에서 Hello 컴포넌트에게 name이라는 값과 color를 전달해주고 싶다면, 4번 줄과 같이 코드를 작성하면 된다. 여기서 name="react" color="red"가 바로 props이다. Hello.js import React from "react"; function Hello(props) { console.log(props); return ( 안녕하세요 {props.name} ); } export default Hell.. React(리액트): JSX 규칙 (태그, 중괄호{}, 주석) JSX의 기본 규칙 알아보기 JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다. 얼핏 보기에는 HTML처럼 생겼지만 사실 자바스크립트이다. 'BABEL(바벨)'이라는 도구를 사용해서 XML 형태의 코드가 자바스크립트로 변환이 되는 것이다. BABEL이라는 도구가 JSX라는 문법을 사용해서 XML형태로 선언하면 이걸 자바스크립트로 변환해준다. 이렇게 JSX로 작성한 코드가 자바스크립트로 제대로 변환되려면 준수해야할 몇 가지 규칙이 있다. 지금부터 그 규칙들을 알아보자. 첫 번째, 태그는 꼭 닫혀있어야 한다. import "./App.css"; import Hello from "./Hello"; function App() { return ( React(리액트): 리액트는 어쩌다가 만들어졌을까 리액트 라이브러리는 어쩌다가 만들어졌을까? 리액트라는 라이브러리가 어쩌다가 만들어졌는지 알면 리액트를 이해하는데 도움이 될 것이다. JavaScript를 사용해서 HTML로 구성한 UI를 제어해보았다면 DOM을 변형시키기 위해서 어떤 작업을 해야 하는지 익숙할 것이다. 여기서 DOM이란, 각 HTML element에 대한 정보를 지니고 있는 자바스크립트 객체이다. DOM을 변형하려면 브라우저의 DOM Select API를 사용해서 특정 DOM을 선택한 뒤에, 특정 이벤트가 발생하면 변화를 주는 작업을 해주어야 한다. const number = document.getElementById("number"); const increase = document.getElementById("increase"); co.. JavaScript: 비동기 처리, Promise, async/await, Promise.all, Promise.race 비동기 처리의 이해 동기적 처리란 위 그림과 같이 1번 작업이 끝나기 전까지는 2번이 시작하지 못하고, 2번이 끝나기 전까지는 3번이 시작하지 못하고 전 작업이 끝나야 다음 작업 시작이 가능한 것을 동기적 처리라고 한다. 비동기적 처리는 동시에 여러가지 작업을 실행할 수 있다. 어떤 코드가 실행 중일 때도 다른 함수 호출이 가능해 병렬적으로 작업을 수행한다. 비동기적 처리가 훨신 효율적인 것을 확인할 수 있다. function work(callback) { setTimeout(() => { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start + "ms").. JavaScript: spread와 rest (...) spread (연산자 '...') 먼저 spread라는 단어의 의미는 펼치다, 퍼뜨리다 이다. 이 문법을 사용하면 객체와 배열을 펼칠 수 있다. 기존에 만들었던 객체를 참고하여 새로운 객체를 만들고 싶다면 'spread'를 사용하면 편리하다. spread는 연산자 '...' 키워드로 사용할 수 있다. const slime = { name: "슬라임", }; const cuteSlime = { ...slime, attribute: "cute", }; const purpleCuteSlime = { ...cuteSlime, color: "purple", }; const greenCuteSlime = { ...purpleCuteSlime, color: "green", }; console.log(slime); /.. JavaScript: 비구조화 할당 const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); console.log(b); // 1 // 2 비구조화 할당 문법을 사용해서 object 객체의 a와 b를 바깥으로 꺼내어 출력해주는 코드이다. const object = { a: 1, b: 2 }; function print({ a, b }) { console.log(a); console.log(b); } print(object); // 1 // 2 함수에서도 비구조화 할당을 사용할 수 있다. const object = { a: 1 }; function print({ a, b = 2 }) { console.log(a); console.log(b); } print(object).. JavaScript: 단축 평가 논리 계산법(Short-circit evaluation) 단축 평가 논리 계산법이란, 이름은 거창하지만 사실 별거 없다. 논리 연산자를 사용해서 코드를 더 짧게 작성하는 것을 의미한다. 코드를 통해 알아보자. const dog = { name: "멍멍이", }; function getName(animal) { if (animal) { return animal.name; } return undefined; } const name = getName(dog); console.log(name); // 멍멍이 위 코드는 getName 함수의 파라미터인 animal이 있으면 그 객체의 name을 출력해주고 없을 경우 undefined를 출력하는 코드이다. const dog = { name: "멍멍이", }; function getName(animal) { return a.. 그리디: 백준 2828 파이썬 문제: https://www.acmicpc.net/problem/2828 2828번: 사과 담기 게임 상근이는 오락실에서 바구니를 옮기는 오래된 게임을 한다. 스크린은 N칸으로 나누어져 있다. 스크린의 아래쪽에는 M칸을 차지하는 바구니가 있다. (M= apple[i] and start apple[i]): move += start - apple[i] start = apple[i] end = apple[i] + (M - 1) print(move) 이전 1 ··· 9 10 11 12 13 14 다음
