# Toyproject

206개의 포스트
post-thumbnail

[nodeJS][JS] 포스와 연계된 실시간 빈자리 정보 서비스

무덥던 어느날 에어컨 바람 밑에서 시원한 아이스 아메리카노 한잔 마시고 싶어 카페를 전전하다 빈자리가 없어 허탕만 3번째 친 뒤, 간단한 실시간 빈자리 정보 제공 서비스가 있다면 좋을텐데 하는 생각이 났다. 비슷한 테이블링 서비스가 있긴 하지만, 사용과 설치가 보다 간단해 핫플레이스가 아닌 일반 가게 점주도 부담없이 사용할 수 있는. 포스와 연계된 직관적인 사용법을 가진 시스템이 있다면 좋지 않을까 싶어 만들어 보았다. 만든 시간 1시간으로 간단한 디자인은 흐린눈으로 봐주시길... 왼쪽은 핸드폰 어플 화면이고 오른쪽은 매장 포스 화면이다. 어플 속 지도 위에는 내 위치 주변 카페의 빈자리 수가 나타나고, 포스 속 빈자리는 회색으로 보여지고 있다. ![](https://velog.velcdn.

4일 전
·
0개의 댓글
·
post-thumbnail

이미지 게임 - 기능 구현

🎈 어디까지 구현했나~ > 위압감이 느껴지는 엄청난 메인화면..ㅎ 아직은 손 안댔지만 여기는 뭐 UI만 만들면 되니깐 금방 할 거라고 생각한다..! >게임 스타트 후 보이는 화면 이제 저기서 카드를 터치하면 랜덤의 질문지가 주어진다. > 이제 뒤집으면 애니메이션과 함께 내용이 뙇! ![](https://velog.velcdn.com/images/ko4190

2023년 9월 16일
·
0개의 댓글
·
post-thumbnail

이미지 게임 - 진짜 내가 하고 싶어서 만드는

🎈 개발 계기 > 카드 게임중에 이미지 게임이라고 있다. 예를 들어 "지금 유튜브를 시작한다면 100만 유튜버가 될 수 있을 것 같은 사람은??!" 라는 질문이 담긴 카드가 나오면 그 사람을 지목한 후 본인 옆에 있는 사람한테만 질문을 보여준다. 그러면 이 사람들은 다른 사람들이 궁금하게끔 멋진 리액션을 보여주고 만약 질문이 궁금하다면 벌칙 수행 후 질문을 확인하면 된다. > 오프라인 카드게임으로는 이게 있는데 온라인에서는 예상 외로 아무리 찾아봐도 찿을 수 없었다. > 간편한 휴대용 이미지게임을 하고 싶다구!!! > 📢 진짜진짜 내가 하고 싶어서 직접 만든다. 🎈 대략적인 구상 메인 화면 + 게임 스타트 정도 만들기 피그마에서 카드더미 모양 가져와서 화면 구성하고 클릭 시 랜덤으로 질문 목록에서 질문 가져와서 카드 앞면 구성한 후 뒷면을 띄워놓은 상태에서 터치 하면 카드가 뒤집어져서 질문 나오기! 말로써는 간단해 보이는데 과연 실제

2023년 9월 15일
·
0개의 댓글
·
post-thumbnail

중복 상품 등록 error 해결

Cart, WishList에 상품을 등록하는데 중복에 상품을 등록할 때 에러가 있어 해결. 예를 들어 유저1, 유저2가 있고 상품1이 있다고 가정 유저 1이 Cart에 상품1을 등록했으면 유저 2가 상품1을 등록할 수 없는 error가 생김. 기존 코드 기존 코드를 보면 당연히 앞선 문제가 생길 수 밖에 없다. 내 생각 1. product에 대한 조건만 찾을게 아니라 유저에 대한 조건도 찾는다. 2. $and([])를 이용해 앞선 첫번째 조건을 만족한다. 3. 조건이 있냐 없나에 따라 에러를 띄운다. 해결 $and([])를 이용해 앞선 첫번째 조건을 만족한다. 조건이 있냐 없나에 따라 에러를 띄운다. 앞선 코드로 문제를 해결할려고 하였지만 해결하지 못했다. 이유는 등록된 상품이 아닌데도 등록된 상품이라는 에러 메세지를 띄웠다. 분명히 db에는 없는 상품인데 코드는 있다고 판별하

2023년 9월 13일
·
0개의 댓글
·
post-thumbnail

다중 테이블(2개 이상)에서 데이터를 가져와 jsp로 전달 해보기

🐷 (주저리주저리 시작, 문제 해결은 2부터) 1. 문제 발생 스프링 부트가 아닌 스프링으로 다중 테이블에서 값을 가지고 온 뒤에 controller를 이용해서 jsp로 값을 보내야했다. 단일 테이블의 데이터를 가지고 오는 것은 select * from movie where movieid = #{movieid} 이런 식으로 간단했지만 다중 테이블에서 값을 가지고 오는 문제는 차원이 달랐다........ 책에도 스프링에서 이럴땐 어떻게 해야하는 지에 대해서는 나와있지 않았다.... (해결하고나서 스프링 부트 책을 보니 부트에는 있더라 🤯) 조인을 사용해서 값을 가지고 오는 것 자체도 이번에 DB를 처음 설계해보고 sql을 고작 일주일정도 배운 나에게는 시작부터 어떻게 해야하지...하는 문제가 있었지만 다행히 생각보다 빨리(?) [해결](https://velog.io/@rancho0408/INNER-JOIN-사용해서-특정-데이터-가

2023년 9월 7일
·
0개의 댓글
·

다중 테이블의 값을 ArrayList<HashMap<String, Object>> 로 저장하는 이유

요약을 하자면 다중 테이블에서 데이터를 객체지향적으로 구조화하고 스프링 프레임워크를 활용하여 관리하는 것은 코드의 가독성 유지 보수성 확장성을 향상 이라는 장점이 있고 객체지향 프로그래밍과 스프링의 원칙과 장점을 최대한으로 활용하는 방식라고 한다. 1. 객체지향 프로그래밍(OOP): 객체지향 프로그래밍은 현실 세계의 개념을 모델링하고 이를 객체로 표현하는 프로그래밍 패러다임이다. HashMap과 ArrayList를 사용해서 데이터를 객체로 구조화하고 관리해서 데이터를 현실 세계의 개념과 관련시킬 수 있다. 이렇게 하면 코드가 더 이해하기 쉽고 유지관리하기 쉬워진다. (예를 들면 '자동차'라는 객체는 브랜드, 색상, 모델 등 속성을 가질 수 있고, 주행하거나 멈추는 동작을 할 수 있다.) 2. 데이터 구조화: HaspMap은 데이터의 키-값 쌍을 표현해서 데이터를 구조화할 수 있고, ArrayList는 여러 데이터를 목

2023년 9월 7일
·
0개의 댓글
·
post-thumbnail

JOIN 사용해서 특정 데이터 가지고 오기

1. 문제 발생 어제 DB 설계 후에 특정 데이터를 가지고 오는 연습을 하면서 처음으로 책에서 읽고 넘어간 JOIN을 써봤는데 ... details 페이지를 구현하다보니 movie 테이블에 있는 title, content, id뿐만 아니라 서브 테이블에 있는 genre와 actor, director에 대한 데이터텍스트도 가지고 와야했다. movie(메인 테이블) genre, actor, director(서브 테이블) moviegenre, movieactor, movie_dorector(연결 테이블) 연결이 되어있고 동일하게 movieid 가 들어갔기 때문에 where의 조건은 WHERE movieid 가 들어가게 짜야한다. 2. 해

2023년 9월 6일
·
0개의 댓글
·
post-thumbnail

DB 값 가져와서 /get 구현하기

실습내내 DB 설계하느라 페이지 구현은 전혀 하지 못했어서 집에서 추가로 진행했다! 생각보다 되게 쉬웠는데 (기존에 실습에 사용했던 프로젝트를 그대로 값만 변경했기 때문에...) 일단 내가 오늘 추가한 movie table에 있는 값들을 그대로 잘 가지고 오는 것을 확인했으니 내일 실습 시간에는 분해/조립한다는 생각으로 혼자서 다시 진행해보자. + 회원가입 CRUD 구현하기! 구현 순서 : DB -> VO -> service -> mapper -> serviceImpl -> mapper.xml -> controller -> get.jsp 1. get 페이지 실행 화면 ( /get?movie_id=1) ![](https://velog.velcdn.com/images/rancho04

2023년 9월 5일
·
0개의 댓글
·
post-thumbnail

movie-project ERD 설계해보기...

조장이다보니 DB를 혼자 설계하겠다고는 했으나.... oracle 며칠 책으로 배운 게 전부여서..... 😫 도대체 어떻게 설계를 해야하는가 정말 막막했지만 최대한 다른 프로젝트 참고하면서 만들어 본다.. !!! reviews 테이블은 members, movie 의 자식 rivews 테이블은 기본키로 reviewsID를 가지고 있고 복합키로는 reviewsID + MemberID를 가지고 있다. 외래키는 memberID와 moviedID를 가지고 있음. movie 테이블에서 adminID는 영화를 등록할 때 관리자가 맞는 지를 확인하는 보안상의 이유로 참조한 것 member가 리뷰를 작성할 수도 있고 안할 수도 있음. (one-to-many rel

2023년 9월 5일
·
0개의 댓글
·
post-thumbnail

[weather-NextJS] 개발기 #5

수행한 것 기능 최종 완성 모바일 사이즈일 때 사용할 수 있는 모달에 기능을 추가했다. 도시를 검색하고 저장하면, 해당 도시 아이템이 목록에 뜨게 된다. 이때 도시 아이템을 클릭하면 메인 화면의 날씨를 해당 도시의 날씨로 바뀌게 했다. 이를 위해서, 도시 아이템을 클릭했을 때 해당 도시의 오늘 날씨, 주간 날씨, 시간 별 날씨를 가져오기 위해 fetch를 한번 더 수행했다. 리팩토링 기존에 사용했다가, 로직을 수정하면서 사용하지 않게된 코드를 모두 삭제했다. 날씨에 따른 아이콘을 보여주기 위해 case문을 사용했는데, 코드가 길어져서 자주 사용하는 함수는 모두 따로 모듈로 분리했다. 기존에 모달에서 fetch요청 시 따로 만들어둔 utils에서 함수를 사용했다. 이미 동일한 기능을 하는 함수를 /api에서 처리하고 있었기 때문에, utils를 삭제했다. 모든 코드를 component에서 처리했는데, 각 코드의 특징에 따라

2023년 9월 2일
·
0개의 댓글
·
post-thumbnail

반응형(모바일 웹) 짤림 현상

반응형 웹 작업중 모바일 디바이스 크기에서 x축에 scroll이 생기고 화면이 이동하는 현상이 생김. 이에 밑에 코드를 index.html에 추가 아이폰 등 애플 기기에서 아직 문제가 나면 밑에 코드 사용 이래도 해결이 안되어 html,body란에 overflow-x: hidden 사용

2023년 8월 30일
·
0개의 댓글
·
post-thumbnail

[Java_BenchMark]로또 boolean배열 vs set 의 활용

Intro 매번 나는 글을 쓸 때 Intro->Outro형태로 글을 쓴다. 글의 간단한 소개. 글의 끝맺음을 목표로 한다.(중간에 말이 길어지는 걸 고쳐 보자!) Random 라이브러리 자바의 java.util.Random이라는 라이브러리가 있다. 이를 활용하는 대표적인 예제? 활용 과제처럼 빈번하게 나오는 게 로또다. 이 때, 얼마나 잘 포맷을 잘 구현하느냐와 더 높은 효율을 내느냐 등 여러가지 차원의 문제가 나온다. 이에 관해 Math.random()을 베이스로 해서, 별도의 Random을 import하지 않고 사용하는 방법을 활용하는 TOY_PROJECT를 진행했다. TOY_PROJECT 간단 소개 목적성이 있다기 보다, 잘 사용해 오지 않은 라이브러리를 연습하고자 하는 목적이었는데 재밌게 잘 했던 것 같다. 그러면서 오히려 여러 가지 구현을 했고 이 중에 단순하게 6자리의 조합을 만들게 되면 겹치는 경우가 발생하기 때문에 이를 제거해

2023년 8월 27일
·
0개의 댓글
·
post-thumbnail

[Buddies-NextJS] 개발기 #3

이전에 GPT와 채팅 시, 같은 답변을 여러 번 보내거나 엉뚱한 답변을 하는 경우가 발생했었다. 프롬프트 적용 후에 발생한 문제라, 아마도 프롬프트 적용하는 코드에 문제가 있는 것 같아 이를 전면 수정했다. 수행한 것 0. 스플래쉬 화면 추가 > 카카오톡을 예시로 들면, 처음 앱을 진입했을 때 스플래쉬 화면이 뜬다. 그 이후로는 다른 화면으로 넘어가더라도 스플래쉬 화면이 뜨지 않는다. 이와 비슷한 혹은 동일하게 스플래쉬 화면을 적용하려고 했다. 위의 기능을 구현하기 위해 어떤 것을 사용해야 할지 생각해봤다. 쿠키 : 브라우저를 닫더라도, 쿠키는 사라지지 않는다. ➡️ 쿠키의 생명주기는 만료일 동안이다. 세션 : 브라우저를 닫으면, 세션은 사라진다. ➡️ 세션의 생명주기는 브라우저가 켜져있는 동안이다. 쿠키에 만료일을 설정해서 사용한다면, 브라우저를 닫을 때 제거되도록 해야한다. 이렇게 번거롭게 하지 말고, 세션이 위와 동일한 기능을 하기 때문에

2023년 8월 26일
·
0개의 댓글
·
post-thumbnail

1. calculator

계산기 이 프로젝트는 HTML, CSS 및 JavaScript를 사용하여 구현된 간단한 계산기입니다. 사용자가 숫자 및 연산자 버튼을 클릭하면 결과가 표시되며 다양한 계산이 수행됩니다. 기능 숫자 버튼을 클릭하면 해당 숫자가 화면에 표시됩니다. 소수점 버튼을 클릭하여 소수점을 입력할 수 있습니다. +/- 버튼을 클릭하여 숫자의 부호를 변경할 수 있습니다. AC 버튼을 클릭하여 모든 입력을 지울 수 있습니다. 연산자 버튼(+, -, \*, /)을 클릭하여 계산 작업을 설정할 수 있습니다. = 버튼을 클릭하여 입력된 식을 평가하고 결과를 표시합니다. 코드 설명 1. handleButtonClick() 2. handleNumberButtonClick() 3. handleSignButtonClick() 4.handleDeleteButtonClick() 5.`handleEqua

2023년 8월 25일
·
0개의 댓글
·
post-thumbnail

[Buddies-NextJS] 개발기 #2

8.13(일) 수행한 것 GPT-API 연결 & 채팅 Chat 페이지 생성 & 추가 캐릭터 변경 로직 추가(50%) 시도했으나 해결하지 못한 것 캐릭터 변경 로직 추가하기 GPT와 채팅 시, 같은 답변을 여러 번 보내거나 엉뚱한 답변을 하는 경우가 발생 프롬프트 적용 후에 발생한 문제라, 아마도 프롬프트 적용하는 코드에 문제가 있는 것 같다. 이전 React 버전에서도 프롬프트 적용 후에 문제가 발생했던 터라 이는 나중에 수정하려고 한다. 고민한 것 캐릭터 변경 로직을 구현했는데, 초기 로직은 다음과 같았다. 사용자가 현재 캐릭터 아바타를 선택한다. 아바타 목록 모달(첫 번째 모달)을 보여준다. 사용자가 변경하고자 하는 아바타를 선택한다. 선택한 아바타에 맞는 url로 이동한다. 선택한 아바타에 맞는 채팅방 테마가 적용된다. 초기 로직으로 구현했을 때는, ur

2023년 8월 13일
·
0개의 댓글
·
post-thumbnail

[Buddies-NextJS] 개발기 #1

8.5, 8.10, 8.12 개발 기록 수행한 것 스플래쉬 페이지 구현 로그인 페이지 구현 로그인 기능(카카오 로그인, 구글 로그인, 비회원 로그인) ➡️ Firebase 사용 캐릭터 Carousel ➡️ react-responsive-carousel 사용 비회원 로그인 시 팝업되는 모달 ➡️ Headless UI 사용 메인 페이지 구현 캐릭터 소개 Carousel ➡️ react-responsive-carousel 사용 시도했으나 해결하지 못한 것 로그인 여부에 따른 페이지 분리 로그인 여부에 따른 스플래쉬 페이지 표시 구글 로그인 시 발생하는 오류(로그인에는 문제 없음) 카카오 로그인 시, Route Handler 적용 Context를 사용하여 로그인 여부를 저장하려고 시도했지만 실패했다. ➡️ 로그인을 해도 null이 저장됨. 고민한 것 Carousel, Mod

2023년 8월 12일
·
0개의 댓글
·
post-thumbnail

[Buddies-NextJS] 개발기 #0

Buddies는 GPT API를 사용한 페르소나 챗봇 서비스이다. 초기에는 React와 Chakra-ui로 구현했다. Chakra-ui를 사용한 이유는, 제공하는 컴포넌트가 상당히 많다. 일단 사용해보면 안다. 너무 편리해서, 어렵게 직접 만들지 않아도 된다. Modal, Avatar, Flex, Menu ... 이 모든게 무료. 반응형도 쉽게 구현 가능. 초기 프로토타입에 필요한 기능들은 모두 구현을 완료했고, 빠진 기능은 없는지 전체적인 사용자 경험이 괜찮은지 테스트하는데 딜레이가 너무 심했고, 초기 로딩 속도도 너무 느렸다. 확인해보니 bundle size가 너무 컸고,다른 bundle 뿐만 아니라 Chakra-ui가 생각보다 사이즈가 컸고 이를 수정하려면 Chakra-ui를 사용하지 않고 처음부터 모두 뜯어내 고쳐야했다. (노트북 ram이 적은 것도 영향이 큰가?) React 특성상 SEO 최적화가 어렵다고 많이 접해서, 나중에는 NextJS

2023년 8월 12일
·
0개의 댓글
·
post-thumbnail

[NextJS/TroubleShooting] - localStorage 데이터 저장

weather-NextJS 마이그레이션 중 마주친 에러 해결 결과물 도시 목록 렌더링 localStorage 저장 왜 localStorage를 사용했을까? > ✅ localStorage를 사용한 이유는, 별도의 데이터베이스를 사용하고 싶지 않았고 프로젝트의 규모도 크지 않아서 localStorage로도 충분히 구현이 가능하다고 판단했다. 일단, 내가 생각한 로직은 아래와 같다. ![](https://velog.velcdn.com/images/49crehbgr/post/0284

2023년 8월 10일
·
0개의 댓글
·
post-thumbnail

[weather-NextJS] 개발기 #4

8.9 (수) > 가족 호캉스를 갔다 오느라, 업데이트가 느렸다. 수행한 것 각국의 위도 경도 json 파일을 토대로, 나라 검색 기능 추가 resizable-layout 적용 브라우저 너비에 따른 모달의 렌더링 위치 수정 시도했으나 해결하지 못한 것 나라를 검색한 뒤, 해당 나라를 선택했을 때 localstorage에 저장하기 고민한 것 선택한 나라를 localstorage에 저장하려고 했다. 첫 번째 시도에서는 저장이 잘 됐지만, 새로고침 시 빈 배열이 localstorage에 저장이 됐다. 그래서 이를 해결하려고 코드를 수정했는데, 이번에는 새로고침 시 localstorage에 들어있던 값들이 초기화가 됐다. 관련 코드 나라 검색을 API를 사용하려고 했었다. 현재 사용하고 있는 Tomorrow.io에서 List Locations API를 제공중인데, 업데이트가 3년전이었다. 그래서 오류가 있는지 Res

2023년 8월 9일
·
0개의 댓글
·

ToyProject(더다주) 후기

TheDAJU 사이트 링크 YouTube TheDAJU 데모영상 TheDAJU GitHub 링크 > * THE DAJU 사이트는 접시 컵 수저 젓가락 등의 정보를 제공해주고 판매하는 사이트 입니다. THE DAJU 사이트는 SignIn SignUp Main Product ProductDetail Search MyPage Cart WishList 로 구성된 사이트입니다. THE DAJU 사이트 Tech Stack FE : JS TS REACT REDUX REACT-REDUX

2023년 8월 9일
·
1개의 댓글
·