분류 전체보기

[React]Supabase를 사용한 Todo앱 빌드하기

정말 오랜 시간끝에 포스팅을 하게되었습니다. 사실 요즘들어서 크게 포스팅할 일이 없어서 글을 쓰지 않았지만 이번에는 Firebase를 대체할 수 있는 것이 있다기에 Supabase 포스팅을 하고자 합니다. 이번 시간에서는 Supabase를 사용해서 ReactTodo 앱을 구축해보겠습니다. 먼저 시작하기전에는 React와 Next.js에 대한 사전적인 지식이 필요합니다. 우리가 구축해볼 앱은 위와 같은 Todo 앱형식의 서비스를 구축해보려 합니다. 다음은 위 서비스에 필요한 필수 사항입니다. React.js Next.js Supabase Chakra UI Vercel 1. Supabase 테이블, 인증 및 스토리지 구성 위 서비스를 구성하기전 먼저 Supabase를 사용해 기능을 구현해보는 시간을 가져보겠..

[Supabase] What is Supabase

기능이 풍부한 백엔드 제품군인 Supabase Supabase란 백엔드 서비스로 관리할 수 있는 백엔드 기능 세트라고 할 수 있다. 기능 세트란 "Google Cloud Platform"을 기반 으로 하는 Goggle제품인 Firebase와 매우 유사한 서비스로써 백엔드 환경에서도 실행할 수 있다. Firebase의 대안책이 될 수 있는 Supabase Supabase와 Firebase 둘 모두 핵심 기능이 많이 교차되는 부분이 있으며 Supabase는 Firebase의 대안으로 간주될 수도 있다. Supabase에서 제공되는 기능은 다음과 같은데 인증 관리 영구 저장용 데이터베이스 이미지, 비디오 또는 문서와 같은 파일을 위한 자산 저장소 서버리스 기능 등등이 있는데 보시다시피 가장 중요한 기능은 Su..

[Go] GO를 이용해 HTTP Server 만들기

Go를 이용해 HTTP 서버를 만드는 법을 포스팅하고자 합니다. 1.Go HTTP Sever 만들기 http 패키지는 HTTP 클라이언트 및 서버를 구현할때 사용되는 패키지 입니다. HTTP 서버를 만들기 위한 4가지 방법이 있는데 No request Parsing Manual request Parsing Multiplexer Global multiplexer 이 4가지 중에서 Multiplexer(멀티플렉서)를 사용하는가 안하는가에 따라 두가지로 나뉩니다. 1.No request parsing 가장 기본적인 구성 방법입니다. 어떠한 요청이 와도 동일한 응답을 처리해주는 서버입니다. package main import ( "fmt" "net/http" ) type database map[string]st..

[React] StroyBook 도입기

Storybook 이란 ? Storybook은 React에서 컴포넌트 단위의 UI 개발 환경을 지원하는 도구로써 Storybook을 사용하면 실제 웹 어플리케이션의 환경과는 별개로 컴포넌트 UI 개발 진행이 가능합니다. 스토리북(Storybook)의 기본 구성 단위는 스토리(Story)이며 하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 됩니다. 각 Story는 해당 UI 컴포넌트가 어떻게 사용될 수 있는지를 보여주는 하나의 예시라고 생각하시면 됩니다. Storybook을 React에 적용하는법 먼저 CRA(Create React App)를 이용해서 프로젝트를 하나 생성해주어야 합니다. 우선 웹팩 환경을 구성하지 않고 Storybook을 적용하는 방법입니다. 타입스크립트 기반의 프로젝트를 생..

[NestJs] NestJs란?

NestJS 란? Nest JS는 자바스크립트 모듈인 Node(노드)의 Express와 같은 서버 프레임워크중 하나입니다. 그러나 express는 쉽게 서버를 만들 수 있는 반면에, 시스템 디자인 측면에서는 지원되는 항목이 거의 없습니다. 따라서 Nest JS는 nodejs의 서버 측 어플리케이션을 구축하기 위해서 제작된 프레임 워크로 Typescript기반의 OOP(Object Oriented Programming), FP(Functional Programming) FPR(Functional Reactive Programming)을 지원합니다. 다양한 디자인 패턴들이 적용되어 있고, 그 패턴에 맞도록 서버를 구성해줘야 합니다. typescript를 네이티브로 지원하고 데코레이터 클래스를 통해 다양한 기..

[BackEnd] 백엔드란? 백엔드의 공부 순서 정리

RoadMap 인터넷 인터넷이 작동하는 원리 인터넷은 어떻게 동작하는가? - Web 개발 학습하기 | MDN 이 글에서는 인터넷의 개념과 작동 원리에 대해 설명합니다. developer.mozilla.org [IT 기술] 인터넷의 작동원리 인터넷의 작동원리 안녕하세요. 개발자 개발 까마귀입니다. 오늘 알려드릴거는 인터넷의 작동원리에 대해서 알려드리겠습니다. 1. 인터넷이란? 여러분들이 편하게 쓰는 인터넷은 사실 오랜 역 development-crow.tistory.com HTTP란 무엇인가? 웹개념_HTTP통신 0. 웹 통신 1) 웹 통신 & Protocol 인터넷 상에서의 통신을 말함 많은 정보들이 주고 받기에 인터넷에 엄격한 규약이 존재함. 이것을 Protocol 이라 말함 2) 웹 Protocol ..

[CSS,JS] CSS 노트 원고지 만들기

HTML과 CSS JS만을 이용해 노트 원고지를 만들어 보겠습니다. 1.노트 만들기 HTML 코드 이별은 공평하지 않다. 한 사람이 가볍게 생각한 마음을 다른 사람은 선물처럼 끌어 안고 있다. 어떻게든 추억이라는 말로 포장하려고 해도, 세상에서 단 하나밖에 없던 이야기는 또 하나의 흔해 빠진 사랑얘기가 될 뿐이다. 목매달고 애원했던 것들도 세월이 지나면 뭐 그리 대단한 것도 아니다 끊어지고 이어지고 끊어지는 것이 인연인가보다 그 누구도 살아서는 이 세상을 빠져 나갈 수 없다. 따라서 바로 지금 이 순간이 우리가 살고, 보살피고, 나누고, 축하하고 그리고 사랑해야 할 시간이다. 기회는 신선한 음식같은거야. 냉장고에 넣어두면 맛이 떨어져. 젊은이에게 제일 나쁜건 아예 판단을 내리지 않는거야. 우리가 보낸 하..

[Node.js] Node.js로 디스코드 봇 만들기

Node.js를 사용해서 디스코드 봇을 제작하는 방법을 알아보겠습니다. 노드JS 이외에도 파이썬, 자바 ,Go 등 다양한 언어로 제작할 수 있으나, 현 시점에서는 Node.js를 기준으로 설명드리겠습니다. 디스코드 봇을 만들기 위해 서버를 돌려줄 기기 혹은 서비스가 필요합니다. 개인 PC로도 충분히 되지만, 24시간으로 돌릴 서비스에 windows10을 사용하는 것은 추천하지 않고, 개인 PC를 사용하는 것도 더더욱 추천하지 않습니다. GitHub - marshallku/Discord-IU-Bot: IU Bot for Discord IU Bot for Discord. Contribute to marshallku/Discord-IU-Bot development by creating an account on..

[C] C언어란 ?

C언어란 무엇인가? C 언어는 프로그래밍 언어중 하나로, 1972에 벨 연구소에서 'UNIX'를 구현하기 위해 데니스 리치(Denis Ritchie)가 만들어낸 시스템 기술용 언어입니다. 원래의 명칭은 그냥 'C'로 뜻하지만 한국에서는 'C언어'라는 명칭으로 자주 부르는 언어입니다. 세계적으로 가장 많이 사용하는 프로그래밍 언어중 하나이며 당시에는 UNIX에 'assembly(어셈블리)' 언어로 만들어졌는데, 하드웨어 의존도가 높은 탓에 컴퓨터 기종마다 프로그램을 다시 작성해야하는 호환성 문제가 발생해 기종 간에 호환성 문제를 해결하기 위해 high level(하이그 레벨)이면서 assembly 만큼의 하드웨어 제어가 가능한 언어가 필요했고, 그에 따라서 C언어가 탄생하게 되었습니다. C에 대한 설명 C..

[PHP] PHP 설치

PHP를 세팅하려면 먼저 Apache 서버가 세팅되어야 합니다. 아래 글을 참고해서 Apache 세팅후 설치하시길 바랍니다. [Apache] Windows 10 64bit 환경 Apach 설치 및 설정법 이전 시간에는 아파치의 정의를 알아보았습니다. 그럼 이번에는 아파치를 세팅하는 방법을 알아보는 시간을 가져보겠습니다. 1. 아파치(Apache) 2.4 설치파일 다운로드 Apache VS16 binaries and modules down koras02.tistory.com 자 그럼 이제 PHP를 세팅하는 방법을 알아보도록 하겠습니다. PHP For Windows: Binaries and sources Releases PHP 7.4 (7.4.28) Download source code [23.58MB] D..

[PHP] PHP 정의

들어가기전 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com ※ 이 문서는 위 사이트의 최종 문서를 기준으로 설명하고 있는 글입니다. 각 버전마다 차이점이 존재할 수 있습니다. PHP란 무엇인가? PHP(PHP: Hypertext Proccesser PHP: 하이퍼텍스트 프리프로세서)라는 프로그래밍의 일종입니다. 본래의 기능으로는 동적인 웹 페이지를 만들기 위해 설계되었으며 이를 구현하기 위해서 PHP로 작성된 코드를 HTML 소스 문서안에만 넣으면 PHP 기능이 있는 웹 서버에서 해당 코드를 인식하여 작성자가 원하는 웹 페이지를 생성할 수 있습니다. 웹 시스템(web System) 우리가 매일 사용하고 있는 인터넷에는..

[Apache] Windows 10 64bit 환경 Apach 설치 및 설정법

이전 시간에는 아파치의 정의를 알아보았습니다. 그럼 이번에는 아파치를 세팅하는 방법을 알아보는 시간을 가져보겠습니다. 1. 아파치(Apache) 2.4 설치파일 다운로드 Apache VS16 binaries and modules download www.apachelounge.com 먼저 아파치를 설치하기 위해 운형체제 환경에 따라 64bit인 경우 첫번쨰 압축파일을 32bit의 경우 두 번째 앞축파일을 설치해주세요. 사용환경을 알기 위해서는 제어판 -> 시스템으로 가서 시스템 종류를 확인해주세요 . 다운 받은 압축파일을 풀어주고 Apache24 폴더를 C:드라이브 경로로 이동해주세요 2. 아파치 (Apache) 설정 C 드라이브로 옮긴 Apache24/conf 경로에서 httpd.conf 파일을 메모장으..