'분류 전체보기' 카테고리의 글 목록 (4 Page)

React :: 생명주기 (Lifecycle)

PROGRAMMING/React 2021. 3. 21. 18:33

생명주기 메서드 클래스 Component 에서 생명주기 메서드를 선언하여 컴포넌트가 마운트되거나 언마운트 될 때의 실행할 코드를 작성할 수 있다. 즉 Component 가 보여지고, 사라지고, 업데이트 될 때 호출되는 API 이다. 매우 중요하고, 사용하면 효율적인 프로그래밍을 할 수 있으니 잘 봐두자. componentDidMount() 컴포넌트 추력물이 처음 DOM 에 렌더링 된 후에 실행되는 함수. 주로 외부 라이브러리와의 연동, Component 에서 필요한 데이터 요청 등을 여기에 작성한다. componentDidMount() { //DOM 에 처음 Component 가 렌더링 될 때 실행됨 } componentWillUnmount() 마운트된 컴포넌트가 DOM 으로부터 한 번이라도 삭제된 적 ..

React :: Component, Props, State

PROGRAMMING/React 2021. 3. 20. 19:32

Component 개념적으로JavaScript 함수와 유사한 Component 는, Props 라는 입력을 받고, 로컬 State 를 가지고, React Element 를 반환한다. 따라서 컴포넌트를 통해 재사용 가능한 개별 '조각'을 만들 수 있다. 가장 간단히, 이름을 Props 로 받아서 "Hello, {user}" 를 보여주는 Element 를 반환하는 Component 가 있다고 하자. 그러면 그 Component 를 다른 Compnent 에서 import 해서 한 조각을 갖다 붙이듯 사용할 수 있는 것이다. * Props 의 개념은 밑에서 다루고, 일단 Component 가 외부에서 받아오는 데이터 라고만 알고 있자. 주의할 사항은, Component 이름은 항상! 대문자로 시작한다. Reac..

React :: Element Rendering (엘리먼드 렌더링)

PROGRAMMING/React 2021. 3. 20. 13:27

Element ? Element 는 React 의 가장 작은 단위로, 화면에 표시할 내용을 기술한다. 브라우저 DOM Element 와 달리, React Element 는 일반 객체이다. React DOM 은 React Element 와 일치하도록 DOM 을 업데이트한다. Component 의 "구성 요소"이다. Element 와 Component 는 다른 개념이다. Component 는 다음에 자세히! 불변객체이다. (즉, 생성 이후에 자식/속성 변경 불가) Element 작성하기 JSX 를 살펴볼 때, 이렇게 작성한 것이 바로 element 를 작성한 것이다. const element = Hello, world; DOM 에 Element 렌더링하기 이제 작성한 Element 를 렌더링 해보자. Roo..

React : JSX

PROGRAMMING/React 2021. 3. 20. 02:19

JSX 란? 리액트에서 컴포넌트를 작성할 때 사용하는, JavaScript 를 확장한 문법. JSX 를 다룰 때 기억해야 할 것은, JSX 는 표현식이라는 것이다. 그래서 변수에 할당하고, 인자로 받아들이고, 함수로 반환하고, 표현식을 포함할 수 있다. 변수에 할당하기 가장 기본적인 형태이다. const element = Hello, world!; 그 자체로 표현식이기 때문에 당연히 변수에 할당해서 사용할 수 있다. 이렇게 작성한 JSX 는 React "Element" 를 생성한다. 표현식 포함하기 JSX 는 JavaScript 표현식을 포함할 수 있다. const name = 'react'; const element = hello {name}!; const element2 = hello {userFun..

React :: React 시작하기

PROGRAMMING/React 2021. 3. 20. 00:27

React 를 처음 시작하려면, 여러 방법이 있는데 공식 웹사이트에서도 소개하는 CRA (Create React App) 을 사용해보자. React 란 무엇이고, 뭘 알고 있어야 할까? React 는 페이스북에서 제공하는 JavaScript 기반 UI 라이브러리 이다. 프레임워크가 아니라 라이브러리라서, 그만큼 가볍고 선택지가 넓다. JavaScript 기반이라 JavaScript 를 알면 배우기 쉽다. 반면에 모른다면 좀 애먹을 수 있다. 그런 경우를 위한 대책 - 공식 js 튜토리얼 완독하기 : developer.mozilla.org/ko/docs/Web/JavaScript/A_re-introduction_to_JavaScript (완벽한 대책이 되기는 어렵다. 다만 다른 프로그래밍 언어를 알고 있는..

칼리 리눅스(Kali Linux) 로 ARP Spoofing (스푸핑), Sniffing (스니핑) 실습하기

SECURITY/Network 2021. 3. 14. 19:44

이 블로그는 불법적인 해킹 행위를 권장하거나 유도하지 않습니다. 오로지 교육적인 목적으로만 실습하시고 사용해주세요. 불법 해킹에 대한 책임은 본인에게 있습니다. 1. 개념 소개 스니핑(Sniffing)이란? 스니프(Sniff) 는 "냄새를 맡다.", "킁킁거리다" 라는 뜻으로, 스니핑이란 네트워크 상에 지나다니는 패킷들을 캡처하여 그 안에 있는 내용을 들여다보는 기술이다. 또 스푸핑(Spoofing) 이란, 인터넷 프로토콜인 TCP/IP의 구조적 결함을 이용해 사용자의 시스템 권한을 획득한 뒤, 정보를 빼가는 해킹 수법이다. ARP Spoofing 이란, ARP 캐쉬에 저장되는 MAC(물리적 주소)를 속여 랜에서 통신 흐름을 왜곡시키는 해킹 수법이다. 2. 실습 소개 이번 실습에서는 공격자와 피해자의 가..

VMware 로 칼리 리눅스 (Kali Linux) 설치하기 + 한글 깨짐 해결

SECURITY 2021. 3. 14. 16:52

먼저, 칼리 리눅스를 설치하는 방법도 결국 가상 머신을 설치하는 방법과 같기에 이전에 가상 머신을 설치해 보셨다면 그와 비슷하게 설치하시면 됩니다. 가상머신을 설치하는 과정은 다음과 같습니다. 1) 설치하려는 OS 의 iso 파일 다운 받기 2) 사용하는 가상화 소프트웨어(VMware, VirtualBox 등등) 에서 해당 iso 파일로 가상 머신 만들기 그럼 지금부터 Kali Linux 가상 머신을 만드는 방법을 소개하도록 하겠습니다. 1. 칼리 리눅스 iso 파일 다운받기 칼리 리눅스 공식 홈페이지에 들어가 원하는 버전의 iso 파일을 다운받는다. (www.kali.org/downloads/) 사양에 따라,다운 받는데 꽤나 오래 걸린다.. 2. VMware 를 키고 가상 머신을 만든다. 1) Crea..

Proxy 프록시란?

SECURITY/Webhacking 2021. 2. 17. 22:45

Proxy 란? Proxy 는 ‘대리', '대신' 이라는 뜻을 가진다. 주로 보안상의 문제를 방지하기 위해, 직접 통신하지 않고 중계자를 거친다는 개념이다. 이 때 중계의 기능을 하는 것이 ‘프록시 서버' 이다. 클라이언트와 서버 사이에 프록시 서버가 '중계'를 할 때, 클라이언트는 프록시 서버를 ‘서버’ 라고 인식하고, 서버는 프록시 서버를 ‘클라이언트’ 처럼 여기게 된다. 즉, 프록시 서버가 클라이언트의 Request 와 서버의 Response 를 연결해주기 때문에 (의미적으로) 클라이언트 입장에서는 서버를 가리고 프록시 서버가 서있는 것이고, 서버 입장에서는 클라가 가려지고 대신 프록시 서버가 있는 것이다. 프록시 서버는 서버의 위치에 따라 [Forward Proxy] 와 [Reverse Proxy..

ABOUT ME

🏰 🏰

티스토리툴바