서론 예전 스타일의 Toolbar 디자인에는 새로고침 버튼이 존재했지만, 'Pull Down To Reload' 라 불리는 스크롤을 내려서 페이지를 새로고침하는 이 기능은 사용자에게 매우 직관적이다. 대부분의 스마트폰 사용자들은 이제 이 동작에 익숙하며, 콘텐츠를 새로 고침하고 싶을 때 자연스럽게 화면을 아래로 당기는 경향이 있다. 때문에 최근 UI/UX 측면에서 Toolbar에 존재하는 새로고침 버튼을 없애고 Pull Down To Reload를 도입하는 Application이 많아졌기에 한번 구현해보자. 'pull down to refresh' 기능을 사용하는 주된 이유와 장점 첫 번째 - 직관적인 사용자 경험: 위에서 설명한 것과 같이 이 기능은 사용자에게 매우 직관적이다. 대부분의 스마트폰 사용자..
서론 웹 페이지의 중요 키워드를 활용하여 페이지 내에 소규모 게임을 통합함으로써 사용자 참여를 크게 높일 수 있지 않을까? 바쁜 일정에서 잠시 벗어나 스트레스를 해소하고자 하는 직장인들이 이 게임을 통해 웹 서비스에 끌려올 수 있지 않을까? 이러한 생각에서 시작된 낱말 맞추기 게임을 간단하면서도 사용자의 머무름을 늘리는 효과적인 웹페이지 추가 요소로 개발해보자. 사전준비 낱말의 정의를 구하기 위해 Naver Search API(이하 NSA)를 react에서 바로 호출해도 무방하지만 CORS 이슈를 신경써야 하고, 매 번 API를 호출하기에는 하루에 정해진 호출량이 존재하기 때문에 나는 Naver Search API를 다루는 Server API를 간단하게 만들어서 사용했다. 어떠한 언어를 사용해도 무방하지..
서론 최근 팀장님께 조언을 들은겸, 게임 하나를 간단하게 만들어 보려고 한다. 특정 페이지의 키워드를 기준으로 단어를 맞추는 게임을 react로 만드려고 하는데, 단어를 맞추기 앞서 단어의 정의 및 사전적 의미를 구해야 하기 때문에 관련하여 NAVER에서 제공하는 OPEN API 중 하나, Search API를 활용하여 네이버 백과사전 검색 데이터를 받아오는 API를 라라벨로 구현해 보자. NAVER Developers 애플리케이션 등록 아래 공식 페이지에서 내 애플리케이션 등록을 통해 "검색" 애플리케이션을 만든 후 Client ID, Client Secret 두 가지 Key를 확보한다. 애플리케이션 - NAVER Developers developers.naver.com Laravel Route 설정 ..
서론 Firebase Cloud Messaging (FCM)은 Google에서 제공하는 클라우드 기반의 메시징 솔루션이다. 이를 통해 개발자들은 Android, iOS, 웹 애플리케이션에 대한 푸시 알림을 보낼 수 있게 되었다. 본 포스팅에서는 간략하게 FCM에 대해 알아보고, IOS 앱에서 FCM Push 알림을 구현해보자. FCM(Firebase Cloud Messaging) 기능 FCM은 앱 사용자와의 실시간 상호 작용을 가능하게 하여, 사용자 참여도를 높이고 중요한 정보를 신속하게 전달하는 데 효과적인 도구로 활용된다. 아래에 간략하게 FCM의 지원 기능 및 장점에 대해 요약해보았다. 크로스 플랫폼 메시징: FCM은 Android, iOS, 웹 애플리케이션에 대한 푸시 알림을 지원하여, 하나의 서..
서론 API를 만들때 JWT(Json Web Token)을 사용하는 이유가 무엇일까? 이 이유를 이해하기 위해서는, API의 특성과 인증 및 권한부여의 필요성을 알고있어야 한다. 이러한 이유들을 알아보고, 간단하게 JWT를 사용해서 API를 구현하는 방법을 알아본다. API 개발에 JWT를 사용하는 이유 RESTful API는 상태 비저장(stateless)을 원칙으로 한다. 이는 서버가 클라이언트의 상태 정보를 유지하지 않아야 함을 의미하는데, JWT는 이 원칙을 준수한다. 토큰은 클라이언트에 의해 저장되며 서버는 상태 정보를 유지할 필요가 없어진다. 서버가 사용자 상태를 유지하지 않기 때문에, 요청은 어느 서버에서나 처리될 수 있다. 이는 로드 밸런싱과 서비스의 확장성에 유리해진다. 그리고 JWT는 ..
서론 웹 개발 분야에서 서버 사이드 렌더링(SSR)은 요즘 화두가 되고 있는 중요한 주제다. 흔히들 SSR은 웹 페이지의 초기 로딩 성능을 개선하고, 검색 엔진 최적화(SEO)를 향상하는 데에 큰 도움을 준다고만 알고 있지만 세세히 알아보지 않는다. 때문에 본 포스팅에서는 SSR이 무엇인지, 어떻게 작동하는지, 그리고 어떤 장점이 있는지 알아보자. SSR의 기본 개념 SSR(서버 사이드 렌더링, 이하 SSR)은 서버에서 웹 페이지의 전체 HTML을 생성하여 브라우저로 보내는 방식이다. 이 과정에서 서버는 데이터를 가져오고, HTML을 완성하며, 필요한 모든 자바스크립트와 CSS를 포함한 완전한 페이지를 클라이언트에게 전달한다. 더 간략하게 말하면, SSR은 클라이언트(브라우저)에 전달되기 전에 서버에서 ..