SG의 개발 공부로그

프로젝트 작업을 하면서 로컬스토리지에 값을 넣고 가져오는 작업을 하다가 사용법을 정리하게 되었다. 그전에 localStorage가 무엇인지 자세하게 알아보기로 했다. 먼저, WEB STORAGE 란? 데이터를 서버가 아닌 클라이언트에 저장할 수 있도록 하는 기능이다. 쿠키와 비슷한 기능이지만, 쿠키 같은 경우에는 4kb까지밖에 저장공간을 가지지 못한다. 하지만 web storage는 대략 5mb의 저장공간을 가질 수 있다. 데이터의 구조는 key - value로 돼있으며, 문자열로만 저장 또는 반환된다. Local Storage 란? 데이터를 브라우저에 반영구적으로 저장하며, 브라우저를 종료하고 다시 시작을 하더라도 데이터가 남아있다. 그리고 다른 창으로 띄운 브라우저에서도 접근이 가능하다. 데이터 넣기..

작업을 하다보면, 클라이언트와 서버간의 데이터를 주고 받기 위해서 HTTP 통신을 하게 된다. 비동기 HTTP 통신에 쓰이는 Ajax, Axios, Fetch 의 차이점을 알아볼거다 일단 먼저 Ajax Asyncchronous Javascript And XML 의 약자이다. 약자대로 javascript 를 사용한 비동기 HTTP 통신 기술이다. 비동기적으로 통신으로 인해 페이지전체를 로딩하지 않고, 일부분만 갱신 할 수 있다. 통신이란 response 와 request 를 비동기로 다룰 수 있다는 것이다. 그리고 ajax가 jquery 와 묶여서 불리는 경우가 많다. 나 또한 처음에 그랬다. 근데 잘못된것이였다. ajax 를 더 편리하게 jquery로 사용함으로써 묶어서 말 할때가 많은 것 뿐. 그래서 ..

SSR 옛날 전통 웹 방식은 MPA 였다. MPA라는 용어도 사실 SPA가 유행하면서 비교를 위해 나왔듯이 SPA 나오기 전에는 모두 MPA 형태였다. MPA는 새로운 페이지를 요청을 보내면, 모든 탬플릿을 서버연산을 통해 렌더링하고 완성된 페이지형태로 응답한다. SPA 와 MPA의 차이점 참고링크 https://sg-coding.tistory.com/entry/SPA-Single-Page-Application-%EC%99%80-MPA-Multi-Page-Application-%EC%B0%A8%EC%9D%B4%EC%A0%90 SSR 의 장점는 SEO (검색엔진최적화) 이다. 전통적인 MPA 는 javascript 가 동작하기 전에도 HTML 에 데이터가 삽입된 상태 , 즉 완성된 형태의 탬플릿를 서버로부..

React 를 접하면서 듣게 된 SPA 와 MPA 에 대해서 간략하게 알아볼거다. 격투기 UFC 와 MMA 도 아니고 개발쪽은 줄여쓰는거 겁나 좋아한다. 아무튼 MPA (Multi Page Application) MPA 는 흔히 쓰였던 웹 애플리케이션 개발방식이다. (JSP, PHP 등) 웹 브라우저에서 특정 페이지에 대한 요청을 서버에 보내면 서버는 데이터를 HTML 문서로 웹 브라우저에 응답해준다. 그 과정속에서 화면이 깜빡거린다. 댓글하나써도 깜빡, 좋아요 누르면 깜빡, 뭐 누르면 깜빡 불러오는 데이터가 적어서 빠르게 페이지가 나오면 좋겠지만, 데이터가 많을 경우 사용자는 깜빡하고 로딩이되는 시간동안 기다려야한다. 요즘 인터넷이 워낙빨라져서 체감이 로딩속도가 많이 줄었다고해도 사람의 욕심은 끝이 없..