괴발개발 성장기

3D 물체를 마우스로 움직이게 할 수 있다. 그걸 하기 위해서 코드를 작성해봤다. 이 코드를 넣으면 마우스나 터치 입력을 사용하여 3D를 자유롭게 회전하고 이동할 수 있습니다. # 코드 const Sphere = () => { return ( ); }; 코드를 작성하면 아래 동영상처럼 3D 물체가 자유롭게 움직인다. # 참조 이슈 https://github.com/YooGenie/react-study/issues/47 3D 물체를 마우스로 움직이게 한다 · Issue #47 · YooGenie/react-study github.com

# 배경 지난 번에는 구형을 만들어봤다. 조금 아쉬워서 정육면체 만들어 봤다. # 정육면체 만들기 const Sphere = () => { return ( ); }; 위에 코드를 캔버스에 넣으면 const Model = () => { return ( ); }; 아래 그림처럼 나타난다. 정육면체를 만들었습니다. 그럼 직육면체도 만들수 있습니다. # 직육면체를 만든 방법 x, y, z 축이다. 숫자만 다르게 해주면 직육면체가 된다. 다음에는 마우스으로 3D 물체를 움직이게 만드는 방법을 해보겠습니다.

# 이전글 2024.02.21 - [Study/자바스크립트] - [Three.js] 캔버스안에 구형(공모양)을 넣어 보자 [Three.js] 캔버스안에 구형(공모양)을 넣어 보자 # 배경 회사 스터디로 진행을 하게 되었다. 동료가 Three.js를 제안했다. 이때 Three.js 기술을 처음 알았다. 이건 리액트에 Three.js를 작용시켜보겠습니다. # 설치 방법 yarn add three or npm install three # 캔 pink1016.tistory.com 이전 글에서는 그냥 원으로만 보였다. 입체적으로 보이게 하기 위해서 빛을 줘야한다. # 3D 구형 만들기 const Circle = () => { return ( ); }; ambientLight : 주변 광 추가 directional..

# 배경 회사 스터디로 진행을 하게 되었다. 동료가 Three.js를 제안했다. 이때 Three.js 기술을 처음 알았다. 이건 리액트에 Three.js를 작용시켜보겠습니다. # 설치 방법 yarn add three or npm install three # 캔버스를 만들어보자 페이지 하나를 만들어서 거기 캔버스를 만들었다. 도화지라고 생각하면 된다. import {Canvas} from "@react-three/fiber"; const Model = () => { return ( ); } export default Model; 빨강색이 캔버스이다. # 캔버스안에 구형(공모양)을 띄어보자 npm install three @react-three/fiber @react-three/drei or yarn add..

# 배경 1993년생이 실수로 7번째자리 수를 3으로 했다. 그리고 나머지 수를 아무거나하니까 통과했다. # 문제가 되는 등록번호 930905-3111111 # 원인 3,4인 경우 생년월이 20년 10월보다는 커야하고 현재 년,월보다는 작아야한다. nowDate := time.Now().Format("0601") nowYear := time.Now().Format("2006") seventhDigit := regNum[6:7] == "3" || regNum[6:7] == "4" if regNum[0:4] >= "2010" && regNum[0:4]

# 배경 주민등록번호를 작성하는 사람이 실수로 한글을 넣어서 유효성 검사에 통과하는 경우가 있었다. 그래서 정규식을 도입시켰다. # 통과됐던 예시 9008013sksksk # 정규식 - 앞에 2자리는 0-9까지 사용 가능하다 - 3번째 자리는 0 아니면 1 => 01월~12월까지니까 - 4,6번째 자리는 0-9 - 5번째 자리는 0-3 => 제일 큰 수 31일이니까 - 7번째 자리는 1-9 - 나머지는 0-9 r, _ := regexp.Compile("[0-9]{2}[0-1][0-9][0-3][0-9][1-9][0-9]{6}") 숫자로만 설정을 했다. # 참조 https://github.com/YooGenie/validate-registration-number/issues/7 한글이 통과돼서 정규식을 설..

# 문제점 금액 수정하는 페이지에서 새로고침을 누르면 하얀페이지가 나타난다. # 원인 상태값이 초기화 되면서 값이 없어서 하얀페이지로 나온다. 뒤로가기는 리덕스를 통해서 성공 했는데 새로고침은 여전히 문제였다. # 해결 방안 redux-persist 라이브러리를 사용하면 된다. 상태값이 필요없는 페이지에서 상태값이 그래도 존재한다. 그래서 상태값이 필요없는 페이지에서는 리덕스를 초기화시켜준다. # redux-persist 라이브러리 사용방법 이전 글을 참조하자! 2024.01.16 - [Study/자바스크립트] - [redux] 새로고침해도 state(상태값)를 유지하기 [redux] 새로고침해도 state(상태값)를 유지하기 # 배경 회사서비스에 redux를 적용했다. 그런데 새로고침을 누르면 페이지가..

# 배경 회사서비스에 redux를 적용했다. 그런데 새로고침을 누르면 페이지가 하얀페이지로 바뀐다. 로그를 확인하니까 state값이 사라져서 하얀페이지로 변하는 거였다. # 예시 상태값이 새로고침을 하면 초기값에 저장된 데이터로 변경이 된다. # 해결방법 redux-persist 라이브러리를 이용해서 해결해보자 # 설치 npm install redux-persist or yarn add redux-persist # 1) index.js 추가해준다. - PersistGate를 사용하여 지속성을 관리한다. import {Provider} from "react-redux"; import { store } from "./page/study/redux/store"; import {PersistGate} from ..

# 배경 금액 수정 페이지를 가는데 많은 경로가 있다. 금액 수정 페이지에서 뒤로 가기를 하려고 했다. "목록으로" 버튼을 누르면 뒤로 가는 프로세스였다. 그런데 A 페이지에 Tab2를 만들었다. 그러면 상세페이지를 갈 때 쿼리스트링에 주민등록번호를 전체 가지고 다니는게 쫌 그랬다. 그래서 history안에 state에 저장해서 값을 이동 시켰다. 이렇게 모든 이동 버튼에 아래와 같은 코드를 넣어줬다. '이렇게 하는게 맞나? ' 계속 고민을 했다. history.push({ pathname: `/page/id`, state: { startPage: history.location.state.startPage, page: history.location.state.page, registrationNo: his..

redux JavaScript 애플리케이션의 상태를 효율적으로 관리하기 위한 상태 관리 라이브러리 하나의 상태를 갖는다. => 어플리케이션의 복잡성을 낮춘다. # store - 정보(객체)가 저장되어 있는 곳 - 안에는 state가 있다. 직접 접근 불가능 # action - 상태를 변경하는 작업을 나타내는 객체 - type 속성 일반적으로 가지고 있다. # reducer - state값을 가공해서 리턴해주면 state에 새로운 값이 된다. - 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수 # state - state는 객체이다. - state를 다이렉트로 수정할 수 없다. # dispatch - reducer 호출 해서 state 값을 변경해준다. - subscribe를 이용해서 render 함..