Minji

웹 클라이언트 라이브러리 1. requests 파이썬에서 HTTP 요청을 보내고 응답을 처리하기 위한 라이브러리 + 간결하고 사용하기 쉬운 API : HTTP 요청을 보내고 응답을 처리하는 것을 쉽게 만들어준다. GET, POST, PUT, DELETE 등의 다양한 메서드를 지원한다. + 파라미터 전달 : requests를 사용하여 URL에 쿼리 문자열 형태로 파라미터를 전달할 수 있다. requests.get(url, params={'key':'value'}) + 요청 헤더 설정 : requests를 사용하여 요청 헤더에 필요한 정보(인증, 권한, 사용자 에이전트(User-Agent)) + 응답 처리 : requests로 받은 응답 객체(Response Object)에서 상태 코드(status code..

HTTP(Hypertext Transfer Protocol) 인터넷에서 데이터를 주고받기 위한 프로토콜 클라이언트 - 서버 모델을 기반으로 동작하며, 웹 브라우저와 웹 서버 간의 통신에 주로 사용된다. 1. 요청과 응답 HTTP는 클라이언트가 서버에게 요청(request)를 보내고, 서버는 클라이언트에게 응답(Response)을 반환 2. URL(Uniform Resource Locator) HTTP 요청은 URL을 사용하여 특정 리소스를 식별한다. URL은 프로토콜 (http, https), 도메인, 포트 번호, 경로, 쿼리 등을 사용하여 구성된다. 3. 상태코드(Status Code) HTTP 응답을 상태 코드로 나타낼 수 있다. 해당 요청의 처리 결과를 코드로 나타낸다. 200 OK : 성공적인 요..

HTML DOM(Document Object Model) 웹 페이지에 작성된 HTML 태그 당 객체(DOM 객체) 생성 목적 : HTML 태그가 출력된 모양이나 콘텐츠를 제어하기 위해 DOM 객체를 통해 각 태그의 CSS3 스타일 시트 접근 및 변경 HTML 태그에 의해 출력된 텍스트나 이미지 변경 DOM 트리의 특징 DOM 트리의 루트는 document 객체 DOM 객체의 종류는 HTML 태그 종류만큼 HTML 태그 당 DOM 객체가 하나씩 생성 HTML 태그의 포함관계에 따라 DOM 트리에 부모 자식 관계 HTML 태그 * 엘리먼트(element)로도 불림 DOM 객체는 5 개의 요소 구성 프로퍼티(property) : HTML 태그의 속성(attribute) 반영 메소드(method) : DOM 객..

React Router React에서 클라이언트 측 라우팅을 구현하기 위한 라이브러리 클라이언트 라우팅 : 웹 어플리케이션에서 URL 경로따라 다른 컴포넌트를 동적으로 랜더링하고, 페이지 간의 전환 네비게이션 처리 기능 React Router를 사용하면 단일 페이지 어플리케이션(Single Page Application, SPA)를 개발할 수 있다. SPA는 맨 처음 모든 정적 리소스(HTML, CSS, JavaScript)를 로드하고 이후 필요한 데이터만 비동기적으로 가져온다. Route, Switch, Link, BrowserRouter, HashRouter // 터미널에서 해당 프로젝트에 설치해버리자 npm install react-router-dom import {BrowserRouter} fro..

※ Context API (상태 관리 라이브러리) React 내장 기능, 복잡한 어플리케이션에서 여러 컴포넌트 간의 상태를 공유하기 위해 사용한다. 전역적으로 데이터를 공유할 수 있게 해주는 기능이다. 주로 어플리케이션 전체나 일부 컴포넌트 트리에서 공유해야하는 데이터에 사용된다. Context API를 사용하면 중간 단계의 컴포넌트들을 거치지 않고 컴포넌트 트리 아래의ㅡ 모든 컴포넌트 들이 값을 공유할 수 있다. const MyContext = React.createContext(defaultValue); Provider 컴포넌트를 사용하여 하위 컴포넌트들에게 현재의 text값을 전달한다. 하위 컴포넌트에서는 MyContext.Consumer를 사용하여 context값을 소비하거나, useContext..

라이프사이클 메소드 (컴포넌트 생명주기 관련 메서드) 이러한 메서드들은 특정 시점에 자동으로 호출된다. 1) 마운팅 (Mounting) 컴포넌트 인스턴스가 생성되어 DOM에 삽입될 때, 메소드들이 차례로 실행된다. + constructor() : 컴포넌트가 마운트되기 전에 호출된다. 초기 state를 정의, 설정할 수 있다. + static getDerivedStateFromProps() : props를 받아 state를 업데이트할 때 사용된다. + render() : 컴포넌트 UI를 핸더링 한다. + componentDidMount() : 컴포넌트가 마운트된 직후(DOM에 삽입된 직후) componentDidMount : 이 메서드는 컴포넌터가 처음 Dom에 마운트된 직후에 호출된다. 여기에 API 호..

Fragment React에서 여러 요소를 감싸주기 위해 사용되는 특별한 컴포넌트 Fragment를 사용하면 추가적인 DOM노드를 생서하지 않고도 여러 요소를 그룹화할 수 있다. 일반적으로 JSX 코드에서 컴포넌트에는 하나의 최상위 요소만이 존재해야 한다. 그래서 불필요하게 또는 다른 요소를 선언한다. 이러한 상황에서 Fragment를 사용해서 요소들을 그룹화한다. Fragment는 아무런 출력을 하지 않고, 자식 요소들을 그룹화하는 역할만 수행한다. Fragment는 열고, 닫는다. (혹은 로 작성할 수 있다.) class Example extends Componenet { render() { return ( 안녕하세요~ 눌러주세요~ 안녕히 가세요~ 누르지마세요~ ) }; } class Example ..

이벤트 처리 : 이벤트 핸들러를 JSX요소에 등록하여 사용한다. 클래스형 컴포넌트에서 이벤트 처리 : 메소드를 통해 이벤트 핸들러를 정의하고, JSX 요소에 연결한다. this 키워드를 사용하려면 생성자 내부나 메서드 선언시 바인딩 해야한다. class Example extends React.Component { constructor(props) { super(props) this.state = {count:0}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({count: this.state.count + 1}); } render() { return ( {this.state.count}번 ); } } 함수형..

조건부 랜더링 : JSX 내에서 JavaScript 표현식을 사용하여 조건부 로직을 작성할 수 있다. 1) if/else function Example({number}) { if(number > 10) { return 10보다 큰 값; } else { return 10보다 작은 값; } switch(number) { case 1: return 1 case 2: return 2 default: return 다른 값 } } 2) 삼항연산자 function Example({number}) { return ( {number>10 ? '10보다 큰 값' : '10보다 작은 값'} ); } 3) &&연산자를 활용한 랜더링 function Example({message}) { return( {message.lengt..