Vue set Vue3 Vue.set, Vue.delete Vue2에서는 객체 혹은 배열의 데이터가 변경되면 화면에서 값의 변화를 감지하지 못했음 따라서 Vue.set 혹은 this.$set 등을 이용해 데이터를 변경 / 추가해야 화면에 반영됨 Ex) arr 배열의 2번째 인덱스 값을 10으로 바꾸는 경우 : Vue.set(arr, 2, 10) 데이터를 삭제할 때도 Vue.delete 혹은 this.$delete등을 이용해야 함 Vue3에서는? Vue2에서는 데이터의 변경할때 Javascript의 Object.defineProperty를 사용했음 이것 때문에 데이터의 변경이 화면의 변경으로 이어지지 않음 Vue3에서는 ES6의 proxy 기능을 활용했기 때문에, 데이터 변경이 바로 화면에 반영되게 됨 arr[2] = 10; 처럼 작성해도 문제 없음 References https://mine-it-record.

Vuex Vuex 상태란 Vue.js 애플리케이션의 데이터를 의미하며, 컴포넌트간에 공유됨 상태를 중앙에서 관리하고 각 컴포넌트에서 사용할 수 있게 제공하는 라이브러리가 Vuex Vuex 없이도 props 등을 이용해 컴포넌트간 상태를 전달할 수 있지만, 다음과 같은 문제점이 있음 컴포넌트가 여러 개 중첩 된 경우, props를 통해 데이터를 전달하려면 해당 컴포넌트들에게 모두 전달해야 함 이런 경우 코드가 복잡해지고 유지 보수가 힘듦 형제 컴포넌트 간 상태를 이동할 수 없음 Vuex는 store라는 컨테이너에 상태를 저장하는데, 이는 전역 변수와는 다름 store에 저장된 상태가 변경되면 화면도 바뀜 (반응형) store에 저장된 상태를 변경하기 위해서는 commit이라는 함수를 사용해야만 함 예시 코드 설명 const store = new Vuex.

Vue2 Vue3 Vue2의 단점 코드가 독립적이지 않아 프로젝트 규모가 커질수록 복잡해짐 코드의 재사용이 힘듦 타입스크립트를 온전히 지원하지 않음 2023-12-31에 지원 중단 예정 Vue3 변경점 일부 가상 DOM 최적화, 필요한 코드만 import하는 방법 등을 통해 성능 향상 컴포지션 api를 통해 코드를 독립적으로 정의하고 재사용 가능 컴포지션 api의 setup 함수를 통해 자동으로 타입 추론, 타입스크립트 사용 쉬워짐 Teleport를 활용해 CSS 없이 HTML을 옮겨서 렌더링 가능 Fragment를 사용해 루트 설정 가능 (<></>) 리액트에서 지원하던 suspense 사용 가능 Reactivity api를 통해 객체에 반응성 추가 가능 References https://www.

Vue.js Vue.js Evan You가 개발한 오픈 소스 프론트엔드 자바스크립트 프레임워크 Single page application 구축에 사용됨 기존 자바스크립트 프레임워크 / 라이브러리들 보다 가벼우며, 리액트 다음으로 인기가 많음 HTML, CSS의 기존 문법을 그대로 활용 React 대비 장점 React보다 문법이 더 쉽고 깔끔하기 때문에 초보가 배우기 좋음 코드를 짜는 데 있어 올바른 방식이 존재하기 때문에 코드가 일정한 틀에 맞춰짐. React보다 아주 약간 빠름 References https://codingapple.com/unit/why-use-vue-over-react/ https://ko.wikipedia.org/wiki/Vue.js

React React Meta에서 개발한 무료 오픈 소스 프론트엔드 자바스크립트 라이브러리 Single page application을 전제로 함 페이지를 업데이트할 경우 DOM의 요소를 찾아서 업데이트하기 때문에 리렌더링이 잦은 경우 빠른 퍼포먼스를 냄 상태 관리 및 DOM의 렌더링등만 신경쓰므로 routing 등을 위해서 추가 라이브러리 필요 MIT License 사용 JSX Javascript Syntax EXtension의 약자로, 자바스크립트 문법의 확장 HTML과 같이 마크업 언어를 통해 react의 component들을 작성 가능 React Hooks 개발자가 react에서 상태 관련 로직을 재사용할 수 있게 도와주는 함수 (🚫) Class보다 쉽게 react를 사용하기 위해 도입되었으며, class 안에서 사용되지 않음 useState, useEffect 등의 강력한 기능을 하는 hook을 통해 react 개발을 더욱 쉽게 만들어줌 References https://en.

Single Page Application Single Page Application (SPA) 문자 그대로 한 개의 페이지로 이루어진 웹 애플리케이션 전통적인 웹 어플리케이션은 페이지가 전환될 때 마다 새로운 페이지(HTML)를 작성해서 보내 줌 (Multi page application) 이 방식은 서버의 부하가 굉장히 크게 일어나기 때문에 이를 해결하기 위해 SPA 등장 SPA는 새로운 페이지를 서버에서 받는 것이 아니라 현재 페이지를 동적으로 재작성함 동작 방식 페이지의 변경이 필요할 때 클라이언트는 AJAX, fetch, axios등을 통해 서버에 새로운 데이터를 요청 서버는 HTML이 아닌, 필요한 데이터만 JSON, XML 등의 형태로 제공 클라이언트에서 자바스크립트를 통해 페이지를 동적으로 다시 그림 (Rerender) 장점 빠른 속도로 인해 웹사이트가 네이티브 앱처럼 느껴지게 함 HTML, CSS, JS 등 정적인 리소스는 페이지 최초 로드 시 한 번만 받음 전체 페이지를 받아오지 않고 필요한 데이터만 받으므로 트래픽 감소 단점 처음에 정적인 리소스를 다 받아야 하므로 초기 구동 속도가 느림 자바스크립트를 기반으로 클라이언트에서 HTML이 작성되기 때문에, 자바스크립트를 실행하지 않는 크롤러에서는 웹 사이트의 정보를 알기 힘듦 References https://en.

Next.js SWR-2 Mutate 이전 포스트에서는 SWR을 이용해 데이터를 가져오는 작업을 진행했습니다. 그러나 만약 가져온 데이터를 변경해야한다면 어떻게 해야 할까요? SWR은 mutate라는 함수를 제공함으로 인해 데이터를 변경할 수 있도록 제공합니다. Example 다음 그림과 같은 좋아요 기능을 추가한다고 생각해 봅시다. velog에도 있는 기능이죠. 1. 좋아요 상태가 아닐때 버튼을 클릭하면, 좋아요 상태로 바꾸고 좋아요 수 1 증가 2. 좋아요 상태일 때 버튼을 클릭하면, 좋아요가 아닌 상태로 바꾸고 좋아요 수 1 감소 아래 코드는 위 상태 변화를 구현한 코드 일부입니다.

Next.js Iron Session Iron Session iron-session은 암호화된 쿠키를 이용하는 Node.js stateless session utility 입니다. JWT와 비슷하지만, 전송되는 토큰 정보(payload)를 암호화 한다는 점에서 차이가 있습니다. 동작 방식 동작 방식은 JWT와 굉장히 흡사합니다. 다만 메타데이터를 완벽히 토큰에 저장하는 JWT와 약간 다르게 iron-session은 고유의 session을 가지고 있습니다. (확인 중) 1. 브라우저가 서버에 요청을 보냄. 2. 서버에서 정보를 암호화한 쿠키를 만듦. 3. 브라우저에게 응답을 보낼때 쿠키를 같이 보냄. 4. 브라우저는 암호화된 쿠키를 가지고, 이후 요청에 쿠키가 같이 보내짐.

Next.js SWR-1 w/o SWR Next.js에서 사용자가 페이지에 입장하자마자 정보를 보여주려면 어떻게 해야할까요? 페이지가 처음 렌더링될 때 GET 요청을 api에 보내 DB에서 정보를 가져와서 보여 주면 될 것입니다. const [shopList, setShopList] = useState<string[]>([]); useEffect(() => { axios.get("/api/shops").then((res) => setShopList(res.data.shops)); }, []); 보시다시피 useEffect내에서 api 요청을 보내고 데이터를 가져오는 과정을 진행하는 것을 알 수 있습니다. 하지만 이 과정을 조금 더 편하고 자동으로 만들어주는 hook이 있다면 좋지 않을까요? 이런 이유로 SWR이라는 좋은 모듈이 등장했습니다.

Next.js Cloudflare Image API Front-end Upload next.js 프로젝트에서 이미지 호스팅 서버에 이미지를 올리려면 어떻게 해야 할 까요? 다음과 같은 방법을 생각할 수 있습니다. 사용자에게 이미지를 입력받는다. 프론트엔드에서 직접 api를 이용해 이미지 호스팅 서버에 이미지를 올린다. 이 방법은 굉장히 위험합니다. 왜냐하면 프론트엔드(브라우저)에서 직접 이미지 호스팅 서버에 접근하게 되고, 이 과정에서 사용하는 API 키가 사용자에게 노출될 수 있습니다. Back-end Upload 프론트엔드에서 바로 업로드를 하는 것이 위험하다는걸 알았으니, 백엔드에 서버를 두면 어떨까요? 사용자에게 이미지를 입력받는다.