우's 공부 일지

firbase를 이용해서 간단한 프로젝트는 백엔드 없이 사용 가능FastAPI와 Javascript를 이용하는 것보다 firebase와 svelte를 이용해서 구현하는 것이 훨씬 간편해서 자주 사용할 것 같다.프로젝트 1) 게더 타운 클론코딩깃허브 : https://github.com/kung036/gathertown-clone게더타움과 비슷한 프로젝트조건백엔드 대신 파이어베이스의 RealtimeDB로 구현배포 필수 XonValue 메서드, set 메서드 사용해서 실시간 업데이트스프라이트 이미지 이용백엔드 사용 X 프로젝트 2) word search clone 프로젝트깃허브 : https://github.com/kung036/word-search-clone클론한 사이트 : https://thewordse..

firebase를 이용한 소셜 로그인 구현(with carrot-clone)소셜 로그인빌드  → Authentication → 구글 선택 → 프로젝트 개요 → 앱 추가 → 웹 선택 → 앱 생성 → 공식 문서 확인해서 설정하기공식 문서 : https://firebase.google.com/docs/auth/web/google-signin?hl=ko&authuser=0&_gl=1*13b1fkd*_up*MQ..*_ga*MTkzMzYwNDYwLjE3MTQ2OTMyMzg.*_ga_CW55HF8NVT*MTcxNDY5MzIzOC4xLjAuMTcxNDY5MzIzOC4wLjAuMA..#web-modular-api로딩 화면 구현사이트 : https://loading.io/css로그아웃 화면 구현배포npm run deplo..

Firebase서버 없이 DB, 유저 인증, 이미지 업로드, 배포 가능실시간 데이터베이스 지원소규모 프로젝트에 적합호스팅빌드 → Hosting 페이지에서 배포 설정 가능firebase deploy데이터베이스빌드 → Realtime Database테스트 모드 사용, 싱가포르공식 문서 : https://firebase.google.com/docs/database?authuser=0&hl=ko&_gl=1*1bdcffx*_up*MQ..*_ga*NTUwMzU0MjAxLjE3MTQ0NjM4NDI.*_ga_CW55HF8NVT*MTcxNDQ2Mzg0Mi4xLjEuMTcxNDQ2NTc0OC4yMi4wLjA.VS Code에 파이어베이스 설치 : npm i firebase스토리지빌드 → Storage테스트모드 사용, asi..

Sveltehtml, css, javaScript 코드와 유사한 프레임워크가장DOM 존재 X개인이 만든 프레임워크여서 개발 환경 미흡Npm모듈 방식으로 개발 가능인터넷 상에 있는 모듈을 설치하지 않고 사용 가능로딩하는데 시간이 걸림 → 배포 전 하나의 파일로 합치는 방법 "번들러(bundle)"대표적인 번들러 : webpack → 설정이 어려움Esbuild수정할 때마다 번들러로 빌드하는 과정의 번거움 때문에 탄생한 도구빌드 속도를 100배로 빠르게 만든 도구go 언어로 만듦vite혁신적인 번들러Evan You가 만듦React현재 트랜드jsx라는 별도의 문법 존재많은 JS 라이브러리와 호환됨facebook이 개발 및 유지보수실습깃허브(firebase branch) : https://github.com/ku..

JWT유저 인증 관련 기술header에 토큰 담아서 전송하기payload의 만료시기(exp)const token_exp = (토큰 만료시간) - new Date().getTime() / 1000; // 토큰 만료 시간new Date(token_exp); // 토큰이 만료되는 날짜 확인new Date(token_exp).getTime(); // 초 단위로 토큰 만료 시간 확인new Date(token_exp*1000).getMinutes(); // 분 단위로 토큰 만료 시간 확인값이 마이너스(-)인 경우에는 토큰이 만료된 경우 회원가입 백엔드 구현깃허브 : https://github.com/kung036/carrot-market-clone테이블 생성CREATE TABLE users ( id TEXT PRI..

당근클론 코딩에 글쓰기 페이지 만들기git : https://github.com/kung036/carrot-market-clonedeta.space를 이용해서 main.py 배포(백엔드 배포)터미널space login 후 토큰 생성해서 입력하기ㅣpip freeze > requirements.txspave newmarket-cloneyspace push배포 주소로 확인 가능data.space에서는 read 권한만 있고, write 권한이 없어서 글쓰기가 제대로 작동하지 않음 회원가입 flow클라이언트는 회원가입 요청 → 서버는 회원 추가, JWT 발급 후 Access Token을 클라이언트에게 응답 → 클라이언트는 Access Token을 이용해서 데이터 요청 → 서버는 Access Token 검증 후 응..

html, javascript, css에 대해 어느 정도 익숙해졌다. fastAPI를 이용해서 서버를 구현했다. 예전에 flask를 통해서 서버를 구현했을 때보다 훨씬 간단하고 편리해서 자주 사용할 것 같다. SQL문에 대해서 더 자세히 알게 되었다.

BLOBBinary Large Object, 이진 대상이미지, 오디오, 비디오 등과 같은 데이터 저장을 위한 타입 당근클론 코딩에 글쓰기 페이지 만들기git : https://github.com/kung036/carrot-market-clonepip install python-multipart : Form 설치javaScript에서 try catch문을 이용해서 에러 처리

메모 웹페이지 만들기깃허브 : https://github.com/kung036/memo배포 : fly.iohttps://fly.io/dashboard 데이터베이스종류관계형 데이터베이스(RDB)비관계형 데이터베이스(NoSQL)두 종류를 번갈아가면서 사용함SQLRDB에서 사용하는 언어SQL 문법연습할 수 있는 사이트 : https://www.w3schools.com/sql/trysql.asp?filename=trysql_asc SELETE FROM: 테이블 선택JOIN ON: 테이블 조합WHERE : 테이블 조건GROUP : 특정 컬럼을 기준으로 그룹화HAVING : GROUP의 조건문ORDER BY : 정렬(ASC : 오름차순, DESC : 내림차순)LIMIT : 제한된 결과 SQL 실습dbaver : h..

APIpath를 사용해야할 때특정 리소스를 식별하기 위해서query를 사용해야할 때정렬하거나 필터링하기 위해서 fastApi 실습코드shift+F5 : 완전 새로운 사이트로 접속from fastapi import FastAPIfrom pydantic import BaseModelapp = FastAPI()items = ["맥북", "아이폰", "아이패드"]class Item(BaseModel): id:int content:str@app.get("/items")def read_items(): return items# parameter@app.get("/items/{id}")def read_id_items(id): return items[int(id)]# query@app.get("/i..