분류 전체보기
-
리액트 주요개념 - State and LifecycleIT/리액트 2022. 1. 15. 18:50
State란? 동적인 데이터를 다루기 위해 사용되는 해당 컴포넌트가 다루는 값들을 의미합니다. props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어가 됩니다. props: properties의 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용함 리액트 주요개념 - 엘리먼트 렌더링에서 실습했던 시계 예제를 응용해 Clock 컴포넌트를 생성하여 완전히 재사용하고 캡슐화하는 방법을 설명드리겠습니다. 이 컴포넌트는 스스로 타이머를 설정할 것이고 매초 스스로 업데이트할 것입니다. function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tick() { ReactDO..
-
리액트 주요개념 - Component와 PropsIT/리액트 2022. 1. 15. 01:10
컴포넌트는 JavaScript 함수와 유사합니다. props(임의의 입력)을 받은 후 React Element(화면에 어떻게 표시되는지 기술)반환합니다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 벙법: JavaScript 함수 작성 function Welcome(props) { return Hello, {props.name}; } 위의 함수는 데이터를 가진 객체 인자를 받은 후 React 엘리먼트를 반환하기 때문에 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 함수 컴포넌트라고 호칭합니다. 또한, ES6 class를 사용하여 컴포넌트를 정의할 수 있는데 React 관점에서 볼 때 위, 아래 두 가지 유형의 컴포넌트는 동일합니다. class ..
-
리액트 주요개념 - 엘리먼트 렌더링IT/리액트 2022. 1. 15. 00:05
엘리먼트(Element)란? React 앱의 가장 작은 단위로 화면에 표시할 내용을 기술합니다. 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. 이때, 객체는 type(문자열 혹은 컴포넌트 함수, 클래스) 필드와 props(객체) 필드를 가집니다. 일반적으로 JavaScript의 React.createElement() 함수 또는 JSX의 태그 문법으로 작성합니다. 돔 엘리먼트: 엘리먼트의 type이 태그 이름에 해당하는 문자열인 경우 해당 태그를 가진 DOM 노드를 표현하며, props 정보를 통해 해당 노드의 속성들을 표현 예) DOM에 엘리먼트 렌더링하기 vscode에서 리액트를 생성하면 html 파일에 다음과 같은 코드가 생성됩니다. 이 안에 들어가는 ..
-
리액트 주요개념 - JSXIT/리액트 2022. 1. 12. 23:59
리액트 홈페이지의 문서를 이용해 공부한 내용입니다. https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 실습을 하기 전 리액트를 설치해야합니다. 설치방법은 따로 포스팅하지 않고 제가 참고한 블로그 링크를 공유하겠습니다! https://leirbag.tistory.com/105 React 설치 방법 1. node.js를 설치합니다. https://leirbag.tistory.com/104 node.js(16.13.1 LTS) 설치 및 express 프레임워크 실행 / nodemon 포함 1. node.js를 설치합니다 https://..
-
리액트 개요IT/리액트 2022. 1. 12. 22:49
리액트(React)란? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 리액트 역사 리액트의 역사를 알기 전 알아야할 개념을 우선 설명하겠습니다. DOM (Document Object Model) https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML (en-US) 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 developer.mozilla.org 가상 DOM https://velog.io/@mollog/R..
-
안드로이드 스튜디오 프로젝트 생성하기IT/모바일 프로그래밍 2021. 9. 18. 01:15
프로젝트 생성하기 File - New - New Project (android studio를 처음 사용하시는 분이라면 시작 화면에서 New Project 버튼을 선택하시면 됩니다.) Empty Activity 선택 (다양한 레이아웃이 존재하지만 실습을 진행하기 위해 빈 화면을 선택하였습니다. 각자 원하는 레이아웃을 선택해 개발하시면 됩니다.) 프로젝트 정보 입력 name: 프로젝트 명 package name: 기기에서 유일하게 식별할 수 있어야 하므로 겹치치 않아야합니다. 보통 기업에서는 도메인을 이용한다고 합니다. 만약 도메인이 android.com이라면 패키지명은 com.android.프로젝트 명으로 합니다. Save Location: 저장되는 위치 Language: 자바와 스칼라로 선택이 가능합니다..
-
분산 시스템 개요IT/분산 및 병렬처리 2021. 9. 17. 02:41
분산 시스템(Distributed System)이란? 사용자에게 단일 컴퓨터로 보여지는 자율 컴퓨터(컴퓨팅 요소)의 집합 여기서 자율 컴퓨터라는 것은 하드웨어적 요구사항이며 컴퓨팅 요소는 IoT와 같은 요소를 의미한다. 또한, 사용자에게 단일 컴퓨로 보여지는 것은 소프트웨어적 요구사항으로 중앙관리시스템과 같이 보여지는 것을 의미한다. Motivation 중앙 집중형 시스템은 여러 가지의 문제점이 있다. 우선 모든 요청이 한 곳으로 몰리기 때문에 병목현상으로 인한 부하가 늘어나 성능이 떨어질 수 있다. 또한, 중앙 집중형 시스템은 구축을 하는데 많은 비용이 필요하고 유지관리 비용도 많이 필요하다. 과거에는 모든 장치를 한 곳에 모은 슈퍼컴을 사용하였고 자원의 생성 기술도 발달하지 않았기 때문에 굉장히 비쌌..