본문 바로가기

전체 글119

[배포] emotional 힘들었다. 아직 배포 전 작업 과정에 대한 글은 안썼지만... 결론만 말하자면 내가 알던 nextjs는 완전 수박 겉 핥기 그 자체였다는거... 노출되던 api key들은 모두 서버에서 처리 중 이다. nextjs만세 https://www.emotional.today/ emotional 자신의 감정을 표현하면 그에 맞는 추천 노래 Playlist를 알려드려요. www.emotional.today 2024. 4. 22.
[emotional] - 프레임 및 기능 구현 simple is the best (디자인 하기 귀찮았던거 아님.) 글 작성 시간 기준으로 비가 오고 있길래 빗소리가 듣기 좋다고 했더니 장마철은 아니지만 비 오는 날 듣기 좋은 노래 플리를 추천해준다. 이렇게 프레임과 기능 동작은 되지만 속을 들여다보면 보안 상의 문제가 꽤나 있다. 클라이언트 측에서 API KEY만 가져와서 사용하다보니 API KEY가 노출이 된다던지 노출이 된다던지 하는 점... 오픈ai api를 사용하면 요청 헤더 Authorization에 bearer token에 key값이 노출 된다는 점과 youtube api를 사용하면 요청 url에 쿼리 파라미터로 key값이 노출이 된다. 이 두가지 문제 때문에 현재 클라이언트 측에서 key값을 숨길 수 있는지 검색 중에 있다...(NEXT.. 2024. 4. 20.
[개인 사이드 프로젝트] - emotional (YOUTUBE API KEY를 발급받자) 스포티파이 API를 사용하려고 했지만, 음악 추천을 생각하자마자 원래는 당연하게 스포티파이부터 떠올렸다. 하지만 스포티파이 API 호출을 하려면 스포티파이 로그인이 필수인걸... 만약에 내가 사용자다? 귀찮아서 페이지 이탈 해버릴거 같았다. 그러면 스포티파이를 대체할만한게 뭐가있나? 일단 검색을 해서 얻어낸 결과로는 아이튠즈와 Mania DB, youtube이렇게 좁혀졌다. 일단 아이튠즈의 결격 사유는 무료로 사용하면 분당 호출이 20개로 제한적이라는 점 (분당 20번이나 사용이 될려나...) Mania DB는 별도의 API KEY를 요구하지 않고, 한국어로 되어있다는 점에서 채택할 뻔.. 하지만 안 했던 이유는 youtube api의 mostPopular 쿼리가 맘에 들어버려서이다. 이 쿼리를 사용하게.. 2024. 4. 20.
[개인 사이드 프로젝트] - emotional (GPT API KEY를 발급받자) 빠르게 발전해나가는 AI에게 인간이 쓴 일기에 담긴 감정 분석을 맡긴다. (스카이넷?) OpeanAI의 GPT를 사용해서 일기를 분석시켜야하니 API KEY를 가져와야한다. 우선 구글에 openai api를 검색하니 친절하게 https://openai.com/blog/openai-api 이렇게 주소를 알려준다. 위의 이미지에서 API를 클릭하면 API KEY를 발급하는 페이지로 바로 이동시켜주는게 아니라 DOCS페이지로 이동을 하게 되는데 이미지의 자물쇠 모양을 클릭하면 API KEY발급 페이지로 이동하게 된다. Create new secret key 버튼을 누르고 절차대로 발급을 받으면 끝 도텐브를 사용해서 환경변수로 처리해버렸다. (해치웠나?) key는 발급 받고 나서 다시 볼 수 없을지도? 잘 간수.. 2024. 4. 20.
[개인 사이드 프로젝트] - emotional (프로젝트 구성) 취업은 안되고...시간은 가고... 답답한 마음에 머리를 부여잡고 아이디어를 떠올려봤다. 사용자가 일기를 쓰면 그 일기를 분석해서 주요한 키워드를 추출한 후에 키워드와 연관된 노래를 추천해주는 어플리케이션을 만들어보자. 일단 필요한건 전체적인 틀... input창 또는 textarea에 입력하고, 분석 버튼을 만들고 아래에는 추천 노래를 띄워준다. 흠...분석은 어떻게 해야하나? AI가 대세이니 gpt모델을 사용해보자. 그럼 추천 노래는 어떻게 해야하나? 스포티파이 API? 유튜브 API? 일단 처음 생각은 스포티파이 였으나 스포티파이 API를 호출하려면 사용자의 스포티파이 access token이 필요했다. 번거롭게 다른 뎁스를 거치지 않고 가볍게 사용하는게 목표였어서 유튜브 API를 사용하기로 하였다.. 2024. 4. 20.
[Side Project] 포케허브 포케허브라는 사이드 프로젝트는 이미 배포를 한 상태이다. 리팩토링 및 피드백 받은 사항들을 개선 중에 있는 중.. 뭐 이것저것 정리하다가 생각이든 @react-icons/all-files 사용이유 react-icons의 번들 사이즈가 너무 커서 번들 사이즈를 줄이기 위해 찾다가 해결책?으로 react-icons/all-files를 사용한다고 하였다. 물론 react-icons를 사용하면 편하기야 하겠으나, chunk크기가 무지막지..별의별 icon을 다 데리고 와버린다.. (빌드 시에 엄청난 크기의 chunk 파일 사이즈..) 그래서 찾아보았다! react-icons에서는 @react-icons/all-files 라는 별도의 라이브러리를 제공한다. @react-icons/all-files 라이브러리는 아.. 2024. 3. 23.
[React Native] ScrollView와 FlatList ScrollView는 데이터가 화면을 벗어났을 때 스크롤을 생성해서 스와이프를 통해서 벗어난 부분을 볼 수 있다. (데이터량이 많지않고 고정적일 때 사용) FlatList는 한번에 모든 데이터가 아닌 화면에 보여지는 부분만을 렌더링 (성능 향상!) windowing이랑 비슷한거 같은데. 2024. 3. 19.
[React Native] Layout system RN에서는 Flexbox를 사용한다. 주의 Flexbox는 웹의 CSS에서와 같은 방식으로 리액트 네이티브에서 몇 가지 예외를 제외하고 작동합니다. 기본값은 다릅니다. flexDirection이 행 대신 열로 기본 설정되어 있고, alignContent가 stretch 대신 flex-start로 기본 설정되어 있고, flexShrink가 1 대신 0으로 기본 설정되어 있으며, flex parameter는 단일 숫자만 지원합니다. 참조 : https://reactnative.dev/docs/flexbox Layout with Flexbox · React Native A component can specify the layout of its children using the Flexbox algorithm... 2024. 3. 15.

티스토리툴바