본문 바로가기

FE/Web10

SPA & MPA SPA는 Single Page Application, MPA는 Multi Page Application의 약자다. 있는 그대로 페이지가 하나냐, 여러 페이지를 갖고 있느냐가 두 차이를 가른다. 더불어 장단점도 서로 상쇄한다. MPA MPA는 말 그대로 여러 페이지를 가진 어플리캐이션이며, 웹이 처음 나왔을 때부터 존재한 방식이다. 사용자가 페이지를 요청할 때마다 서버는 리소스(HTML, CSS, Javascript)등 을 반환한다. 페이지를 이동하든, 새로고침하든 마찬가지로 리소스를 계속 반환한다. 장점 - SEO(검색엔진최적화)에 유리하다 페이지 단위로 검색하는 검색엔진 크롤러들에게도 적합하다. 페이지 하나당 완성된 HTML 하나를 리소스로 받기 때문이다. 단점 - 페이지 이동 시 깜빡임 페이지마다 새.. 2023. 1. 4.
SEO Search Engine Optimization. SEO는 검색 엔진 최적화다. 즉, 내가 만든 사이트에 검색 엔진이 들어왔을 경우 정보를 잘 가져가도록 조치해 놓는 것. 제작하려는 사이트가 쇼핑몰이거나 전파되길 바라는 정보를 담고 있는 경우 SEO는 필수다. 사용자는 우리 사이트에 들어오는 것보다. 네이버, 구글 등 포털사이트 검색을 통해 들어오기 때문이다. 검색 엔진 검색 엔진은 웹을 크롤링하면서 페이지에서 페이지로 링크를 따라간다. 찾은 콘텐츠 색인을 생성하는데, 검색 결과 시 보이는 게 바로 이 콘텐츠 색인이다. 검색 엔진을 봇 혹은 크롤러라고 부르는데, 이 크롤러는 일정한 규칙을 따른다. (이 규칙은 구글에 따른 규칙, 네이버에 따른 규칙 등 검색 엔진을 만드는 업체마다 다르다.) 따라서 검색 .. 2022. 12. 11.
HTTPS vs HTTP 개발자에게 http와 https 중 고르라고 한다면 100명 중 100명은 https를 선택한다. 이는 보안이 걸린 문제이기 때문이다. 보안 걱정 없는 사이트라면 http도 문제없지만, 로그인 기능 등 개인 정보가 들어간다면 개발자는 여지없이 https를 채택할 테다. http는 무엇이고, https는 무엇이 다른 지 살펴보자. HTTP http는 hyper text transfer protocol의 약자로, 국문으론 하이퍼본문전송규약으로 부른다. 하이퍼는 직역하지 않는 이유는 여기서 hyper는 이동의 의미를 갖기 때문일 듯하다. 다시 말해 www상에서 정보를 주고받는 약속을 뜻한다. 유럽 입자 물리 연구소의 팀 버너스 리가 속한 팀에서 HTML과 텍스트 기반 웹 브라우저 기술을 발명했고, 여기에 ht.. 2022. 10. 27.
Domain, DNS, Hosting 도메인(domain)과 디앤에스(DNS), 그리고 호스팅(Hosting). 아마 이 세 가지는 사용자가 웹을 접속해 자료를 받는 짧은 순간을 모두 압축한 조합이라 볼 수 있다. Domain 도메인은 영도 혹은 분야, 영역 등의 의미를 갖고 있는 단어다. 다만 웹에서는 인터넷 주소이란 의미로 확장되었다. 도메인은 일반 사용자가 웹을 접속하는 데 편리함을 가져다 준다. 우리가 www.naver.com 으로 네이버를 접속하고, www.daum.net 으로 다음을 접속할 수 있다. 그러나 이곳에 들어온 분들 중 이 두 사이트의 IP주소를 알고 있는 사람이 있으신가? 아마도 없을게다. 000.000.000.000 같이 이런 복잡하고 어려운 숫자 모음을 굳이 외울 필요가 없으니까. 이렇게 도메인은 표면적으로 도메인.. 2022. 10. 27.
token, XSS, CSRF 이번 글은 로그인 관련 작업하면서 알게 된 보안 관련 내용 정리다. 토큰으로 이루어진 로그인, 이를 가로채려는 해커의 노련함 등 로그인을 이룰 때 단순하게 생각하지 말 것을 기억하게 하는 문서인 셈이다. token 토큰은 크게 접근 토큰, 보안 토큰, 세션 토큰 등으로 분류한다. 이중 로그인에서 보는 접근 토근이 가장 많이 사용된다. 간략히 어떤 특정 기능이나 데이터에 접근하는 대상에게 권한을 부여하는 데 사용된다. 접근 토큰을 많이 볼 수 있는 것은 JWT(JSON Web Token)다. JWT(https://jwt.io)는 유저 정보를 담은 객체를 문자열로 만들어 암호화한 후 암호화된 키를 브라우저에 주는 형식으로 사용한다. 받아온 암호화된 키는 브라우저 저장소에 저장했다가 유저 정보가 필요한 API.. 2022. 10. 25.