⭐️REST API에 대해 설명해주세요.
참고문서
우선 API는 Application Programming Interface로 프로그램과 프로그램이 서로 상호작용 할 수 있도록 도와주는 매개체 입니다. 프로그램과 프로그램을 연결하는 다리 역할이라고 볼 수 있는데요 이 상호작용에는 사용 규칙이 있으며 API는 이를 제공하는 추상적인 개념입니다.
REST API는 REST 기반으로 서비스 API를 구현한 것입니다.
즉, HTTP 요청을 보낼 때, 어떤 URI에 어떤 메소드를 사용할지 개발자들 사이에 널리 지켜지는 약속입니다.
REST는 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일 입니다.
REST는
- 자원(resource) - URI
- 행위(verb) - HTTP Method
- 표현(Representations)
이렇게 세 가지로 구성되어 있습니다.
REST에는 6가지 특징이 있습니다.
- Uniform 인터페이스는 URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스를 수행하는 아키텍처 스타일을 말합니다.
- Rest는 무상태성을 갖습니다. 작업을 위한 상태정보를 따로 저장하고 관리하지 않습니다.
세션정보나 쿠키 정보를 별도로 저장하고 관리하지 않기 때문에 API 서버는 들어오는 요청만 단순히 처리하면 됩니다. 때문에 서비스의 자유도가 높아지고 서버에서 불필요한 정보를 관리하지 않음으로 구현이 단순해집니다. - REST API 메시지만 보고도 이를 쉽게 이해 할 수 있는 자체 표현 구조로 되어있는 self-descriptiveness 또한 REST API의 가장 큰 특징 중 하나입니다.
- REST는 서버와 클라이언트의 관리 구조가 명확합니다. 서버는 API를 제공하고 클라이언트는 사용자 인증이나 컨텍스트(세션, 로그인 정보) 등을 직접 관리하는 구조로 각각의 역할이 확실하게 구분되기 때문에 클라이언트와 서버에서 개발해야할 내용이 명확해지고 서로간 의존성이 줄어들게 됩니다.
- REST는 다중 계층으로 구성될 수 있습니다. 보안, 암호화 계층을 추가하여 구조상의 유연성을 둘 수 있으며 네트워크 기반의 중간매체인 PROXY, 게이트 웨이를 사용할 수 있게 합니다.
REST API를 설계할 때 가장 중요한 항목은
- 첫 번째, URI는 정보의 자원을 표현해야 합니다.
- 두 번째, 자원에 대한 행위는 HTTP Method로 표현합니다. HTTP Method로는 GET, POST, PUT, DELETE가 있습니다.
⭐️클로져(Closure)에 대해 설명해주세요.
⭐️ useMemo와 useCallback에 대해 설명해주세요.
useMemo와 useCallback은 React에서 사용하는 Hook 입니다.
먼저 "메모이제이션"에 대해 알아야 왜 이 두 Hooks를 사용하는지 이해할 수 있습니다.
메모이제이션이란 동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면 맨 처음 계산된 값을 메모리에 저장해서 필요할 때마다 다시 계산하지 않고 메모리에서 값을 꺼내 쓰는 기법입니다.
기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. 이는 중복 연산을 피해 메모리를 덜 쓰며 성능을 최적화할 수 있습니다.
또한 리액트의 특징으로 자신의 state, 부모로부터 받은 props가 변경되거나 부모 컴포넌트가 리렌더링 될 때 UI를 업데이트 합니다. 즉, 함수형 컴포넌트에서는 함수를 다시 호출하게 된다는 의미죠.
만약 복잡하거나 비용이 드는 코드를 포함한 불필요한 렌더링이 위의 특징으로 계속된다면 어떨까요? 리렌더링을 최대한 줄여야 하겠죠?
따라서 useMemo와 useCallback을 사용합니다.
useMemo는 메모이제이션 된 값을 반환합니다.
useMemo는 두개의 인자를 받습니다. 첫 번째로 callback 함수, 두 번째로 배열입니다.
callback 함수는 메모이제이션 할 값을 계산해서 리턴합니다. 두 번째 인자인 배열은 의존성 배열이며 배열 안에 요소의 값이 업데이트 될 때만 callback 함수를 다시 호출합니다. 메모이제이션된 값을 업데이트해서 다시 메모이제이션된 값을 반환합니다.
예를 들어, 쉬운 함수를 호출하여 state1을 업데이트 시키려고 합니다. 하지만 그 위에 복잡합 함수가 정의되어 있으며 state2를 업데이트 시킵니다. 쉬운 함수만 호출하고 싶어도 state1의 값이 바뀌기 때문에 함수형 컴포넌트의 모든 변수와 함수는 초기화됩니다. 따라서 복잡한 함수도 같이 초기화 되기 때문에 쉬운 함수만 호출한다고 해도 시간이 오래 걸리게 됩니다. 이때 복잡함 함수를 useMemo를 활용하여 작성하면 state2의 값이 업데이트 되기 전까지 복잡한 메모는 초기화 되지 않고 메모이제이션된 값을 가지고 있게 됩니다.
const value = useMemo(()=>{
return calculate();
},[item])useCallback은 메모이제이션된 함수를 반환합니다.
인자로 전달한 callback 한 함수 자체를 메모이제이션 합니다. 함수가 필요할 때마다 새로 생성하는 것이 아니라 메모리에서 가져와서 재사용합니다.
const calculate = useCallback((num)=>{
return num + 1
},[item])
//calculate 안에는 callback 함수가 담긴다.⭐️쿠키, 세션, 웹스토리지의 차이에 대해 설명해주세요.
먼저 HTTP 특징에 대해서 이해해야 합니다.
HTTP는 클라이언트가 서버에 요청을 하면 서버에서 요청에 대한 응답을 하고 접속을 종료합니다. 통신이 끝나면 상태 정보를 유지하지 않기 때문에 자원 낭비가 줄어들지만 통신을 할 때마다 새로 연결을 하여 클라이언트는 그때마다 인증을 해야합니다. 로그인을 해도 페이지를 이동할 때마다 로그인을 계속해야 하는 불편함이 있습니다. 이렇게 로그인에 대한 정보를 브라우저에 저장하면 문제를 해결할 수 있습니다.
바로 브라우저 스토리지 입니다. 이는 정보를 저장하는 저장소이며 쿠키와 웹 스토리지가 있습니다.
쿠키와 웹 스토리지 모두 해당 도메인에 대한 데이터를 브라우저에 저장합니다.
쿠키는 서버가 클라이언트에게 전달하는 작은 데이터 파일입니다. 이름, 값, 도메인정보, 만료일자 등이 있습니다.
매번 서버에 전송이 되며 용량이 작고 보안이 취약합니다.
웹스토리지는 쿠키와 기능이 유사하지만 클라이언트에 저장만 할뿐 서버에 전송되지 않습니다. 키와 벨류 값의 형태로 데이터를 저장합니다.
웹 스토리지는 지속성에 따라 로컬 스토리지와 세션 스토리지로 나뉩니다.
로컬 스토리지는 브라우저 자체에 반영구적으로 데이터를 저장을 하고 브라우저가 종료되어도 데이터를 유지하고 있습니다.
세션 스토리지는 탭 윈도우 단위로 생성이 되며 탭 윈도우를 닫을 때 데이터를 삭제합니다.
자동 로그인 기능은 로컬 스토리지, 장바구니 구현은 세션 스토리지, 다시보지않기 팝업 창은 쿠키에 저장하면 됩니다.
세션은 일정 시간동안 같은 브라우저로부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 유지하는 기술입니다.
클라이언트가 Request 를 보내면 Response 에 Set-Cookie 를 통해 클라이언트의 유일한 ID값을 생성해 부여하고 이를 통해 사용자 정보는 안전한 서버에 존재하며 클라이언트와 서버 간에는 ID 값만을 전달해 보안 위협을 감소시켜 줍니다.
이 때 클라이언트에 저장되는 쿠키는 세션 종료 시 함께 소멸되는 "Memory Cookie" 타입을 가져 브라우저가 종료되면 세션과 관련된 쿠키도 삭제됩니다.
⭐️async, await 사용 방법을 설명해주세요
자바스크립트는 동기적으로 실행됩니다. 한번에 하나의 동작만 처리하는 싱글 스레드 방식이죠. 하지만 한번에 여러가지 일을 발생할 수 있는 비동기 방식을 처리할 수 있는 함수들이 있습니다. callback, promise, async, await 등이 그 예시 입니다.
callback은 특정함수에 매개변수로 전달된 함수를 의미합니다.즉, 나중에 호출될 함수들이라고 볼 수 있습니다.
callback 함수1을 실행하고 다음에 callback함수2를 수행하기 등을 작성하면 callback 지옥에 빠지게 됩니다. 가독성에 좋지 않죠.
따라서 promise 함수가 등장했습니다. then을 사용하여 어떤 함수가 끝나면 then, 이 함수를 실행하라는 약속을 하게 되는 거죠. 하지만 promise 또한 callback 지옥과 다를바가 없습니다. promise chainig으로 가독성이 떨어지죠.
기존 callback과 promise의 단점을 보완하기 위해 async, await가 등장했습니다.
우선 사용할 함수 앞에 async라는 키워드를 붙여 사용해야 하며 선언된 async 함수 안에서만 await 키워드를 사용할 수 있습니다.
먼저 함수의 앞에 async라는 예약어를 씁니다.그리고 해당 함수 내에서 비동기 처리 로직을 수행하는 메서드 앞에 await 예약어를 붙여줍니다.
