WEB

✨ 들어가기 앞선 포스팅에서 PWA 기술에 대해 살펴보았다. 해당 기술에 대한 장점을 살려 지속적인 사용자 유입을 위해 Pic.me 서비스에 도입을 하게 되었다. 사실 chrome으로 구현하는 것은 이미 PWA에 대한 API가 대부분 제한되어 있지 않기에 단순히 service-worker를 등록해주기만 하면 구현이 가능했다. 하지만, 나 역시도 그렇고 대부분의 사람들이 아이폰을 사용하고 있었기에 우리는 safari 환경에서 이를 구현할 수 있게 만들어야 했다. 하지만 Push 알림에 대한 제한사항이 많아서 어려움을 겪었고, 해당 과정에서 알게 된 Safari + PWA 과정을 포스팅 해보고자 한다. ✅ Push 알림 구조 우선 Push 알림 구조에 대해 파악해보자. 클라이언트가 데이터를 요청하지 않아도 ..

✨ 들어가기 리액트로 Pic.me를 개발하면서 가로 & 세로 무한스크롤을 개발해야 하는 뷰가 생성되었다. 리액트에서 무한 스크롤을 구현하는 방법은 2가지가 있다. scroll event를 감지 Intersection Observer API 라이브러리 사용 우선 직접 scroll event를 감지하는 것은 해당 이벤트가 발생할 때마다 scrollHeight와 scrollTop + offsetHeight를 비교하면서 페이지의 끝에 도달했는지를 계산해야 한다. 하지만, 말에서도 알 수 있듯이 scroll 이벤트가 발생할 때마다 와 같은 과한 이벤트는 성능저하를 야기할 가능성이 높다. 때문에 나는 Intersection Observer API 를 통해 무한스크롤을 구현하기로 했다. 더불어 이를 활용한 라이브러리..

✨ 들어가기 우선 PWA는 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱이다. 그래서 기존의 웹 앱과는 달리 네이티브 앱과 유사한 기능들을 제공 받을 수 있다는 것이 장점이며, PWA를 통해 사용자는 앱의 다운로드나 업데이트 필요없이 웹 브라우저로 앱을 바로 사용할 수 있게 되었다. 하지만, 여태까지는 안드로이드와 Chromium기반 브라우저에서만 거의 모든 기능을 제공하고 있었으며, Safari는 폐쇄적인 모습을 보이고 있었다. 그래서 웹을 개발할 때, Safari 브라우저에서만 지원하지 않는 API들이 많이 존재하고 있었다. 그러나 macOS, iOS, iPadOS 유저들의 점유율이 빠른 속도로 증가하면서 애플은 드디어 Web Push를 지원(Meet Web Push for Saf..

PWA를 배우기 앞서 Native Application, WebApp, Hybrid-App, Cross Platfrom 에 대해 학습해보자. ✅ Native Application 가장 기본적인 형태의 앱이다 === 모바일 기기에 최적화된 네이티브 언어로 개발된 앱 👉 해당 스마트폰에 깔린 OS, 안드로이드 또는 iOS 환경 전용으로 개발된 소프트웨어이다. Android 모바일 앱 개발의 경우는 Kotlin 또는 Java iOS의 경우 Swift 또는 Objective C 덕분에 앱의 실행 속도가 빠르고 유용한 API의 지원도 받을 수 있다. 반면 ‼️다른 운영체제 ‼️에서도 실행되기 위해서는 시간도 노력도 돈도 많이 드는 단점이 있다. 장점 단점 사용자에게 가장 빠르고 안정적이며 반응이 빠른 환경을 제공..

결론부터 말하자면...! 자바스크립트는 멀티-패러다임 언어로 명령형, 함수형, Prototype 기반의 객체 지향 언어이다. 자바스크립트를 이루고 있는 거의 모든 것이 객체이며, 자바스크립트가 클래스가 없어서 객체지향이 아니라고 생각하겠지만 프로토타입 기반의 객체지향 언어임을 주의하자! ✨ 자바스크립트에서 객체 생성 방법 객체 리터럴 Object( ) 생성자 생성자 함수 총 3가지이다. const object1 = {}; object1.name = "서히"; const object2 = new Object(); object2.name = "지수"; function ObjectFunction(name) { // 👇 프로퍼티 this.name = name; } const object3 = new Object..

그동안 여러 번의 웹 프로젝트를 진행하면서 yarn install을 진행하는 시간, yarn start로 프로그램이 실행되기까지 시간이 꽤 걸린다는 것을 체감하였다. 왜 이렇게 오래 걸리는 걸까..? 라는 생각을 하며 node_modules 폴더 구조를 이해하고자 했다. NPM...? NPM은 Node Package Manager의 줄임말로 Node.js 설치 시에 자동으로 설치되는 기본 패키지 관리자이다. npm은 파일 시스템을 이용해 의존성을 관리하고, 누구나 온라인 플랫폼인 npm 레지스트리에 게시된 캐피지를 사용할 수 있도록 공유 공간을 만들어 준다. 더불어 이런 온라인 플랫폼과 상호작용하기 위해 명령 줄 인터페이스를 사용하면서 패키지 설치 및 제거가 가능하다. Yarn Yarn은 페이스북에서 개..

지난 10/26에 Next.js 13버전을 발표했다. 이 글을 통해 어떤 부분이 달라졌고, 내가 배포한 nori 에서 변경해야 할 부분을 먼저 점검해보고자 한다. 공식문서를 참고하였다. 👇 최신 버전을 다운로드 하고자 하면 아래의 명령을 수행하면 된다. npm i next@latest react@latest react-dom@latest eslint-config-next@latest ✨ app/ Directory (beta) Next.js에서 가장 사랑받는 기능 중 하나는 파일 시스템 라우터이다. 즉, 폴더 안에 파일을 옮겨놓기만 애플리케이션에서 즉시 경로를 생성할 수 있다. 위의 폴더 구조를 따르게 되면 https://www.with-nori.com/write, https://www.with-nori...

styled-components는 기본적으로 css-in-js 방식을 사용하고 있다. ✨ styled-components : CSS-in-JS CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법이 추세가 되고 있기에 styled-componets는 많이 사용되고 있다. 기존 방식(css, scss 등)의 단점 전역 관리 css 파일은 전역적으로 관리해야 한다. 다른 디렉토리에서 작업을 하더라도 해당 파일이 또 다른 디렉토리에 ..

프레임워크/라이브러리를 살펴 보기에 앞서 간단하게 SPA(Single Page Application)에 대해서 짚어보자. SPA Single Page Application 으로 모던 웹의 패러다임이다. 특징은 아래와 같다. 기본적으로 단일 페이지이다. 따라서 기존의 서버 사이드 렌더링에 비해 배포가 쉽고, 모바일 앱과 같은 UX를 제공한다. 기본적으로 모든 정적 리소스를 최초 한 번만 다운로드 받는다. 새 페이지 요청 시, 필요한 데이터만 전달 받아 페이지를 갱신한다. 필요한 부분만 갱신하므로 새로고침이 발생하지 않고 속도도 빠르다. 위의 장점과 더불어 처음에 다운로드 크기가 크므로 초기 속도는 느린 편이다. ✅ React vs Vue vs Angular vs Svelte React Vue Angular..

✨ 들어가기 NextAuth.js는 Next.js 애플리케이션을 위한 Social 로그인을 쉽게 관리할 수 있는 라이브러리입니다 . ✨ 설치하기 yarn add next-auth ✨ 폴더구조 세팅하기 └── .env └── 📁 pages ├── 📁 api │ └── 📁 auth │ └── [...nextauth].ts ├── _app.tsx └── _document.tsx ✨ 환경변수 설정하기 네이버, 카카오, 구글 로그인 총 3개의 소셜 로그인을 진행할 예정이므로 이에대한 개발자 등록을 진행한 뒤 각각에 해당하는 ID or Key / Secrect 을 환경변수로 설정해준다. NEXT_PUBLIC_KAKAO_API_KEY= NEXT_PUBLIC_KAKAO_JS_KEY= NEXT_PUBLIC_KAKAO_S..