Today I Learned/Task28 [Task] Supabase로 로그인/회원가입 구현 supabase는 PostqreSQL을 기반으로 SQL 쿼리 및 다양한 데이터베이스 작업을 수행할 수 있는 오픈소스 데이터베이스이다. supabase는 인증, 보안 등 백엔드 기능을 제공하기 때문에 백엔드 서버를 구축하지 않아도 클라이언트 앱을 빠르게 개발할 수 있다는 장점이 있다. 이를 활용해 로그인과 회원가입 기능을 구현해보았다. 인증(로그인, 회원가입) API 파일을 별도로 구성하여 회원가입을 수행하는 함수를 만들었다.// @/api/auth.api.tsasync function signUp(signUpData: AuthData) { const res = await supabase.auth.signUp(signUpData); if (!!res.error) { let message = ""; s.. 2024. 9. 27. [Task] 이미지 입력 받아 백엔드에 저장하기 return 이미지 업로드 {imgURLs.map((imgURL) => ( ))} 위와 같이 Input 태그를 활용해 사진파일을 입력받고, imgURLs라는 state로 백엔드에 저장된 사진들을 보여주는 JSX 코드를 짜주었다. const handleChangeImage: ComponentProps["onChange"] = async ( e ) => { const files = e.target.files; if (!files) return; console.log("image-files: ", files); ... }; 위와 같이 onChange 이벤트핸들러로 오는 event 변수에 .target.files로 사용자가 입력한 사진 파일들이 저장되어.. 2024. 9. 27. [Task] Next.js에서 백엔드 구현 Nextjs에서는 간단한 백엔드를 구현할 수 있도록 지원한다. page.tsx는 url에 따라 보여지는 페이지를 보여주는 것처럼 route.ts라는 파일명을 지정하면 디렉토리 구조에 따라 url 매핑이 되어 백엔드를 구현할 수 있다. 위와 같은 디렉토리에서는 /api/auth/log-in, /api/auth/sign-up URL에 대해 라우팅을 해준다. 내부 코드로 Method명을 함수명으로 지정하여 HTTP 통신을 request 받을 수 있다.export async function POST(req: NextRequest) { ...} GET으로 URL 파라미터로 데이터가 올 때는 폴더의 이름을 대괄호로 감싸주는 형태로 이름을 지정할 시 파라미터를 받을 수 있다.위와 같은 사진은 /posts/[pos.. 2024. 9. 27. [Task] Express와 Firestore 연동하기 1. Express에서 firestore 설정Express에서 firestore의 설정을 하는 방법은 firebase 공식문서에 나와있다. 하지만 나는 env 파일을 따로 만들어 필요 데이터를 저장하고 firebase config를 진행하였다..env 파일에 firestore에서 제공하는 config 데이터들을 넣어둔 후 아래와 같은 코드를 작성한다.const dotenv = require('dotenv');const assert = require('assert');dotenv.config();const { PORT, HOST, HOST_URL, API_KEY, AUTH_DOMAIN, DATABASE_URL, PROJECT_ID, STORAGE_BUCKET, .. 2024. 9. 20. [Task] Express & React 연동하기 1. Expressnpm initnpm install express터미널에 위와 같은 명령어를 입력해 package.json를 생성하고 express를 의존성에 추가한다. // app.jsconst express = require('express')const app = express()const port = 3000app.get('/', (req, res) => { res.send('Hello World!')})app.listen(port, () => { console.log(`Example app listening on port ${port}`)})위 코드는 Express 공식문서에서 제공하는 기본 코드이다. 아래와 같은 명령어를 터미널에 입력하면 3000번 포트에 Express 로컬서버가 열린다... 2024. 9. 20. [Task] 최소화 상태의 검색바에서 가상선택자 스타일 없애기 호버 효과를 구현하기 위해서 처음에는 :hover::before 가상선택자를 활용해서 이를 구현했었다. 하지만 검색바가 최소화된 상태에서는 호버 효과가 작동되지 않아야 한다. 따라서 처음에는 JS로 CSS에 지정한 가상선택자를 수정할 수 있는 방법을 찾아보았다. 1. getComputedStyle 사용// before 가상 선택자의 스타일 가져오기const beforeStyle = window.getComputedStyle(inputDiv, '::before');// 가상 선택자의 content 속성 값 출력console.log(beforeStyle.content);getComputedStyle이라는 함수가 있지만, 이 함수는 read-only 설정이 되어 있는 DOM을 불러오는 것이라 수정이 불가능했다.. 2024. 9. 3. 이전 1 2 3 4 5 다음
