웹뷰 환경에서 사용할 리액트 공통 모달 컴포넌트 만들기

웹뷰 환경에서 팀 공통 모달 컴포넌트 만들기시대생 앱을 웹뷰로 리빌딩하게 되면서 공통으로 사용할 모달 컴포넌트를 새로 만들었다.특히 웹뷰 환경을 고려해 최대한 심플하고, 커스터마이징 가능한 구조로 설계했다.이번 글에서는 모달을 만들면서 어떤 고민을 했고, 어떤 선택지를 두고 결정했는지, 또 아쉬운 점과 앞으로 더 발전시킬 수 있는 부분까지 기록해보려고 한다.1. 모달 설계에서 고민했던 점처음에는 단순히 isOpen, title, description, primaryButton, secondaryButton 같은 props만 받는 구조로 시작했다.하지만 바로 몇 가지 고민이 들었다.description을 문자열(string)만 받을까? 아니면 ReactNode로 받을까?Footer 버튼 2개만 고정할까? ..

• format_list_bulleted React DeepDive
• · 2025. 4. 27.
• textsms

진짜 사소하고 사소한데 방심하기 쉬운 ??와 ||의 차이

이전에 기록해놨던 코드가 떠올랐다.const [currentTeam, setCurrentTeam] = useState( user?.currentTeam ?? (teams.length > 0 ? teams[0].id : undefined));처음엔 그냥 잘 넘어갔던 코드인데, 어느 순간 user.currentTeam이 빈 문자열인데도 기본값으로 바뀌어버리는 상황을 겪고 나서 이 코드가 눈에 밟히기 시작했다. 처음에는 그냥 ||를 써도 무방하다고 생각했지만, 의외로 작은 차이가 UX와 버그 발생에 직접적인 영향을 줄 수 있다는 것을 경험하게 되었다.이 글은 그 경험을 바탕으로 ??, || 그리고 관련 문법을 정리해보려 한다.??와 ||, 뭘 기준으로 다르게 동작할까??? (null 병합 연산자)는 값이 n..

• format_list_bulleted JS&TS DeepDive
• · 2025. 4. 15.
• textsms

[BOJ] 백준 7562 node.js 나이트의 이동 - 2차원 배열 초기화

백준에서 "나이트의 이동" 문제를 풀다가 예상 외의 버그를 마주했다.BFS 구현 자체는 간단한 문제였지만, 결과가 이상하게 나오고 TypeError까지 발생하면서 꽤 시간을 썼다.결론적으로는 자바스크립트의 2차원 배열 초기화 방식과 변수 오타라는 기본적인 실수가 원인이었다.문제 개요체스판 위의 나이트가 한 칸에서 다른 칸으로 이동할 때 최소 몇 번의 이동이 필요한지를 구하는 문제다.체스판 크기는 l x l이고, 나이트는 8가지 방향으로 움직일 수 있다. BFS로 최단 거리를 구하면 된다.BFS는 잘 돌아가는데 이상한 에러가...초기 구현은 아래와 비슷했다.visited = Array.from({ length: len }, () => new Array(len).fill(false));visited[x][y..

• format_list_bulleted CodingTest DeepDive
• · 2025. 4. 2.
• textsms

[BOJ] 백준 15650 N과M (2) js nodejs - 간결과 효율 부족

백준 15650 문제는 "1부터 N까지 자연수 중에서 중복 없이 M개를 고른 뒤 오름차순으로 출력하는" 전형적인 조합 문제입니다. 처음에는 단순히 res.includes()로 중복을 체크하고, 오름차순인지 매번 검사하는 식으로 코드를 작성했습니다. 이 방식도 입력이 아주 크지 않다면 통과하긴 하지만, 조금 더 효율적으로 작성할 수 있는 방법이 있더군요.이 글에서는 제가 처음에 썼던 코드와, 강사님의 예제 코드를 비교해보겠습니다. 마지막에는 비슷한 문제를 만났을 때 어떻게 접근하면 좋을지, 그리고 추가 팁을 간단히 정리해봤습니다.처음에 작성했던 코드let fs = require("fs");let read = fs.readFileSync("/dev/stdin").toString().trim();let bas..

• format_list_bulleted CodingTest DeepDive
• · 2025. 3. 18.
• textsms

React Hook Form 필드 초기화 이슈, form의 state 이해하기

현장실습 인턴을 진행하던 중, 댓글이나 답글 기능을 만들면서 React Hook Form을 사용하게 되었습니다. React Hook Form은 폼 상태 관리와 유효성 검사를 간편하게 처리할 수 있게 도와주는 라이브러리로, 불필요한 리렌더링을 최소화하기 때문에 자주 사용하게 됩니다.예를 들어, useState를 사용한다면 input에 값을 한 글자 입력할 때 마다 리렌더링이 발생하기 때문에, form을 주로 사용합니다.그러나 댓글을 작성하고 나서 입력란을 초기화하는 과정에서 생각하지 못한 문제가 생겼습니다. 이번 글에서는 제가 실제로 겪었던 문제의 원인과 해결 방법을 알기 쉽게 설명하려고 합니다.React Hook Form의 기본적인 상태React Hook Form은 폼과 필드의 상태를 효과적으로 관리하기..

• format_list_bulleted React DeepDive
• · 2025. 3. 17.
• textsms

HTML body의 기본 Margin(흰 테두리)

열심히 컴퓨터종합설계를 하고 있던 저는 어마어마한 문제를 맞이했습니다. 분명히 모든 컴포넌트의 마진을 0으로 줬음에도 불구하고, 화면의 테두리에 흰색이 조금 남아있는 것입니다!!   잘 보일지 모르겠으나, 마진도 없고 패딩도 없고 백그라운드 컬러를 야무지게 그라데이션으로 설정해놨는데,테두리에 흰 색이 있는 겁니다!! 만능 킹 갓 제너럴 엠페러 지피티 형님한테 여쭤봐도 제대로 된 답을 주지 않더군요... 그러다 개발자 모드를 켜서 요소를 찍어보니 어마어마한 사실을 발견했습니다.아무런 스타일 옵션을 주지 않았음에도 불구하고,이미지와 같이 body에 무려 8px의 마진이 설정되어 있었습니다. 이 얼마나 억울한 일입니까?알아보니 예전엔 이런게 있어야 편해서 기본값으로 설정되어 있는건데, 여전히 이게 남아있는거라..

• format_list_bulleted Upscaling
• · 2024. 5. 1.
• textsms

13. 리액트에서 사용하는 타입스크립트

HTML 타입 const usernameInput = document.getElementById('username') as HTMLInputElement; const submitButton = document.getElementById('submit') as HTMLButtonElement; 다음과 같이 HTML태그Element 형태로 DOM 노드에 대한 타입을 사용 가능. 이벤트 타입의 경우 이벤트에 따라 다양하게 있는데, 뭐 onClick의 경우 MouseEvent임. VSCode에서 하나씩 찾아보면 됨! React 타입 Prop : 인터페이스 이용 interface Props { className?: string; id?: string; children?: ReactNode; onClick: (e:..

• format_list_bulleted Upscaling
• · 2024. 4. 17.
• textsms