전체 글162 [개인 프로젝트] 병원별 진료과목 데이터를 연동하며 겪었던 문제 상세 페이지를 만들다 보니치과 정보 페이지를 만들면서 병원별 진료과목도 실제 데이터로 보여주고 싶었다.현재 프로젝트에서는 병원정보서비스 API를 사용해 전국 치과 정보를 저장하고 있는데, 병원명, 주소, 전화번호, 좌표 같은 기본 정보만 저장하고 있었다.상세 페이지에서 진료과목까지 보여주려다 보니 병원정보서비스만으로는 부족했고, 의료기관별상세정보서비스 API를 추가로 연동하게 되었다.진료과목 정보를 가져오려면 병원정보서비스에서 내려주는 ykiho 값이 필요했다. 그래서 치과 정보를 저장할 때 해당 값도 함께 저장하도록 수정했다.병원정보서비스 ↓치과 목록 저장 ↓ykiho 저장 ↓의료기관별상세정보서비스 호출 ↓진료과목 저장병원별 진료과목을 저장하기 위해 별.. 2026. 6. 17. Next.js에서 카카오 지도를 연동해 현재 위치와 마커 표시하기 프로젝트를 진행하면서 사용자 주변 치과를 지도에서 확인할 수 있는 기능이 필요해 카카오 지도를 연동하게 되었다.이번 글에서는 카카오 지도를 연동하고 현재 위치를 기반으로 치과 정보를 표시한 과정을 정리해보려고 한다.카카오 지도 연동카카오 지도를 사용하기 위해 먼저 JavaScript 키를 발급받고 SDK를 연동했다.Next.js에서는 window 객체를 바로 사용할 수 없어 SDK를 동적으로 불러오는 방식으로 적용했다.const script = document.createElement("script");script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${kakaoMapKey}&autoload=false`;document.head.appendChild(scri.. 2026. 6. 15. JPA를 이용해 지역 데이터를 저장한 과정 프로젝트를 진행하면서 지역 검색 기능이 필요했다.지역 선택 기능을 구현하기 위해 전국 시군구 데이터가 필요했고, 행정안전부 표준지역코드 API를 활용해 데이터를 저장했다.최종적으로는 아래와 같은 형태의 데이터를 저장하는 것이 목표였다.서울 강남구서울 송파구부산 해운대구인천 연수구경기 성남시...시군구 데이터만 추출행정안전부 표준지역코드 API를 호출하면 다양한 행정구역 정보가 함께 전달된다.응답 데이터에는 아래와 같은 정보가 포함되어 있었다.서울특별시서울특별시 강남구서울특별시 강남구 역삼동프로젝트에서는 시군구 목록만 사용하기 때문에 시도, 읍면동 등의 데이터는 제외하고 시군구 데이터만 저장하도록 필터링했다.JPA로 데이터 저장이번 프로젝트에서는 JPA를 사용해 지역 데이터를 저장했다.API 응답 데이터를.. 2026. 6. 14. MyBatis를 사용하다 JPA를 사용하며 느낀 차이 이번 개인 프로젝트를 진행하면서 기존에 사용하던 MyBatis 대신 JPA를 사용하게 됐다.JPA는 SQL을 직접 작성하기보다 Repository를 통해 데이터를 조회하고 저장하는 방식이다.또한 반복적으로 작성하던 CRUD 작업을 줄여준다는 특징이 있다.이전에 MyBatis를 사용해 본 경험은 있었지만 JPA는 직접 사용해 본 적이 없었다.개인 프로젝트를 진행하면서 새로운 방식도 경험해보고 싶었고, 반복적인 CRUD 기능이 많은 구조라 JPA가 더 적합하다고 판단했다.MyBatis를 사용했을 때MyBatis는 SQL을 직접 작성하는 방식이다.원하는 쿼리를 직접 작성할 수 있기 때문에 어떤 SQL이 실행되는지 명확하게 알 수 있다는 장점이 있다.반면 단순 조회나 CRUD 기능도 직접 SQL을 작성해야 한다.. 2026. 6. 14. [Next.js] Pages Router 와 App Router 회사 프로젝트와 현재 진행 중인 개인 프로젝트 모두 Next.js를 사용했다.지금까지는 Pages Router를 사용해 왔는데, 이번에는 App Router와 어떤 차이가 있는지 간단히 정리해보려고 한다.Pages Router내가 사용하고 있는 방식은 Pages Router이다.Pages Router는 pages 폴더를 기준으로 URL이 만들어진다.예를 들어 아래와 같은 구조라면pages ├ index.tsx ├ dental │ └ index.tsx └ community └ index.tsxURL은 다음과 같다.//dental/community파일 구조와 URL 구조가 연결되어 있어서 페이지를 찾거나 관리하기 편했다.공통 설정은 주로 _app.tsx에서 관리한다.App RouterNext.js.. 2026. 6. 14. Next.js 파일 기반 라우팅과 React Router의 차이 React를 처음 사용할 때는 React Router를 사용했었고, 이후 실무와 개인 프로젝트에서는 Next.js를 주로 사용하게 됐다.예전 방식과 지금 사용하고 있는 방식의 차이를 기록해두려고 한다. React Router를 사용할 때는 페이지를 만드는 것과 별개로 라우터 설정도 함께 해줘야 했다.예를 들어 치과 정보 페이지를 만든다면 컴포넌트를 만드는 것만으로 끝나는 것이 아니라, 라우터에도 직접 경로를 등록해야 했다.} />페이지가 많아질수록 라우터 설정도 계속 늘어나고, 새로운 페이지를 만들 때마다 파일 생성 → 라우터 등록 → 메뉴 연결 과정을 반복해야 했다.하지만 Next.js에서는 파일 자체가 URL이 된다. 예를 들어pages ├ index.tsx └ dental └ index.ts.. 2026. 6. 14. Tailwind 반응형을 사용하며 느낀 차이 그동안 웹 반응형을 구현할 때는 MUI(Material UI)의 useTheme, useMediaQuery를 사용했었다.평소 Tailwind를 사용해보고 싶다는 생각은 있었지만 기회가 없었다. 그러다 이전 업무와 최근 진행 중인 개인 프로젝트에서 Tailwind를 사용하게 되었고, 반응형을 구현하면서 기존에 사용하던 방식과는 접근 방식에 차이가 있다는 점을 느껴 기록해보려고 한다.이전에 useTheme, useMediaQuery를 활용해 반응형을 구현했던 내용은 아래 글에 정리해 두었다.https://siyoonn.tistory.com/164반응형을 구현하며 가장 크게 느낀 차이기존에는 useMediaQuery를 사용해 화면 크기를 확인한 뒤, 조건문으로 스타일이나 컴포넌트를 분기하는 방식을 사용했다.f.. 2026. 5. 31. 바이브 코딩 이란 ? 이제는 개발의 본질이 조금씩 달라지고 있다. AI가 자리 잡기 전까지 코딩은 인간의 논리와 손끝에서 완성되는 작업이었다. 개발자는 문법을 설계하고 구조를 고민하며, 한 줄 한 줄 직접 코드를 작성했다. 그 과정에는 시행착오도, 고민의 시간도 함께 담겨 있었다. 그런데 이제 그 풍경이 서서히 변하고 있다. 인공지능이 코드를 생성하고, 우리는 그것을 대화로 다듬고 조율한다. 이러한 흐름을 흔히 바이브 코딩(Vibe Coding)이라 부른다. 바이브 코딩은 AI가 인간의 자연어를 이해해 코드를 만들어내는 방식이다.이제는 프로그래머뿐 아니라 일반인도 “예약 기능을 만들어줘”, “결제 페이지를 연결해줘”와 같은 요청만으로 실제로 동작하는 결과물을 얻을 수 있다. 복잡한 문법이나 구조를 모두 알지 못해도 괜찮다. .. 2026. 3. 4. [React] MUI의 useTheme와 useMediaQuery로 구현하는 반응형 웹 (feat. 그 외 방법) 업무 할 때 Material-UI(MUI)의 useTheme와 useMediaQuery를 사용하여 반응형 웹을 구현했었는데 그 부분을 조금 정리해보려 한다.useTheme 이란? MUI(Material-UI)에서 제공하는 훅으로, 현재 테마에 접근할 수 있게 해 준다.테마는 색상, 간격 등 UI 요소의 스타일을 정의하며, MUI는 기본적으로 테마를 사용하여 UI 구성 요소의 스타일을 일관되게 관리할 수 있도록 돕는다.이 훅을 사용하면 현재 테마에 정의된 색상, 타이포그래피, 간격 등의 스타일 속성에 쉽게 접근할 수 있어, 사용자 인터페이스를 더 쉽게 커스터마이즈 할 수 있다.import { useTheme } from '@mui/material/styles';import React from 'react.. 2024. 10. 12. 이전 1 2 3 4 ··· 18 다음 728x90