IT의 IT 블로그

안녕하세요. 지난 글에서는NBA Game Picker 프로젝트에서홈 화면경기 목록 페이지경기 상세 페이지까지 어떻게 확장했는지 정리했습니다. 이번 글에서는 그다음 단계로 진행한 Matchup Score 설명 페이지(/about-score) 구성 과정을 정리해보려고 합니다. 이 프로젝트는 단순히 NBA 경기 일정을 보여주는 것이 아니라,오늘 가장 볼 만한 경기를 추천하는 것이 핵심입니다. 그래서 추천 점수를 보여주는 것만으로는 부족했고,사용자가 그 점수를 이해할 수 있는 페이지가 필요하다고 생각했습니다.1. /about-score 페이지가 필요했던 이유 홈 화면과 상세 페이지에는Watchability Score가 이미 표시되고 있었습니다.예를 들어 사용자는 홈에서 추천 경기를 보면서이런 궁금증을 가질 수..

안녕하세요. 지난 글에서는NBA Game Picker 프로젝트를 왜 만들었고,어떤 방향으로 설계했는지 정리했고, 이후에는홈 화면을 어떻게 구조화하고 컴포넌트로 분리했는지 정리했습니다. 이번 글에서는 그다음 단계로 진행한경기 목록 페이지(/games)와 경기 상세 페이지(/games/[gameId]) 구현 과정을 정리해보려고 합니다. 홈 화면이 오늘 볼 만한 경기를 빠르게 보여주는 역할이었다면,이번에 만든 두 페이지는 추천 → 비교 → 상세 확인으로 이어지는 흐름을 만드는 작업이었습니다.1. 홈 화면 다음에 필요했던 것홈 화면만 있을 때도오늘 경기, 추천 경기, 팀 순위, 득점 리더처럼핵심 정보는 어느 정도 한 화면에서 볼 수 있었습니다. 하지만 실제로 서비스를 사용한다고 생각해보면아쉬운 점이 분명히 있었..

안녕하세요. 지난 글에서는NBA Game Picker 프로젝트를 왜 만들었고,어떤 방향으로 설계했는지에 대해 정리했습니다. 이번 글에서는홈 화면을 어떻게 구조화하고, 컴포넌트로 분리했는지그 과정을 정리해보려고 합니다.1. 왜 컴포넌트 분리를 하게 되었는가홈 화면을 처음 구현할 때는모든 코드를 page.tsx 하나에 작성했습니다.초기에는 문제가 없어 보였지만기능이 추가되면서 점점 구조가 복잡해졌습니다.예를 들면 다음과 같은 요소들이 한 파일 안에 모두 들어가 있었습니다.오늘 경기 리스트오늘의 추천 경기팀 순위득점 리더매치업 데이터카드 UI 스타일점수 관련 로직이 상태에서는어느 하나를 수정하려고 해도 전체 파일을 같이 봐야 하는 상황이 발생했습니다.2. 문제의 핵심문제는 단순히 코드가 길어진 것이 아니라역할..

안녕하세요.이번 글에서는 제가 진행하고 있는 사이드 프로젝트인NBA Game Picker를 소개해보려고 합니다. 이 프로젝트는NBA 경기 데이터를 기반으로오늘 가장 볼 만한 경기를 추천해주는 웹 서비스입니다. 단순히 경기 일정을 나열하는 것이 아니라,사용자가 빠르게 경기를 선택할 수 있도록추천 중심의 UX로 설계한 것이 핵심입니다. 아래 링크에서 실제 서비스와 코드를 함께 확인하실 수 있습니다.🔗 서비스 바로가기https://nba-game-picker.vercel.app🔗 GitHubhttps://github.com/Ryuintae/nba-game-picker1. 왜 이 프로젝트를 만들었는가NBA를 자주 보면서 항상 느꼈던 불편함이 있었습니다.오늘 경기 많네… 근데 뭐 보지?접전 경기 뭐지?득점 ..

안녕하세요. 이번에는 월드 IT Show 2026(World IT Show 2026)에 직접 다녀온 후기를 정리해보려고 합니다. 이번 박람회는 단순히 “최신 기술이 많았다”는 정도를 넘어서,현재 IT 업계가 어떤 방향으로 움직이고 있는지를 비교적 구체적으로 보여주는 자리라는 느낌이 강했습니다. 특히 이번 행사에서 가장 인상 깊었던 키워드는 크게 두 가지였습니다.첫째는 AI 에이전트(Agentic AI),둘째는 VR/XR, 3D 공간 기술과 같은 디지털 공간 계열 기술이었습니다. 예전에는 AI가 “무엇을 할 수 있다”는 기술 소개 중심으로 보였다면,이번 행사에서는 AI가 실제로 어떤 업무를 대신하고, 어떤 데이터를 연결하고, 어떤 사용자 경험으로 서비스되는지가 훨씬 구체적으로 보였습니다. 이번 글에서는 월..

안녕하세요.이전 글에서는 Docker의 기본 개념과 전체 구조를 정리해봤습니다. 이번 글에서는실제 프로젝트인 self-interior-guide에 Docker를 적용해본 과정을 정리해보겠습니다. 앞선 글에서 Docker의 개념을 이해했다면,이번에는 그 개념들이 실제로 어떻게 동작하는지 확인하는 단계라고 보면 됩니다. 다만 이번 적용은실제 배포를 위한 것이 아니라 테스트 및 학습 목적으로 진행했습니다. 현재 프로젝트는 **Vercel**을 통해 배포하고 있고,Docker는 실행 환경을 직접 구성해보기 위한 용도로 사용했습니다.1. Docker 적용을 시작하기 전에Docker를 적용하기 전에먼저 Docker가 정상적으로 설치되어 있는지 확인했습니다. docker -v Docker가 정상적으로 설치되어 있다면..

안녕하세요. 이번 글에서는 Docker의 기본 개념을 정리해보겠습니다.Docker를 공부하다 보면이미지(Image), 컨테이너(Container), Dockerfile, Registry, Compose 같은 용어가 계속 등장합니다. 이 개념들은 각각 따로 보이지만,실제로는 서로 연결되어 있기 때문에 흐름으로 이해하는 것이 중요합니다. 이번 글에서는 Docker를 왜 사용하는지부터 시작해서,Docker Desktop과 CLI, 이미지와 컨테이너의 관계, Dockerfile의 역할,그리고 Compose와 Registry까지 전체 구조를 한 번에 정리해보겠습니다. 단순히 명령어만 보는 것이 아니라,Docker가 어떤 문제를 해결하고 어떤 방식으로 동작하는지를 중심으로 살펴보겠습니다.0. Docker Deskt..

안녕하세요. 이번 글에서는 제가 진행한 사이드 프로젝트인 self-interior-guide를 소개해보려고 합니다. 이 프로젝트는셀프 인테리어를 처음 시작하는 사용자를 위한“가이드 + 견적” 웹 서비스입니다.단순히 인테리어 정보를 나열하는 것이 아니라,실제로 사용자가 참고하면서 진행할 수 있도록체크리스트형 UX로 설계한 것이 핵심입니다.아래 링크에서 실제 서비스와 코드를 함께 확인하실 수 있습니다. 🔗 서비스 바로가기https://self-interior-guide.vercel.app🔗 GitHubhttps://github.com/Ryuintae/self-interior-guide1. 왜 이 프로젝트를 만들었는가셀프 인테리어를 처음 시작하면 대부분 이런 문제를 겪습니다.무엇부터 해야 할지 모르겠음순서..