전체 글294

• 

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

• 

  WSL2에서 Docker로 띄운 Nginx 느림 현상 해결 방법 서론 Docker는 다양한 방면에서 사용된다. 각기 다른 언어 혹은 한 언어의 다양한 버전으로 구성된 여러 프로젝트를 빌드하는 데에도 Docker를 이용하여 빌드를 실행할 정도니 활용 방법은 무궁무진하다. 그중에서도 특히 많이 사용하는 방법이 로컬 개발 환경을 Docker를 활용해 구축하는 것이다. 나는 Docker를 사용해서 다양한 환경의 로컬 개발 환경 구성을 진행해왔다. 하지만 그것은 어디까지나 macOS에서 깔끔하게 동작했던 것이고, 협업하는 팀원의 Windows PC에서 동일한 환경을 구성했더니 페이지를 로드하는 데 적게는 5초에서 많게는 10초 이상 걸리는 현상이 발생했다. 도대체 문제가 무엇이었을까? WSL2와 Docker 볼륨 마운트 문제 윈도우에서 터미널 개발환경을 구성할 때 보통 WSL.. OS/Windows 2023. 11. 8.

• 

  WebView 구성의 IOS App 속도 개선 작업 서론 WebView로 구성된 IOS App의 처음 진입 및 페이지 이동간 속도 개선 작업을 진행하게 되었다. Native App 이라면 이런 저런 속도 개선 작업을 코드 단위에서 진행할 수 있겠지만, WebView로 구성된 IOS App의 경우 사실상 할 수 있는게 별로 없다. Web Source의 무거운 외부 종속 라이브러리 등을 첨삭하여 개선하는 방법이 가장 빠른 길이지만 그럼에도 불구하고 App에서도 개선할 수 있는 작업이 있을까 고민하게 되었다. 현재 앱 구성 파악 현재 본인의 앱 상태가 어떤지 파악해야 하는데, 나의 경우 App을 실행할 때 LaunchScreen 표시 이후 WebView 로딩까지 매끄럽지 않고 특히 Custom Loading Indicate (개발자가 임의로 만들어낸 로딩 지연.. Server Language/Swift 2023. 11. 8.

• 

  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.

• 

  Laravel Authentication Session Life Time 종료시 강제로 로그아웃 로그 쌓기 Laravel Auth Session을 통한 로그인,로그아웃 구현 라라벨에서는 사용자가 애플리케이션으로 인증하고 "로그인"할 수있는 Authentication(인증) 방법을 제공하기 때문에 손 쉽게 로그인 로그아웃 기능을 구현할 수 있다. 세션 스토리지와 쿠키를 사용하여 상태를 유지하는 session 가드와, 각 요청-request와 함께 전달되는 "API 토큰"을 사용하여 사용자를 인증하는 token 가드를 제공하는데, 최근 진행했던 프로젝트의 경우 다수의 사용자가 아닌 특정 사용자들이 이용하는 Contents Management System(이하 CMS)를 만드느라 session을 이용했다. Session은 Redis에 저장하였고 session life time은 180분으로 설정하여 사용자가 180.. Framework/Laravel 2023. 11. 8.

• 

  내가 만든 패키지를 packagist.org에서부터 설치해보자 패키지를 다운받아 설치하는것은 우리의 패키지 매니저가 다 알아서 해준다. PHP의 전용 패키지 매니저인 Composer를 사용해서 내가 만들어 올려놓은 패키지를 packagist.org에서부터 다운받아서 사용할 수 있다. 신규 프로젝트 생성하기 composer create-project laravel/laravel example-app 위 명령어처럼 우리는 composer 패키지 매니저를 통해서 손 쉽게 라라벨 프로젝트를 설치할 수 있다. composer가 설치되어 있지 않더라도 각각의 os에서 쉽게 라라벨 프로젝트를 생성하는 방법은 라라벨 공식 홈페이지에서 쉽게 찾을 수 있다. 패키지 설치하기 packagist.org의 우측 상단 자신의 닉네임을 클릭하여 My Packages를 클릭하면, 앞에서 배포하.. Server Language/PHP 2023. 11. 8.

• 

  내가 만든 패키지를 packagist.org에 올려보자 많은 PHP 개발자들은 composer 패키지 매니저를 사용해서 다른 사람들이 만든 라이브러리 혹은 패키지 등을 본인의 프로젝트에 주입하여 사용한다. 나도 다른 사람들이 만들어놓은 패키지를 많이 사용해왔지만, 스스로 패키지를 만들어 본 적은 없었기 때문에 한번 해봤다. 참고 : PHP 언어의 패키지매니저로 유명한 Composer로 다운받는 모든 외부 패키지는 packagist.org 사이트에서 운영 및 관리가 되고 있다. github webhook을 packagist와 연결하자 수 많은 개발자들이 하나의 프로젝트를 시작하면 제일 먼저 하는 소스 버전 및 형상 관리를 해주는 Git. 나는 GitHub으로 앞으로의 토이프로젝트를 진행하려고 한다. 때문에 새로운 github repository를 만들고 pus.. Server Language/PHP 2023. 11. 8.

• 

  [웹개발자의 IOS 탐방기] 7. UserDefaults를 사용한 로컬기기에 알림 권한설정 값 저장하기 서론 UserDefaults는 간단한 데이터, 설정, 환경설정 등을 로컬에 저장할 때 사용되는 인터페이스다. UserDefaults에 저장하는 데이터는 키-값(key-value) 쌍으로 관리된다. 예를 들어, 여러 곳에서 사용되는 UserDefaults의 키를 하드코딩하면 오타가 발생할 위험이 있고, 키 관리가 어려워질 수 있기 때문에 이를 방지하기 위해 UserDefaultsKeys를 사용하면 각 키에 대한 참조를 한 곳에서 관리할 수 있으며, 이후 코드에서는 이러한 참조를 재사용함으로써 안전성과 유지보수성을 높일 수 있다. 본 포스팅에서는 UserDefaultsKeys를 사용하여 디바이스 로컬 기기에 설정한 값들을 저장 및 불러와서 기계가 꺼져도 설정 내용이 변하지 않게 SettingView.Swfi.. Framework/SwiftUI 2023. 11. 8.

• 

  [웹개발자의 IOS 탐방기] 6. UserNotifications을 사용한 알림 설정 구현 서론 UserNotifications은 Swift에서 iOS와 macOS 운영 체제를 위한 로컬 및 원격 알림을 관리하고 처리하는 프레임워크로써, 이 프레임워크를 사용하면 앱이 백그라운드에서 실행되는 동안이나 전혀 실행되지 않을 때도 사용자에게 알림을 보낼 수 있다. 우리는 이 UserNotifications을 활용하여 알림 설정을 구현할 것이다. NotificationManager.swift 파일 생성 아래 코드는 UserNotifications 프레임워크를 사용하여 알림 권한을 관리하고, 앱의 알림 설정 상태를 확인하는 역할을 하는 NotificationManager라는 클래스를 정의하고 있다. 코드의 각 부분을 단계별로 나누어 설명하자면 필요한 모듈을 가져오기: Foundation: 기본적인 시스템.. Framework/SwiftUI 2023. 11. 8.

• 

  [웹개발자의 IOS 탐방기] 5. ListView를 사용한 알림 화면 구현 서론 설정화면 우측 상단에 알림 아이콘을 넣고, 알림 아이콘을 클릭했을 때 알림 리스트들이 나오는 화면을 구현해보려 한다. 또한 각 아이템에 스와이프하여 삭제 기능까지 추가해보자. SettingView Hedaer 분리 기존 설정 화면에서 구현한 Header부분을 공용으로 사용하기 위해 HeaderView.Swift파일을 생성하여 공용 코드로 관리한다. 우측에 알림 아이콘을 넣어주고, 타이틀을 구분하기 위해 enum HeaderType을 지정해준다. 타입에 맞는 타이틀을 반환하는 함수도 함께 정의한다. enum HeaderType { case setting case notice } func headerTitle(for type: HeaderType) -> String { switch type { case.. Framework/SwiftUI 2023. 11. 8.

• 

  [웹개발자의 IOS 탐방기] 4. VStack HStack을사용하여설정창 UI 구현 서론 IOS의 NavigationView와 NavigationLink로 이동된 화면에서는 IOS 자체적으로 지원하는 뒤로가기 버튼이 표시된다. 하지만 우리는 좀 더 친숙한 UI를 구현하기 위해 뒤로 가기 버튼부터 시작하여 설정창에 필요한 기능들을 아래와 구현하려고 한다. SwiftUI에서 화면을 그릴때는 주로 VStack과 HStack을 사용한다. 오마주는 당근마켓 설정화면을 기준으로 하였다. VStack, HStack이란? VStack: 수직으로 뷰들을 쌓아 준다. 위에서 아래로 UI 요소들을 일렬로 배열하고 싶을 때 사용한다. HStack: 수평으로 뷰들을 쌓아 준다. 왼쪽에서 오른쪽으로 UI 요소들을 일렬로 배열하고 싶을 때 쓰면 된다. 간단하게 말하면, VStack은 세로로, HStack은 가로로.. Framework/SwiftUI 2023. 11. 8.

• 

  [웹개발자의 IOS 탐방기] 3. NavigationView 컨테이너뷰를 사용하여 설정창 띄우기 서론 NavigationView는 SwiftUI에서 네비게이션 기능을 제공하는 컨테이너 뷰로서, 주로 계층적 구조의 콘텐츠를 표시하거나 상세 정보를 보여줄 때 사용된다. 예를 들어, 목록에서 항목을 선택하면 해당 항목의 상세 정보 페이지로 이동하는 경우에 NavigationView와 함께 사용한다. 때문에 SwiftUI에서 제공하는 네비게이션 스택을 활용하여 화면 전환을 간편하게 구현할 수 있어서 NavigationView를 활용하여 설정창으로의 화면이동을 구현해보자. SettingView.swift 파일 생성 사용자 로그인/아웃 폼 부터 시작하여 푸쉬 알림 설정, 알림 내역 확인 등을 할 수 있는 Setting에 관련된 뷰 파일을 생성한다. 이 파일은 추후 목적에 맞게 디벨롭 해나갈 예정이다. // /.. Framework/SwiftUI 2023. 11. 8.