프론트엔드8 [React Native] 모바일 서비스 개발 유형과 프로젝트에 사용한 이유 많은 사람들이 모바일 환경에서 여러 서비스를 이용하고 있습니다. 이에 맞춰 모바일 서비스 개발을 고려하게 되는데, 모바일 서비스 개발하는 방식에는 여러 가지가 존재합니다. 이번 포스트에서는 모바일 서비스를 개발하는 여러 유형들에 대해 특징, 장단점을 알아보고 비교해 보도록 하겠습니다. 또한, 제가 진행한 프로젝트에서 여러 방식들 중에서 React Native를 선택하여 개발하게 된 이유에 대해 작성하였습니다. 📘 모바일 서비스 개발 유형 모바일 환경에서의 서비스를 제공하기 위하여 네이티브 앱, 웹, 하이브리드 등 여러 방법으로 개발하여 서비스를 제공하고 있습니다. 개발하는 여러 방법들에 간략히 알아보도록 하겠습니다. 네이티브 앱 여러 서비스에서 제공하는 방법으로 스마트폰이나 태블릿에 어플리케이션을 설치하.. 2022. 6. 13. 음성 녹음 크로스브라우징 이번 포스트는 말듣꾸 프로젝트를 진행하는 당시 겪었던 이슈로 음성 녹음 기능을 구현하는 과정에서 OS와 브라우저에 따라 녹음이 불가능한 문제를 대응하였던 내용을 다루었습니다. 말듣꾸 프로젝트는 테스트 서비스로 사용자가 음성을 녹음하여 제출하면, 사용자가 어느 지역의 방언을 구사하는지 학습된 인공지능이 추론하여 결과를 제공하는 서비스입니다. 프로젝트에 관한 자세한 사항은 링크를 통해 확인 부탁드립니다. 🔥 발생한 이슈 음성 녹음 기능을 추가하기 위하여 MediaRecorder 를 이용하였습니다. 해당 기능을 Chrome 브라우저를 기준으로하여 개발을 진행하였는데, MediaRecorder 인스턴스 생성시 옵션으로 mimeType 을 Chrome 에서 사용가능한 audio/webm 으로 지정하였습니다. 기능.. 2022. 6. 9. [Next.js] SSR, SSG, ISR 구성하기 이전 포스트를 통해 Next.js 에서 SSR(Server Side Rendering) 과 SSG(Static Site Generation)의 방식으로 페이지를 생성하는 방법에 대해 다루었습니다. 이번 포스트에서는 SSR, SSG 과 함께 추가적으로 ISR(Incremental Static Regeneration)도 함께 다루어보겠습니다. 이전의 Next.js 기본 개념과 프로젝트에 사용한 이유 포스트에서 CSR, SSR, SSG 방식에 대한 설명을 이미 다루었으므로 관련된 설명은 생략하도록 하겠습니다. 관련 내용 확인이 필요한 경우 위의 포스트를 확인해주시기 바랍니다. 📘 SSR SSR(Server Side Rendering) 은 사용자가 서비스에 접속하여 서버로 요청을 보내는 경우, 서버에서 렌더링을.. 2022. 6. 9. [Next.js] 페이지 나누기 (라우팅) Next.js 를 이용한 개발에서 가장 기초적이며 필수적인 요소로 페이지 라우팅 입니다. 해당 포스트는 Next.js 에서 페이지 구성하는 방법과 진행한 프로젝트에서 어떠한 방식으로 라우팅을 이용하였는지에 대해 다루었습니다. 📘 React 페이지 구성과 라우팅 React 를 이용할때는 페이지를 구분하고 이동시키기 위하여 라우터 기능이 있는 react-router 라이브러리를 이용해야 합니다. 해당 라이브러리를 이용하기 위해서는 react-router 에 대한 추가적인 학습이 필요하고, 와 등을 이용하여 라우팅 구성이 필요합니다. 이러한 점이 React 에서 페이지를 구성하는것에 어려움을 가져다줍니다. 📗 Next.js 페이지 구성과 라우팅 Next.js 는 라우팅 기능을 내장하고 있어 손쉽게 페이지를 구.. 2022. 5. 28. [Next.js] 기본 개념과 프로젝트에 사용한 이유 진행하는 프로젝트의 프론트엔드 기술 스택으로 Next.js 를 사용하게 되었습니다. 해당 포스트는 Next.js 에 대한 간략한 설명과 진행한 프로젝트에서 Next.js 를 사용하게 된 이유에 관한 내용을 담았습니다. 이후의 Next.js 관련 포스트는 Next.js 를 이용하면서 발생한 이슈들에 대해 다룰 예정입니다. 📖 Next.js 에 대하여 위키백과에서는 Next.js 를 아래와 같이 설명하고 있습니다. Next.js 는 Node.js 를 기반으로 구축된 오픈 소스 웹 개발 프레임워크로, 서버 측 렌더링 및 정적 웹사이트 생성과 같은 React 기반 웹 애플리케이션 기능을 가능하게 합니다. 위키 백과 : https://en.wikipedia.org/wiki/Next.js 위의 내용에서 Next.j.. 2022. 5. 12. Honey Pick - 사용자 쇼핑 상품 공유 및 추천, 투표 서비스 본 포스트는 프로젝트에 관한 간략한 설명, 관련 포스트 링크 내용등이 작성되어 있습니다. 상세 설명 및 코드, 서비스 화면 등을 확인하기 위해 중간에 작성된 Github 링크를 이용부탁드립니다. 🎁 Honey Pick 💡 프로젝트 소개 코로나로 인하여 온라인 쇼핑몰 시장이 성장하고, 온라인 쇼핑몰의 종류는 기하급수적으로 증가하고 있습니다. 자주 애용하는 물건이나 구매하고 싶었던 물건들이 많아질수록 모든 사이트를 기록하는 관리는 어려워지고 있습니다. 또한, 인플루언서와 같은 본인만의 개성이 있는 사람들이 애용하고 관심을 갖는 상품 정보를 쉽게 공유 받고 싶어합니다. 저희의 서비스는 여러곳으로 흩어진 쇼핑몰들의 상품 정보들을 하나의 앱에서 확인하고 관리가 가능합니다. 그리고 본인만의 개성이 있는 사람들의 상.. 2022. 5. 1. 말듣꾸 - 방언 분류 서비스 본 포스트는 프로젝트에 관한 간략한 설명, 관련 포스트 링크 내용등이 작성되어 있습니다. 상세 설명 및 코드, 서비스 화면 등을 확인하기 위해 중간에 작성된 Github 링크를 이용부탁드립니다. 🎁 말듣꾸 💡 프로젝트 소개 교통과 기술의 발전으로 과거와 다르게 지역간 교류가 활발하게 이루어지고 있습니다. 특정 지역의 방언을 구사하는 드라마와 영화가 많이 나오고 있고, 주변에 특정 지역 사투리를 구사하는 지인들이 많이 있습니다. 이러한 환경으로 내가 자란 환경과 다른 지역의 방언을 구사하는 경우도 있습니다. 사용자가 주어진 텍스트를 녹음하여 제출하면 여러 지역 방언을 학습한 인공지능 모델이 사용자의 억양과 유사한 지역 방언을 비율로 알려주게 됩니다. 테스트 결과에 따라 지역을 모티브로 제작한 캐릭터를 이용.. 2022. 4. 5. Phantom - 영화 추천 서비스 본 포스트는 프로젝트에 관한 간략한 설명, 관련 포스트 링크 내용등이 작성되어 있습니다. 상세 설명 및 코드, 서비스 화면 등을 확인하기 위해 중간에 작성된 Github 링크를 이용부탁드립니다. 🎁 Phantom 💡 프로젝트 소개 영화관으로의 복귀 가장 대중적인 문화 활동 중 하나인 영화 시청이 코로나가 창궐한 이후 사회적 거리두기로 영화 시청 인구 감소 및 영화관 방문 감소하였습니다. 코로나 백신 2차 접종이 전국 약 80%를 달성한 지금, 이 시점에 위드 코로나로 기존 일상으로 복귀와 함께 영화관으로 복귀를 바라는 사람들의 영화 추천 및 영화관 예매 안내, 넷플릭스 안내 서비스입니다. 📆 프로젝트 기간 2021-11-17 ~ 2021-11-25 (1주) 💻 프로젝트 상세 내용 (Github) 통합 R.. 2021. 12. 17. 이전 1 다음
