민규의 블로그✍️

전체 글294

IOS WKWebView Pull Down To Reload 구현하기 서론 예전 스타일의 Toolbar 디자인에는 새로고침 버튼이 존재했지만, 'Pull Down To Reload' 라 불리는 스크롤을 내려서 페이지를 새로고침하는 이 기능은 사용자에게 매우 직관적이다. 대부분의 스마트폰 사용자들은 이제 이 동작에 익숙하며, 콘텐츠를 새로 고침하고 싶을 때 자연스럽게 화면을 아래로 당기는 경향이 있다. 때문에 최근 UI/UX 측면에서 Toolbar에 존재하는 새로고침 버튼을 없애고 Pull Down To Reload를 도입하는 Application이 많아졌기에 한번 구현해보자. 'pull down to refresh' 기능을 사용하는 주된 이유와 장점 첫 번째 - 직관적인 사용자 경험: 위에서 설명한 것과 같이 이 기능은 사용자에게 매우 직관적이다. 대부분의 스마트폰 사용자.. Server Language/Swift 2023. 11. 30.

React.js를 사용해서 낱말 맞추기 게임 만들기 서론 웹 페이지의 중요 키워드를 활용하여 페이지 내에 소규모 게임을 통합함으로써 사용자 참여를 크게 높일 수 있지 않을까? 바쁜 일정에서 잠시 벗어나 스트레스를 해소하고자 하는 직장인들이 이 게임을 통해 웹 서비스에 끌려올 수 있지 않을까? 이러한 생각에서 시작된 낱말 맞추기 게임을 간단하면서도 사용자의 머무름을 늘리는 효과적인 웹페이지 추가 요소로 개발해보자. 사전준비 낱말의 정의를 구하기 위해 Naver Search API(이하 NSA)를 react에서 바로 호출해도 무방하지만 CORS 이슈를 신경써야 하고, 매 번 API를 호출하기에는 하루에 정해진 호출량이 존재하기 때문에 나는 Naver Search API를 다루는 Server API를 간단하게 만들어서 사용했다. 어떠한 언어를 사용해도 무방하지.. Client Language/React.js 2023. 11. 28.

NAVER Search API를 활용한 단어 백과사전 검색 API 만들기 서론 최근 팀장님께 조언을 들은겸, 게임 하나를 간단하게 만들어 보려고 한다. 특정 페이지의 키워드를 기준으로 단어를 맞추는 게임을 react로 만드려고 하는데, 단어를 맞추기 앞서 단어의 정의 및 사전적 의미를 구해야 하기 때문에 관련하여 NAVER에서 제공하는 OPEN API 중 하나, Search API를 활용하여 네이버 백과사전 검색 데이터를 받아오는 API를 라라벨로 구현해 보자. NAVER Developers 애플리케이션 등록 아래 공식 페이지에서 내 애플리케이션 등록을 통해 "검색" 애플리케이션을 만든 후 Client ID, Client Secret 두 가지 Key를 확보한다. 애플리케이션 - NAVER Developers developers.naver.com Laravel Route 설정 .. Framework/Laravel 2023. 11. 27.

[웹개발자의 IOS 탐방기] 8. SwiftUI 웹앱에 FCM Push 알림 구현하기 서론 Firebase Cloud Messaging (FCM)은 Google에서 제공하는 클라우드 기반의 메시징 솔루션이다. 이를 통해 개발자들은 Android, iOS, 웹 애플리케이션에 대한 푸시 알림을 보낼 수 있게 되었다. 본 포스팅에서는 간략하게 FCM에 대해 알아보고, IOS 앱에서 FCM Push 알림을 구현해보자. FCM(Firebase Cloud Messaging) 기능 FCM은 앱 사용자와의 실시간 상호 작용을 가능하게 하여, 사용자 참여도를 높이고 중요한 정보를 신속하게 전달하는 데 효과적인 도구로 활용된다. 아래에 간략하게 FCM의 지원 기능 및 장점에 대해 요약해보았다. 크로스 플랫폼 메시징: FCM은 Android, iOS, 웹 애플리케이션에 대한 푸시 알림을 지원하여, 하나의 서.. Framework/SwiftUI 2023. 11. 24.

Laravel로 JWT 기반 API 구현 방법 서론 API를 만들때 JWT(Json Web Token)을 사용하는 이유가 무엇일까? 이 이유를 이해하기 위해서는, API의 특성과 인증 및 권한부여의 필요성을 알고있어야 한다. 이러한 이유들을 알아보고, 간단하게 JWT를 사용해서 API를 구현하는 방법을 알아본다. API 개발에 JWT를 사용하는 이유 RESTful API는 상태 비저장(stateless)을 원칙으로 한다. 이는 서버가 클라이언트의 상태 정보를 유지하지 않아야 함을 의미하는데, JWT는 이 원칙을 준수한다. 토큰은 클라이언트에 의해 저장되며 서버는 상태 정보를 유지할 필요가 없어진다. 서버가 사용자 상태를 유지하지 않기 때문에, 요청은 어느 서버에서나 처리될 수 있다. 이는 로드 밸런싱과 서비스의 확장성에 유리해진다. 그리고 JWT는 .. Framework/Laravel 2023. 11. 23.

서버 사이드 렌더링(SSR) 이해하기 서론 웹 개발 분야에서 서버 사이드 렌더링(SSR)은 요즘 화두가 되고 있는 중요한 주제다. 흔히들 SSR은 웹 페이지의 초기 로딩 성능을 개선하고, 검색 엔진 최적화(SEO)를 향상하는 데에 큰 도움을 준다고만 알고 있지만 세세히 알아보지 않는다. 때문에 본 포스팅에서는 SSR이 무엇인지, 어떻게 작동하는지, 그리고 어떤 장점이 있는지 알아보자. SSR의 기본 개념 SSR(서버 사이드 렌더링, 이하 SSR)은 서버에서 웹 페이지의 전체 HTML을 생성하여 브라우저로 보내는 방식이다. 이 과정에서 서버는 데이터를 가져오고, HTML을 완성하며, 필요한 모든 자바스크립트와 CSS를 포함한 완전한 페이지를 클라이언트에게 전달한다. 더 간략하게 말하면, SSR은 클라이언트(브라우저)에 전달되기 전에 서버에서 .. Client Language/JavaScript 2023. 11. 23.

[Next.js 탐험기] 7. Next.js + 티스토리 API 블로그 만들기 - useState,useEffect 사용하여 모바일 반응형 사이드바 만들기 서론 포스팅 제목 짓기 힘들다. 이번에 해 볼 것은 React의 상태 변화 (useState)와 사이드 이펙트 (useEffect)를 사용하여 모바일 화면에서 메뉴 펼치기 버튼을 클릭하면 사이드바가 표시되게 하고, 사이드바 이외의 공간을 클릭할 시에는 사이드바가 비활성화되는 이른바 "모바일 반응형 사이드바"를 만들어 본다. 상태 병화와 사이드 이펙트 등에 대한 기초 설명이 필요하다면 아래 포스팅을 읽어보길 바란다. Backend 개발자를 위한 React 기초 정리 서론 대부분의 백엔드 개발자들은 javascript와 jquery만을 사용해서 충분히 웹 사이트를 만들 수 있다. 때문에 시간이 생기면 새로운 infrastructure(인프라) 관련 cloud service를 비롯해 database의 효율적인.. Framework/Next.js 2023. 11. 21.

웹 애플리케이션의 꽃 - 비동기(asynchronous) 쉽게 이해하기 서론 여태껏 당연하게 사용해 왔던 '비동기' 혹은 '비동기 통신'. 문득 스스로 '비동기가 뭐야?'라고 질문했다. 명쾌히 대답이 나오지 않았다. 부끄러움은 뒤로 한 채, 그 의미를 다시 한번 알아보고 여태껏 사용해 왔던 비동기 방식에 대해 학습해 보기로 한다. 비동기(Asynchronous) vs 동기(Synchronous) 비동기(asynchronous)는 컴퓨터 프로그래밍에서 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식이다. 즉, 작업의 완료와 상관없이 프로그램의 흐름이 계속 진행되는 것을 뜻한다. 이는 동기(synchronous) 방식과 대비되는 개념이다. 동기(Synchronous) : 동기 방식에서는 한 작업이 완료될 때까지 기다렸다가 그 다음 작업을 실행한다. 즉.. Client Language/JavaScript 2023. 11. 20.

Backend 개발자를 위한 React 기초 정리 서론 대부분의 백엔드 개발자들은 javascript와 jquery만을 사용해서 충분히 웹 사이트를 만들 수 있다. 때문에 시간이 생기면 새로운 infrastructure(인프라) 관련 cloud service를 비롯해 database의 효율적인 관리 및 서비스에 알맞은 database를 찾기 위한 RDBS, NoSQL 학습, 보안 기술이나 성능 최적화에 대한 학습을 진행한다. Backend 개발자가 Front를 개발할 때는 자주 사용하는 Framework(Spring에는 Thymeleaf, Laravel에는 Blade)에서 제공하는 View Template Engine들이 존재하기 때문에 사실상 FrontEnd에서 React가 무슨 이유로 각광받고 있는 건지 학습하려 하지 않는다. 할 이유도 없다고 생각.. Client Language/React.js 2023. 11. 20.

[Next.js 탐험기] 6. Next.js + 티스토리 API 블로그 만들기 - fetch API및 useState, useEffect를 사용하여 데이터 추가하기 서론 전 포스팅 까지는 src 폴더 밑에 data 폴더를 만들어서 사용했지만, 알고보니 next.js에서는 public 폴더 밑에 데이터를 fetch()로 쉽게 가져올 수 있을 뿐더러, require()를 사용한 파일 데이터 사용에 대해 권장하지 않는다는 것을 이제 알게되었다. 때문에 본 포스팅을 따라하고 있다면, 티스토리 OPEN API를 사용하여 json 형식의 데이터 파일을 만드는 장소를 next.js 프로젝트의 public으로 바꾸어 진행하자. 클라이언트 사이드에서 fetch를 사용한 json 데이터 읽어오기 클라이언트 사이드에서 JSON 파일을 불러오려면, 파일을 public 폴더에 저장하고 fetch API를 사용하여 요청할 수 있다. 이 방법은 클라이언트 사이드에서만 실행되며, 페이지가 로드.. Framework/Next.js 2023. 11. 17.

[Next.js 탐험기] 5. Next.js + 티스토리 API 블로그 만들기 - 카테고리 페이지 만들기 서론 전 포스팅에 이어서 카테고리 페이지를 완성하겠다. 카테고리 페이지에서는 각 categoryId에 해당하는 글 목록을 보기 좋게 목록화 하여 표현해줄 것이다. 데이터 읽어오기 전 포스팅에서 언급한 것과 같이, next 13 버전에서는 getStaticProps같은 함수들을 지원하지 않는다. Data Fetching이 궁금하다면 공식문서를 참고하도록 한다. 여기서는 비동기 통신을 하는 것이 아니므로 getData 함수나 json파일을 변환해줄 필요없이 가져오기만 하면 된다. useSearchParams()을 통해 얻은 params는 get() 함수를 통해 필요한 파라미터를 선택하여 값을 받아올 수 있었고, 여기서는 categoryId 값을 받아 해당 위치에 존재하는 카테고리의 게시글 데이터를 가져온다... Framework/Next.js 2023. 11. 16.

[Next.js 탐험기] 4. Next.js + 티스토리 API 블로그 만들기 - app router 에서의 동적 라우팅 및 파라미터 사용법 서론 Pages Router에서는 next/router로부터 useRouter를 가져와서 사용했지만, App Router에서는 next/navigation으로부터 useRouter를 가져와야 한다. 또한 기존의 useRouter에서 제공하는 기능들 중 라우팅과 관련된 기능들만 담당한다. pathname, query와 관련된 기능은 next/navigation의 usePathname, useSearchParams로 분리되었는데, 사용법은 차차 탐구하기로 한다. 본 포스팅에서는 필요한 url을 얻어 사용할 것이다. 폴더구조 폴더구조는 아래와 같다. 본 프로젝트에서 사용하는 티스토리 블로그 카테고리는 서브카테고리까지 포함하여 2개의 카테고리까지만을 제공한다. 때문에 2 Depth 형식의 변화무쌍한 URI를 받.. Framework/Next.js 2023. 11. 15.

[Next.js 탐험기] 3. Next.js + 티스토리 API 블로그 만들기 - SideBar 구현 서론 이번 포스팅을 포함한 앞으로의 Next.js 탐험기 시리즈에서 Tistory OpenAPI와 PHP를 이용해 생성한 JSON 형식 데이터를 다룰 예정이다. 이 데이터는 Next.js 탐험기 프로젝트에 중요한 부분이므로, 관심 있는 사람들은 아래 연관 포스팅을 참조해 자신의 프로젝트에 적용해 볼 수 있다. 구체적으로, 자신의 티스토리 데이터를 src/app/data/ 디렉토리에 JSON 형식으로 변환하여 저장하는 방법을 설명할 것이다. 티스토리 OPEN API 사용해서 블로그 데이터 추출하기 서론 Nest.js를 사용해서 블로그 만드는 토이 프로젝트를 시작하면서, 실제 데이터를 쌓거나 가져올 스토리지 개념의 저장소가 필요했다. 다른 Next.js 개발자 분들은 Notion을 스토리지 개념으로 많 mi.. Framework/Next.js 2023. 11. 14.

티스토리 OPEN API 사용해서 블로그 데이터 추출하기 서론 Nest.js를 사용해서 블로그 만드는 토이 프로젝트를 시작하면서, 실제 데이터를 쌓거나 가져올 스토리지 개념의 저장소가 필요했다. 다른 Next.js 개발자 분들은 Notion을 스토리지 개념으로 많이 사용하였는데, 나는 티스토리에서 제공하는 OPEN API를 사용해서 현재 운영중인 이 블로그의 카테고리 및 포스팅 데이터를 사용하기 위해 자주 사용했던 Laravel 프레임워크를 사용하여 추출용 프로그램을 만들기로 했다. 티스토리 OPEN API 문서 문서를 보면서 느낀점은 성공했을 때의 응답 형태는 명시가 되어있는데 실패했을 때의 응답 형태는 빠진 것들이 많이 있었다. 문제는 되지 않을거라고 생각했지만 개발 진행중에 "글 읽기" API의 응답이 원하는 형태로 오지 않아 당황했었다. 소개 · Git.. Framework/Laravel 2023. 11. 10.

이전 1 2 3 4 5 6 7 8 ··· 21 다음

티스토리툴바