console.log("hello yeonniverse");
close
프로필 배경
프로필 로고

console.log("hello yeonniverse");

  • 분류 전체보기 (65)
    • React DeepDive (3)
    • JS&TS DeepDive (1)
    • CodingTest DeepDive (4)
    • IT (4)
    • Upscaling (11)
    • READERS AREA (1)
    • UOS (41)
      • UOS@SW APP (9)
      • UOS@DB (14)
      • UOS@운영체제 (18)
  • 홈
  • 태그
  • 방명록
시대팅6용 Input 컴포넌트

시대팅6용 Input 컴포넌트

시대팅6를 개발하면서, 복잡해진 여러 입력을 효율적으로 받고 싶었다.점진적 입력 구조에서 활용되어야 하고, Label, Description 등 부가적인 요소들도 존재했다.최대한 재사용 가능하고 확장성 있는 컴포넌트로 만드려고 노력했다.이번 글은 내가 BaseInput이라는 커스텀 Input 컴포넌트를 직접 만들며 겪은 고민, 기술적 선택, 그리고 배운 점들을 차근차근 정리한 회고다.Controlled vs Uncontrolled처음 고민은 이거였다."Input 값을 useState로 관리할까, 아니면 ref 기반으로 관리할까?"Controlled 방식은 깔끔하고 예측 가능하다는 장점이 있지만, react-hook-form과 함께 쓰기엔 제약이 많았다.폼 라이브러리에서 내부적으로 ref로 Input을 관..

  • format_list_bulleted React DeepDive
  • · 2025. 6. 22.
  • textsms
[BOJ] 백준 19637 - IF문 좀 대신 써줘, JS, Node.js

[BOJ] 백준 19637 - IF문 좀 대신 써줘, JS, Node.js

문제 요약캐릭터의 전투력에 따라 알맞은 칭호를 출력하는 문제다. 예를 들어:전투력 ≤ 10000 → WEAK전투력 ≤ 100000 → NORMAL전투력 ≤ 1000000 → STRONG칭호 개수와 캐릭터 수는 각각 최대 10만 개.단순 조건 분기처럼 보이지만, 성능 최적화가 핵심인 문제다.1차 시도: Map + 선형 탐색 → 시간초과처음에는 칭호를 Map에 저장해두고, 전투력마다 for...of로 순회하며 조건을 만족하는 칭호를 찾았다:for (let power of powers) { for ([limit, title] of titleMap) { if (power 시간복잡도: O(N × M) → 10억번 → 시간초과2차 시도: 전투력 구간 전체를 Map.set() → 또 시간초과for (let j..

  • format_list_bulleted CodingTest DeepDive
  • · 2025. 6. 8.
  • textsms

[프로그래머스] 달리기 경주(Lv1, js)

문제 자체는 단순하다.하지만 제한 조건이 커지자마자 코드가 비명을 질렀고, 결국 효율적인 구조로 다시 짜야 했다.그 과정을 정리해보려 한다.문제 개요달리기 경주가 열리고, 선수들이 1등부터 N등까지 줄을 서 있다.해설진이 특정 선수의 이름을 부르면, 그 선수는 앞사람과 자리를 바꾼다.선수 이름 배열: players (현재 순위 순)호출 배열: callings (선수 이름만 있음)매 호출마다 해당 선수는 앞으로 한 칸 이동모든 호출이 끝난 뒤의 최종 순위를 구하는 문제다.1차 시도: 단순 구현처음에는 별생각 없이 이렇게 풀었다.function solution(players, callings) { for (let name of callings) { const idx = players.findIndex..

  • format_list_bulleted CodingTest DeepDive
  • · 2025. 5. 25.
  • textsms
웹뷰 환경에서 사용할 리액트 공통 모달 컴포넌트 만들기

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

웹뷰 환경에서 팀 공통 모달 컴포넌트 만들기시대생 앱을 웹뷰로 리빌딩하게 되면서 공통으로 사용할 모달 컴포넌트를 새로 만들었다.특히 웹뷰 환경을 고려해 최대한 심플하고, 커스터마이징 가능한 구조로 설계했다.이번 글에서는 모달을 만들면서 어떤 고민을 했고, 어떤 선택지를 두고 결정했는지, 또 아쉬운 점과 앞으로 더 발전시킬 수 있는 부분까지 기록해보려고 한다.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차원 배열 초기화

[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 - 간결과 효율 부족

[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
  • navigate_before
  • 1
  • 2
  • 3
  • 4
  • ···
  • 10
  • navigate_next
전체 카테고리
  • 분류 전체보기 (65)
    • React DeepDive (3)
    • JS&TS DeepDive (1)
    • CodingTest DeepDive (4)
    • IT (4)
    • Upscaling (11)
    • READERS AREA (1)
    • UOS (41)
      • UOS@SW APP (9)
      • UOS@DB (14)
      • UOS@운영체제 (18)
최근 글
인기 글
태그
  • #React
  • #백준
  • #알고리즘
  • #리액트 상태관리
  • #TS
  • #리액트
  • #TypeScript
  • #프론트엔드
  • #BOJ
  • #타입스크립트
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.