코딩/React 63

ElectronJS 일렉트론 강좌 3편 SQLite3 sql.js

안녕하세요? 지난 시간에 이어 3편 진행토록 하겠습니다. 1편: https://cpro95.tistory.com/500 ElectronJS 일렉트론 강좌 1편 SQLite3 sql.js 안녕하세요? 오늘은 Electron 강좌를 시작해 볼까 합니다. ElectronJS는 웹상의 기술인 HTML, CSS, Javascript로 데스크톱 애플리케이션을 만들 수 있는 NodeJS 패키지인데요. HTML, CSS, Javascript로 작동되다.. cpro95.tistory.com 2편 : https://cpro95.tistory.com/185 최신버전으로 React + Typescript + Electron 개발하기 안녕하세요? 예전에는 React를 그냥 Javascipt로 개발했지만 최근에는 점점 더 Typ..

코딩/React 2021.09.23

ElectronJS 일렉트론 강좌 2편 SQLite3 sql.js

안녕하세요? 지난 시간에 이어 2편 진행토록 하겠습니다. 1편: https://cpro95.tistory.com/500 ElectronJS 일렉트론 강좌 1편 SQLite3 sql.js 안녕하세요? 오늘은 Electron 강좌를 시작해 볼까 합니다. ElectronJS는 웹상의 기술인 HTML, CSS, Javascript로 데스크톱 애플리케이션을 만들 수 있는 NodeJS 패키지인데요. HTML, CSS, Javascript로 작동되다.. cpro95.tistory.com 2편에서는 Electron 개발에 본격적으로 들어가 보도록 하겠습니다. 그러면 ElectronJS와 ReactJS Template가 필요한데요. 제가 예전에 올린 아래 글 보시면 최신 버전으로 ElectronJS와 ReactJS 설치..

코딩/React 2021.09.18

ElectronJS 일렉트론 강좌 1편 SQLite3 sql.js

안녕하세요? 오늘은 Electron 강좌를 시작해 볼까 합니다. ElectronJS는 웹상의 기술인 HTML, CSS, Javascript로 데스크톱 애플리케이션을 만들 수 있는 NodeJS 패키지인데요. HTML, CSS, Javascript로 작동되다 보니까 크로스 플랫폼 앱 제작에 있어 가장 좋습니다. 윈도, 맥, 리눅스 등 크로스 플랫폼 앱을 제작하려고 할 때 가장 많이 쓰이는 프레임웍이 Qt인데요. Qt로 GUI 만들다 보면 뭔가 어렵습니다. C++로 Class를 사용하다 보니 조금 어지러운데요. 그래서 최근에는 NodeJS를 이용한 GUI앱이 많이 나오고 있습니다. 초창기에는 NodeJS 진영에 Nw.js라는 패키지가 나왔는데, Node와 WebKit을 결합하여 HTML, CSS, Javasc..

코딩/React 2021.09.18

NextJS MongoDB 5편 SSR, SSG, ISG 예제

안녕하세요? 지난 시간에 이어 NextJS와 MongoDB를 이용한 유저 로그인 세션 구현하기 4편을 계속 이어 나가도록 하겠습니다. 1편 : https://cpro95.tistory.com/463 NextJS와 MongoDB로 유저 로그인 세션 구현하기 1편 안녕하세요? 오늘부터 새로운 NextJS 강좌를 시작해 볼까 합니다. 일반 ReactJS 앱이 아닌 최근 들어 ReactJS 프로트엔드에서 가장 각광받고 있는 NextJS를 이용할 예정인데요. NextJS는 Serverless 앱 구현에 cpro95.tistory.com 2편 : https://cpro95.tistory.com/465 NextJS와 MongoDB로 유저 로그인 세션 구현하기 2편 안녕하세요? 지난 시간에 이어 NextJS와 Mong..

코딩/React 2021.09.15

NextJS와 MongoDB 4편 Chakra-UI 적용하기

안녕하세요? 지난 시간에 이어 NextJS와 MongoDB를 이용한 유저 로그인 세션 구현하기 4편을 계속 이어 나가도록 하겠습니다. 1편 : https://cpro95.tistory.com/463 NextJS와 MongoDB로 유저 로그인 세션 구현하기 1편 안녕하세요? 오늘부터 새로운 NextJS 강좌를 시작해 볼까 합니다. 일반 ReactJS 앱이 아닌 최근 들어 ReactJS 프로트엔드에서 가장 각광받고 있는 NextJS를 이용할 예정인데요. NextJS는 Serverless 앱 구현에 cpro95.tistory.com 2편 : https://cpro95.tistory.com/465 NextJS와 MongoDB로 유저 로그인 세션 구현하기 2편 안녕하세요? 지난 시간에 이어 NextJS와 Mong..

코딩/React 2021.09.15

NextJS Data 가져오는 방법 (SSG, SSR, ISR)

목차 1. Static Site Generation (SSG) 란? 2. Server Side Rendering (SSR) 란? 3. 스켈레톤 앱 만들기 4. Client Side Rendering (CSR) 코드 4-1. CSR의 특징 5. Server Side Rendering (SSR) 코드 5-1. SSR의 특징 6. CSR과 SSR의 차이점 7. Static Site Generation (SSG) 코드 7-1. SSG의 특징 8. Incremental Static Regeneration (ISR) 코드 8-1. ISR의 특징 안녕하세요? 오늘은 NextJS의 주요 기능 중 하나인 Data Fetching에 대해 알아보겠습니다. 먼저, 오늘 우리가 알아볼 Data Fetching 종류에 대해 살펴..

코딩/React 2021.09.12

NextJS와 MongoDB로 유저 로그인 세션 구현하기 3편

안녕하세요? 지난 시간에 이어 NextJS와 MongoDB를 이용한 유저 로그인 세션 구현하기 3편을 계속 이어 나가도록 하겠습니다. 1편 : https://cpro95.tistory.com/463 NextJS와 MongoDB로 유저 로그인 세션 구현하기 1편 안녕하세요? 오늘부터 새로운 NextJS 강좌를 시작해 볼까 합니다. 일반 ReactJS 앱이 아닌 최근 들어 ReactJS 프로트엔드에서 가장 각광받고 있는 NextJS를 이용할 예정인데요. NextJS는 Serverless 앱 구현에 cpro95.tistory.com 2편 : https://cpro95.tistory.com/465 NextJS와 MongoDB로 유저 로그인 세션 구현하기 2편 안녕하세요? 지난 시간에 이어 NextJS와 Mong..

코딩/React 2021.09.05

NextJS와 MongoDB로 유저 로그인 세션 구현하기 2편

안녕하세요? 지난 시간에 이어 NextJS와 MongoDB를 이용한 유저 로그인 세션 구현하기 2편을 계속 이어 나가도록 하겠습니다. 1편: https://cpro95.tistory.com/463 NextJS와 MongoDB로 유저 로그인 세션 구현하기 1편 안녕하세요? 오늘부터 새로운 NextJS 강좌를 시작해 볼까 합니다. 일반 ReactJS 앱이 아닌 최근 들어 ReactJS 프로트엔드에서 가장 각광받고 있는 NextJS를 이용할 예정인데요. NextJS는 Serverless 앱 구현에 cpro95.tistory.com 이제 본격적으로 NextJS 소스 코드를 수정하기 전에 Next.js 버전을 10.0.3으로 다운예정입니다. 왜냐하면, 앞으로 쓰일 패키지가 아직 Next.js 11 버전을 지원하지..

코딩/React 2021.08.22

NextJS에서 환경변수 .env 사용하는 방법

NextJS는 기본적으로 환경 변수를 지원하고 있으며, 사용하기가 매우 쉽습니다. 환경 변수가 필요한 이유 환경 변수가 필요한 이유는 우리가 웹 애플리케이션을 만들 때 개발 모드(development mode)와 배포 모드(production mode)에 따라 다르게 코딩해야 하기 때문입니다. 보통 회사의 서버에는 개발 서버가 따로 있고 배포 서버가 따로 있습니다. 이럴 경우 다른 API Url 또는 비밀 키를 사용해야 할 경우가 있습니다. 예를 들어, 개발 중에는 development-api.company.com라는 Url을 사용하고, 라이브로 배포할 때는 api.company.com 을 사용해야 할 때입니다. 또 다른 예는 개발 및 테스트 중에 실제 결제 구현을 하지 않도록 테스트 API 키를 사용하..

코딩/React 2021.08.22

NextJS와 MongoDB로 유저 로그인 세션 구현하기 1편

안녕하세요? 오늘부터 새로운 NextJS 강좌를 시작해 볼까 합니다. 일반 ReactJS 앱이 아닌 최근 들어 ReactJS 프로트엔드에서 가장 각광받고 있는 NextJS를 이용할 예정인데요. NextJS는 Serverless 앱 구현에 있어 획기적인 기법을 제공해 줍니다. 예전에는 MongoDB를 이용할려면 NodeJS로 ExpressJS를 이용해 백엔드를 구현해야만 했었는데요. NextJS 등장 이후 프로트엔드에서 간단한 Severless 백엔드 작업이 가능해졌습니다. 그래서 이번 강좌에서는 NextJS와 MongoDB를 이용한 유저 로그인 세션을 구현해 볼까 합니다. MongoDB 가입 일단 Cloud DB가 있어야 하는데요. 이쪽 방면에서 가장 유명한 게 MongoDB입니다. MongoDB는 No..

코딩/React 2021.08.22