전체 글153 [Next.js] NextJS Boilerplate 제작기 이제 곧 개발자로 일한 지 3년 차를 앞둔 만큼 업무적으로 진행한 프로젝트와 개인적으로 진행한 사이드 프로젝트의 수가 점점 늘어가다 보니, 아무 생각 없이 자주 쓰는 코드 패턴들이 생겨나기 시작했습니다. 어떤 프로젝트를 시작할 때면, 습관적으로 익숙하고 편한 방식을 고집했던 거죠. 이전에 짜던 방식대로만 코드를 짜다 보니 코드의 퀄리티가 정체되어 있음을 느꼈습니다. 그래서 저의 코딩 스타일을 최적화하고 코드의 퀄리티를 올리기 위해 좋다고 생각했던 코드 패턴들만을 남기고, 너무 번잡하거나 엣지 케이스를 감당하기 힘들었던 부분들을 좋은 라이브러리를 사용한 코드로 대체하였습니다. 같은 동작을 하는 라이브러리들을 비교해 보고 좀 더 취향에 맞는 라이브러리들을 고르고, 공식 문서를 읽어가며 하나둘 새로운 프로젝트.. 2024. 3. 7. [TypeORM] 커스텀 값 entity에 매핑하여 들고오는 법 아래와 같은 유저 테이블이 있습니다. @Entity("users") export class User extends IdEntity implements UserScheme { @Column() password: string; @Column({ unique: true }) social_id: string; @Column() name: string; @Column() sex: boolean; @Column() phone: string; @Column({ unique: true }) email: string; @OneToMany(() => UserInClub, (userInClub) => userInClub.user, { cascade: true, }) public clubs: UserInClub[]; @One.. 2024. 2. 7. [Babylon.js] Gimzo, GimzoManager를 pub/sub 패턴으로 관리하기 Babylon.js에서 gimzo를 다뤄야 할 때가 있습니다. 서버에서 저장된 메쉬 정보를 불러와 메쉬들을 그려준 뒤, React component에서 메쉬들의 정보를 띄워준다고 가정해 봅시다. 그리고 그 메쉬정보를 클릭하면 해당하는 메쉬에 gizmo가 부착되어야 하는 상황입니다. 이때 State와 GizmoManager를 동기화하기가 꽤 까다롭습니다. 이때 pub/sub 패턴을 적극 활용하면, 손쉽게 gizmo를 관리할 수 있습니다. 먼저 메쉬들과, 선택된 메쉬의 정보가 있는 zustand store를 하나 생성합니다. import { AbstractMesh, Nullable } from "@babylonjs/core"; import { create } from "zustand"; import { su.. 2023. 6. 25. Zustand 현명하게 사용하기 (불필요한 리렌더링 막기) 여기 아주 간단한 zustand 스토어와, 2개의 컴포넌트가 있습니다. import { create } from "zustand"; interface AppStoreStates { a: number; b: number; setA: (a: number) => void; setB: (b: number) => void; } export const appStore = create((set) => ({ a: 0, b: 0, setA: (a: number) => set({ a }), setB: (b: number) => set({ b }), })); import { appStore } from "./store/app"; const A = () => { const { a, setA } = appStore(); con.. 2023. 6. 12. 이전 1 2 3 4 5 ··· 39 다음
