코딩/React 62

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

Github Token 깃헙 토큰 설정하기

안녕하세요? 개발자라면 누구나 사용하는 Github이 2021년 8월 13일 기준으로 더이상 패스워드 방식의 인증을 지원하지 않게 되었습니다. 아래 스크린샷을 보시면 무슨 상황인지 쉽게 이해 할 수 있습니다. 그러면 어떻게 해야 할까요? 바로 본인의 github token 을 만들어야 합니다. github token 만들기 먼저 github.com으로 로그인해서 오른쪽 위에 본인 아이콘을 클릭하면 맨 밑에서 두번째 Settings를 클릭합니다. 그러면 본인 계정의 Profile이 나오는데 이제 왼쪽 아래쪽에 Developer Settings를 클릭합니다. 그러면 다시 왼쪽 밑에 Personal access tokens 를 클릭합니다. 이제 본인 계정의 토큰 설정에 들어 왔습니다. 예전에 토큰을 만드셨다면..

코딩/React 2021.08.20