Dahee's Solution Hub

👀본론으로 들어가기 전, 근황을 먼저 공유하겠다! 근황2024년 11월부터 한국어능력시험 모의테스트 플랫폼 프로젝트 [TopikOn]에서 프론트엔드를 맡고있고, 2025년 1월 출시를 목표로 하고있다. [나를 포함한 프론트 2명 + 백엔드 1명 + 디자이너 1명 + 기획자 1명 + 풀스택/기획/매니저 1명] = 총 6명과 함께한다.모두가 리모트로 일하지만 가끔은 게더를 켜놓고 하루종일 같이 있는 기분을 느끼며 코딩할 때도 있다. 덕분에 밴쿠버에서 외롭지 않게 작업하고 있다ㅎㅎ 기술스택은 다음과 같다.- 프론트엔드: React Native + Next.js- 백엔드: NestJS React Native로는 이미 [루빗]에서 서비스 운영을 경험하고 [패스트캠퍼스 강의](접속 안되면 이 링크)까지 촬영해보았..

순수 Valnilla JS를 사용해 가계부 웹페이지를 만드는 프로젝트를 진행하고 있습니다.JS만을 사용하다보니, Next.js같은 프레임워크에서 제공하는 기능들을 직접 구현해보는 기회가 되었어요.아무래도 실무에서는 프레임워크를 사용할 확률이 훨씬 높겠지만, 프레임워크에서 어떤 부분들이 개발자의 수고를 덜어주는지 안다면 작동원리를 한층 깊게 이해하며 사용할 수 있게됩니다. ✅그래서 오늘은! JavaScript만으로 SPA를 직접 만들어보고 작동원리를 이해해보는 시간을 가져볼게요. SPA 화면 전환 오늘 만들어 볼 가계부 UI입니다.(Figma에서 expense tracker를 검색하면 나오는 템플릿을 사용했어요.) 페이지는 3개입니다.1. Home: 지출 내역을 날짜별로 보는 페이지2. Add/Edit..

기존 react native 프로젝트 구조는,├── apollo├── assets│ ├── gf-asset│ │ ├── collection│ │ ├── roubisy│ │ └── themes│ ├── icons│ ├── image├── c_components│ ├── analysis_stack│ ├── atom│ │ ├── icon│ │ └── text│ ├── home_stack│ ├── molecules│ ├── my_roubit_stack│ ├── on_alarm_stack│ ├── onboarding_stack│ ├── organisms│ ├── presenter│ ├── setting_stack│ ├── tem..

메세지 큐 시스템: SQS,Worker,Cron,Queue API Server목표- 대량의 푸시를 Main Server 영향 가지 않도록 [정해진 시간에,  따로, 안전하게] 보내기: 유저 경험 최적화🔥: DB 부하 줄여 비용 절감🔥 현재 문제 상황: Main Server에서 [DB에게 무리한 데이터를 요청]하고 [무거운 로직을 메인서버에서 돌려] 사용자에게 푸시를 보내는 과정에서 부하가 발생하여, [비용이 들고] [유저 경험을 안좋게] 만든다. 문제점: [DB에게 무리한 데이터를 요청]해결법: DB에게는 최대한 심플하게 데이터 요청where절에 많은 요청 금지. 최대한 select만 해서 데이터 가져오고, 나머지 데이터 필터링은 (DB보다 값싼) 인스턴스 안에서 하자. 문제점: [무거운 로직을 메인..

Debounce 도입 배경 아래 화면은 루빗 앱에서 진행되는 회원가입의 최종 화면이다. - "이대로 시작할래" 버튼을 누를 때 회원가입 API 호출이 일어난다. - API 호출 결과, DB에 User가 하나 생성된다. - 이 때 "이대로 시작할래" 버튼을 여러번 누른다면? User가 여러개 생성된다. - 그렇다면 User가 여러개 생성되는 것을 방지해야한다. - 방지하기 위해 버튼을 누르는 순간 loading state를 true로 만들어 해당 버튼을 비활성화 시킨다. 위 조건을 코드로 구현하면 아래와 같다. const [totalSignupLoading, setTotalSignupLoading] = useState(false); /** 회원가입 */ const signup = () => { setTot..

async await 을 함수에서 리턴을 할 때 주의할 점이 있다. Bad 사례처럼, 이미 async가 붙은 함수에서는 리턴값 가장 바깥에 Promise가 붙기 때문에,리턴값은 Promise가 붙으면 안된다. updateUserGoalVisible = async ( goalId: number, visible: boolean, ): Promise => { /* 👎 Bad 이미 async가 붙었기 때문에 리턴값은 순수한 Goal이어야 하는데, this.prisma.goal.update({}) 를 리턴함으로써 리턴값은 Promise이 되어버린다. 그래서 이 함수의 최종 리턴값은 Promise> 이 되는 것이다. */ return this.prism..