📍Reactive state: reactive()- state가 바뀌면 HTML도 자동으로 업데이트됨- 이 state는 reactive 성격을 띔- Vue.js의 reactive() API를 활용하여 reactive state 선언 가능- reactive() API로 만들어진 객체들은 JS 프록시 객체들이고 일반 객체들처럼 작동함import { reactive } from "vue";const counter = reactive({ count: 0,});console.log(counter.count); // 0counter.count++; 📍Reactive state: ref()- reactive()는 객체에 대해서만 작동(배열, Map, Set 포함)- 반면 ref()는 어떤 타입에든 자유롭게 사용..

📍SFC 문법- HTML과 유사한 구문을 사용하여 Vue 컴포넌트를 만드는 포맷- *.vue 파일 확장자를 사용- HTML문법을 그대로 사용 가능 .vue 파일의 최상단에는 아래 블럭들이 올 수 있음 (선택적으로 커스텀 블럭 사용 가능)- - -  예시 📍Language Blocks- .vue 파일에서 최상단에 1개만 존재- 에 작성한 내용은 @vue.compiler-dom에 전달되고,- JS render 함수로 pre-compile된 후,- export 되는 컴포넌트에 render 옵션으로 첨부됨 - .vue 파일에서 최상단에 1개만 존재 ( 과 별개로 카운트)- ES Module 처럼 실행됨- 내부에 default export를 작성할 수 있는데, 이때 반환값은 일반 객체 or defineComp..

📍prettier 설치prettier 설치eslint-config-prettier eslint-plugin-prettier 등은 설치할 필요 없음 yarn add -D prettier 루트 경로에 .prettierrc 파일을 만들고 아래 내용을 추가한다 { "tabWidth": 2, "semi": true, "singleQuote": false, "trailingComma": "all", "printWidth": 90, "useTabs": false, "endOfLine":"auto"} 사용중인 IDE에서 prettier 설정을 켜준다 📍eslint 설치원래는 cli 를 통해 간편하게 eslint를 설치했지만..yarn create @eslint/config 터미널에서 Vue.js를 선..

📍app.vue- Nuxt 프로젝트에서 진입점 역할을 함- 여기에 직접 렌더링될 코드를 작성하면 모든 경로에서 보여짐- NuxtPage 컴포넌트를 렌더링하여 pages 폴더에 만들어진 라우트들이 보여지게 할 수 있음 📍pages- 폴더 기반 라우팅 기능 제공- index.vue 에 작성하는 내용이 폴더의 기본 라우트 페이지가 됨- 라우트명.vue 처럼 파일을 만들 수도 있음 📍NuxtPage- NuxtPage 컴포넌트를 app.vue 내부에서 호출하여  pages 폴더에 작성된 라우트가 나타나게 함 📍NuxtLink- 역할을 수행하면서 성능상의 이점을 제공- 이동 시 full page refresh를 방지하고 animated transition 효과를 제공- 또한, 뷰포트에 NuxtLink 컴포..

📍Client-side rendering: 전통적인 Vue.js 어플리케이션의 렌더링 방식렌더링 과정1. 브라우저가 빈 HTML을 다운로드2. 브라우저가 JS를 다운받고 실행3. 앱이 렌더링되고 인터랙티브해짐 📍Universal Rendering: CSR + SSR 하이브리드 방식 -> Nuxt 방식- 서버에서 완전히 렌더링된 HTML 페이지를 반환(SSR) 하는데,- 이는 Nuxt가 서버 환경에서 JS(Vue.js) 코드 실행하기 때문- 이후에 추가로 브라우저가 JS를 다운받고 실행(CSR) 하면서 Vue.js가 통제권 가짐 📍CSR, SSR의 장단점 비교CSR 장점1. 개발 속도가 빠름- 서버 환경과의 호환을 신경쓰며 코딩하지 않아도 됨- 예) 서버에서는 window 객체, DOM API 사용 ..

📍Polygon Mesh모델링: 렌더링할 물체를 만들어 내는 것- 어떤 구체를 모델링한다고 할 때, 반지름과 원점을 이용해 구의 부피를 구하는 방정식을 사용할 수도 있지만,- GPU는 polygon mesh를 사용하는 방법에 더 최적화되어 있음- 즉, 구체를 이루는 정점 몇개를 샘플링해서 이들을 연결하는 방식 triangle mesh- polygon mesh 중에서 가장 널리 사용되는 방법- OpenGL은 triangle mesh만 처리함- 정점 갯수의 대략 2배 만큼 삼각형 메쉬가 있다 vs 사각형 메쉬- 모델링 시 사각형 메쉬가 유리할 때도 있다- 사각형 메쉬 -> 삼각형 메쉬 변환 간단 (2로 나누면 됨) 해상도- 정점의 갯수(resolution)- LOD(Level of Detail)라고도 함-..

📍행렬과 벡터m * n 행렬 형태- m: 행(row)- n: 열(column)- 벡터도 행렬이다 (예 1 * 2 행렬, 1 * 3 행렬) row vector- 2D 벡터: (x, y)- 3D 벡터: (x, y, z) column vector(xyz) - vector의 곱셈은 행렬의 곱셈과 같다 행렬 전치(transpose)행렬 곱셈 M * v 는 vt * Mt 와 같다- 조건- 곱셈 결과OpenGL의 곱셈 방식- column vector 사용하므로, 행렬벡터 곱셈 시, 벡터가 행렬 뒤에서 곱해짐- 참고로 Direct 3D는 row vector 사용하므로 반대 단위 행렬과 특징행렬곱셈의 역행렬과 전치행렬 벡터의 크기(길이)- 원점에서의 거리- 벡터를 벡터의 길이로 나누는 과정을 정규화(normalizat..

📍3D Computer Graphics- 3차원으로 표현된 오브젝트를 입력으로 받아 2차원 이미지들(프레임이라고 부름)로 출력해내기 위해 다양한 계산을 수행하는 것📍실시간 그래픽(real-time graphics)- 비실시간 그래픽(느리게 프레임 만듬, 예 - 영화 특수효과)과 대비되는 개념- 프레임이 온라인에서 출력되고,- 최소 30 fps(frames per second)이 넘을 때- 예) 게임, VR, AR 등📍Computer Graphics Production 과정off-line tasks (by artists)____________________________modeling -> rigging -> animation -> rendering -> post-processing          ..