실전 압축 코딩

드디어 블렌더로 3d 기초 모델과 에니메이션을 만들었다! 그리고 three.js에서 클릭시 페이지 넘기기 상호작용도 구현하였다. 텍스쳐를 입히는 작업은 이미 한 번 해봐서 문제 될게 없을거 같다. 물론 아직 모델을 좀 더 손봐야 하지만, 기초적인 틀은 만드는데 성공했다. 블렌더 모델 제작과 에니메이션 생성에 너무 많은 시간을 쏟은거 같다. 책을 제외한 웬만한 메쉬나 기타 등등은 남들이 만들걸 최대한 가져와서 사용할 생각이다. Todo 1. node.js 에서 생성한 pdf 파일 가져오기 및 각 페이지 별 이미지화 & 이미지화한 파일 페이지 별로 입히기 2. three.js 광원 효과에 대해 공부 3. 책 모델 좀 더 손보기 (뒤로 가는 모션 적용 등) 4. 현재 그래픽 ui를 좀 더 캐주얼 하고 가볍게 ..

엉겹결에 블렌더를 만지게 되었다.. 되도록이면 원래 있던 모델을 사용하려고 했는데, 에니메이션이나 텍스쳐를 적용시키는게 어려웠다.. 내가 에니메이션도 만져 보고 텍스쳐도 만져봐야 three.js에서 어떻게 모델을 다룰지 감이 잡힐거 같았다. 유튜브 보면서 열심히 공부중...

코딩테스트 연습 - 미로 탈출 명령어 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 오랜만에 알고리즘 관련 포스팅을 하는것 같다. 문제는 전형적인 '길찾기' 문제로 보였다.하지만 여기서 포인트는 두 가지가 있었다. 1. 같은 위치를 두번 방문해도 된다. 2. 목표에 도착하더라도 걸어온 경로는 사전순으로 우선순위를 같는다. 처음에는 해당 문제를 bfs로 접근하였다. k 라는 이동 거리의 제한이 있었기에, queue에 이동한 위치를 담은 class를 하나씩 담고 이미 사전순으로 앞선 경로가 방문한 위치..

router.resolve 2.1.0+ 역방향 URL 해석. 에서 사용된 것과 같은 형식의 위치가 주어지면 다음과 같이 처리된 속성을 가진 객체를 반환합니다. { location: Location; route: Route; href: string; } current 현재 라우트를 나타냅니다. (대부분의 경우에 변경할 일이 없습니다.) append는 current 라우트에 추가할 수 있도록 합니다 (router-link처럼)

https://developer.mozilla.org/ko/docs/Web/CSS/unset

vuetify로 snackbar 컴포넌트 사용중 스타일을 수정해야 하는 경우가 생겼다... https://handhand.tistory.com/23 [Vue.js] v-deep 속성에 대해서 vue 에서 v-deep 이란? 📌 컴포넌트의 scoped 선언 사내에서 vuetify 로 구성된 일부 화면을 다룰 일이 생겼는데 vuetify 에서 제공되는 컴포넌트의 스타일 지정이 뜻대로 되지 않을 때가 발생하곤 합니 handhand.tistory.com v-loader https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements Scoped CSS | Vue Loader Scoped CSS When a tag has the sc..

vue 프로젝트에서 eslint 사용중 Component name "" should always be multi-word 에러가 발생했다. Component의 이름이 multi word가 아니라는 것이였는데... 문제는 'login' 같은 컴포넌트의 이름도 강제로 multi word로 만들어야 한다는 것이다. 그래서 해당 옵션을 끄기로 했다.. "rules": { "vue/multi-word-component-names": "off" } package.json의 eslintConfig에 해당 코드를 추가하면 된다. "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recom..

d.ts 파일이란? 일명 정의 (definition) 파일 이라고 불린다. 자바스크립트에서 다른 라이브러리에 있는 함수를 사용한다고 가정하면, 처음에는 아무런 도움을 받을 수 없다. 어떤 파라미터를 넣어야 할지, 어떤 결과 값이 나오는지 알 수 없고 공식문서를 꼼꼼히 읽으며 찾아봐야 한다. 그러나 요즘 만들어진 라이브러리는 다운만 받아도 IDE 에서 어떤 파라미터를 넣어야 하는지 자동완성 되는 경우가 흔하다. 누군가 매우 고생해서 해당 라이브러리에 쓰일 타입 정의 파일인 d.ts 파일을 전부 작성해놓았기 때문이다. 인자의 타입 반환 타입 등을 다 넣어놓은 파일이다. d.ts 파일이 있으면 코드 자동완성을 통해 생산성 높은 작업을 할 수 있다. -> .d.ts파일은 type을 정의(declare)하기 위해..

script를 불러올때, 변수가 중복의 문제가 있다. 이를 해결하기 위해 모듈이 등장했다. 하지만 이러한 모듈들을 전부 다운로드 받으면, 많은 computing power가 필요하며, 네크워트 자원도 많이 소요된다. 여러개의 파일을 묶어주는 역할을 하는 것이 번들러 이다. [JS] Webpack을 쓰는 이유 | INGG. [JS] Webpack을 쓰는 이유 Webpack은 여러개 파일을 하나의 파일로 합쳐주는 모듈 번들러(Module bundler) 이다. Webpack을 쓰는 이유는 무엇일까? 표준화된 모듈화 기법이 등장한 것은 ES2015부터인데, Webpack… ingg.dev Leejaeyeop/wepack-example (github.com) GitHub - Leejaeyeop/wepack-ex..

CSS 가상 요소 "::before"와 "::after" 완벽 정리 (tistory.com) CSS 가상 요소 "::before"와 "::after" 완벽 정리 가상 요소와 가상 클래스 CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다. 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 blogpack.tistory.com ::before 요소 내용 앞쪽에 새 컨텐츠를 추가. ::after 요소 내용 끝에 새 컨텐츠를 추가. ::selection 마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택. ::marker 목록 아이템 앞에 붙는 마커를 선택. ::first-letter 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 ..