전체 글116 [포케허브] dom-to-image와 next/image 최적화 호환 문제 해결 리액트 버젼에서 next로 마이그레이션 발생 문제 중 해결이 안된 문제dom-to-image를 사용해서 포켓몬 카드를 다운받는 부분인데이렇게 완성된 카드를 dom-to-image를 통해서 file saver로 다운 받으면...이렇게 포켓몬 이미지와 로고 이미지가 캡쳐가 되지 않는다. 그런데 카드 배경에 몬스터볼 이미지는 svg인데 다운로드하면 잘 보이고있어서 의구심을 품었다.기존 리액트 버젼에서는 img태그를 사용해서 png파일을 다운 받았는데next로 마이그레이션하면서 next/image를 사용하였다.일단 next/image를 사용하니 기존 png이미지가 webp로 변경되었다.개인적인 생각으로는 dom-to-image가 svg, png, jpeg 만 인식하고 캡쳐하기 때문이 아닌가 생각이 들었다.그래.. 2024. 5. 25. [RN] nativewind 적용.. expo cli로 하면서 스타일은 tailwind를 적용해보기로 했다.짜잔 nativewind를 사용하면 됩니다.그렇게 nativewind 공식 문서에 들어가니깐 친절하게 적용방법이 나와있다.https://www.nativewind.dev/quick-starts/expo Expo | NativeWindA example of an Expo project can be found on Githubwww.nativewind.devnpm install nativewindnpm install --save-dev tailwindcss@3.3.2그리고 npx tailwindcss init을 해주면 tailwind.config.js와 babel.config.js가 설치된다.// tailwind.config.jsmodul.. 2024. 5. 22. [RN] expo cli? react-native cli? expo cli장점 : 1. 빠른 시작 : 별도의 네이티브 설정 없이 바로 프로젝트를 생성하고 실행 할 수 있다.2. 빌드 및 배포 : expo의 관리형 워크플로우를 통해서 간단하게 어플리케이션을 빌드하고 배포 할 수 있다.(실제 기기에서 테스트 쉬움)3. 풍부한 라이브러리 : expo sdk를 통해 카메라, 위치, 센서, 지도 등 다양한 네이티브 기능을 간편하게 사용 할 수 있다.단점 :1. 제한된 네이티브 코드 : expo 관리형 워크플로우에서는 네이티브 코드를 직접 작성할 수 없으며, 지원되지 않는 네이티브 모듈이 있을 수 도 있다. 개발 빌드를 통해 네이티브 코드를 통합할 수 있으나 일반적으로 제한된다. react native cli장점 :1. 네이티브 코드 접근 : 네이티브 모듈 및 API를 직.. 2024. 5. 20. 프로그래머스 Javascript 코딩 테스트 Lv.0 암호해독 암호화된 문자열 ciphercipher문자열에서 code의 배수 번째 글자를 찾아야함일단 먼저 문자열 cipher를 배열로 변환const solution = (cipher, code) => { let answer = [] let arr = [...cipher] return answer}주어진 배열에서 code번째를 찾아야하는데const solution = (cipher, code) => { let answer = [] let arr = [...cipher] for (let i = 0; i 일단 나는 for문을 사용해서 배열을 순환해서 code번째의 문자를 찾았다.먼저 for문의 조건문 부분에 배열의 길이보다 적게 조건을 줬는데 이유는배열의 index는 0.. 2024. 5. 9. [emotional] - Nextjs api route nextjs 공식문서 route handlers를 보면 page 라우터를 사용할 때는 api 폴더 아래에 있어야 api에 접근이 가능했는데app 라우터로 넘어오면서 api dir 아래에 있을 필요는 없다.(app폴더 안에 route.ts로만 작성하면 된다.)하지만 명확하게 구분하기 위해 api dir 아래에 route.ts 파일을 생성했다.그런데 왜 이걸 사용하냐?이모셔널에는 youtube api와 openai api를 사용하는데 서버 없이 클라이언트 단에서 사용되다보니네트워크 탭의 요청 url과 요청 헤더에 api key값이 노출이 되버린다..env를 사용해서 환경변수로 key값을 숨긴 노력이 무용지물이 되어버렸다.이걸 방지하기 위해서 찾다보니 나온게 nextjs 서버를 이용한 api route방식이다.. 2024. 5. 6. [배포] 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. 이전 1 2 3 4 5 6 7 8 ··· 15 다음
