개인정보보호법 주요 내용 정리 (1) - 개인정보란 무엇인가?

개인정보 '개인정보란 살아 있는 개인에 관한 정보를 말한다.' 위 문장은 개인정보 보호법 제 2조 1항에 정의된 문장이다. 좀 더 구체적으로 기술하면 살아있는 개인에 관한 정보로서 성명, 주민등록번호, 이미지, 영상 등을 통하여 개인을 식별할 수 있는 정보라면 모두 개인정보에 포함된다. 이렇게 때문에 얼핏보면 되게 간단할 것 같지만서도 개인정보의 범위는 상당히 넓다. 유튜버들이 자신의 채널에 목소리가 나오고, 얼굴이 나오는 것도 모두 개인정보에 해당되고 그냥 우리가 집밖으로 나와서 활동을 하는 것도 행동적, 신체적 특징이라는 정보가 노출되고 있는 상태이기 때문에 길거리에 만연한 CCTV도 개인정보보호법의 영향을 받고 있는 것이다. CCTV는 원칙적으로 공개된 장소에서 설치, 운영되지 못하도록 규정되어있다..

• format_list_bulleted 개인정보보호
• · 2022. 9. 4.
• textsms

React - State 개념과 useState Hook

State 개념 리액트에서 State는 Component의 데이터 상태를 말한다. 한마디로 State란 개발자가 정의한 변경 가능한 데이터를 말하며 이는 자바스크립트 객체로서 존재한다. KeyPoint는 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다는 점이다. 왜냐하면 State가 변경될 경우 Component가 다시 렌더링 되기 때문에 그 외의 데이터가 State로 작성되면 불필요하게 다시 렌더링되어 성능저하를 초래하기 때문이다. 따라서 렌더링이나 데이터 흐름에 사용되지 않는 값들은 Component안에 instance field로 정의해서 사용한다. useState useState는 React의 내장 Hook 중 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해준다. 이는 ..

• format_list_bulleted React
• · 2022. 9. 3.
• textsms

React - component 합성과 추출

Component 합성 리액트에서는 Component안에 또 다른 Component를 사용할 수 있다. 따라서 복잡한 화면을 여러개의 Component로 구성할 수 있다. 예시) function Welcome(props) { return Hello, {prop.name} ; } function App(props){ reutrn( ) } ReactDom.render( , document.getElemnetById("root") ); 위 코드를 보면 Welcom 컴포넌트를 prop 를 다르게하여 여러번사용하는 것을 볼 수 있다. App이라는 Compoent는 Welcome이라는 컴포넌트를 포함하고 있는데 이러한 것을 컴포넌트 합성이라고 한다. Component 추출 컴포넌트 합성과 반대로 복잡한 컴포넌트를 ..

• format_list_bulleted React
• · 2022. 9. 3.
• textsms

React - Component 개념 정리

Component란? 리액트의 컴포넌트는 아래의 그림과 크게 클래스 컴포넌트와 함수 컴포넌트로 나누어 볼 수 있다. 리액트 초기버전에는 클래스 컴포넌트를 주로 사용하였으나 사용의 불편함이 대두되어 이후에는 함수 컴포넌트를 개선하여 사용하게 되었다. 함수 컴포넌트를 개선하면서 만들어진 것이 훅(Hook)이다. 훅이란 class를 이용한 코드를 작성할 필요 없이 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리이다. 이 훅을 통해서 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다. Function Component(함수형 컴포넌트) 모든 리액트 컴포넌트는 pure function과 같은 역할을 해야한다고 했다. 이는 곧 리액트 컴포넌트를 일종의 함수라고 생각한다는 것이다. 다음의 예시..

• format_list_bulleted React
• · 2022. 9. 2.
• textsms

React - props

props propertys의 약자로 React에서 Component의 속성을 의미한다. 이전 포스팅에서 이야기 했던 붕어빵이야기를 다시하자면 Component는 붕어빵 틀이고 Element는 만들어진 붕어빵과 같다고 했다. 그럼 여기서 props는 붕어빵의 속재료와 같다. 같은 붕어빵 틀에서 만들어졌더라 하더라도 안에 슈크림을 넣을지 팥을 넣을지에 따라 붕어빵이 달라지는 것처럼 Compoent를 통해서 만들어진 Element도 props에 따라서 틀은 같지만 내용은 다른 것들이 만들어지는 것이다. 이렇듯 props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체를 의미한다. props 특징 1. read-only : 값을 변경할 수 없다. 붕어빵이 다구워졌는데 속재료를 바꿀 수 없는 것과..

• format_list_bulleted React
• · 2022. 8. 29.
• textsms

React - 기본예제) 시계 만들기

프로젝트 구조 1. Clock.jsx import React from "react"; function Clock(props){ return( 안녕, 리액트! 현재 시간 : {new Date().toLocaleTimeString()} ); } export default Clock; 2. neonStyle.css .neonText{ color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; text-align: center; } #clock-header{ margin-top: 10%; } 3. index.c..

• format_list_bulleted React
• · 2022. 8. 29.
• textsms

React Elements 의 특징

1. immutable (불변성 ) 즉 Elements가 불변성의 특징을 가진다는 것은 Elements 생성후에는 chiledren이나 attributes를 바꿀 수 없다는 것을 의미한다. 붕어빵틀에 붕어빵속에 슈크림이 들어가던 팥이 들어가던 틀어 구워져서 만들어지기 전에는 다양한 붕어빵이 될 수 있지만 한번 슈크림이 들어가서 구워지면 그 속을 다시 팥으로 바꿀 수 없는 것과 마찬가지이다. 2. Root DOM Node 모든 리액트 앱은 단 하나의 Root DOM Node를 가지게 된다. 반면에 기존에 있던 웹사이트에 추가적으로 React를 연동하게되면 여러개의 분리된 수많은 Root DOM node를 가지게 될 수 도 있다. Root dvi에 실제로 React Elements를 랜더링 하기 위해서는 다..

• format_list_bulleted React
• · 2022. 8. 28.
• textsms

React - Rendering Elements와 React.createElements() 함수에 대해서

React Elements React의 official document를 참고하면 다음과 같은 내용을 볼 수 있다. Elements are the samllest building blocks of React apps. 즉 리액트 앱을 구성하는 가장 작은 블록을 Elements라고 한다. 아래의 사진과 같이 우리가 크롬에서 개발자 도구로 Elements 탭에서 보는 것들은 DOM Elements이다. 그렇다면 React Elements란 무엇일까? 너무나 심플하게도 Virtual DOM에 있는 Elements 를 React Elements라고 한다. 결국 React Elements는 DOM Elements의 가상표현이라고 볼 수 있다. 다만 DOM Elements는 React Elements에 비해서 많은..

• format_list_bulleted React
• · 2022. 8. 28.
• textsms