전체 글321 [JAVA] 프로그래머스 : Stack/Queue Lv2. 쇠막대기 [문제] 여러 개의 쇠막대기를 레이저로 절단하려고 합니다. 효율적인 작업을 위해서 쇠막대기를 아래에서 위로 겹쳐 놓고, 레이저를 위에서 수직으로 발사하여 쇠막대기들을 자릅니다. 쇠막대기와 레이저의 배치는 다음 조건을 만족합니다. - 쇠막대기는 자신보다 긴 쇠막대기 위에만 놓일 수 있습니다. - 쇠막대기를 다른 쇠막대기 위에 놓는 경우 완전히 포함되도록 놓되, 끝점은 겹치지 않도록 놓습니다. - 각 쇠막대기를 자르는 레이저는 적어도 하나 존재합니다. - 레이저는 어떤 쇠막대기의 양 끝점과도 겹치지 않습니다. 아래 그림은 위 조건을 만족하는 예를 보여줍니다. 수평으로 그려진 굵은 실선은 쇠막대기이고, 점은 레이저의 위치, 수직으로 그려진 점선 화살표는 레이저의 발사 방향입니다. 이러한 레이저와 쇠막대기의 배.. 2020. 1. 29. 이벤트 핸들링 DOM 엘리먼트를 처리하는 것과 유사하다. Activate Lasers HTML Activate Lasers React 카멜케이스를 사용하며 리엑트에서는 false를 반환하더라도 기본동작을 방지 할 수 없어 preventDefault를 명시적으로 호출해야한다. Click me HTML function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( Click me ); } React e는 합성이벤트이기에 브라우저에 대한 호환성에 고려할 필요가 없다. ES6클래스를 사용하여 컴포넌트를 정의할 때, 일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것이다.. 2020. 1. 23. 클래스형 컴포넌트, state, props 클래스형 컴포넌트, 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name} } export default App; import React, {Component} from 'react'; class App extends Component { render() { const name = 'react'; return {name} } } export default App; 함수형, 클래스형 컴포넌트의 차이점 함수형 컴포넌트 state 기능 및 라이프 사이클 기능을 사용할 수 없다. 리액트 16.8부터 Hook을 이용해 보완 클래스형 컴포넌트보다 간단 클래스형 컴포넌트보다 메모.. 2020. 1. 22. JSX const element = Hello, world!; 자바스크립트의 확장 문법이다. 문자열도 HTML도 아니며, 템플릿 언어가 아닌 자바스크립트를 기반으로 하고 있다. JSX는 리액트의 element를 만든다. 리액트에서 JSX를 사용하는 이유 리엑트는 렌더링 로직이나 다른 UI 로직과 본질적으로 결합되어 있으며, 이벤트 처리방법, 시간에 따른 변경 방법, 데이터 표시 등을 포함하고 있다. 리엑트는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하며, 이를 모두 포함하는 컴포넌트라 불리는 느슨한 연결 유닛으로 관심사를 분리한다. 리엑트에서 JSX사용을 필수로 하지 않지만 자바스크립트 코드 내부의 UI로 작성시 시각적으로 도움을 줄 수 있다. 간단한 표현식 function formatName(.. 2020. 1. 21. 이전 1 ··· 31 32 33 34 35 36 37 ··· 81 다음
