리액트 - 이벤트 속성

본 글은 를 참고해 공부한 내용을 정리한 글입니다. 이벤트 속성 모든 HTML 요소는 'on'으로 시작하는 이벤트 속성을 제공한다. 마우스 클릭이나 텍스트 입력이 이루어지면 '이벤트가 발생했다'라고 표현한다. 특정 이벤트가 발생하면 실행할 자바스크립트 함수를 지정하는 데 사용되는 것이 이벤트 속성이다. 이벤트 처리기 브라우저의 JS 엔진은 Event 타입을 제공한다. 이벤트의 대상이 될 수 있는 객체는 EventTarget 인터페이스의 addEventListener, removeEventListener, dispatchEvent라는 세 가지 메서드를 구현한다. addEventListener는 이벤트 처리기를 추가하는 메서드이다. document.getElementById('root')?.addEventL..

• format_list_bulleted React
• · 2023. 5. 13.
• textsms

웹 애플리케이션 정찰 - API 분석

이 글은 "웹 애플리케이션 보안 - 정찰, 공격, 방어 세 단계로 배우는 웹 애플리케이션 보안의 모든 것"을 읽고 공부한 내용을 정리한 글입니다. API 분석 웹 애플리케이션의 구조를 탐색할 때, 다시 말해 맵을 만들 때 서브도메인 탐색에 이어 두 번째로 수행해야 하는 단계는 API 찾기이다. 네트워크에 API가 노출되는 이유를 이해하면 API가 어떤 목적으로 사용되는지 파악할 수 있다. 엔드포인트 탐색 오늘날 웹 앱은 대부분 REST API 구조를 따른다. 개발자 도구를 사용해 네트워크 요청을 분석하면 API가 어떤 방식으로 설계되었는지 파악할 수 있다. REST API는 다음과 같은 특징이 있다. 요청 URL은 리소스를 나타내고 URI 경로 구분 기호('/')를 사용하여 리소스를 구성한다. URL 마..

• format_list_bulleted 웹해킹
• · 2023. 5. 13.
• textsms

웹 애플리케이션 정찰 - 서브도메인 찾기

이 글은 "웹 애플리케이션 보안 - 정찰, 공격, 방어 세 단계로 배우는 웹 애플리케이션 보안의 모든 것"을 읽고 공부한 내용을 정리한 글입니다. 서브도메인 찾기 API 엔드 포인트를 테스트하기 이전에 도메인 구조에 익숙해져야 한다. 웹 애플리케이션은 단일 도메인으로 서비스하지 않는다. 서브도메인을 찾아내 기록하는 것은 웹 애플리케이션 정찰의 첫 단계이다. 우리가 궁금한 것은, "도메인이 인터넷에 연결되어 있을텐데, 이 인터넷에 액세스할 수 있는 다른 서버도 갖고 있는가?"이다. 그러므로 서브도메인 탐색을 통해 아직 방어가 덜 된 쉬운 타깃을 찾는다. API와 end point API(Application Programming Interface)는 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙..

• format_list_bulleted 웹해킹
• · 2023. 5. 11.
• textsms

리액트 - 컴포넌트

본 글은 를 참고해 공부한 내용을 정리한 글입니다. 컴포넌트 일반적으로 컴포넌트는 자바의 AWT, Swing처럼 화면 UI를 처리하는 클래스를 의미한다. 하지만 리액트에서는 리액트 프레임워크가 제공하는 컴포넌트와 사용자가 정의하는 컴포넌트 2가지를 포함하는 개념이다. 리액트 컴포넌트 리액트 컴포넌트는 리액트 프레임워크에서 제공하는 것으로 HTML5의 각 태그에 대응된다. const h1 = Hello world! HTML 태그처럼 보이지만 JSX문으로, h1 컴포넌트이다. h1 컴포넌트를 React.createElement로 생성하면 const h1 = React.createElement('h1', null,'Hello world!') 컴포넌트 타입을 위와 같이 입력해주어야 한다. 이는 컴포넌트를 일일이..

• format_list_bulleted React
• · 2023. 5. 7.
• textsms

리액트 - JSX 구문

본 글은 를 참고해 공부한 내용을 정리한 글입니다. JSX 리액트에서 가상 DOM 객체를 만들어주는 함수는 React.createElement이다. 이를 이용해서 go to google 위의 HTML 코드를 리액트 방식으로 구현하면 아래와 같다. const CE = React.createElement const rootVirtualDOM = CE('ul', null, [ CE('li', null, [ CE('a', {href: 'http://www.google.com', target: ' _blank'}, [ CE('p', null, 'go to google') ]) ]) ]) 매번 React.createElement를 호출해야 하는 것도 번거롭고, HTML 코드에 비해 요소 간의 관계를 파악하기 힘들다..

• format_list_bulleted React
• · 2023. 5. 4.
• textsms

리액트 동작 원리 - 가상 DOM

본 글은 를 참고해 공부한 내용을 정리한 글입니다. react와 react-dom 패키지 react react는 공통으로 사용하는 기능을 제공하는 패키지이다. 컴포넌트, JSX, 리액트 훅 등 렌더러에 무관한 기능이 포함된다. react-dom react-dom 패키지는 앱이 동작하는 환경에 특화된 기능을 제공하는 패키지이다. react-dom/client, react-dom/server, react-native 등이 있다. 문서 객체 모델 브라우저는 HTML 형식의 문자열을 분석해 특정한 자바스크립트 객체 조합으로 바꾼다. 이 객체는 자신의 특징에 맞는 인터페이스를 구현하는데, 이를 총칭해 문서 객체 모델(Document Object Model, DOM)이라 한다. document.createEleme..

• format_list_bulleted React
• · 2023. 5. 2.
• textsms