리액트의 이벤트 시스템 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다. 이벤트 사용 시 주의 사항 이벤트 이름 : 카멜 표기법으로 HTML에서는 onclick 으로 작성하지만 리액트에서는 카멜 표기법으로 onClick 으로 작성해야 한다. 이벤트에 함수 형태의 값을 전달 HTML에서 이벤트를 설정할 때 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다. 화살표 함수 문법을 사용하거나 혹은 외부에 미리 함수를 만들어서 전달하기도 한다. DOM 요소에만 이벤트를 설정할 수 있다. -> 클릭할 때 doSomething함수를 실행하..

컴포넌트를 선언하는 방식 함수 컴포넌트 클래스형 컴포넌트 클래스형 컴포넌트 특징 render 함수가 있어야 하고, 그 안에서 보여주어야 할 JSX를 반환해야 함 tate 기능 및 라이프 사이클 기능을 사용할 수 있음 임의 메서드를 정의할 수 있음 함수 컴포넌트 장점 클래스형 컴포넌트보다 선언하기 편함 메모리 자원도 덜 사용 프로젝트를 완성하여 빌드한 후 배포할 때, 결과물의 파일 크기가 더 작음 함수 컴포넌트 단점 state와 라이프사이클 API 사용 불가능 -> Hooks 기능이 도입되면서 해결 Props Props : properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 props 값 : 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있음 컴포넌트를 사용할 때 p..

컴퓨터 시스템(Computer System) 구성 공통 버스에 의해 연결된 여러 개의 장치 제어기 + 하나 이상의 CPU로 구성 CPU와 장치 제어기 : 메모리 사이클을 얻기 위해 서로 경쟁하면서 병행 수행 각 장치 제어기 : 특정 장치(ex)디스크 드라이브, 오디오 장치, 비디오 디스플레이 등)를 관리 : 자신만의‘ 로컬버퍼’(LocalBuffer)를 가지고 있음 (필요한 내용들을 저장하는 용도) 메모리제어기 : 공유 메모리에 대한 질서 있는 접근을 보장하기 위해서 제공 제어기는 인터럽트를 시스템 버스를 통해 실행 -> 인터럽트 구동식 컴퓨터(Interrupt Driven Computer) Common Functions of Interrupts 인터럽트(Interrupt) : 적절한 서비스 루틴(ISR..

코드 이해하기 VScode > 파일 > 열기 (리액트 폴더 열기) → Src/App.js 열기 Import 구문 : 특정 파일을 불러오는 것 import logo from './logo.svg'; import './App.css'; function 키워드를 통해서 컴포넌트를 만듦 → 함수 컴포넌트 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타냄 함수에 반환하는 내용을 보면 HTML 같지만 JSX라는 코드이다. //hello-react/src/App.js function App() { return ( Edit src/App.js and save to reload. Learn React ); } JSX란? JSX는 자바 스크립트의 확장 문법, XML과 유사하게 생김. function ..

리액트 : 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 View만 신경쓰는 라이브러리 컴포넌트 : 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체 : 재사용이 가능한 API로 수많은 기능들을 내장 : 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의 렌더링 : 사용자 화면에 뷰를 보여 주는 것 리액트 특징 - Visual DOM 1. DOM이란? Document Object Model의 약어 (= 객체로 문서 구조를 표현하는 방법, XML, HTML로 작성) DOM의 문제점 : 동적 UI에 최적화 되어있지 X → 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다보면 성능 이슈 발생. 해결방법 : DOM을 최소한으로 조작하여 작업을 처리 → Virtual DOM 2..

운영체제 정의 컴퓨터의 (H/W)를 관리하는 프로그램들의 집합체 ‘응용 프로그램’을 위한 기반을 제공, 컴퓨터 사용자와 H/W 사이에서 중재자 역할을 수행하는 프로그램 중재자 역할 : 운영체제 목적 대형 컴퓨터 OS : 하드웨어의 이용을 최적화하는 데 주안점을 둠 (H/W 효율성) => 최적화 해서 효율성을 높일 수 있는가? 개인용 컴퓨터(PC) OS : 복잡한 게임, 비즈니스 응용 등 중간에 위치하는 모든 응용을 지원 (개인의 사용 용이성) => 개인의 목적에 맞는 응용 자원이 중요! 휴대용 컴퓨터 OS : 사용자가 프로그램을 수행하기 위해 컴퓨터와 쉽게 인터페이스 할 수 있는 환경 제공 (사용의 편리성) => 이동성을 강조하기 위해 PC보다 제약성多 -> 용이성보다 인터체이스를 어떻게 제공하느냐?에 ..

2644번 촌수계산 https://www.acmicpc.net/problem/2644 문제 우리 나라는 가족 혹은 친척들 사이의 관계를 촌수라는 단위로 표현하는 독특한 문화를 가지고 있다. 이러한 촌수는 다음과 같은 방식으로 계산된다. 기본적으로 부모와 자식 사이를 1촌으로 정의하고 이로부터 사람들 간의 촌수를 계산한다. 예를 들면 나와 아버지, 아버지와 할아버지는 각각 1촌으로 나와 할아버지는 2촌이 되고, 아버지 형제들과 할아버지는 1촌, 나와 아버지 형제들과는 3촌이 된다. 여러 사람들에 대한 부모 자식들 간의 관계가 주어졌을 때, 주어진 두 사람의 촌수를 계산하는 프로그램을 작성하시오. 입력 사람들은 1, 2, 3, …, n (1 ≤ n ≤ 100)의 연속된 번호로 각각 표시된다. 입력 파일의 첫..

2304번 창고 다각형 https://www.acmicpc.net/problem/2304 문제 N 개의 막대 기둥이 일렬로 세워져 있다. 기둥들의 폭은 모두 1 m이며 높이는 다를 수 있다. 이 기둥들을 이용하여 양철로 된 창고를 제작하려고 한다. 창고에는 모든 기둥이 들어간다. 이 창고의 지붕을 다음과 같이 만든다. 지붕은 수평 부분과 수직 부분으로 구성되며, 모두 연결되어야 한다. 지붕의 수평 부분은 반드시 어떤 기둥의 윗면과 닿아야 한다. 지붕의 수직 부분은 반드시 어떤 기둥의 옆면과 닿아야 한다. 지붕의 가장자리는 땅에 닿아야 한다. 비가 올 때 물이 고이지 않도록 지붕의 어떤 부분도 오목하게 들어간 부분이 없어야 한다. 그림 1은 창고를 옆에서 본 모습을 그린 것이다. 이 그림에서 굵은 선으로 ..