프론트엔드 94

useRef

DOM 엘리먼트의 주소값을 활용 focus text selection media playback 에니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 React는 이런 예외적인 상황에서 useRef으로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있습니다. const 주소값을_담는_그릇 = useRef(참조자료형) // 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다. return ( {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/} {/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */} {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습..

HTTP 요청 매서드

GET GET 메서드는 특정 리소스의 표시를 요청합니다. GET을 사용하는 요청은 오직 데이터를 받기만 합니다. Head HEAD 메서드는 GET 메서드의 요청과 동일한 응답을 요구하지만, 응답 본문을 포함하지 않습니다. POST POST 메서드는 특정 리소스에 엔티티를 제출할 때 쓰입니다. 이는 종종 서버의 상태의 변화나 부작용을 일으킵니다. PUT PUT 메서드는 목적 리소스 모든 현재 표시를 요청 payload로 바꿉니다. DELETE DELETE 메서드는 특정 리소스를 삭제합니다. CONNECT CONNECT 메서드는 목적 리소스로 식별되는 서버로의 터널을 맺습니다. OPTIONS OPTIONS 메서드는 목적 리소스의 통신을 설정하는 데 쓰입니다. TRACE TRACE 메서드는 목적 리소스의 경로..

cors

예전에는 서버에서 직접 클라이언트를 가지고 있고 유저가 서버에 요청하면 서버에 있던 클라이언트를 유저가 받아가서 그 클라이언트에서 통신을 하거나 데이터를 보는 방식을 사용했습니다. 하지만 최근에는 singlepage application이 등장하고 앱들이 고도화 되어 youtubeapi를 이용한다던지 하였기 때문에 입니다. 이러한 요청을 Cross Origin이라고 하고 CORS(Cross Origin Resource Sharing): Cross origin에서 리소스를 요청하여 사용합니다.(ex 유튜브에서 girhub으로) mdn에서는 보안상의 이유로 cross origin 요청을 제한하고 있습니다. 왜냐하면 어떠한 요청을 할지 모르기 때문 options 요약: 서버에서 allow하는 조건들을 다 갖추..

React에서의 데이터 흐름

상태 끌어올리기 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다 예제 import React, { useState } from "react"; export default function ParentComponent() { const [value, setValue] = useState("날 바꿔줘!"); const handleChangeValue = () => { setValue("보여줄게 완전히 달라진 값"); }; return ( 값은 {value} 입니다 ); } function ChildComponent() { const handleClick = () => { // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까? }; return ..

REST API

REST API란? HTTP 메소드를 이용해 서버와 통신합니다. GET을 통해 웹 페이지나 데이터를 요청하고, POST로 새로운 글이나 데이터를 전송하거나 DELETE로 저장된 글이나 데이터를 삭제할 수 있습니다. REST API에서 REST는 “Representational State Transfer”의 약자 무언가를 대표하는 상태를 전송하는 것을 의미 합니다. REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말합니다. 좋은 REST API를 디자인 하는 방법 REST 성숙도 모델 - 0단계 REST 성숙도 모델에 따르면, 0단계에서는 단순히 HTTP 프로토콜을 사용하기만 해도 됩니다. 물론 이 경우..