본문 바로가기

개발

(54)
Vercel 로 간단하게 React 웹 사이트 무료 배포하기 지난번 서비스가 유료로 전환된 줄 모르고 Heroku로 포트폴리오 사이트를 배포했었다.배포하자마자 이 사실을 알아차리고 바로 내려서 비용은 거의 나가지 않았지만 대체할 서비스를 찾아야 했고 그렇게 Vercel로 갈아타기로 결심했다. Heroku 배포가 궁금하다면 이전 포스팅 참고!https://ramveloper.tistory.com/73 Heroku(헤로쿠)로 간단하게 React 웹 사이트 배포하기Heroku는 간단한 설정으로 서버를 쉽게 배포할 수 있는 클라우드 플랫폼 서비스(PaaS)이다. Java, Node.js, Python 등 여러 언어를 지원한다.포트폴리오 페이지를 만들며 어떻게 배포하는게 부담 없이 편ramveloper.tistory.com  Vercel이란?Vercel은 프론트엔드 배포 ..
Heroku(헤로쿠)로 간단하게 React 웹 사이트 배포하기 Heroku는 간단한 설정으로 서버를 쉽게 배포할 수 있는 클라우드 플랫폼 서비스(PaaS)이다. Java, Node.js, Python 등 여러 언어를 지원한다.포트폴리오 페이지를 만들며 어떻게 배포하는게 부담 없이 편할까 생각하며 알아보니 Heroku를 많이 사용하는 것 같아 이용해 보았다. 이미 나는 배포를 마친 상황이지만 포스팅을 위해 자세히 알아보니 2022년 11월 28일 이후로 무료 플랜이 종료되었다고 한다!!(검색을 제대로 하지 않은 죄..🥲)    Heroku 홈페이지https://www.heroku.com/ Cloud Application Platform | HerokuHeroku is a platform as a service (PaaS) that enables developers ..
[SillyTavern] 실리태번의 월드 인포(로어북) 기능 알아보기 요즘 세상에 AI를 안 쓰는 사람은 거의 없을 것이라고 생각한다.하지만 AI챗? 그뭔씹 마이너 장르는 맞다. 그래도 꽤나 매력을 느껴서 이것저것 알아보던 와중에 실리태번(SillyTavern)이라는 프론트엔드를 알게 되었다.쓰다 보면 알다시피 본인들도 'for Power User'라고 설명할 만큼 학습 곡선이 크지만 다양한 부가 기능을 제공한다.개인적으로 타 AI챗 서비스에는 거의 없는 로어북 개념(특히 키워드 트리거)과 시스템 프롬프트를 쓰다보면 이게 어떻게 돌아가서 프롬프트를 넘길까? 라는 생각이 들게 되는데 오픈소스니까 한번 코드를 열어봤다.  ‼️ 이 글에서는 실리태번 설치나 사용법을 작성하지는 않을 예정입니다.설치, 사용법을 원한다면 다른 글을 찾는 것을 추천합니다🙏🏻    월드 인포(Wor..
[React Native] 리액트 네이티브에서 Apollo Client로 GraphQL 사용하기 (with. SpaceX) Apollo Client란?Apollo Client는 GraphQL API와의 통신을 간편하게 도와주는 클라이언트 라이브러리이다.쿼리(Query)와 뮤테이션(Mutation) 요청: 클라이언트에서 원하는 데이터를 서버에 요청하거나 변경 작업 수행캐싱: 서버에서 가져온 데이터를 클라이언트 측에 캐싱하여 네트워크 요청을 최소화서버 상태 관리: 애플리케이션의 로컬 상태와 서버 상태를 통합적으로 관리 REST API와의 차이점은 이전 포스팅을 참고! REST API와 GraphQL의 차이점 알아보기REST API vs GraphQL API개발에서 데이터를 전달하고 처리하는 방법은 매우 중요하다.REST API는 오랜 시간 동안 표준으로 자리 잡아 왔고 GraphQL API의 등장 이후로 해당 방식을 채택하는 기..
REST API와 GraphQL의 차이점 알아보기 REST API vs GraphQL API개발에서 데이터를 전달하고 처리하는 방법은 매우 중요하다.REST API는 오랜 시간 동안 표준으로 자리 잡아 왔고 GraphQL API의 등장 이후로 해당 방식을 채택하는 기업이 늘고 있다. 프로젝트를 진행하다 보면 REST API가 표준으로 자리 잡은 만큼 많이 사용되기 때문에 GraphQL을 활용할 일이 별로 없었다.기존 시스템과의 호환성 문제나 서버를 새로 개발하거나 변환하는 비용이 들기 때문이라고 생각한다.실무에서는 아직 접하지 못했지만, 예제 프로젝트에서 사용 전 내용을 다시 정리하기 위해 포스팅해 본다😉  REST API와 GraphQL의 특징을 요약하면 다음과 같다.특징REST APIGraphQL API데이터 요청 방식엔드포인트마다 별도의 URL을..
[React Native] 리액트 네이티브 최신 버전 New Architecture 설정 끄기 React Native 0.76부터 New Architecture가 기본값으로 활성화되어 있다. New Architecture는 성능과 확장성을 개선한 새로운 아키텍처로, TurboModules와 Fabric Renderer를 기본적으로 제공하며 최신 React Native 프로젝트에 기본 적용된다. 하지만 프로젝트에 따라 New Architecture를 바로 사용할 수 없는 상황이 있을 수 있다. 예를 들어, 사용하는 라이브러리들이 아직 New Architecture를 지원하지 않거나, 기존 프로젝트에서 호환성 문제가 발생할 수 있다. 이럴 경우에 대비해 React Native는 New Architecture를 비활성화할 수 있는 옵션을 제공하고 있다. 공식 문서 https://reactnative.d..
[React Native] react-native-skia 를 활용해 토스 복권 긁기 따라해보기 가끔씩 여러 앱을 사용하다 보면 이런 기능은 어떻게 구현했을까 라는 궁금증이 생긴다.토스의 만보기를 통해 받는 복권긁기 역시 그런 궁금증을 가지게 하는 기능 중 하나였다.토스의 일부는 React Native로 만드는 것으로 알고 있어서(아닐 수도 있음.. 채용 공고보고 그런갑다 하는거임) 한번 구현해보자! 하는 맘으로 만들어보았다.    우선 토스의 복권 긁기 기능을 살펴보았다. 복권을 받고 광고를 보면 나오는 화면이 위와 같다.'여기를 긁어보세요' 문구와 함께 애니메이션 동작 -> 사용자가 직접 복권을 긁음 -> 다음 화면으로 넘어감 -> 당첨금 텍스트 및 카드, 상단 팝업과 하단 버튼이 Fade-in으로 등장   구글에 'react native scratch card'를 검색해보니 꽤나 괜찮은 예제들..
애플 실리콘(ARM) M2 맥북 homebrew 및 ruby x86_64 버전 재설치 삽질 기록 (react native pod install 오류) 테스트해보고 싶은 라이브러리가 있어 0.76 버전 리액트 네이티브 프로젝트를 생성해 봤는데 pod install 과정에서 다음과 같은 오류가 발생했다. ### ErrorLoadError - dlopen(/Users/{name}/.rbenv/versions/2.7.6/lib/ruby/gems/2.7.0/gems/ffi-1.16.3/lib/ffi_c.bundle, 0x0009): tried: '/Users/{name}/.rbenv/versions/2.7.6/lib/ruby/gems/2.7.0/gems/ffi-1.16.3/lib/ffi_c.bundle' (mach-o file, but is an incompatible architecture (have 'x86_64', need 'arm64')), '/Syst..