분류 전체보기

🌿 Supabase Database📎 Supabase Database DocsTable Editor데이터베이스에 있는 데이터를 살펴볼 수 있음insert, update, delete 기능 제공SQL Editor별도의 에디터 없이 브라우저 상에서 쿼리 실행 가능Assistant에게 질문할 수 있는 ai 기능 제공Database모든 DB 관련 설정Tables : 테이블 생성, 삭제, 컬럼 추가. Row Level Security(RLS) 기능 설정 가능Functions : DB 함수 정의Triggers, Enumerated, …Indexes : DB 인덱스 설정(최적화)Roles 관리Backups : 특정 시간마다 백업 / 정확한 어느 시점으로 돌릴 수 있는(비쌈)Migrations : 스키마가 어떤 상..

요즘 supabase가 자주 보여서 궁금증에 인프런 강의를 들어보았다.FirebaseBaaS: 서버 없이도 빠르게 앱을 출시할 수 있도록 나온 백엔드 플랫폼가입인증, 클라우드 호스팅, 실시간 데이터베이스, 파일 업로드 클라우드 저장소 등 제공앱기능 향상, 앱 성장을 위한 다양한 기능 제공장점다양한 서비스와 폭넓은 연동지원적용이 쉽고 문서화가 잘 되어있다.커뮤니티가 매우 성숙한 프로덕트앱, 웹에서 단순하게 사용할 수 있는 NoSQL 기반단점오픈소스가 아니다. (Vendor Lock-In)복잡한 쿼리 불가(NoSQL 기반)유저가 많아졌을 때 비용이 많이 든다.앱 개발에는 월등히 좋으나 웹 개발에 최적은 XSupabase오픈소스핵심 기능 4가지Database : PostgreSQL 기반 실시간 데이터베이스 제..

강의 들으면서 복습겸 적은거라 나중에 따로 정리를 다시 하던가 해야겠다.프로젝트 생성npx create-react-app [프로젝트명]프로젝트 실행npm start // http://localhost:3000HMR(Hot Module Replacement) : 코드 수정 시 화면에 바로 반영Component함수형 컴포넌트JSX(JavaScript XML) 스타일은 객체 형태로 전달해야 적용이 된다. 카멜케이스로 작성 중괄호({ }) 내부에서 변수 사용 가능재사용에 용이import Hello from "./component/Hello";function App() { const name = "Tom"; const naver = { name: "네이버", url: "https://naver..

스코프(Scope)란?MDN에서 정의하는 스코프스코프는 컨텍스트 내에서 값과 표현식이 "표현"되거나 참조 될 수 있는 현재 실행 컨텍스트(Execute Context)를 의미한다.만약 변수 또는 표현식이 "해당 스코프"내에 없으면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지며, 하위 스코프는 상위 스코프에 접근할 수 있지만 그 반대는 불가하다. 🌿 스코프의 기본 개념- 변수나 함수의 접근 가능한 범위를 의미한다.- 코드의 구조를 이해하는 데 중요한 역할을 하며, 변수의 생명 주기와 유효성을 결정한다.- 모든 변수와 함수는 선언 위치에 의해 스코프를 갖게 된다.// 전역 스코프let globalVar = "I'm global!";function outerFunction() { // 지역 ..

이전에 Git 블로그를 Netlify로 배포한 경험이 있다. Netlify는 Git 계정과 레포지토리를 간단하게 연결하면 자동으로 배포가 진행되는 방식이어서 매우 쉽게 설정할 수 있었다. 이번에는 Next.js 프로젝트를 진행하니 Vercel을 사용해 배포해 보고자 한다.Vercel은 Next.js의 공식 호스팅 플랫폼으로, Next.js 배포에 최적화된 성능을 제공한다. 또한 SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성)를 원활하게 지원한다. Vercel 배포 순서🌿 Import Git Repository회원가입 및 로그인 후 GitHub 계정과 연동하면 배포할 레파지토리를 선택할 수 있다.🌿 Confiture ProjectBuild Command를 설정할 수 있는데 기본값으로 그대로 사..

지금까지 리액트 프로젝트는 2번 정도 진행 했었는데 상태 관리 라이브러리를 적용해 본 경험이 없어서이번 프로젝트에서는 zustand를 활용하여 상태관리를 해보고자 한다. Zustand란?React 상태 관리 라이브러리hook를 기반으로 한 간결하고 직관적인 API를 제공하며, 전역 상태 관리를 간단하게 구현할 수 있게 해준다.Persist와 같이 사용하기Zustand의 미들웨어 중 하나로, 상태를 브라우저의 저장소에 저장할 수 있게 해준다. 이를 통해 페이지를 새로고침하거나 브라우저를 닫고 다시 열어도 상태가 유지되도록 할 수 있다. Zustand 설치npm install zustand src/store/authStore.ts 파일 생성zustand import인터페이스 정의 : 스토어의 상태와 액션 타..

자바스크립트 복습을 하던 중 클로저가 아직 헷갈려 다시 공부하며 정리해 보고자 한다.클로저를 공부하기 전 스코프에 대한 개념 정리 및 이해가 필요하다. 클로저(Closure)란?JS에서 중요한 개념이지만, JS 고유의 개념이 아닌 함수형 프로그래밍 언어에서도 사용되는 특성이다.MDN에서 정의하는 클로저 클로저란 함수와 함수가 선언된 어휘적 환경 (lexical environment)의 조합이다.즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공. JavaScript에서 클로저는 함수가 생성될 때마다 생성 🌿 클로저의 기본 개념- 함수와 그 함수가 선언된 렉시컬 환경의 조합으로, 내부 함수가 외부 함수의 변수에 접근할 수 있게 해 준다.- 함수가 자신의 외부 스코프에 있는 변수에 접근할 수..

사이드 프로젝트를 시작해 보려고 우선 Git에 레포지토리 및 프로젝트를 생성했습니다.이 프로젝트의 목적은 Next.js와 TypeScript를 공부하는 것입니다. React도 아직 기초에 불과하지만, 개발을 하면서 하나씩 알아가려 합니다.사이드 프로젝트 GitNext.js 프로젝트 생성npx create-next-app@latest [프로젝트명]cd [프로젝트명]npm run dev 우선 프로젝트가 실행되는 것을 확인했습니다.Next.js의 특징서버 사이드 렌더링(SSR) : 페이지 요청 시 서버에서 렌더링하여 사용자에게HTML 전달. SEO에 유리하고, 초기 로딩 속도가 빨라진다는 장점이 있다.파일 기반 라우팅 : pages 디렉토리 안에 파일을 생성함으로써 자동으로 라우팅을 설정할 수 있다. 각 파일..

호이스팅(Hoisting) 이란?변수와 함수 선언이 코드의 상단으로 끌어올려진 것처럼 동작하는 JS 고유의 특징이는 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 메모리에 미리 저장하는 방식 때문에 발생한다.호이스팅 대상변수 선언(변수 호이스팅)과 함수 선언문(함수 호이스팅)🌿 변수 호이스팅변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징console.log(name); // undefinedvar name = 'hjlee';console.log(name); // hjleevar로 선언된 변수는 선언만 호이스팅되고, 초기화는 호이스팅되지 않아 처음 호출 시 undefined 출력let과 const로 선언된 변수는 호이스팅되지만, TDZ에 영향을 받아 초기화되기 ..

퇴사 후에 이것저것 계획을 세우긴 했지만, 너무 우당탕이어서 일단 프론트엔드 복습부터 해보자항상 프로젝트를 진행하면서 필요한 기능만 검색해서 적용했더니 프론트엔드 이론을 제대로 공부해본 적이 없었다. 그래서 유튜브를 통해 한 번 훑어보고 시작하기로 결정했다.JAVASCRIPT코딩앙마 - 자바스크립트 중급 강좌 : 140분 완성기초지만 잘 안쓰는 것들은 다시 봐도 새로워서 반복이 중요하다는 걸 다시 느꼈다.오늘 일단 중급 강좌 하나만 들어서 차차 복습하는 내용들을 이어서 적을 예정이다. 모던 자바스크립트 Deep Dive마침 책도 있고 유튜브에 스터디 강의가 있길래 1.5배속으로 수강하고 복습해야지 모던 자바스크립트 Deep Dive를 틈틈이 읽으며 사이드 프로젝트를 진행하는 중인데역시나 React에 대한..