본문 바로가기

til45

supabase database 정책 설정 이번 팀프로젝트에서 우리 팀은 supabase를 사용하기로 했다. 테스트를 위해 아래와 같이 설정 후 코드를 작성하였다. supabase url 과 key는 settings -> API에서 가져와서 env 파일에 넣었다. import React, { useEffect, useState } from 'react'; import { createClient } from '@supabase/supabase-js'; function Search() { const [data, setData] = useState(); const supabase = createClient(process.env.REACT_APP_SUPABASE_URL, process.env.REACT_APP_SUPABASE_KEY); useEffect.. 2024. 2. 23.
[Glitch / vercel] json-server 배포하기 json-server 레포 생성 먼저 깃헙에서 json-server를 배포할 레포지토리를 생성한다. 이름은 auth-json-server라고 지었다. 그러고 레포를 vscode로 열고 아래와 같이 셋팅을 시작한다. json-server 셋팅 nodejs 프로젝트로 만들어지고, package.json 파일이 생성된다. npm init -y 루트 경로에 server.js 파일을 생성한 후 아래의 내용을 넣는다. // server.js const jsonServer = require("json-server"); const server = jsonServer.create(); const router = jsonServer.router("db.json"); const middlewares = jsonServer... 2024. 2. 22.
SyntaxError: Unexpected token e in JSON at position 0 에러 상황 게시물 내용을 수정하는 patch 요청을 날렸는데, 계속 리듀서 슬라이스까지 가지 못하고 thunk 부분에서 에러가 났다. SyntaxError: Unexpected token e in JSON at position 0 작성했던 코드 export const __updateLetter = createAsyncThunk("updateLetter", async (payload, thunkAPI) => { try { const response = await axios.patch(`${process.env.REACT_APP_JSON_SERVER_URL}/letters/${payload.id}`, payload.content); return thunkAPI.fulfillWithValue(response... 2024. 2. 21.
react-query useQuery / useMutation react-qeury란 React에서 데이터를 관리하기 위한 라이브러리이다. 주로 백엔드와 데이터 통신을 담당한다. 서버에서 가져온 데이터의 상태를 자동으로 관리하여 로딩 중, 성공, 실패 등의 상태를 쉽게 파악할 수 있다. 설치 yarn add react-query 적용 최상위 컴포넌트에서 new QueryClient 만든 후 감싸준다. import React from "react"; import Router from "./shared/Router"; import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); const App = () => { return ( ); }; expo.. 2024. 2. 19.
react-router outlet Outlet Outlet은 해당 자식 라우트 컴포넌트를 렌더링 한다. 중첩 라우트 컴포넌트를 통해 상위 컴포넌트를 레이아웃화 할 수 있고, {children}을 사용하는 것처럼 레이아웃화 할 수 있다. 기존에는 children으로 받아서 레이아웃을 구성했다. 아래 코드는 outlet을 활용한 방법이다. 코드 예제 App.jsx import "./App.css"; import Router from "./shared/Router"; function App() { return ( ); } export default App; app 컴포넌트에 router를 연결했다. Router.js import React from "react"; import { BrowserRouter, Route, Routes } from.. 2024. 2. 7.
styled-component 이번에 개인 프로젝트를 진행하면서 styled-component 를 제대로 써보게 되었다. 설치 npm install styled-component npm 또는 yarn으로 설치 가능한데 나는 npm 으로 설치하였다. 설치하면 package.json 에 버전 등의 정보가 추가된다. 문법 기본적인 문법은 다음과 같다. styled-components 를 import 하고 아래에 ``(템플릿 리터럴)을 사용하여 스타일을 작성한다. //기본 문법 export const 컴포넌트명 = styled.태그명` //css 작성 ` [예시] import styled from "styled-components"; export const FormContainer = styled.form` margin: 20px auto;.. 2024. 1. 30.
react 설치 및 기초 react 설치 처음 설치 할 때는 아래 명령어를 사용하여 설치한다. npx create-react-app 프로젝트명 설치 후 해당 경로에서 npm start를 하면 위 이미지와 같이 실행된다. app.js에서 수정 후 저장하면 바로 적용이 된다. react에서 css 사용하기 1. 인라인 스타일 css 인라인 스타일의 css를 사용하기 위해서는 객체 형태로 사용해야 한다. 안녕 또한 대시 - 대신 카멜 케이스로 작성해야 한다. 하지만, 인라인 스타일 css는 많이 사용되지 않는다고 한다. 2. 전역 css 전체에 적용되는 css로 사용하는 방법이 있는데, 이 방법은 클래스명이 같을 경우 스타일이 덮어 쓰인다. (기존에 사용하던 방식이라고 생각하면 된다.) css 스타일이 head 태그 안에 style .. 2024. 1. 21.
영화 리뷰 작성하기 (localStorage) 어제까지 영화 리뷰 작성 폼 ui 작업을 하고, 오늘은 데이터 저장하는 작업을 했다. 리뷰 데이터는 localStorage에 저장하는 요구사항이 있었는데, 정말.. 너무 힘들었다. 오늘이 제일 힘들었던 것 같다.. 데이터 구조 일단 데이터를 어떻게 쌓을지부터도 굉장히 고민스러웠다. 처음에 생각했던 구조는 아래 코드처럼 배열에 객체를 담아서 movieId로 해당 리뷰를 가져오는 식으로 하려고 했었다. let data = [ {name:'홍길동', password:'123', contents:'재밌어요', id:1, movieId:253}, {name:'아무개', password:'123', contents:'재밌어요!!!', id:2, movieId:253}, {name:'루피', password:'123.. 2024. 1. 11.

티스토리툴바