728x90

React 5

[PWA] Vite + React App PWA 배포하기

회사에서 개발한 Web App 하나가 있는데, 이 녀석을 모바일 버전으로도 구현해달라는 요구를 전달 받았다. 반응형 웹으로 만들면 될 것 같다고 생각하고 딱 그정도만 해놨는데 그러고나니 매번 브라우저로 들어가서 url을 치고 들어가는게 힘들다는 이야기가 있어서  결국 PWA 를 적용하기로 결정했다..  1. 굳이 PWA를 적용하게 된 이유 RN(React Native)로 뭐 모바일 앱도 하나 만들면 되지 않나요? 라고 할 수 있는데, 물론 내가 React로 SPA를 개발하는 사람이긴 하다만 RN을 사용해서 개발해본적은 없기도 하고, 시도하자니 너무 처음부터 또 App을 빌딩을 해야해서 솔직히 귀찮았던게 크다.  또 몇 년 전쯤 마침 Apple이 PWA의 지원을 확대하겠다고 WWDC에서 발표했던걸 알고 있..

Dev/MobileApp 2024.09.05

[React] Next.js VS Vite VS CRA

오늘은 React App을 생성하고 사용하는 세가지의 세계관을 이야기하려고 하는데, 뭐 정확히 어떤 용어를 써야할지 모르겠어서 난 세계관이라고 부른다. React App을 생성하는 방법은 다양하다. 뭐 지금 내가 언급할 이 세가지를 제외하고 더 있을 수도 있음. 근데 주로 이 세가지를 사용하게 된다.  1. 기본 소개첫번째는 CRA (Create React App) 이다. 전통적으로, 가장 기본적으로 React를 시작할 때 사용하게 되는데 진짜 우리가 알고 있는 가장 기본적인 Webpack이라는 번들러랑 Babel이라는 컴파일러등 으로 세팅되어있는 React App을 세팅해준다. React 자체가 SPA, CSR을 목적으로 나왔던 프레임워크이기 때문에 기본적으로 SPA, CSR에 큰 비중을 두고 있다. ..

Dev/React.js 2024.06.14

[React] 함수형 프로그래밍과 hooks

2023.04.20 - [Dev/JavaScript] - [JavaScript] Scope & Closure 저번 글에서 React의 컴포넌트 생명주기 이야기를 했었는데, 어찌 됐던 초창기 리액트의 클래스형 컴포넌트와 지금 많이 사용하고 있는 함수형 컴포넌트의 이야기를 안할 수가 없었다. 대부분 주변 개발입문자들의 경우 React를 처음 접하거나, Java를 통해 개발을 해왔던 사람들의 경우에 이 부분에서 이해를 어려워하는 것 같았는데, 이 이야기를 한번 이해하기 쉽도록 해보고자 한다. 1. React의 원래 이름? React Native 라는 것도 있지만, 웹프론트개발자가 주로 사용하게 되는 React의 원래 이름, 즉 React의 풀네임은 뭔가? React.Js다. 뒤에 Js가 붙어있는 것으로 봐선 ..

Dev/React.js 2023.05.02

[React] Component LifeCycle

마지막으로 React에 대해서 쓴게 "하기 전에 알아야한다." 라는 개념으로 쓴 건데 이번부턴 정말 React에 대한 이야기를 해볼까 한다. React가 처음 나왔을 때부터 도입하고 사용했던 사람들은 다 알겠지만, 그땐 함수형 컴포넌트가 아니었다. 기본적으로 Class 형 컴포넌트로 만들었다. 그 때 있었던 개념들이 있는데, 아 물론 지금도 존재한다. 뭐 Mount, UnMount 등등 이런 말들이다. lifeCycle은 Class 내부에 이 컴포넌트가 마운트 되면, 실행하는 함수, 언마운트 되기 전에 실행하는 함수 이런걸 정의해두고 마운트될때부터 언마운트 될때까지 그 과정들을 얘기하는 것인디.. 말이 좀 어렵다. 쉽게 한번 풀어서 설명해보자. 1. Mount? UnMount? 일단 이걸 이야기 하기 전..

Dev/React.js 2023.04.27

React를 시작하기 전에 (1)

React를 설명하려니 어디서부터 해야할지 감이 안 잡히지만... 일단 이 블로그는 내가 생각하고 이해하는대로 마구 작성해두는 일기와도 같다고 생각하고 작성해보겠다. React란? React 에 대해서 이야기 하기 전에 React가 왜 개발되어야만 했는지를 생각해봐야할 것 같다. 물론 아닌 학원도 있었겠지만 국비지원학원에서 공부한 사람들이라면 분명 서버와 클라이언트가 별개의 프로젝트로 구분되어있지 않았을 거고, 학원에서 가르쳐주는 MVC 패턴에 따라 구현하는 프로젝트를 해봤을거라고 생각한다. 그 때 html 파일이든 jsp파일이든 여러 개의 view 라고 부르는 페이지를 잔뜩 만들고 복사,붙여넣기 해서 주소에 따라 화면을 바꿔서 꺼내보여주는 형식의 웹사이트를 만든다. 그걸 Multi Page Applic..

Dev/React.js 2023.04.06
728x90