sjindev 님의 블로그

오늘은 MPA와 SPA가 무엇인지 각각 알아보고, 둘의 차이점을 알아볼 예정이다. MPA (Multi Page Application) 란?사용자 - 브라우저 - 서버는 각각 위와 같은 역할 및 동작을 수행한다. MPA는 사용자가 페이지를 이동할 때마다 서버에서 새로운 HTML 페이지를 받아오는 방식이다.- 전통적인 웹사이트 구조 (ex. 네이버, 다음)- 각 URL마다 실제 HTML 파일이나 서버에서 생성된 HTML 페이지가 존재- 페이지를 이동할 때마다 전체 페이지가 새로 로드 예시 흐름- GET /home → 서버에서 home.html 응답- GET /products → 서버에서 products.html 응답브라우저는 각 요청에 대해 새 HTML 문서를 받아오고, CSS/JS도 다시 요청하게 됨.SP..

오늘은 상태관리에 대해서 알아볼 예정이다. 상태란 무엇일까?=> 웹 페이지 내에서 눈에 보이는 / 보이지않는 모~든 데이터 변화를 상태라고 한다.예를들면, 사용자가 입력한 데이터 값, 버튼, 체크박스 등 진짜 말그대로 값이 변하는 모든 데이터!! 그러니까, 지금 작성하고 있는 블로그의 상단 이 화면또한 모두 상태이다. 그럼 이러한 변하는 데이터들을 관리할 필요가 있어보인다. 우리는 이를 상태관리라고 한다.페이지를 사용자의 화면에 띄우는 작업을 렌더링이라고 하는데, 상태가 바뀔때마다 웹페이지 전체가 리렌더링 된다면, 화면의 깜빡임 혹은 로딩처럼 화면이 계속해서 다시 뜨는 것을 보게될 것이고, 이는 사용자 UX에 좋지 못하다. 이를 개선하기 위해 상태관리가 필요하다! 그럼 위에서 말한 리렌더링을 방지하기 ..

함수 : 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.[함수를 사용하는 이유]필요할 때마다 한번 정의해 둔 것을 호출만 하면서 재사용할 수 있는 장점이 있다. 이러한 장점으로 우리는 함수를 사용한다. 그것도 아주 많이. + 코드의 가독성 향상 측면도 아주 크다.[함수 리터럴]함수 리터럴의 구성요소var f = function add(x, y) { return x + y;}- function 키워드- 함수 이름- 매개 변수 목록- 함수 몸체[함수정의]-함수 선언문 : function add(x, y) { return x+y; } 방식- 함수 표현식 : var add = function add(x, y) { return x+y; }; 이렇게 변수에 할당하는 ..