Framework54

• 

  [웹개발자의 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.

• 

  [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.

• 

  [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.

• 

  [Next.js 탐험기] 2. Next.js + 티스토리 API 블로그 만들기 - 초기 구조 설계 서론 블로그에서 가장 널리 쓰이는 레이아웃은 바로 좌측에 메뉴를 배치한 SideBar, 상단에 네비게이션을 담당하는 Header(NavBar), 중앙에 본문 콘텐츠가 위치하는 Page(Main), 그리고 하단에 Footer가 위치하는 구조입니다. 이러한 구조는 사용자에게 친숙하며, 웹 사이트의 정보를 직관적으로 탐색할 수 있도록 돕습니다. 이번 포스팅에서는 Next.js를 활용하여 이와 같은 구조를 오마주하여 간단히 구현하는 과정을 거쳐보겠습니다. 프로젝트 생성 및 초기 설정 먼저 Next.js 프로젝트를 생성한다. 초기 생성에 관련된 블로그 게시글은 아래 참고 2023.11.09 - [Next.js] - [Next.js 탐험기] 1부: 프론트엔드의 새로운 물결 - 장단점과 설치부터 실행까지 [Next... Framework/Next.js 2023. 11. 9.

• 

  [Next.js 탐험기] 1. 프론트엔드의 새로운 물결 - 장단점과 설치부터 실행까지 서론 웹 개발은 그 자체로 빠르게 변화하는 영역이다. 새로운 프레임워크와 라이브러리가 속속 등장하며, 개발자들은 이 중에서 최적의 도구를 선택해야 하는 과제에 직면하게 된다. 이번 포스팅에서는 최근 많은 주목을 받고 있는 Next.js에 대해 이야기해보고, 초기 프로젝트 구축을 해보려 한다. Next.js는 Vercel에 의해 만들어진 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(Static Site Generation, SSG), 그리고 최근에는 Incremental Static Regeneration(ISR) 같은 고급 기능을 제공한다. 프론트엔드와 백엔드의 경계가 점차 모호해지는 현재, 한쪽 영역에만 국한되어 개발하는 것이 시대에 뒤떨어진다는 생각이 들었다. 이에.. Framework/Next.js 2023. 11. 9.

• 

  Laravel 프레임웍에서 Controller를 Controller, Service, Repository 패턴으로 확장하기 Laravel 프임워크의 MVC 패턴 Laravel은 웹 애플리케이션의 개발을 위한 PHP 프레임워크로, MVC (Model-View-Controller) 패턴을 기반으로 설계되어있다. MVC는 소프트웨어 디자인 패턴 중 하나로, 애플리케이션 로직을 세 가지 주요 구성 요소로 분리하여 유지 보수성을 높이고, 확장성을 갖추며, 코드 재사용을 용이하게 한다. 때문에 Laravel의 MVC 패턴을 사용하면 애플리케이션의 로직과 사용자 인터페이스를 분리하여 관리할 수 있다. 이로 인해 코드의 가독성과 유지 보수성이 향상되며, 여러 개발자가 함께 작업할 때도 각 부분의 역할과 책임이 명확하게 구분되어 효율적인 협업이 가능해진다. Laravel 프레임워크의 Controller를 세분화 시켰을 때 장단점 사실 Con.. Framework/Laravel 2023. 11. 8.

• 

  Laravel 데이터 caching 처리 하기 많은 트래픽을 보유한 사이트에서 db에서 데이터를 읽어올때 cache 처리해서 읽어오는 이유가 뭘까? 많은 트래픽이 발생하는 사이트에서는 대량의 요청을 동시에 처리해야 한다. 이런 요청들이 모두 데이터베이스에서 직접 데이터를 읽게 되면, 데이터베이스에 엄청난 부하가 발생하게 되고, 부하가 지나치게 증가하면 성능 저하 또는 서비스 중단이 발생할 수 있다. 그래서 이런 문제를 해결하기 위해 캐시를 사용하는데, 캐시는 빠르게 접근 가능한 저장소로, 한 번 읽은 데이터를 임시로 저장해 두는 것이다. 이후 동일한 데이터를 요청할 경우, 데이터베이스에 다시 접근하는 것이 아니라 캐시에서 데이터를 가져옴으로써, 데이터베이스의 부하를 줄이고 응답 시간을 향상시킬 수 있는 것이다. 특히, 변경이 자주 일어나지 않는 데이.. Framework/Laravel 2023. 11. 8.