컴포넌트를 선언하는 방식 함수 컴포넌트 클래스형 컴포넌트 클래스형 컴포넌트 특징 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은 창고를 옆에서 본 모습을 그린 것이다. 이 그림에서 굵은 선으로 ..
리액트 사용 이유 인스타그램 등 요즘 웹들을 보면 모바일 App 처럼 부드럽게 동작하는 웹들이 많다. 메이저 SNS들도 새로고침 없이 웹 탐색이 가능하다. 이런 사이트들은 모바일 앱과 비슷한 사용감을 가져서 Web -App이라고 부른다. 이런 Web-App을 쉽게 만들 수 있는 것이 React이다. 장점 모바일 앱으로 발행이 쉽다. 앱처럼 뛰어난 UX 그냥 웹사이트보다 비즈니스적 강점이 있다. 리액트 설치와 셋팅법 Node.js 검색 후 최신버전 설치하기 Visual Studio Code 설치하기 작업 폴더 생성 -> 에디터에서 Open Folder 눌러서 작업 폴더 오픈 리액트 프로젝트 생성 : 터미널에서 "npx create-react-app 이름" 입력 npx : 라이브러리 설치를 도와주는 명령어(..
16931번 겉넓이 구하기 https://www.acmicpc.net/problem/16931 16931번: 겉넓이 구하기 크기가 N×M인 종이가 있고, 종이는 1×1크기의 칸으로 나누어져 있다. 이 종이의 각 칸 위에 1×1×1 크기의 정육면체를 놓아 3차원 도형을 만들었다. 종이의 각 칸에 놓인 정육면체의 개수가 주어 www.acmicpc.net 문제 크기가 N×M인 종이가 있고, 종이는 1×1크기의 칸으로 나누어져 있다. 이 종이의 각 칸 위에 1×1×1 크기의 정육면체를 놓아 3차원 도형을 만들었다. 종이의 각 칸에 놓인 정육면체의 개수가 주어졌을 때, 이 도형의 겉넓이를 구하는 프로그램을 작성하시오. 위의 그림은 3×3 크기의 종이 위에 정육면체를 놓은 것이고, 겉넓이는 60이다. 입력 첫째 줄..
10826번 피보나치 수 4 https://www.acmicpc.net/problem/10826 10826번: 피보나치 수 4 피보나치 수는 0과 1로 시작한다. 0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1이다. 그 다음 2번째 부터는 바로 앞 두 피보나치 수의 합이 된다. 이를 식으로 써보면 Fn = Fn-1 + Fn-2 (n ≥ 2)가 www.acmicpc.net 문제 피보나치 수는 0과 1로 시작한다. 0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1이다. 그 다음 2번째 부터는 바로 앞 두 피보나치 수의 합이 된다. 이를 식으로 써보면 Fn = Fn-1 + Fn-2 (n ≥ 2)가 된다. n=17일때 까지 피보나치 수를 써보면 다음과 같다. 0, 1, 1, 2, 3, 5, 8, 1..