괴발개발 성장기

# 이전글 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 함..

설치 방법 yarn add redux yarn add react-redux # index.js import {Provider} from "react-redux"; ReactDOM.render( , , document.getElementById('root') ); : Redux 스토어를 React 애플리케이션에 제공하는 역할을 하는 Provider 컴포넌트이다. store는 Redux 스토어 객체로, 이를 통해 애플리케이션의 상태를 관리한다. # actions.js - 액션을 만든다. export const updatePageState = (state) => { return { type: "UPDATE_PAGE_STATE", payload: state, }; }; - type : 액션의 유형을 나타내는 문..

한해를 정리하면 - 일하는 스타일을 알게 되었다. - 새로운 서비스보단 하던 서비스를 개선했다. - docker와 친해지기는 실패했다. - 리액트와 조금 친해졌다. - 챗GPT와 친구가 됐다. # 주요업무 상반기 - 기부금영수증 개선 작업 - 알림톡 서비스 오픈 및 개선 - 멤버서비스 테스트 및 에러 원인 하반기 - 팝업, 배너 분리 작업 및 개선 - 서버 차단 서비스 추가 - 회원 조회 페이지에 기부금영수증 조회할 수 있게 기능 만들기 - 새로고침, 뒤로가기를 위해서 redux 도입 - 메시지 예약하는 기능 - 기부금영수증 추출을 위해 상태변경 API 개선 - 결제 부분 스터디 - three.js 스터디 1) 올 한 해는 기부금 영수증으로 시작해서 기부금 영수증으로 끝났다. 어김없이 1월에는 기부금 영..