SPA vs MPA, SSR vs CSR 무엇이 다르고, 어떻게 선택해야 할까?
·
Frontend
웹 개발을 하다 보면 반드시 마주치는 개념이 있습니다. 바로 SPA(Single Page Application)와 MPA(Multi Page Application), 그리고 SSR(Server Side Rendering)과 CSR(Client Side Rendering) 입니다.처음엔 이름만 들어도 머리가 아프지만, 실제로는 서로 다른 특징과 장단점이 있어서 상황에 따라 적절히 선택하면 됩니다.이번 글에서는 제가 프로젝트를 하면서 직접 느낀 점들을 곁들여 정리해보겠습니다.1. SPA vs MPA1-1. SPA (Single Page Application)정의: 이름 그대로 "하나의 페이지"에서 동작하는 애플리케이션.페이지 이동 시 전체 페이지를 새로 불러오는 게 아니라, 필요한 데이터만 가져와 화면 일부..
Ajax
·
Frontend
Ajax란 무엇인가?웹 개발을 하다 보면 "Ajax 요청"이라는 말을 자주 듣게 됩니다.특히 프론트엔드와 서버가 데이터를 주고받는 방식에서 Ajax는 아주 중요한 개념입니다.1. Ajax란?Ajax (Asynchronous JavaScript and XML)뜻: “비동기 자바스크립트와 XML”웹 브라우저에서 페이지 전체를 새로고침하지 않고 서버와 데이터를 주고받을 수 있는 기술👉 쉽게 말해, “필요한 데이터만 가져와서 화면을 갱신하는 방법” 입니다.2. Ajax가 등장하기 전예전 웹 사이트는 버튼을 클릭하면 항상 페이지 전체가 새로고침되었습니다.게시글 작성 버튼 → 서버로 이동 → 전체 페이지 새로고침 후 결과 확인사용자 경험(UX)이 불편하고 속도도 느림3. Ajax의 장점페이지 새로고침 없이 데이터..
자바스크립트 + jQuery
·
Frontend
HTML과 CSS를 공부하면서 자바스크립트 책도 구매해서 봤다. 동시에 개인프로젝트에 도움이 될 것 같아서 jQuery내용도 함께 공부하기로 했다. 내가 관심있는건 ajax 관련 내용이지만 그 기초를 닦기 위해 jQuery 전체 내용이 담긴 책을 선택했다. 자바스크립트를 하나도 몰랐었기에 남의 코드를 해석하는것도 참 어려웠다. 함수선언 방법이나 함수를 매개변수로 삼는다던지 콜백함수가 뭔지 자바만 공부했던 터라 무슨 소린지 하나도 몰랐었기 때문이다. 아직 머리에 전부 담진 못했지만 나는 천재가 아니다. 한 번 본다고 모든걸 다 익히면 그게 천재지... 모르는 내용이 있으면 몇번이고 계속 보면서 머리에 넣어야겠다.
HTML5 + CSS3
·
Frontend
웹 화면은 항상 gpt에게 도움을 받거나 복붙으로 짰었는데, 기초는 알아야 할 것 같고 아는 내용도 다시 정리해보고 싶어서 책을 읽어봤다. 아는 내용이 대부분인 것 같기도 하고, 새로운 내용도 많이 익혔다. form태그의 사용 안해본 타입들이라던지 label,input을 항상 쌍으로 고정해서 썼었는데 각각의 역할이라던지, id와name이 항상 헷갈렸는데 그 정확한 역할이라던지.... 앞으로도 헷갈리는 내용이 있다면 종종 다시 보려고 한다.