야생가오리

기존에 만들던 백업 사이트는 이런식으로, 로그인하면 자신의 페이지에 데이터를 추가/수정/삭제할 수 있게 되어 있다.  이때, 이 페이지를 다른 사용자도 볼 수 있도록 공유하고자 한다. 이 페이지의 데이터 그대로 보여줄 거지만, 공유페이지일 경우 데이터를 추가하거나 수정할 수는 없어야 한다.일단 공유 용도를 위한 페이지를 따로 만들어주었다. 라우팅에서 얘기하겠지만 공유링크는 /share/(해당유저의 uid) 형식으로 만들 것이므로 uid를 useParams로 가져온다.메인 페이지와 동일한 컴포넌트와 스타일을 사용하지만, 중간중간 데이터를 불러와야 하는 컴포넌트들에는 isShared라는 props를 추가로 내려주어 특정 요소들의 가시 여부를 컨트롤해주고, externalUid로 params 즉 이 공유페이지..

올해도 창작물 연말정산 백업 페이지를 만들던 중... 저번과는 다르게 파이어베이스를 활용한 인증과 데이터베이스를 사용하고 있었는데, 만들다 보니 매 컴포넌트마다 사용자 정보를 useEffect로 새로 불러오고 있다는 것을 깨달았다. 이거... 너무 비효율적이자나  여태껏 쓰고 있던 방식컴포넌트마다 useEffect를 사용해, 렌더링될 때 유저 정보를 가져오도록 했었다. 근데 컴포넌트가 많아지다 보니 일일이 복붙하다가... 그럴필요잇나? 싶어져서로그인 사용자 인증 정보는 어차피 로그인한 이상 어디서든 쓰니까, 이렇게 하면 매번 같은 코드를 갖다붙여야 하니 귀찮기도 하고 유지보수도 어렵다. context로 빼서 상태관리를 해주자. context란?공식문서를 보는 것이 편하다 :> ...https://ko.r..

네이버 밴드 API로 뭔가 해보고 싶은 게 생겨서, 일단 가장 먼저 사용자인증부터 구현해보기로 했다.네이버밴드 API 공식 문서 >> https://developers.band.us/develop/guide/api 밴드 개발자 센터열린 공간, 함께하는 기술, 경험의 공유. BAND 플랫폼이 애플리케이션 개발에 필요한 다양한 환경을 제공합니다.developers.band.us 1. 서비스 등록우선 API 사용을 위해 내 앱을 등록해줘야 한다.서비스 이름, 유형을 작성하고 리다이렉트 uri를 적어준다.Redirect URI란, 로그인 요청을 보내 인증을 받으면 인증토큰이 오게 되는데, 그때 리다이렉트될 페이지 주소를 의미한다. 나는 현재 로컬 개발환경에서 테스트 중이고, vite를 사용한 리액트 프로젝트를 ..

플젝이 뭔데...컴퓨터공학과 학생으로 살면서 가장 많이 하고 또 중요한 것은 '프로젝트'인 것 같습니다. 협업 면에서도, 기술 면에서도, 아이디어 구체화 면에서도 정말 많은 것을 배울 수 있는 활동으로, 컴공의 꽃이라고도 할 수 있겠습니다. 저는 대충 종합예술 비슷한 거라고 생각해요. 그러나 취업이니 뭐니 하며 졸업학년에 가까워질수록 '프로젝트 경험'은 일개 학부생에게 상당한 부담으로 다가오기도 합니다.취업하려면 플젝경험이 많아야 한대. 심지어 퀄리티도 있어야 한대. 근데 다들 기술은 어디서 배워오는 거야? 프로젝트 같이 할 사람들은 또 어디서 구해오는 거야? 아니 남들은 벌써 이렇게 멋진 프로젝트를 해서 배포까지 했다고? 남들 깃허브에는 막 플젝 리포지토리가 우르르 올라오는데 난 텅텅 비었어. 다들 뭘..

졸프 개발에 바쁜 요즘...이번에 구현할 기능은 기능이다.달리2 모델을 돌리는 건 백엔드가 해줄 거고, 프론트에서 할 일은 사용자가 원본 사진에서 특정 영역을 선택하면 그 부분만 투명하게 만든 png 파일을 갖다주는 것이다. 1. 이미지에서 특정 영역 선택하기이미지를 띄울 컨테이너를 만들고, 이미지와 버튼을 만들어준다.이미지 위를 드래그하면 사각형으로 선택 영역을 표시해줘야 한다. 이미지 위에 사각형이 올라가는 구조이므로 Stack을 사용하고, 드래그 제스처를 구현해야 하므로 onPan과 관련된 메서드들을 사용해준다. 변수들은 Stateful 위젯 안에 이런 타입으로 선언해줬다. onPanStart로 드래그를 시작했을 때 사각형의 시작점이 될 오프셋을 지정해주고, onPanUpdate로 마지막으로 터치..

글쓰기는 너무 어려워 공대생으로 살아가며 종종 '글쓰기는 참 어렵다'고 느끼곤 합니다.물론 모든 공대생이 쓰기를 어려워하지도, 공대생이라고 해서 글을 못 쓰지도 않습니다. 실제로 작년에 주최된 저희 학교 문예 대회에서는 컴퓨터공학과 전공생 분께서 대상을 타셨더라고요. 같은 컴공생인데 저는 어째서... 라는 생각이 들기는 했지만 뭐 저에겐 저만의 무기가 또 있을 거라고 생각합니다. 여튼 이공계열 == 글못씀. 이것은 무조건 틀린 말이지만, 많은 이공계열 학생들이 글쓰기를 어려워한다는 것은 마냥 틀린 말로 치부하기엔 어렵습니다. 학부생 시절 내내 다양한 글쓰기 수업, 레포트 과제를 수행하고, 졸업 요건으로 논문까지 써서 내는 타과 친구들에 비해서는 확실히 제 주변 공대생들은 글쓰기를 어려워하더라고요. 저를 ..

잼얘? 님선.여러분은 잼얘. 라는 단어를 아시나요?재밌는 이야기의 줄임말로, 작년쯤부터 퍼지기 시작한 이 단어는 아직도 친구들 사이에서 일상처럼 사용되고 있습니다. 저만 그런 걸지도 모르지만요. 저는 친구들을 만날 때마다 잼얘 없니? 잼얘 줘. 잼얘. 님선(너 먼저). 이런 대화만 줄창 주고받곤 합니다. 누군가가 재밌는 얘기를 던져줄 때까지...  도파민 중독의 시대에선 잼얘는 아무리 뜯어내도 모자랍니다.이런 저에게 chatGPT와 같은 생성형 AI의 등장은.... 정말 반가웠습니다. 언제든지 누를 수 있는 무한동력 잼얘 자판기가 생긴 거잖아요? (물론 잼얘 자체가 신조어인 탓에 그냥 '잼얘해봐' 라고 말을 걸면 지피티 4o 정도의 새 모델을 제외하고서는 모두 '잼 이야기' 로 인식을 하지만...)실제로..

지난번에 플러터 패키지를 이용해 stt를 구현했었다.https://day4fternoon.tistory.com/126 [Flutter] speech_to_text로 음성 인식 구현하기AI 채팅봇과 대화할 수 있는 채팅 페이지를 만드는데, 타이핑뿐만 아니라 음성으로도 메시지를 입력할 수 있게 해야 한다.speech_to_text 플러터 패키지를 사용해 구현할 수 있다. https://pub.dev/packagesday4fternoon.tistory.com 이제 만들 것은 반대로 챗봇 즉 AI의 채팅을 목소리로 읽어주는 기능이다. 대화 감상이 주제이므로 대화하는 느낌을 내기 위해 AI 채팅을 tts로 변환해보도록 하겠다. stt 때는 speech_to_text라는 플러터 패키지로 간단히 구현했었다. tts도..

AI 채팅봇과 대화할 수 있는 채팅 페이지를 만드는데, 타이핑뿐만 아니라 음성으로도 메시지를 입력할 수 있게 해야 한다.speech_to_text 플러터 패키지를 사용해 구현할 수 있다. https://pub.dev/packages/speech_to_text speech_to_text | Flutter packageA Flutter plugin that exposes device specific speech to text recognition capability.pub.dev 1. 설치pubspec.yaml에 의존성 추가해주고 pub getdependencies: speech_to_text: ^6.6.2공식문서상에 따르면 가장 최신 버전은 7.0.0인 듯하나 나는 플러터 sdk 버전 문제로 인해 7버전..

프로젝트 ing병원 키오스크 연습을 위한 웹앱..같은걸 만들고 있다이번에 만들 기능은 주변 약국 찾기 기능.단계가 지금 보니 좀 애매하게 나눠져 있는 것 같아서 + 그리고 경로안내를... 뭘 어케하지?? 싶어가지고 일단 원하는 약국을 표시하고 - 선택해 정보를 보는 것부터 만들어보기로 했다.이미 어느정도 진행이 된 프로젝트라 기본 스타일, 껍데기 같은 건 다 구현되어 있으니 지도를 불러오는 것부터 시작해보자 카카오맵 API를 사용했다https://apis.map.kakao.com/공식 문서 https://apis.map.kakao.com/web/documentation/ 1. 카카오 개발자 등록하고 애플리케이션 추가하기API 사용을 위해 앱을 등록해주자앱을 등록하면 콘솔의 '앱 키' 탭에서 APP키를 확..