Jinju's Development Blog

시리보카는 나만의 영단어장 웹 애플리케이션으로, 그동안 개발하면서 느꼈던 갈증들을 해소하는 사이드 프로젝트입니다.왜 그런거 있잖아요.. 클린하고 확장성 있는 코드를 쓰기 위해 더 집착(?)하고 싶은데 시간상 일정상 넘어가야 했던 디테일한 요소들!그동안 개발하며 "이렇게 하면 좀 더 좋을텐데" 라고 느꼈던 점들을 개선하여 차곡차곡 기록하려고 합니다! 참고: 이 글은 완성된 버튼을 만드는 방법이 아니라, 공통 컴포넌트를 설계할 때 어떤 기준으로 구조를 세워나가는지에 대한 나의 기록입니다. 오늘 할 것은 최강의 버튼 컴포넌트 만들기!초점은 "클린 코드"과 "확장성"입니다.기술스택 : React, TypeScript, TailwindCSS1. 스타일 분리디자인 팀에서 넘겨주신 버튼 컴포넌트를 보면 보통 "모드"..

문제 상황React Native Expo로 릴리즈 빌드 시 다음과 같은 에러가 발생했다.Warning: TypeError: queryString.stringify is not a function (it is undefined) 에러 메시지가 추상적이어서 뭐가 원인인지 감도 안 잡혔다.node_modules나 package-lock.json을 지우고 다시 빌드해봐도 계속 실패했다.원인 분석며칠째 헤매다가 마침내 구글링을 통해 원인을 찾아냈다. 참고한 문서는 다음과 같다.https://stackoverflow.com/questions/79653811/typeerror-querystring-stringify-is-not-a-function-in-expo-router-tab-layout-w) ScreenCont..

이번에 새로 참여하게 된 프로젝트에서 Next.js라는 프레임워크를 사용하기로 했다. 서버 컴포넌트라는 낯선 개념이 등장하여, 이를 공부하고 정리해보았다.Next.js에는 구버전인 페이지 라우터 방식과,Next.js 13부터 새롭게 도입된 앱 라우터 방식이 있다.컴포넌트를 렌더링할 때페이지 라우터는 SSR(Server Side Rendering) 기반앱 라우터는 RSC(React Server Component) 기반이라고 볼 수 있다.여기서 중요한 포인트는,SSR과 RSC 모두 렌더 전에 데이터 요청이 가능하지만,SSR은 페이지 단위, RSC는 컴포넌트 단위라는 점이다.페이지 라우터에서의 데이터 패칭 (SSR)페이지 라우터의 경우, 컴포넌트에서 사용할 데이터를 패치하려면데이터 요청용 함수와 응답 데이터를..

지난 게시글에서, 댓글 추가 시 화면 하단으로 스크롤 되도록 무사히 구현을 마쳤다.그런데 어느날 우리 팀원이 보내준 사진이다.사이드바 영역이 잘린 채로 표시되고 있었다. 분명 내 컴퓨터에서는 모두 정상적으로 작동했고, 다른 팀원들 리뷰를 받았을 때도 이상이 없었기에 해당 팀원이 유일하게 컴퓨터가 "맥"이라는 것이 원인 분석의 시작이었다. 구글링을 해본 결과, 윈도우와 맥은 스크롤 처리 방식이 다르고, 맥은 어떤 컴포넌트의 스크롤이 끝나면 해당 컴포넌트의 형제나 부모에게까지 스크롤 이벤트를 전파 시킬 수 있다고 한다. 이처럼 스크롤 이벤트가 상위로 전파하는 것을 스크롤 체이닝(Scroll Chaining)이라고 한다. 우측의 본문에서 댓글 입력창이 sticky로 고정되어 있기 때문에, 스크롤시 해당 영역만..

우리가 구현해야 하는 댓글 생성 및 조회 흐름은 사용자 기준에서 다음과 같았다.1. 댓글 입력창은 항상 화면 하단에 고정되어 있어야함.2. 댓글 목록만 따로 스크롤 되는 것 없이 모두 노출되고, 전체 페이지 기준으로 스크롤 되어야함.3. 댓글 생성시 "최신 댓글(화면 하단)"으로 자동 스크롤사진으로 보면 이렇다.즉, 댓글 입력창이 항상 고정되고, 댓글 추가 시 자동으로 가장 하단 댓글이 보여야 한다는 UI 구조이다.처음엔 그저 화면 맨 끝으로 이동하면 되니까 간단할 줄 알았지만, 생각보다 고려해야 할 게 많았다.먼저 시도해본 방법은, useRef와 scrollIntoView를 이용해서 해당 부분으로 스크롤하는 것이었다. 참고한 문서는 아래와 같다.https://developer.mozilla.org/ko..

웨더타고 프로젝트 회고[교통약자를 위한 기상에 따른 지하철 혼잡도 예측 정보 및 편의시설 제공 서비스] 웨더타고 - TAVE 15기 연합 프로젝트참여한 주요 기능온보딩 및 로그인 인증 플로우 개발지하철역 즐겨찾기 기능 구현리모트 알림 서비스 개발기술 스택 및 선택 배경프레임워크React Native (Expo)React와 유사한 문법을 그대로 활용할 수 있고, Expo가 네이티브 설정을 간소화해줘서 앱 입문에 적합언어TypeScript컴파일 타임에 에러를 잡아줘 디버깅 효율 향상, 런타임까지 가기 전 안전장치로 유용상태 관리Context APIRedux나 Zustand보다 학습 부담이 적어, React 기본 기능부터 체득하기 위해 선택네트워크Axios익숙한 방식의 요청/응답 처리, 인터셉터 구현이 간단하..

플라이웨이트 패턴이란?많은 수의 객체를 관리하기 위해, 연관된 객체끼리 데이터를 공유하게 하면서 메모리를 절약하는 디자인 패턴이다.  주요 특징을 정리하면 다음과 같다.동일하거나 유사한 객체를 공유상태를 **내부 상태(공유)**와 **외부 상태(비공유)**로 분리팩토리 또는 풀을 통해 객체를 중앙 관리 자세한 건 코드와 함께 이해해 보자.코드에는 많은 클래스가 등장하므로, 코드 시나리오와 각 클래스의 역할을 간단히 소개하겠다.  어떤 숲에 10,000그루의 나무를 심어야 한다.나무의 속성(이름, 색깔, 질감)은 몇 개 되지 않지만, 나무의 위치는 각 나무마다 다르다.그러므로 공유 가능한 나무의 속성은 내부 상태, 나무의 위치는 외부 상태로 분리한다. - TreeType 클래스 : 내부 상태- Tree 클..

팩토리 패턴이란?객체 생성(인스턴스화) 과정을 캡슐화하여 감추고,상황에 따라 다른 클래스의 객체를 생성할 수 있도록 하는 패턴이다. 개념만 보면 감이 안잡힐테니, 예시와 함께 살펴보자.밑의 코드는 자동차 클래스를 생성하는 내용이다. 심플 팩토리// 자동차 클래스 (부모 클래스)class Car { constructor(name) { this.name = name; } drive() { console.log(`${this.name}를 운전 중입니다.`); }}// Sedan 클래스 (Car를 상속, 하위(자식)클래스)class Sedan extends Car { constructor() { super("Sedan"); }}// SUV 클래스 (Car를 상속, 하위(자식)클래스)c..

Singleton이란?클래스의 인스턴스를 오직 하나만 만들고, 그걸 재사용하는 패턴이다.// 인스턴스란 어떤 클래스나 생성자의 결과로 만들어진 객체.즉, 새롭게 인스턴스를 생성해도 (=클래스 생성자를 호출해도) 결국 같은 인스턴스를 참조한다. 코드와 메모리 구조 그림을 보면서 이해해보자.Singleton 예제 코드class Config { constructor() { if (Config.instance) { // 인스턴스가 있으면 그대로 반환 return Config.instance; } this.setting = "dark mode"; // 그렇지 않으면 인스턴스 생성 Config.instance = this; // 클래스 레벨에서 인스턴스를 참조 (객체 받음) r..

웹 스토리지 이용하기  감정 일기장 기능 구현을 마치고, 웹 스토리지라는 것을 배웠다. 기존의 감정 일기장은 새로고침하면 데이터가 보존되지 않는다는 문제가 있었는데, 웹 스토리지라는 웹 브라우저의 내장 DB를 이용하면 쉽게 데이터를 저장하고 꺼내쓸 수 있다.  웹 스토리지에는 크게 두 종류가 있다. 브라우저 탭 별로 데이터를 보관하는 SessionStorage,  사이트 주소별로 데이터를 보관하는 LocalStorage이다. 우리가 만들 감정 일기장은 창이 닫혀도 데이터가 보관되길 원하므로 LocalStorage를 이용한다. 사용 방법은 아주 간단한데, JS 함수를 이용하면 된다.localStorage.setItem( "key", value );localStorage.getItem( "key" ); 이때..