이전 포스팅에서는 Mesh를 통해 3D를 만들었는데, 3D를 만들었다고 바로 화면에 보여지지 않는다. 화면에 보이게 하려면 무대 (Scene)와 무대를 보여줄 카메라 (Camera)가 필요하다. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); renderer.render(scene, camera); renderer.render 메소드에 scene, camera를 전달해주면 무대가 완성된다. 위 코드 중 camera에 전달된 값들을 조금 더 알아보자면 순서대로 fov, aspect, near, far 값을 전달해주면 되는..
요즘 새로운 관심 분야가 생겼다. Three.js, WebGL을 통해 Canvas에 그래픽을 렌더링을 할 수 있어 인터랙티브한 웹을 만들 수 있도록 도와주는 기술이다. 국내보다는 해외에서 많이 WebGL 사용한 웹 사이트가 많은데 보면 굉장히 화려하다. HTML,CSS로는 구현이 불가능할 것처럼 느껴질 정도로 화려한데, "도대체 어떻게 저런 웹을 만들지? 나도 한번 해보고 싶다. "라는 생각이 들어 여유가 될 때 꼭 학습해봐야지 마음 다짐을 한 분야다. Three.js는 웹 페이지에 3D 객체를 쉽게 표현할 수 있도록 도와주는 자바스크립트 라이브러리다. 만약 Three.js 없이 WebGL로 3D를 개발해야 한다면 엄청나게 고생해야 하지 않나 싶다. 3D 객체는 점,선, 꼭지점 등을 이용하여 만들어지는데..
실무에서 스토리북을 도입하기 전에는 노션 문서에 UI 컴포넌트들의 사용 방법이나 스크린 샷등으로 어떤 컴포넌트인지 알 수 있도록 문서를 작성했다. 글로벌로 재사용하는 UI 컴포넌트의 개수가 엄청나게 많은 건 아니지만, 다른 사람이 만든 UI 컴포넌트를 사용할 때 문서를 보고 한눈에 파악하기가 쉽지 않다. 스토리북을 예전에 사용해보긴 했지만, 워낙 바쁜 상황이어서 도입은 미뤘었는데, 시간될 때마다 스토리북을 설정해서 마침내 스토리북을 도입했다. 다만 스토리북을 도입할 때까지 쉽지는 않았는데, 기존에 사용하고 있던 Composition API, Vuetify, 기타 라이브러리 등에서 충돌이 발생했기 때문이다. 스토리북은 별개의 빌드를 구성하기 때문에 그에 따라 설정을 해줘야 한다. 아래 명령어를 통해 우선 ..
JS에서 꼭 알아야 하는 메서드고, 면접 질문에서도 많이 나올 수 있는 bind, call, apply에 대해서 알아보자. 처음부터 정리를 하고 들어가자면, bind, call, apply 모두 this를 재 지정한다. bind, call, apply 모두 메서드이기 때문에 this가 참고되는데, 이를 변경해서 사용한다면 유용하게 사용할 수 있기 때문에 사용되는 메소드라 생각된다. - bind const arrayLike = { 0:1, 1:2, 2:3, length: 3 }; arrayLike.slice(1); // 에러 발생, 유사 배열이므로 slice를 가지고 있지 않음. // 그렇지만 유사 배열에서 slice 메서드를 사용하고 싶음. const slice = Array.prototype.slice..
최신 문법인 Optional chaining과 Nullish coalescing을 알아보자! 사실 잘 사용하진 않는데, 알아두면 유용한 문법인 것 같다. Optional chaining부터 알아보자. const test = { a: { b: 'Optional chaining' } } 위와 같은 객체가 있다고 하자. 해당 객체가 지금은 값이 있지만, 기본 값이 빈 객체이고, 서버에서 응답이 내려와 객체의 값을 채우기 전에 아래와 같이 test.a.b로 접근한다면 에러가 발생할 것이다. test는 빈 객체고, 빈 객체에서 a를 호출하는 건 undefined가 나오겠지만, undefined에서 없는 b를 호출해버리니 'Cannot read property 'c' of undefined' 에러가 발생하는 것이다..
Vuetify를 사용하다 보니 Pagination도 v-pagination을 사용하다가, 원하던 기능이나 디자인이 커스텀되지 않는 부분이 있어서 새롭게 제작하게 됐다. v-pagination이나 구글링하면 나오는 소스들과는 조금 다른 점이 있어서 직접 개발을 하게 됐는데, 조금 특이한 점이 있다면 이전과 다음 버튼을 누르면 보통 한 페이지씩 이동하고, 다음 페이지 그룹으로 넘어갈 때 (1,2,3,4,5에서 6,7,8,910) 조건이 5에서 다음 버튼을 누르면 6으로 가거나 그러는데 구현해야 하는 기능은 이전, 다음 버튼을 누르면 5개씩 페이지가 넘어가고, 1페이지에서 다음을 누르든, 2든, 3,4,5 페이지에서 다음을 누르면 무조건 6으로 가고, 마찬가지로 6,7,8,9,10 페이지에서 다음을 누르면 1..
요즘은 배포 자동화로 편리하게 배포를 하는 것 같아서 Github Action에 대해 알아보았다. 우선 AWS 계정이 있어야 하고, 배포할 Git Repository가 있어야 한다. 우선 S3 버킷을 생성해야 하는데, 특별한 설정은 없고 모든 퍼블릭 엑세스 차단만 해제하여 버킷을 하나 만든다. 그리고 해당 버킷 속성에서, 버킷 정책을 들어간다. 정책을 만들기 위해 정책 생성기를 누른다. 위와 같이 설정한 후, Amozon Resource Name은 정책 생성기 버튼을 누른 페이지에 있는 버킷 ARN을 복사한 후 뒤에 /*을 붙여준다. 예시: arn:aws:s3:::hoon-github-action/* 정책을 만들었다면, 복사하여 붙여넣고 저장한다. 그리고 사용자를 추가해야한다. AWS에 IAM을 검색하여..
Cypress를 이용한 회원가입 폼 테스트 이전 1탄에서는 설치 후 간단한 테스트를 통해 Cypress를 살짝 맛보았다. 이번 2탄에서는 Cypress를 이용해 간단한 회원가입 폼을 테스트해보려고 한다. // Form.vue submit {{ email }} {{ password }} 디자인 프레임워크인 Vuetify를 사용중이며, Cypress에서 쉽게 가져오기 위해 data-cy 속성을 지정했다. 해당 속성을 통해 cy.get()으로 해당 요소를 가져올 수 있다. // form.spec.js describe('Form Test', () => { beforeEach(() => { cy.visit('/signup'); }); it('회원가입 폼 작성', () => { cy.get('[data-cy=ema..
- Total
- Today
- Yesterday
- 자바스크립트
- e2e
- react
- vue.js
- react native
- backend
- 호이스팅
- vue3
- composition
- Cypress
- vue
- frontend
- 포트폴리오
- pinia
- 퍼블리셔
- JS
- pagination
- react query
- NUXT
- Front
- typescript
- Redux
- CORS
- Store
- Core Components
- three.js
- react-query
- vuetify
- vuex
- 타입스크립트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |