기록창고

https://velog.io/@jaeminals/posts

문제 링크 1. 개요 처음 문제를 접했을 때, 단순히 DFS나 백트래킹 문제라고 생각했다. 하지만 "서로 최선의 플레이를 한다"라는 조건이 붙어 있어 일반적인 탐색과는 결이 다르다는 것을 느꼈다. 이는 단순히 이기는 것뿐만 아니라, '이기면 빨리 이겨야 하고, 지면 최대한 늦게 져야 한다'는 복합적인 조건을 구현해야 했기 때문입니다. 2. 구현 과정2-1. 게임 이론과 미니맥스(Minimax) 문제를 해결하기 위해 필요한 핵심 개념은 미니맥스(Minimax) 알고리즘이었다. 흔히 AI가 체스나 오목을 둘 때 사용하는 방식인데, 개념을 잡는 것이 중요했다.나(Player): 이길 수 있다면 가장 **짧은 턴(Min)**으로 이기려 한다.상대(Opponent): 내가 질 수밖에 없다면, 상대가 최선을 다해도..

1. 개요 어제 한 것에 이어서 오늘은 다음 사항들을 진행했다.width가 줄어들면 바운딩 박스 위치가 안 맞아지는 현상 수정모바일 화면 구현 2. 진행2-1. 문서 추가# 📱 Feature Implementation Plan: Mobile Responsiveness & Bug Fix## 1. 개요 (Overview)- **목표**: 윈도우 크기 조절 시 이미지 위의 Bounding Box 좌표가 어긋나는 버그를 수정하고, 추후 모바일 반응형 UI를 구축한다.- **핵심 과제**: 1. Image Overlay의 좌표계가 CSS 렌더링 사이즈와 1:1로 매핑되도록 구조 개선 (Coordinate Drift Fix). 2. (추후) Tailwind CSS Breakpoint를 활용한 모바일 레이아웃 ..

문제 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 이 문제는 50x50 크기의 표에 대해서 다음과 같은 명령어들이 주어졌을 때, PRINT 명령어들의 결과들을 반환해야 하는 문제이다. 주어지는 명령어들은 다음과 같다.UPDATE r c value: (r, c) 셀의 값을 value로 변경.UPDATE value1 value2: value1의 값을 모두 value2로 변경.MERGE r1 c1 r2 c2: (r1, c1)의 셀과 (r2, c2)의 셀을 병합. 이 때, (r1, c1) ~ (r2, c2) 사이의 있는 셀은 영향을 받지 않고 오직 이 두 셀만 병합됨.UNMERGE r c: (r, c)위치의 셀의 ..

1. 개요 단순히 이미지에서단어를 추출하는 것을 넘어 이미지 위에 단어 위치를 시작적으로 표시하는 것도 중요하다고 생각했다. 그래서 해당 기능을 구현했다. 2. 구현 목표 오늘의 목표는 크게 다음과 같다.이미지에서 추출된 단어의 위치를 박스로 표시단어 리스트와 이미지 박스 간 양방향 hover 연동이미지 박스 클릭 시 해당 단어로 스크롤 이동 3. 구현 과정3-1. 작업 문서 작성# 🚀 Feature Implementation Plan: Image Coordinate Highlighting## 1. 개요 (Overview)- **목표**: 사용자가 업로드한 이미지에서 추출된 단어의 위치(Bounding Box)를 시각적으로 표시하고, 리스트와의 양방향 상호작용(Hover Interaction)을 구현한..

1. 상황 한 번 배포 환경에서는 어떻게 보일지 확인해보고 싶어서 vercel을 이용해서 배포하려 했다. 우선 project setting에서 Framework preset에는 React Router가 선택되어 있길래 그대로 둔 후, Environment Variables에 구글 ai studio에서 발급받은 키 값을 추가했다. 그랬더니 이런 에러가 발생했다. 2. 문제 상황2-1. SSR 모드 뭔가 이상해서 npm run build 후 확인을 해보니 index.html이 생성되지 않았었다. index.html은 브라우저가 읽을 수 있는 단일 진입점인데 이게 없었다. 근데 React Router v7은 기본 설정(SSR 모드)에서는 빌드 후 index.html 파일이 생성되지 않는다고 한다. 왜냐하면..

1. 개요 현재 진행 중인 사이드 프로젝트에 단어 발음 듣기(TTS) 기능을 추가했다. 왜냐하면 언어 학습은 눈으로 보기만 하는 것과 귀로 같이 듣는 것의 효율 차이가 크기 때문에 듣기 기능이 있으면 좋을 거라 생각했기 때문이다. 처음에는 Google Cloude TTS나 AWS Polly같은 유료 API를 고려했지만, 사이드 프로젝트 단계에서 비용이 발생하거나 API 키를 관리하는 게 꽤나 번거롭다는 느낌을 받았다. 그래서 브라우저 내장 기능인 Web Speech API(window.speechSynthesis)를 우선 활용하기로 했다. 2. 구현 코드 재사용성을 높이기 위해 tts.ts라는 별도 유틸리티 파일에 함수를 작성하였다. 단순히 speak()만 호출하는 것이 아니라, 실제 서비스에서 발생할..

1. 개요 로그인 기능을 구현하기 전, 히스토리 기능을 먼저 구현하는 것이 좋을 거 같다는 생각이 들었다. 그래서 간단히 무엇을 추가했는지 작성하려 한다. 기술적으로 대단한 게 추가된 게 아니라, 그냥 기록만 남긴다. 2. 한 것과 추가된 기능2-1. 스티치로 디자인 생성 2-2. 디자인 적용 및 업로드한 단어 저장 2-3. 정렬 + 필터 기능 적용 정렬 기준생성일자 오름차순/내림차순JLPT 레벨 오름차순/내림차순 필터 옵션생성년도JLPT 레벨 2-4. 단어 수정 수정 버튼 클릭 시 뜻을 보여주는 부분은 Input이 보이게 수정 + JLPT 레벨은 버튼이 보이게 수정 2-5. 삭제