개발기술

[React기반 Gatsby로 블로그 개발하기] Gatsby & GraphQL

왜 Gatsby React기반 프레임워크, Next.js가 1위, Gatsby가 2위 왜 1위인 Next.js안쓰고 Gatsby를 쓰는가? Next.js는 정적 사이트 생성기능도 있지만 주로 서버 사이드 렌더링을 위해 사용하는 프레임워크, 즉 서버와 통신을 해 요청을 받을때마다 동적으로 웹사이트를 생성 Gatsby는 서버없이 오로지 정적 사이트 생성을 위해 사용하는 프레임워크 => 블로그, 소개페이지, 포트폴리오 등에 많이 사용됨 블로그 개발이 목적이어서 Gatsby 사용 Gatsby & GraphQL Gatsby Gatsby는 React를 사용하는 `JAM Stack 기반 프레임워크` GraphQL 페이스북에서 개발한 쿼리 언어 각각의 엔드 포인트에서 고정된 데이터를 받을 수 있는 Rest API 그와..

[React기반 Gatsby로 블로그 개발하기] JAM Stack

JAM Stack JAM Stack이란, Javascript, API, MarkUp Stack의 약자로 자바스크립트와 API, HTML이나 CSS등을 칭하는 MarkUp으로 이루어진 웹 구성 방법 더 빠르고 안전하며 스케일링하기 쉬운 웹을 만들기 위해 디자인된 아키텍쳐 기존 웹사이트 방식은 대부분 서버에서 데이터 베이스 또는 CMS(Content Management System)로부터 추출한 데이터를 프론트엔드에 뿌려주는 방식 -> 복잡하다 JAM Stack은 기존 웹사이트 방식과 다르게 절차가 매우 간단 각종 마크업 요소와 다양한 API를 통해 만든 정적 웹사이트를 Pre-Render한 것을 CDN(Content Delivery Networ)을 통해 웹사이트를 열람할 수 있다 JAM Stack 장점 기..

[MERN Stack] 2. MERN Stack이란? (with MSA)

MERN Stack이란? M : MongoDB E : Express R : React N : Node.js MERN 스택은 위 네가지 요소를 사용하여 웹사이트를 개발하는 것을 말합니다 각 구성요소에 대해 간단히 설명해 보겠습니다 MongoDB MongoDB는 NoSQL 중 가장 많이 쓰이는 비관계형 데이터베이스 관리 시스템으로 자유 오픈소스 소프트웨어입니다 몽고DB는 Document DB로써 JSON과 닮은 형태의 데이터를 문서 형태로 한번에 저장하고, MQL(MongoDB query Language)를 이용해 데이터베이스에 접근합니다. *NoSQL이란, 비관계형 데이터베이스로 불리며, 관계형 데이터베이스 형태가 아닌 다른 형태로 데이터를 저장합니다. 테이블간의 분할이 없고, 데이터들을 구조 내에 모두 ..

[Docker] 1. Docker 설치

0. 작업관리자 > 성능에 들어가 가상화를 사용하고 있는지 확인합니다 1. https://docs.docker.com/desktop/windows/install/ 사이트에 들어가 도커를 설치에 줍니다 2. 설정은 모두 디폴트로 하고 도커 설치 진행합니다 3. 설치가 완료되면 데스크탑 Restart를 진행하게 되고 다음과 같은 화면이 뜹니다 현재는 아무런 설정이 되어있지 않아 작동이 되고있지 않은 상태입니다 4. 시간이 지나면 다음과 같은 alert창이 뜨는데 화면에 보이는 링크에 들어갑니다 취소를 누르신 분들은 https://docs.microsoft.com/ko-kr/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package..

[Vue] Apple Sign in with JS (1) - Apple developer setting

애플 로그인은 처음이라 기록을 남깁니다! 생각보다 IOS앱 심사가 까다롭다는걸 이번으로 처음 알게되었습니다 ㅠ ㅠ 1. Apple Developer에 접속 후 로그인한다 2. Account > 인증서, ID 및 프로필 접속 3. App IDs 생성 (Idenrifiers옆에 + 클릭) 4. App IDs 생성시 화면 5. Continue 눌르면 Register an App ID가 나오는데 Description에 App ID를 설명하는 문자(영어 대소문자만 가능)를 넣고 Bundle ID에는 해당 앱의 도메인을 반대로 적은 것 + 앱 이름을 적어줍니다 예시로 쓴 com.test.testApp은 도메인이 test.com이고 appname이 testApp인것으로 생각하여 적었습니다 Explicit와 Wildc..

[Git PUSH 자동화(3)] 크론탭을 이용한 Git PUSH 자동화

드디어! 매일 파일이 하나씩 자동 생성되어 github에 commit, push하는 sh파일을 만들고 crontab으로 스케줄링을 걸것입니다. 실습해보실 분들은 제가 앞에서 포스팅한 글을 참고해 EC2의 ubuntu를 이용하는 방법부터 보시면 됩니다 :) [Git PUSH 자동화(1)] AWS - EC2시작하기 [Git PUSH 자동화] AWS - EC2시작하기 여행을 가게 되면서 git 잔디를 심지 못하는 것이 아쉬워서 여행갈 동안에만 자동으로 잔디를 심을 수 있도록하려 합니다..! AWS부터 시작 EC2란? Elastic Compute Cloud의 줄임말로, 컴퓨터를 통째로 빌 ssafy-story.tistory.com [Git PUSH 자동화(2)] EC2에 PuTTY로 SSH 접속하기 [Git P..