SPA란 Single Page Application으로 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식이다! 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낀다. 어떻게 하나의 페이지 요청으로 전체 웹앱을 사용한다는 걸까?? 하지만 SPA의 경우 렌더링의 역할을 서버에게 넘기지 않고 브라우저에서 처리하는 방식이다. 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드 하고, 이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하게 된다. 페이지가 변경되어도 HTML은 변경되지 않는 것을 볼 수 있습니다. 이처럼 SPA방식에서는 MPA와 달리 페이지가 바뀌더라도 HTML을 다시 서버에 요청하지 않습니다. SPA 장점 새로운 페이지 요청 시 전체를 렌더링 하..
const questions = [ "오늘 먹은 음식은?", "오늘 기록하고 싶은 일은?", "오늘을 한 단어로 정리하자면?", "오늘 만난 사람은?", "오늘 나에게 하고 싶은 말이 있다면?", ]; const getRandomIndex = (length: number): number => { return Math.floor(Math.random() * length); }; const TodayPost = { postQuestions: [ { question: "hi", content: content1, imgCount: imgFile.length, videoCount: videoFile.length, }, { question: "hello", content: content2, imgCount: img..
✔️ ES6란? ECMAScript 버전 6 이후를 통틀어 일반적으로 ES6라고 부른다 ✔️ ECMAScript란? Javascript의 표준문법 2015년, 버전 6 이후로 많은 문법이 추가되면서 계쏙해서 발전하고 있다. ❓ 왜 우리는 ES6를 사용해야할까? 현대적인 문법은 생산성 향상에 도움을 주기때문!! Node.js는 빠르게 최신 ECMAScript를 지원 중에 있다. 자주 사용되는 문법 1. 잘 알고 있는 let, const 2. Template String - 백틱 기호로 문자 사이에 간단하게 변수 사용 가능 3. arrow function 4. class - 그 전에는 class가 없기 때문에 객체지향을 구현하기 위해 function과 prototype을 사용했음 5. descturcting..
✏️ Axios에 대해 알아보자 Axios는 웹 브라우저와 Node.js 통신을 위한 Promise 기반의 HTTP 요청 처리를 위한 라이브러리이다. 비동기 통신으로 인해 프론트엔드와 백엔드 간 통신을 쉽게 할 수 있다!! like Ajax 자바스크립트에서 동기가 아닌 비동기 처리를 위해 Axios나 Ajax를 사용해주는 것이다 ****Promise란? Promise는 자바스크립트 ES6에서 비동기 처리를 위해 주로 사용되는 객체 ****Ajax란? 비동기 자바스크립트란 의미로 Asynchronous JavaScript and XML의 약자이다. Ajax는 브라우저에 있는 XMLHttpRequest 객체를 이용하여 화면 전체를 새로 고침 하지 않고 변경된 일부 데이터만 로드하는 비동기 처리가 가능!!! ..
