본문 바로가기

분류 전체보기10

2장 Divide-and-Conquer Divide & Conquer(분할정복식) 설계 전략 분할(Divide): 해결하기 쉽도록 문제를 여러 개의 작은 부분으로 나눔 정복(Conquer): 나눈 작은 문제를 각각 해결 통합(Combine): (필요하다면) 해결된 해답을 모음 재귀적(recursive) 방법으로 분할하고 정복하여 해결함 🤔 이러한 문제 해결 방법을 무엇이라고 할까요? Top-Down(하향식) 접근 방식 구조 위주(모듈 단위) ⇒ 절차지향(구조적) 프로그래밍 (ex. C언어) 🤔 top-down 방식의 장점을 생각해봅시다. Bottom-Up(상향식) 접근 방식 데이터 위주(객체 단위) 객체지향(데이터) 프로그래밍 (ex. C++, JAVA 언어) 🤔 bottom-up 방식의 장점을 생각해봅시다. Divide & Conquer D.. 2022. 9. 29.
[리액트를 다루는 기술] 4장 이벤트 4.1 리액트의 이벤트 시스템 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 한다. 리액트의 이벤트 시스템은 HTML 이벤트와 인터페이스가 동하기 때문에 사용법이 비슷하다. 1. 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성한다. onclick -> onClick onkeyup -> onKeyUp 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다. 화살표 함수로 바로 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전달해도 된다. DOM 요소에만 이벤트를 설정할 수 있다. div, button 등의 DOM 요.. 2022. 3. 12.
[리액트를 다루는 기술] 3장 컴포넌트 컴포넌트는 데이터가 주어졌을 때 이에 맞춰 UI를 만들어 준다. 또한, 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다. 3.1 클래스형 컴포넌트 컴포넌트 선언 방식은 함수형 컴포넌트와 클래스형 컴포넌트로 2가지이다. import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 클래스형 컴포넌트의 경우, state 기능 및 라이프사이클 기능을 사용할 수 있다는 점과 임의 메서드를 .. 2022. 3. 9.
[리액트를 다루는 기술] 2장 JSX function App() { return ( Edit src/App.js and save to reload. Learn React ); } function 키워드를 사용하여 만든 컴포넌트를 함수형 컴포넌트라고 부른다. 프로젝트에서 컴포넌트를 *렌더링하면 함수에서 반환하고 있는 내용을 나타낸다. 함수에서 반환하는 내용은 HTML으로 작성한 것처럼 보이지만 JSX로 이루어진 코드이다. *렌더링: '보여 준다'는 것을 의미한다. 2.2 JSX란? 자바스크립트의 확장 문법으로 XML과 비슷하게 생겼다. JSX로 작성한 코드는 브라우저에서 실행되기 전, 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX 코드의 변환 function App() { return ( Hell.. 2022. 3. 7.