본문 바로가기

전체 글402

vercel :: 리액트 프로젝트 404 배포 오류 해결 방법 메인 도메인에서는 잘 작동하나, 라우트 페이지에서 리프레쉬 되거나 새로고침을 누르면 404 에러가 뜬다.Next.js 프로젝트에서는 이런 문제가 없으나 React.js에서는 이런 문제가 발생한다. 해결방법루트 폴더에 vercel.json 폴더 생성아래 코드 복붙{ "routes": [{ "handle": "filesystem" }, { "src": "/.*", "dest": "/index.html" }]} Programing/Server 2024. 6. 29.
Supabase 데이터 전처리 :: 텍스트 컬럼을 구분자를 기준으로 여러 컬럼으로 분리하기 주의prostgresSQL에 익숙하지 않은 경우 export CSV로 데이터 테이블을 필수로 백업을 하시고 진행하시기를 바람.아래 사진을 보시고 글쓴이의 날짜 데이터 형식과 다르다면 본인 글에 있는 SQL 쿼리를 그대로 쓰지 마시기 바람.오전/오후로 구분하고 시간은 각각 00~12로 나가는 방식임.구분자로 마침표 (.)가 있음.중간에 공백이 많이 들어 가 있음.상황 구글 스프레드시트에서 제공하는 서식을 사용하다 보니 데이터를 가공하기 어려운 형태로 되어 있어 날짜와 시간을 date 컬럼에 하나, time 컬럼에 분리하고자 한다.개선SQL 쿼리를 어디서 입력해야 하는지 모르겠다면 본인이 작성한 supabase 전처리 포스트 중 첫번째 포스트를 보면 사진과 함께 자세히 남겨두었다.SELECT trim(.. Programing/Server 2024. 6. 28.
Supabase 데이터 전처리 :: 여러 컬럼을 하나의 jsonb로 병합하기 주의혹시 모르니 데이터 백업은 꼭 하고 진행할 것.전체 데이터 선택 후 export CSV를 해서 파일로 남겨두면 추후에 다시 import 할 수 있음.상황 사진과 같이 지출내용1~3이라는 컬럼에 각 내용을 하나씩 관리하고 있었다.이 내용은 단순한 스프레드시트로 관리하고 있던 것이라 한 셀에 json 형식으로 관리하고 있지 않았다.이렇게 되면 지출내용을 사용자가 여러 개 입력하면 입력한 만큼 컬럼을 미리 만들어줘야 하고, 입력값이 없는 경우에는 null이 너무 많이 생긴다.개선supabase와 같은 SQL은 json 보다 jsonb 형식을 더 권장한다고 경고창이 나온다. 아래와 같은 형식으로 입력 가능하다.{ "details": [ " 중성화 수술 책임비 입금", "2번 내용", "3번.. Programing/Server 2024. 6. 28.
React-router-dom을 활용한 페이지 라우팅(디테일 페이지) 패키지 설치yarn add react-router-dom폴더 및 파일 생성하기📦 ├─ .env ✅├─ .eslintrc.cjs├─ .gitignore├─ README.md├─ index.html├─ package.json├─ public│  └─ vite.svg├─ src│  ├─ App.tsx│  ├─ api│  │  └─ api.ts ✅│  ├─ main.tsx│  ├─ pages│  │  ├─ SponsorDetail.tsx ✅│  │  └─ SponsorList.tsx ✅│  ├─ routes│  │  └─ routes.tsx ✅│  └─ vite-env.d.ts├─ tsconfig.app.json├─ tsconfig.json├─ tsconfig.node.json├─ vite.config.ts└.. Programing/React 2024. 6. 27.
변경사항 없이 강제 push 필요한 경우 로컬과 원격 리포지토리의 차이가 없어 변경사항이 없는데, 아니면 있는데 어떠한 문제로 변경사항이 없다고 나올 때,add commit 후 강제 push를 하면 되지만 변경사항이 없어서 commit을 못 남긴다. 이럴 땐 빈 커밋을 생성하고 강제 push를 하면 push가 된다. 강제 push는 돌이킬 수 없을 수 있으니 최악의 상황에서만 사용한다. // 빈 커밋 생성git commit --allow-empty -m "Triggering a force push"// 강제 pushgit push origin main --force main 부분을 브랜치 이름으로 바꿔주면 된다. Programing/Git 2024. 6. 27.
2024-06-26 TypeScript로 국가 선택 앱 만들기 (2) CountryList.tsx 컴포넌트 구현기본 레이아웃 구성// src/components/CountryList.tsximport styled from 'styled-components';import CountryCard from './CountryCard';const CardSection = styled.div` display: flex; flex-wrap: wrap; gap: 20px;`;const CountryList = () => { return ( 내가 고른 카드 국가 목록 .. Programing/TIL 2024. 6. 26.
호버 시 자연스럽게 커지는 애니메이션 div나 텍스트, 버튼 등에 마우스를 hover 했을 때 자연스럽게 커지는 애니메이션을 넣으면 사용자가 '이 아이템을 클릭했을 때 어떤 이벤트가 있겠구나'라는 생각이 들어 사용자 경험을 증대시킬 수 있다. 필요한 CSS를 열심히 작성하고 아래와 같이 호버 이벤트를 추가한다.cursor: pointer; /* 마우스 호버 시 커서를 클릭 커서로 바꿈 */transition: transform 0.3s ease, box-shadow 0.3s ease; /* 호버 이벤트를 천천히 만듦 *//* 마우스 호버 시 크게 카드를 천천히 키우고 그림자를 만듦 */&:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); Programing/CSS 2024. 6. 26.
2024-06-25 TypeScript로 국가 선택 앱 만들기 (1) 과제를 처음부터 끝까지 자세히 기록해보고자 한다. 따라서 글이 길어질 수 있고 여러 편으로 나눠서 작성할 수 있다. 과제 요구사항 확인하기사용 기술 스택패키지 매니저 : vite라이브러리 : react언어 : typescript필수 구현 사항제공된 API를 호출하여 응답값을 useState를 통한 상태 관리적절한 타입이 꼭 명시되어 있어야 함useState로 상태 관리 되고 있는 값들을 화면에 렌더링사용자와 인터렉션(선택/해제)가 가능하여야 함이 모든 과정에서 사용하는 함수에는 타입이 적절하게 명시되어 있어야 함.과제 구현 순서프로젝트 셋업 (vtie + react + typescript)API 호출 설정API URL : https://restcountries.com/v3.1/all요청 : GETAPI .. Programing/TIL 2024. 6. 26.
한 줄 이상 텍스트가 길어지면 ... 으로 표기하기 const StyledTitle = styled.div` font-size: 25px; font-weight: 800; margin-top: 10px; // 이 아래 설정 참고 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;`; Programing/CSS 2024. 6. 25.
[코딩애플] interface interface객체의 type을 지정하는 방법이다. type alias 사용법과는 type이냐 interface냐 키워드 차이와 type alias에는 등호가 들어간다는 것 외에 전체적인 구조는 유사하다. type alias로도 객체 타입이 지정이 가능한데, 이 점에서는 중복되지만 약간의 기능 차이는 있다. const user = { name: '장원영', age: 21, isFemale: true,}  위외 같은 속성이 있다고 가정하자. 이것을 interface와 type alias로 타입을 지정하면 아래와 같다. 그리고 사용하는 건 type명(파스칼케이스)를 사용하면 돼서 같다. // interfaceinterface User { name: string; age: number; isFem.. Programing/TypeScript 2024. 6. 25.

티스토리툴바