본문 바로가기

전체 글

HTTP 메서드 1. HTTP API 설계 요구사항: 회원 정보 관리 API 만들기 - 회원 목록 조회 - 회원 조회 - 회원 등록 - 회원 수정 - 회원 삭제 1) API URI 고민 URI(Uniform Resource Identifier) 리소스의 의미 - 회원 등록/조회/수정은 리소스가 아님 - 회원이라는 개념 자체가 리소스 리소스의 식별을 어떻게 하는 것이 좋을까? - 회원 등록/조회/수정 을 모두 배제 - 회원이라는 리소스만 식별하면 됨 -> 회원 리소스를 URI에 매핑 2) API URI 설계 리소스 식별, URI 계층 구조 활용 - 회원 목록 조회 /members - 회원 조회 /members/{id} - 회원 등록 /members/{id} - 회원 수정/members/{id} - 회원 삭제 /member.. 더보기
HTTP(Hyper Text Transfer Protocol) 1. 모든 것이 HTTP - HTTP 메시지에 모든 것을 전송 - HTML, TEXT, IMAGE, 음성, 영상, 파일, JSON, XML(API) 등 거의 모든 형태의 데이터 전송 가능 - 서버 간 데이터를 주고 받을 때도 대부분 HTTP 사용 2. HTTP 역사 - HTTP/0.9 1991년: GET 메서드만 지원, HTTP 헤더 없음 - HTTP/1.0 1996년: 메서드, 헤더 추가 - HTTP/1.1 1997년: 가장 많이 사용, 가장 중요한 버전(RFC2068(1997) -> FRC2616(1999) -> RFC7230 ~ 7235(2014)) - HTTP/2 2015년: 성능 개선 - HTTP/3 진행중: TCP 대신에 UDP 사용, 성능 개선 기반 프로토콜 TCP: HTTP/1.1, HTT.. 더보기
[React] 훅(Hook) - useParams - url 파라미터에 입력한 값 가져오기 import { useState } from 'react'; import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'; import Detail from './routes/Detail'; function App() { return ( 더보기
[React] 훅(Hook) - useNavigate - 페이지 이동을 도와줌 - 보통 변수에 저장해서 사용 import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'; function App() { let navigate = useNavigate(); return( { navigate('/detail')}}>Detail { navigate(-1)}}>뒤로 한 페이지 이동 { navigate(1)}}>앞으로 한 페이지 이동 ) } 더보기
[React] 훅(Hook) - useRef 1. 정의 - 레퍼런스(Reference)를 사용하기 위한 훅 리액트의 레퍼런스 특정 컴포넌트에 접근할 수 있는 객체 - useRef()훅은 레퍼런스 객체(ref object)를 반환 - 레퍼런스 객체에는 .current라는 속성이 있는데 이것은 현재 레퍼런스(참조)하고 있는 엘리먼트를 의미함 - 반환된 레퍼런스 객체넌 컴포넌트의 라이프타임(lifetime) 전체에 걸쳐서 유지됨(컴포넌트 마운트 해제 전까지 유지) - 변경 가능한 .current라는 속성을 가진 하나의 상자라고 생각하면됨 2. 사용방법 - 파라미터로 들어온 초기값(initail value)으로 초기화된 레퍼런스 객체를 반환 const refContainer = useRef(초기값); 더보기
[React] 훅(Hook) - useCallback 1. 정의 - useMemo() 훅과 유사한 역할, 차이점은 값이 아닌 함수를 반환한다는 것 - 특정 변수의 값이 변한 경우에만 함수를 다시 정의하게 되므로 함수가 다시 정의되지 않는 경우에 자식 컴포넌트도 재렌더링이 일어나지 않음 2. 사용 방법 - 함수와 의존성 배열을 파라미터로 받음 - 파라미터로 받는 함수를 콜백이라고 부름 - 의존성 배열에 있는 변수 중 하나라도 변경되면 Memoized 콜백 함수 반환 useCallback(function, dependencies) const memoizedCallback = useCallbck( () => { doSomething(의존성 변수1, 의존성 변수2); }, [의존성 변수1, 의존성 변수2] ); 메모이제이션(Memoization) 비용이 높은(연산.. 더보기
[React] 훅(Hook) - useMemo 1. 정의 - 컴포넌트가 재렌더링 되면 그 속에 자식 컴포넌트도 항상 함께 재렌더링 됨 -> 자식컴포넌트가 동작이 오래걸리는 무거운 컴포넌트인 경우 부모 컴포넌트를 렌더링 할 때 마다 속도 저하가 발생할 수 있음! 이런 상황에 자식 컴포넌트를 memo로 감싸 놓으면 됨! -> 재렌더링을 막기위한 훅 - 컴포넌트 로드시 1회만 실행하고 싶은 코드가 있는 경우 useMemo에 담아서 사용 할 수 있음 -> 예를 들어 반복문을 10억번 돌려야 하는 경우, 그 함수를 useMemo 안에 넣어두면 컴포넌트 로드시 1회만 실행됨 - useEffect처럼 dependency도 넣을 수 있기 때문에 특정 state, props가 변할 때만 실행 가능 -> 따라서 useMemo훅에 의존성 배열을 넣지 않는 경우 렌더링이.. 더보기
[React] 훅(Hook) - useEffect 1. 정의 - useState()와 더불어 가장 많이 사용되는 훅 - 클래스 컴포넌트에서 제공하는 함수인 componentDidMount(), componentDidUpdate(), componentWillUnmount()를 통합한 기능을 제공 - 리액트의 함수 컴포넌트에서 사이드 이펙트(Side Effect)를 수행하기 위한 훅 사이드 이펙트(Side Effect) - 사전적으로는 부작용이라는 뜻 - 컴퓨터 프로그래밍에서는 개발자가 의도치 않은 코드가 실행되면서 버그가 나타나면 사이드 이펙트가 발생했다고 함 - 리액트에서의 사이드 이펙트는 효과 혹은 영향을 뜻하는 이펙트(Effect)의 의미에 가까움 (서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미, 작업이 다른 컴포넌트에 영.. 더보기

티스토리툴바