개발 개발

public interface MemberRepository { Member save(Member member); Optional findById(Long id); Optional findByName(String name); List findAll(); } Member라는 객체를 저장할 수 있는 MemberRepository라는 객체를 만들고 그 작동을 테스트 하려고 한다. MemberRepository의 인터페이스는 위와 같이 새 멤버를 저장할 수 있는 save 멤버를 아이디별로 찾을 수 있는 findById 멤버를 이름별로 찾을 수 있는 findByName 모든 멤버들의 리스트를 반환하는 findAll 로 이루어진다. 여기서 Member를 domain, MemberRepository를 reposito..

오늘 배운 것들 Geometry의 정점 좌표를 조작하여 이글거리는 태양 표면 만들기 태양 만들기 표면이 불규칙적으로 일렁이며 움직이는 구체를 만들기 위해서는 구체의 각 정점의 좌표를 랜덤하게 바꿔주는 것이 필요하다. 또한 위와 같은 불균일한 표면을 만들기 위해서 각 정점의 좌표를 처음부터 랜덤하게 설정하는 것도 필요하다. 즉, 초기 상태에서 표면 정점의 좌표들 좌표 변화량 을 모두 랜덤하게 설정해주는 것이 필요하다. const geometry = new THREE.SphereGeometry(5, 64, 64); const material = new THREE.MeshStandardMaterial({ color: 'orangered', side: THREE.DoubleSide, flatShading: tr..

[오늘 배운 것들] mesh 이동하기 mesh 크기 조정하기 mesh 회전하기 Scene Graph: 그룹 만들기 이동하기 mesh.position.x = 2; mesh의 position 속성을 변화시킴으로써 물체를 이동시킬 수 있다. mesh.position.set(1,1,1); set을 통해 x, y, z 좌표 한 번에 변화시킬 수 있다. console.log(mesh.position.length()); console.log(mesh.position.distanceTo(new THREE.Vector3(1.5,1.5,1.5))); mesh.position에는 length와 distanceTo 함수가 있는데 각각 현재 위치에서 원점과의 거리(length), 인자로 받은 벡터와의 거리(distanceTo)..

오늘 배운 것들 greensock 라이브러리를 이용한 애니메이션 구현 축, 그리드 헬퍼 FPS 체크하기 GUI 컨트롤 도구 Greensock 라이브러리를 이용한 애니메이션 구현 https://greensock.com/ GreenSock GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser. greensock.com npm i gsap 을 이용하여 설치할 수 있는 이 라이브러리는, 애니메이션을 구현할 때 제일 많이 쓰이는 자바스크립트 라이브러리다. //gsap animation gsap...

오늘 배운 것들 애니메이션 기본(requestAnimationFrame, setAnimationLoop) 성능 보정(clock을 이용한 디바이스 별 성능 격차 보정, JavaScript Date.now를 사용한 성능 격차 보정) 안개 애니메이션 기본 window.requestAnimationFrame(draw); renderer.setAnimationLoop(draw); //작동이 똑같음 but AI, VR 컨텐츠 할때는 이거를 사용해야 한다. requestAnimationFrame과 setAnimationLoop 모두 리페인트를 한다. (프레임을 새로 그린다...?) 재귀함수식으로 draw 함수를 만들고 그 안에 저 코드를 넣으면 프레임이 계속 갱신되면서 자연스러운 애니메이션을 만들 수 있게 된다. m..

[인프런 1분코딩님의 강의 공부 기록입니다.] 기본 요소 비단 Three.js가 아니더라도 3D의 기본 요소에는 다음과 같은 것들이 있다. Scene : 장면/무대. 모든 것은 씬 위에 올라간다. 생성 const scene = new THREE.Scene(); 요소 추가 //mesh 추가 scene.add(mesh); //camera 추가 scene.add(camera); //light 추가 scene.add(light); //...etc 이렇게 생성한 요소들을 씬에 추가하면 된다. Mesh : 표현되는 모든 물체. 모양을 나타내는 Geometry와 재질을 나타내는 Material로 구성된다. const mesh = new THREE.Mesh(geometry, material); 두 요소를 파라미터로 넣..

[인프런 1분코딩 강의 학습 내용 정리] Three.js란? 웹에서 3D를 구현하는 라이브러리 WebGL, 그러나 너무 로우레벨 라이브러리라서 실무에서는 잘 쓰이지 못한다. 그것을 좀더 추상화 시켜 사용성을 높인 라이브러리. 가장 기본 코드인 까만 배경에 초록색 큐브 돌아가는 화면을 구현하는 코드. Three.js 공식 웹사이트에 게시되어있다. 예전에 이거 한 번 띄워보려고 삽질을 했었는데 라이브러리 import 구조를 잘 모르고 했기 때문에 실패했었다. npm i three 일단 설치부터 해 줘야 한다. import * as THREE from 'three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, ..

리액트와 스프링부트를 사용하여 만들고 있는 서비스에 소셜 로그인 기능을 추가하려고 했다. 처음에는 spring security의 필터를 사용해서 클라이언트가 서버에 요청만 보내면 자동으로 모든 인증과 인가 과정을 거쳐서 리다이렉트까지 해주는 방식으로 구현했었다. 그런데 oauth 과정을 조금 더 검색해보니 이런 방식은 자주 쓰이지 않는 것 같았다. 그 이유를 알아보고 우리가 구현하려는 프로젝트에 맞는 인증/인가 과정을 채택하기 위해 oauth의 종류를 공부해 보았다. oauth가 사용자의 정보를 처리하는 방식에는 두 가지가 있는데, 한 가지는 authorization code grant, 다른 한 가지는 implicit grant 이다. 둘 다 react같은 spa를 위한 웹 프레임워크에서 지원되는 방식..