appKey
API를 사용하기 위한 appkey는 홈페이지 관리자 콘솔에서 소스 탭을 통해 확인할 수 있다
따라서 API를 제공하는 업체에서는 애초에 처음 설정할 때 웹 도메인을 적으라 하는데 그 이유가 앱키를 탈취당할 위험을 방지하기 위험이다.
API를 제공하는 업체에 등록된 도메인이 아닌 다른 도메인에서 다른 사이트의 앱키를 사용하더라도 도메인 주소가 등록된 것과 다르기 때문에 해당 앱키는 적용하지 않는다.
노출되는 것만으로도 위험부담이 있는 키라면 FE가 아닌 BE에 저장을 하는게 맞다.
- SPA-CSR / MPA-SSR
MPA(Multi page application)-SSR(Server-side-randering)
a 태그는 클릭한 태그를 개별적으로 그때마다 서버에서 랜더링을 통해 Br에 전달한다 즉 이 방식은 a 태그를 누르는게 도메인주소를 직접 적어서 접속하는 것과 동일하다.
매번 새로운 이벤트가 발생하기 때문에 속도가 비교적 느린편
따라서 이때 당시는 홈페이지를 작성한다고 했으며 그 이유는 페이지 이동시마다 새로고침이 발생하는것과 동일한 로직이었기 때문이다
SSR은 정적인 페이지만 내려줄 것인다, 동적으로 변하는 데이터까지 포함해서 줄 것인지에 대해 설정을 해줄 수가 있다
SPA(single page application) - CSR( client-side-randering)
저음 프리랜더링 단계에서 모든 페이지가 FE의 서버에서 발생하고 그 정보를 Br에 전달한다. Br에서는 유저가 위치한 도메인에 따라 전체 데이터 중 도메인과 일치하는 데이터만 출력하는 방식.
처음부터 전체 데이터를 받아오기 때문에 처음에는 로딩이 조금 느릴지라도 그 이후의 서비스에서는 속도가 매우 빠르다.
spa는 어플리케이션이라고 하는데 전체 데이터를 받아오기 때문에 모바일 어플리케이션에서 메뉴 이동하는 것과 동일하기 떄문
CSR은 서버에서 전체 데이터를 한번에 로드해서 client 에게 전해주고 client측에서 데이터를 기준으로 페이지를 로드한다.
a tag vs router(useRouter)
html의 태그는 시멘틱 요소가 있기 때문에 링크 태그의 경우 검색봇의 기준에 부합하지만
router 는 태그가 아니라 이벤트로 동작하기 때문에 시멘틱 요소가 없다
물론 이동하려는 위치나 동작에 따라 링크를 못쓰는 경우가 있기 때문에 적절한 사용이 필요하다.
- 콜백함수 >> Callback / Callback-Hell
function aaa(qqq){} 에서 qqq자리에 들어가는 인자가 함수일 때, 이를 콜백함수라고 부르며 함수의 인자로 함수가 들어가는 경우를 말함
aaa( function(){} )
aaa( ()=> {} )사용하는 이유: a 함수가 종료됨과 동시에 b 함수를 실행하려할 때 사용한다. 이때 b가 a의 인자로 들어가기 때문에 b가 콜백함수가 된다.
그러나 처리할 데이터가 많아져서 콜백함수가 많아질수록 깊이는 깊어질텐데 이를 콜백지옥(callback-hell) 이라고 하며 기본적으로 코드 읽기도 어렵다.
promise/ Promise-Chain
콜백지옥을 개선하기 위해 개발된 promise이다. 결과값에 대해 .then을 통해 계속 함수를 이어갈 수 있으며 콜백 지옥도 해결할 수 있다.
이렇게 .then으로 이어지는 함수가 promise-Chain이라고 한다.
그러나 .then으로 이어진 promise-chain 은 직관적이지 못하다는 단점이 있다
promise로 요청된 데이터가 완료되기 전에 해당 함수 밖의 코드를 먼저 해결하고 promise 내부로 들어가 함수가 실행되기에 코드가 길어지면 길어질수록 복잡해지고
결과의 순서를 예상하기 어렵다
async-await
이런 promise의 단점을 해결하기 위해 추가로 나온게 async-await 이다.
promise에만 사용이 가능하고 사용을하면 await가 걸린 함수에 대해서는 함수가 종료될 때 까지 다른 작업을 하지 않고 종료된 후 다음 줄로 넘어가는 방식이다.
이를 사용하면 코드가 짧아져 깔끔해질뿐더러 코드가 직관적이라 리딩도 편해진다
Task-Queue의 우선 순위
MacroTaskQueue / MicroTaskQueue
MacroTaskQueue: setTimeout, setInterval…
MicroTaskQueue: Promise…
Micro 가 가장 우선순위에 있기 때문에 Micro가 비워지면 그 다음 Macro가 실행된다
