분류 전체보기54 시간 선택 UI 디자인 변경과정(UI UX) [문제점 제기]모바일 화면에서 time slot 방식은 작은 화면에서 불편함을 발생변경 디자인에서 날짜 부분에서는 캘린더가 없어져 날짜를 선택하기 힘들다. → 선택할려면 날짜 이동버튼을 계속 클릭해서 이동후 선택해야한다.궁극적으로 사용자가 시간을 한눈에 파악하기 힘들고 선택하기 힘들다는 문제점을 제기했을때 time slot select하는 방식은 날짜와 시간 정보가 시간 박스에 담아져있는것이 아니라서 보기가 불편할 것 같다는 생각이 들었다.최상단 행 왼쪽 열을 확인하면서 선택해야함 ⇒ 그래서 시각적인 불편함을 없애고 시간을 한눈에 알아볼 수 있고 직관적으로 선택할 수 있는 시간 선택 UI를 조사해봄. 타 사이트 시간 선택 화면을 알아본 결과 시간 박스를 드래그하는 time slot select 형식보다는.. 2024. 7. 5. 시간 선택 라이브러리 react-schedule-selector 분석 사용할 라이브러리 react-schedule-selectorGitHub - bibekg/react-schedule-selector: A mobile-friendly when2meet-style grid-based schedule selector GitHub - bibekg/react-schedule-selector: A mobile-friendly when2meet-style grid-based schedule selectorA mobile-friendly when2meet-style grid-based schedule selector - bibekg/react-schedule-selectorgithub.com 기본 사용법기본 사용법은 selection과 onChange props를 제공하는 것입니다. .. 2024. 6. 19. 시간 선택 UI 변경 - 라이브러리 조사(react-schedule-selector) [이슈 발생]사용자 피드백으로 약속을 설정하기 위해 달력에서 날짜를 클릭하여 시간을 선택하는 과정이 필요한데 이때 시간 선택 UI가 불편하다는 피드백을 받음.그래서 시간 선택 UI를 변경하기 위한 라이브러리 조사를 시작함 [고려 요소]무료로 사용할 수 있는 라이브러리 : 무료 라이브러리를 우선으로 선택했습니다.이해하기 쉬운 코드 및 변경 용이 : 코드가 직관적이며, 사용자가 쉽게 수정하고 커스터마이징할 수 있는지 확인했습니다.약속 요청 UI로의 적합성 : 시간 선택 UI로 사용하기에 적합한지 평가했습니다. 1. react-schedule-selectorGitHub - bibekg/react-schedule-selector: A mobile-friendly when2meet-style grid-based .. 2024. 6. 17. 배포시 console.log 지우기(vite 플러그인,JS) [ 이슈 설명 ]로컬 환경에서는 디버깅하기 위해서 콘솔 로그가 필요하고 사용자가 보는 입장에서는 console이 뜨지 않아야함.=> 실제 배포할 때엔 민감한 정보가 포함되어있을 수 있으므로보안을 위해서 콘솔창을 비워두는 것이 좋음, 시각적으로 좋을 것 같음. [ 해결 방법 ] 1️⃣ 설치할 패키지 vite-plugin-remove-console yarn add vite-plugin-remove-console -D 2️⃣ Vite 설정 파일 수정 그 다음, vite.config.js 파일을 수정하여 vite-plugin-remove-console을 추가// 위의 설정은 배포 환경에만 적용하고, 개발 환경에서는 그대로 console.log를 사용// 조건부로 플러그인을 적용.import { defin.. 2024. 6. 16. 백준 #28702 FizzBuzz https://www.acmicpc.net/problem/28702 문제FizzBuzz 문제는 𝑖=1,2,⋯i = 1, 2, 에 대해 다음 규칙에 따라 문자열을 한 줄에 하나씩 출력하는 문제입니다. 𝑖가 3의 배수이면서 5의 배수이면 “FizzBuzz”를 출력합니다. 𝑖가 3의 배수이지만 5의 배수가 아니면 “Fizz”를 출력합니다. 𝑖가 3의 배수가 아니지만 5의 배수이면 “Buzz”를 출력합니다. 𝑖가 3의 배수도 아니고 5의 배수도 아닌 경우 𝑖를 그대로 출력합니다.FizzBuzz 문제에서 연속으로 출력된 세 개의 문자열이 주어집니다. 이때, 이 세 문자열 다음에 올 문자열은 무엇일까요?입력FizzBuzz 문제에서 연속으로 출력된 세 개의 문자열이 한 줄에 하나씩 주어집니다. 각 문자.. 2024. 6. 13. 백준 #1018 체스판 다시 칠하기 node.js 풀이(브루트포스) https://www.acmicpc.net/problem/1018 문제지민이는 자신의 저택에서 MN개의 단위 정사각형으로 나누어져 있는 M×N 크기의 보드를 찾았다. 어떤 정사각형은 검은색으로 칠해져 있고, 나머지는 흰색으로 칠해져 있다. 지민이는 이 보드를 잘라서 8×8 크기의 체스판으로 만들려고 한다.체스판은 검은색과 흰색이 번갈아서 칠해져 있어야 한다. 구체적으로, 각 칸이 검은색과 흰색 중 하나로 색칠되어 있고, 변을 공유하는 두 개의 사각형은 다른 색으로 칠해져 있어야 한다. 따라서 이 정의를 따르면 체스판을 색칠하는 경우는 두 가지뿐이다. 하나는 맨 왼쪽 위 칸이 흰색인 경우, 하나는 검은색인 경우이다.보드가 체스판처럼 칠해져 있다는 보장이 없어서, 지민이는 8×8 크기의 체스판으로 잘라낸 .. 2024. 6. 13. ChatGPT로 과제하기, 쉽게 레포트 작성하기(openAI, nextjs, reportMaster) https://my-report-master.vercel.app/📝 Report Master Report Master는 chatGPT를 좀 더 편리하게 사용하기 위해 만들어진 툴입니다. 원하는 결과값을 얻기위해서 자세한 프롬포트를 만들어 chatGPT에게 물어보세요!my-report-master.vercel.app [프로젝트 목적] chatGPT가 유명해지고나서 대학교 과제, 프로젝트를 하면서 정말 많이 사용했고 많은 덕?을 봤다.그런데 사용할 수록 깨달았던 것은 내가 원하는 대답을 얻기 위해서는 정말 자세하게 구체적으로 chatGPT에게 물어봐야한다는 것이다. 그래서 인터넷에 계속 찾아본 결과,,, 정확한 대답을 얻기위해 사용하는 프롬포트 양식 같은 것이 있었다.여러가지 찾아봤지만 목적, 페르소.. 2024. 6. 4. PHP DB AJAX통신 한글 깨짐 인코딩 오류(iconv) [ 문제발생 ] 원하는 검색어로 조회를 했을때 빈값으로 가져오게 되는 오류가 발생했다. 하지만 개발자모드로 들어가서 보니 검색 데이터 값은 잘 전달되는 것을 확인하여 db에 데이터를 조회하는 쿼리과정에서 문제가 발생하지 않을까 예상해보았다. [ 디버깅과정 ] 1.일단 백엔드에서 DB로 날리는 sql문을 작성한 코드를 찾아 sql문을 출력해보았다.2. 그랬더니 검색 데이터 값이 한글이 깨져서 이상한 문자로 출력이 되었다. 그렇다면 왜 한글이 깨졌을까? 에 대한 답을 찾아보았다. 일단 먼저 내가 서버로 데이터를 보내는 요청값, DB에 저장되어 있는 데이터, 서버가 나에게 보내는 응답값의 chatset 즉 형식을 찾아보았다.그랬더나 클라이언트에서 요청을 보낼때는 UTF-8로 DB와 응답값은 EUC-KR 형.. 2024. 5. 29. JAVA Controller, Service, Mapper의 역할 Controller: 사용자 요청을 받아 Service에 전달하고, Service로부터 받은 결과를 반환.Service: 비즈니스 로직을 처리하고, DAO/Mapper를 호출하여 데이터를 가져옴.DAO/Mapper: 데이터베이스와 상호작용하여 CRUD 작업을 수행.DTO: 계층 간 데이터 전달을 위해 사용되는 객체.Database: 데이터를 저장하고 관리.DB 는 DAO에서 받은 호출(요청)에 따른 코드를 실행하고 결과값을 다시 DAO에게 주고 다시역순으로 반환하여 사용자에게 최종적으로 리턴됩니다.DTO란 각 계층이 데이터를 주고받을 수 있도록 설정된 객체를 담는 곳이다.각 계층이랑 view, Controller,Service,DAO,DB를 말합니다. 비즈니스 로직이란?비즈니스 로직은 특정 비즈니스 .. 2024. 5. 28. 이전 1 2 3 4 ··· 6 다음
