🤜 Next.js 14 Conf

December 21, 2023

Next.js의 최신 버전, Next.js 14의 출시는 프론트엔드 개발의 세계에 새로운 변화의 바람을 불러일으키고 있습니다. 이 업데이트는 개발 속도와 사용자 경험을 극적으로 개선하는 몇 가지 중요한 기능을 제공합니다. 이 글에서는 Next.js 14의 핵심 기능과 그것들이 웹 앱 개발에 어떤 영향을 미칠지에 대해 이야기 해보겠습니다. Next.js 1…

web

react

next.js

WebPush 적용하기

December 02, 2023

웹 푸시 기술과 PWA(Progressive Web Apps)의 조합은 모바일 사용자 경험을 혁신적으로 개선하는 방법 중 하나입니다. 특히 iOS 16.4 업데이트 이후 iOS에서 웹 푸시를 지원하기 시작하면서 이 기술이 더욱 주목받고 있습니다. 여기에는 PWA의 중요한 역할과 FCM(Firebase Cloud Messaging)을 활용한 구현 방법에 대…

pwa

webpush

PWA 적용하기

December 01, 2023

(이미지 출처 : https://www.mitrais.com/news-updates/pwa-the-advantages-and-basic-guide-to-apply/) PWA(Progressive Web Apps, 진보적 웹 앱)는 웹과 모바일 앱의 장점을 결합한 새로운 접근 방식으로, 최근 iOS 16.4 업데이트를 통해 iOS 장치에서도 웹 푸시 알림을…

pwa

webpush

Emotion VS Styled-Component

December 22, 2022

리엑트에서 많이 사용하는 CSS-in-JS의 종류중 하나인 Emotion과 Styled-Component에 대해 알아보겠습니다. 트렌드 https://npmtrends.com/@emotion/core-vs-@emotion/react-vs-styled-components emorion이 v10에서 v11이 되면서 에서 로 패키지명이 변경되었습니다. 트렌드…

emotion

styled-component

🌐 React Best Practice

November 24, 2022

대세 프론트 라이브러리인 리엑트로 개발을 하기에 앞서 가급적이면 꼭 지켜야할 부분을들 정리하였습니다. 습관적으로 아래 내용들은 반드시 숙지합시다! 함수형 컴포넌트와 훅을 사용 React 함수 컴포넌트와 훅은 클래스에 비해 더 간결하고 읽기 쉬운 코드를 생성하므로 더 자주 사용해야 합니다. 상태사용 피하기 React 애플리케이션을 빌드할 때 상태를 많이 사…

web

react

🍄 Angular Hybrid Rendering

October 27, 2022

이전 글에서 CSR, SSR, SSG에 대해 각각의 차이점에 대해서 다뤄 보았습니다. Angular, React, Vue에서 각각의 방식으로 이러한 렌더링 방식으로 구현을 할 수가 있는데요. 대표적으로 Angular는 Universal, React는 NextJs, Vue는 Nuxt 등을 많이 사용하는 것 같네요. Angular는 국내에서 인기가 많이 없어…

web

angular

rendering

🎨 개발자가 잘 모르는 HTML 태그

January 16, 2022

웹을 개발하다보면 익숙한 HTML 태그들만 사용하게 되고 그외 기능적인 부분들은 javascript나 css로 구현을 하게 되는데 (div, span anchor, header, list.. 등) 아주 유용하면서 개발자들이 잘 모르는 태그들을 한번 살펴보도록 하겠습니다. CSS ,JS로만 가능하다고 생각한 것을 이제 HTML로 심플하게 개발해 보세요. …

web

html

🔮 Server/Client Side Rendering

January 08, 2022

웹 어플리케이션의 렌더링 방식은 크게 서버와 클라이언트 렌더링 방식이 있습니다. 이 방식을 살펴보기에 앞서 과거 웹 사이트의 역사에 대해 간단하게 살펴보겠습니다. Static Site 1990년 중반까지는 대부분의 사이트가 static 사이트 였습니다. 서버에 이미 잘 만들어진 html문서들이 있고 사용자가 부라우저에서 주소에 접속하면 서버에 이미 배포되…

web

SSR

CSR

📗 Angular Google Analytics Traking

January 02, 2022

구글 분석을 사용하기 위해서는 추척아이디가 포함된 스크립트를 index.html 페이지에 삽입만 하면 되기 때문에 아주 간단하게 연동을 할 수 있습니다. 그러나 Angular와 같은 SPA방식은 단일페이지로 되어 있기 때문에 단순히 스크립트를 복사 붙여넣기 방식으로 만으로 우리가 원하는 분석데이터를 수집하기에는 아쉬움이 있습니다. 그럼 어떻게? Angul…

web

angular

google-analytics

🤠 Web Storage

April 11, 2021

Web Storage Web Storage는 HTML5에서 추가된 간단한 키와 값을 저장(key-value storage) 할 수 있는 저장소이다. 데이터의 지속성에 따라 영구저장소(LocalStorage)와 임시저장소(SessionStorage) 두가지를 지원한다. 그 동안 많이 사용해 왔던 쿠키와 거의 차이가 없어 보이지만 몇 가지 쿠키의 단점을 …

web