Don't think! Just do it!

종합 IT 기술 정체성 카오스 블로그! 이... 이곳은 어디지?

Next.js 29

threejs로 스케치업 stl 파일 로드하기 - 응~ 안돼~

결론부터 말하자면 공짜버전으로는 안돼~~~ 프리 버전인 스케치업 웹에서는 skp, png, stl 3가지 형태로 다운로드가 가능한데. 어차피 threejs에는 skp loader같은 건 없고 png는 그냥 이미지고 남는게 stl이야. 찾아봤더니 threejs에 stl loader는 있더라고 그래서 해봤는데 ㅎㅎ 잘 안돼. 먼저 이전에 만들어놓은 스케치업 모델 👆을 stl로 다운로드 했어. 그리고 threejs stlloader를 이용해서 로드해봤지. 어차피 안되는 거라 전체 코드는 올리지 않을게. gltfloader 참고하면 될 거 같아. gltfloader하고 방식은 거의 비슷한데 loader.load에서 onload함수에 전달되는 게 object가 아니라 geometry야. 그러니까 구조만 전달이..

Next.js/three.js 2022.07.24

Next.js - 회사 홈페이지 제작 #3 - Quilljs

2022.07.18 - [Next.js] - Next.js - 회사 홈페이지 제작 #2 Next.js - 회사 홈페이지 제작 #2 2022.07.12 - [Next.js] - Next.js - 회사 홈페이지 제작 #1 Next.js - 회사 홈페이지 제작 #1 회사 홈페이지를 만들어야 해서 next.js로 해보려고. 기업 홈페이지처럼 정보만 나열하는 페이지를 보통 static page.. engschool.tistory.com 회사 공지사항을 올리는 게시판이 필요해. 지금 생각나는 구현 방법 중 쉬운 버전은 단순하게 md file로 작성된 게시물을 리스트로 보여주고 클릭하면 본문을 보여주는 방식. md file로 문서 작성하고 그걸 다시 next.js 프로젝트에 포함해서 배포하고 뭐 그런식이겠지? 이런 ..

Next.js 2022.07.22

Next.js - 회사 홈페이지 제작 #2

2022.07.12 - [Next.js] - Next.js - 회사 홈페이지 제작 #1 Next.js - 회사 홈페이지 제작 #1 회사 홈페이지를 만들어야 해서 next.js로 해보려고. 기업 홈페이지처럼 정보만 나열하는 페이지를 보통 static page라고 불러. 그러니까 뭐.. 쉽다는 소리지. 암튼 해보자구. 이것도 기존 next.js 예제 engschool.tistory.com 난 이렇게 만든 홈페이지를 실제로 사용해야 하니까 대강대강하지 말고 조금 더 신경써서 해야겠어 ㅋㅋ 이미지도 좀 바꾸고 회사 슬로건? 도 원래 하고 싶었던 걸로 변경할 거야. 우선 이미지. 이리저리 찾아보니까 아래 unplash.com이라는 사이트가 있더라구. 여기에서 고화질 이미지를 다운로드 받을 수 있어. 사용료도 없고..

Next.js 2022.07.18

nextauth 카카오 로그인 #1

한국에서는 꼭!? 카카오 로그인되야 하나? 몰라 ㅋㅋㅋ 일단 해보자. 제목에 #1 달아놨는데 뭔지 알겠지? ㅋㅋ 한번에 안끝날거 같네? ㅋ 뭐 카카오 문제는 아닌거 같은데 뭔가 삐그덕 거려. 시작해보자구. 카카오 로그인 사용하려면 우선 https://developers.kakao.com/ 에 로그인 해야해. 👇👇👇 뭐해! 애플리케이션 추가 안 누르고 ㅎㅎㅎ 앱 아이콘 대강 선택하고, 앱 이름도 넣고 사업자 명도 넣고~ 없다고? 아무거나 넣어 ㅋㅋㅋ 그리고 저장! 그러면 앱 키들이 주르륵 보이고, 그중에 REST API KEY 키는 Client id로 nextauth에서 사용할거니까 그렇게 알아두시고~~ 조 아래 플랫폼 설정하기를 눌러서 웹 프로젝트라고 알려주자구. 가장 하단에 웹 플랫폼 등록하기 눌르고 ..

Next.js/nextauth 2022.07.13

Next.js - 회사 홈페이지 제작 #1

회사 홈페이지를 만들어야 해서 next.js로 해보려고. 기업 홈페이지처럼 정보만 나열하는 페이지를 보통 static page라고 불러. 그러니까 뭐.. 쉽다는 소리지. 암튼 해보자구. 이것도 기존 next.js 예제처럼 내가 만든 nextjs 기본 템플릿에서 시작할거야.👇👇 https://github.com/peter-bang/nextjs-basic-configuration GitHub - peter-bang/nextjs-basic-configuration: nextjs basic configurations nextjs basic configurations. Contribute to peter-bang/nextjs-basic-configuration development by creating an ac..

Next.js 2022.07.12

three.js gltf 오브젝트 여러 개 로딩하기

gltf 오브젝트를 여러 개 로딩해볼려구. 화면 하나에 object 하나만 로딩하라는 법은 없잖아? 음 혹시나 서로 다른 형식의 object를 한 Scene에 로드할 수도 있고. 암튼 그래서 일단 똑같은 gltf 두개 로딩해볼거야. 특별한 건 없고 load() 대신 loadasync()를 Promiss.All에서 사용하면 간단하게 끝나. 아래 코드처럼. import React, { useEffect, useRef } from "react"; import * as THREE from "three"; import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { OrbitControls } from "three/exampl..

Next.js/three.js 2022.06.27

next-auth cognito login

중요!) 2022년 6월 23일 현재 next-auth 소셜 로그인에 약간 문제가 있어. 어휴 지친다. cognito로 소셜 로그인을 하면 cognito에서는 정상적으로 로그인되지만 next-auth의 하위 모듈인 openid-client에서 nonce mismatch error를 뱉어. 이 때문에 next-auth 세션이 로그인 상태로 안가고 error 페이지로 리디렉션! 이 상태에서 한번 더 로그인을 시도하면 cognito는 이미 로그인이 되어 있는 상태여서 그런지 ㅎㅎㅎ 에러 없이 로그인 상태로 넘어가. 유저가 로그인 두번 눌러야 한다는 거지 -_-;; 암튼 그래서 현재 PR을 기다리고 있어. 👉 #4100 PR이 완료되기 전까지 사람들이 임시방편으로 patch-package를 사용해서 버티고는 있..

Next.js/nextauth 2022.06.23

three.js orbitcontrols (vs trackballcontrols) 마우스 카메라 회전

2022.06.06 - [Next.js] - Next.js + three.js = 3d object 표현 Next.js + three.js = 3d object 표현 web page도 트렌드가 변할 것 같아서 미리 좀 공부해두는 건데.. 미리인건지는 잘 몰름 ㅋ 암튼 next.js 같은 웹 프레임워크 위에 three.js 사용하는 걸 좀 해보고 싶어서 시도해봤어. 물론 시작하기 전 engschool.tistory.com nextjs위에 3d object 표현하는 거 해봤는데 👆👆👆 왠지 마우스로 휘리릭 휘리릭 돌려보고 싶더라고 그래서 해봤지 ㅋ stack overflow를 헤매다가 이런 동작은 controls 라는 카테고리로 분류되어 있다는 걸 알았어. 그러면 고민하지 말고 threejs.org를 가보자..

Next.js/three.js 2022.06.22

next.js + AWS amplify auth login

next.js에다가 aws amplify auth로 로그인을 구현해보자구. google부터 해볼거야. 나머지는 뭐 똑같겠지. 난 새로운 이메일 계정으로 aws 새로 가입해서 처음부터 시작했어. 새로 만들고 amplify 들어가면 누를 수 있는게 -_- 시작하기 두개 뿐이 없어. 지금 호스팅을 할건 아니니까 amplify studio 시작하기 버튼 클릭. 이제 앱 이름 각자 넣고 confirm deployment 클릭. 그리고 나면 몇분 동안 amplify 설정을 해. 조금 기다려주자 ㅋ 완료가 되면 아래와 같이 대쉬보드가 나오는데.. 이것 저것 살펴보자 ㅋㅋ 하지만 당신이 누를 수 있는 건 backend environments의 studio 시작 버튼 뿐이 없어 ㅋㅋㅋ 의심하지 말고 눌러보자. 이제 am..

Next.js/nextauth 2022.06.21

Next.js AWS에다가 올릴거야!! ㅠㅠ 구글 미워!

난 사실 react-native 프로젝트를 하고 있었어 firebase 사용해서 말이지. 생각보다 쉬워서 괜찮았어 firestore 쿼리하는 것도 그렇게 나쁘지 않았고(typescript로 자료형 정의하는게 약간 더럽긴 했지만.) 그러다 어드민 사이트가 필요해서 next.js를 시작했는데 firebase에는 없는 next.js 호스팅 기능이 AWS amplify에는 있더라고 정확히는 SSR 기능을 지원한다는 거지. 그렇다고 gcp app engine을 쓰자니 무료 구간도 없고 요금도 쌔고 참. aws amplify에다가 firebase 기능(auth, firestore)을 가진 어드민 사이트를 넣자니 끔찍한 혼종같잖어.. 물론 firebase에도 next.js 호스팅을 지원하는 기능을 추가하고 있어. 그..

Next.js/aws amplify 2022.06.20
반응형