홍가의 코딩공부

Supabase | The Postgres Development Platform.Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.com Google OAuth Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com 프로젝트 생성 메뉴에서 API및 서비스 - 사용자 인증 정보 - 클라이언트 ID 추가 생성이름 설정 후 승인된 리디렉션 URI 추가 작업. https://supabase.com/ 로그인 후 대..

공부/개발 공부 2026. 5. 28. 13:36

Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해 보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com접속 후앱 생성 하기. -> 생성 된 앱 클릭 후 필요한 내용 가져다가 사용하기. .env에 추가 ?? 안보이는 상황. -> 다시 생성된 앱에 접속하여 플랫폼 키 -> JavaScript키 추가 -> SDK도메인 추가 - 생성된 내용은 .env에 입력 후 사용 그래도 나오지 않는다면 개발자도구 window(F12) mac(Option+command+I)를 켜서 console을 확인 하시고 조치를 취하시기를,,저는 Response was blocked by CORB (Cross-Origin Re..

공부/개발 공부 2026. 5. 22. 11:30

Supabase | The Postgres Development Platform.Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.com 접속 후 체크 표시 클릭 프로젝트 생성 (알맞게 설정 후) 초록 버튼 클릭 -> 비밀번호 설정 후 프로젝트 생성 확인. -> Copy라고 된 버튼 클릭하면 Project URL, Publishable Key 등등 있습니다. 이거 .env에 넣어서 사용하시면 됩니다.project URL은 메인 대시보드 copy 버..

공부/개발 공부 2026. 5. 20. 14:12

Supabase가 뭔가요?Supabase는 2020년에 등장한 오픈소스 백엔드 플랫폼입니다. 한 줄로 표현하면 "Firebase의 오픈소스 대체제" 인데, Firebase와 결정적으로 다른 점이 하나 있습니다. 바로 내부 엔진이 PostgreSQL이라는 것입니다.데이터베이스, 인증, 파일 스토리지, 실시간 기능, 서버리스 함수까지 — 백엔드에 필요한 것들을 하나의 플랫폼에 묶어서 제공합니다. 덕분에 프론트엔드 개발자도 별도의 백엔드 서버 없이 풀스택 앱을 만들 수 있습니다. Supabase의 핵심 기능 4가지① Database — PostgreSQL 완전 지원. 자동으로 REST API와 GraphQL API까지 생성해줍니다. 테이블만 만들면 별도 API 서버 없이 데이터를 바로 읽고 쓸 수 있습니다.②..

공부/개발 공부 2026. 5. 14. 11:30

터미널(cmd, PowerShell)에서 git --version을 입력 설치가 안되어 있으면 아래 그림처럼 나옴. 깃 설치 Git git-scm.com운영체제(Windows/Mac)에 맞는 설치 파일을 다운로드하고 설치합니다. (설치 중 나오는 옵션은 모두 기본값인 상태로 'Next'를 눌러 설치해도 무방합니다.) 설치 중. -> 설치 완료 시 VScode 닫고 재실행 후 -> git --version 입력 내용 확인되면 git 설치 된 것. window : Ctrl + Shift + P / mac : Cmd + Shift + P -> Git: clone allow 후 git clone 과정을 거치면 이렇게 레포지토리 내용이 확인 가능 레포지토리 클릭하면 어디에 저장할 지 선택하라고 나옵니다. 저장 폴..

깃허브 사용법 2026. 5. 13. 14:24

안녕하세요 😊요즘 프론트엔드 개발 흐름이 정말 빠르게 바뀌고 있습니다. 단순히 화면을 만드는 것을 넘어서, 성능·사용자 경험·개발 생산성까지 모두 고려해야 하는 시대가 되었죠.그래서 오늘은 2026년 기준으로 꼭 알아야 할 프론트엔드 핵심 트렌드 3가지를 정리해봤습니다.1. AI가 프론트엔드 개발을 바꾸고 있다이제 AI는 선택이 아니라 필수입니다.코드 자동 생성, UI 초안 제작, 테스트 코드 작성까지 AI가 도와주고 있어요.예를 들어,반복적인 컴포넌트 생성API 연동 코드 작성에러 디버깅이런 작업들이 훨씬 빨라졌습니다.중요한 건 “AI를 얼마나 잘 활용하느냐”가 개발자의 경쟁력이 되고 있다는 점이에요.앞으로는 단순 구현 능력보다 문제 해결 능력 + AI 활용 능력이 더 중요해질 가능성이 큽니다.2. ..

카테고리 없음 2026. 5. 6. 15:59

안녕하세요 홍 가 입니다. 오늘은 리액트 CRUD를 이용하여 게시판을 만들어 봤습니다. 자세한 코드는 시리즈 | React + Node + Mysql CRUD 게시판 만들기 - Hongga.log 면접을 보면서 느낀게 front를 해도 서버와 데이터베이스 쪽도 어느정도 알아야겠구나를 느꼇으며 CRUD를 사용한 프로젝트를 만들고 싶어 게시판을 선택했습니다. 파일 및 DB생성, 서버연결 레이 velog.io 우선 CRUD를 사용하려면 2개의 폴더가 필요합니다. 한 번에 2개 폴더 지정해서 사용하세요 저는 하다가 맨날 바꿔가지고 항상 깃허브작업을 2번 씩합니다... 한 번에 2개 폴더 만드셔서 깃허브에 연결해서 사용하세요. 두 번 일 안합니다. pagenation을 사용하여 내용을 10개씩 보여줍니다. 페이지..

프로젝트/Project (React) 2023. 11. 1. 10:00

안녕하세요 홍 가 입니다. 오늘은 쇼핑몰을 만들어보려고 합니다. 자세한 코드는 여기에 있습니다. 시리즈 | React 쇼핑몰 만들기 - Hongga.log 전에는 CRUD를 만들어 봤으며 요번에는 쇼핑몰을 제작해보려고 합니다. 저는 front기본은 게시판과 쇼핑몰이라고 생각을 합니다. 기초 파일 생성 및 레이아웃 설정 메인 페이지 틀 잡기 제품 클릭 velog.io 우선 기본 틀은 이렇게 구성이 되었고요 가상 데이터를 받아와서 페이지를 제작했습니다. 라이브러리는 axios, react-router-dom, redux, styled-components를 다운받아 사용했습니다. 처음에 보여지는 부분입니다. 장바구니 부분입니다. redux를 사용해서 제작했습니다. HOME부분에 있는 상품 클릭시 상세페이지로 ..

프로젝트/Project (React) 2023. 10. 31. 16:06