cha123hein 님의 블로그

이전에 간호사로 근무할 당시, 병원에서 사용하던 EMR(전자 의무 기록) 시스템은 사용자 친화적이지 않았습니다. 복잡하고 비직관적인 인터페이스 때문에 업무의 효율성이 떨어졌고, 이로 인해 자주 불편함을 느꼈습니다. 오랫동안 근무한 선생님들조차 시스템의 상세 기능을 잘 알지 못해 매번 저에게 질문하거나 도움을 요청해야 했습니다. 병원의 바쁜 일정 속에서 이러한 반복적인 과정은 시간과 에너지를 많이 소모하는 일이었습니다. 이러한 경험은 제게 큰 깨달음을 주었습니다. "사용자 입장에서 정말 편리한 EMR 시스템을 만들면 어떨까?"라는 생각이 들었고, 실제로 간호사로 근무하면서 직접 느낀 불편함을 바탕으로 더 나은 시스템을 구상해보고 싶다는 열망이 생겼습니다. 이것이 제가 웹사이트 제작, 특히 사용자 중심의 시..

1. 문제점 북마크 기능을 넣는데, 처음에 text내용만 불러오길래. text내용으로 supabase에서 자료를 불러오도록 하였다.그러고 이제 유저정보를 불러냈는데 유저정보를 불러내면 supabase에서 불러온 내용들이 undefiend로 불러와졌다. 2. 문제사항처음에 text내용만 불러왔던점에서 대수롭지 않게 여겨 그대로 진행햐였는데, 알고보니 컴포넌트 분리를 하면서 props를 text만 내리고있었고, title과 contentid는 안내리고 있어서 null로 취급이 되어 안나타났었다. 3. 문제 해결

1. 문제점 컴포넌트 분리 후 api를 계속 중복적으로 불러와서 일일 트레픽 1000을 금방 넘겨버림. 2. 문제사항컴포넌트 분리를 하면서 서버 컴포넌트로 동작하도록 작성되었다.Next.js에서는 클라이언트 컴포넌트('use client'를 선언한 컴포넌트)에서 비동기적인 함수 실행을 곧바로 하지 못하는 문제가 발생할 수 있다. 특히 페이지가 새로 렌더링될 때마다 fetchPlaces 함수가 호출되고, 그로 인해 API 요청이 중복으로 발생하는 문제가 생긴 것이다.비동기 함수와 'use client'의 충돌: RecommendedPlaces 컴포넌트가 'use client'로 선언된 상태에서 직접적으로 비동기 로직을 처리하고 있었다. 이는 클라이언트 컴포넌트의 경우 허용되지 않거나 부적절한 방식이다.서버..

1. 문제점SyntaxError: Unexpected token ' Next.js 프로젝트에서 공공 API로부터 JSON 데이터를 요청하는 중에 발생했는데, 찾아보니 API 요청이 성공하지 않았을 때 HTML 형식의 오류 페이지(예: "404 Not Found" 또는 "500 Internal Server Error")가 반환되면서 발생한다.fetch 요청이 실패하여 JSON 대신 HTML 형식의 응답을 받는 경우, response.json() 메서드는 HTML 응답을 JSON으로 파싱하려고 시도하면서 SyntaxError를 발생시킨다한다. 2. 해결방안 응답 상태 확인: fetch 요청 후 response.ok를 사용하여 요청이 성공했는지 확인하고, 성공한 경우에만 response.json()을 호출한다..

1. 기본 틀 만들기 대락적으로 구분을 위해 임시로 css를 넣어 제작하였다. 우선 기본적으로 사진을 저 칸에 다 채워지도록 할 예정이다.import React from 'react';import Image from 'next/image';import { FaBookmark } from 'react-icons/fa';const RecommendedPlaces = () => { return ( 추천 여행지 추천 국내 여행지 사랑하는 사람과 함께 로맨틱한 국내 여행지 {[...Array(3)].map((_, index) => (//여기서 ..

와이어 프레임 작성

주제는 전국 스템프 투어로 결정이 되었다.

제일 처음 나온 아이디어 :  피드백 :- 커뮤니티는 부가적이여야 되고, 사람들이 많이 이용하지 않아도 기능을 쓸 수 있는 사이트가 좋다.- 목데이터를 많이 넣는데 시간이 걸리면 개발하는 시간이 줄어드니 지향하는게 좋다.- 2개의 고객군(판매자/구입자)이 있어야 하는 사이트면 사람이 많이 필요해서 비추천한다. 수정되서 나온 아이디어 :  피드백 - 제한된 시간인 만큼 최소한의 기능 구현으로 안전하게 가져가면서 추가로 작업을 진행하는게 좋다.- 개발에서 중요한 피드백을 개선하는 것도 중요하다.- 기업 아티클을 보는 것도 좋다. => 그 후에 나온 아이디어 :  커피원두 소개 / 여행 마그넷 도장깨기(인터넷으로 여행 도장찍기) / 해외캠핑 /산올라갔을때 도장찍기 / 날씨,기분따라 도서추천 / 뉴스피드 카테고..

1.  문제점- 마이페이지에서 회원정보변경에 제목은 변경이 되지만 프로필 이미지는 변경도 안되고 supabase에 업로드도 안되는 모습을 보였다.2. 해결방안- createClient 함수를 사용하여 Supabase 클라이언트를 중앙에서 생성하고 관리하도록 수정했습니다. 이를 통해 클라이언트 인스턴스가 일관되게 유지되도록 했으며, 이미지 업로드 후 새롭게 생성된 이미지 URL이 제대로 반영되도록 로직을 개선하였다. 3. 수정된 코드// 클라이언트 생성 부분const supabase = createClient();// 프로필 업데이트 함수const handleProfileUpdate = async () => { if (!user || !user.id) { console.error("Use..

1.  문제점- 디테일 페이지에서 새로고침을 했을 때 이미 좋아요를 한 경우임에도 숫자가 반영되지 않았고, 다시 좋아요를 눌렀을 때 -1로 표기되는 상황이 생겨버림.2. 해결방안좋아요를 추가하거나 취소한 직후 서버와의 동기화가 제대로 이루어지지 않아서 새로고침을 했을 때 좋아요 수가 정확하지 않을 수 있음을 알았다.-> 좋아요 추가 또는 취소 이후 서버에서 최신 상태를 다시 조회하여 클라이언트의 상태를 항상 서버와 일치하도록 한다.-> 좋아요 개수와 사용자가 좋아요를 눌렀는지 여부를 동기화하기 위해 fetchLikes() 함수를 호출하였다.const handleLike = async () => { const { data: { user } } = await supabase.auth...