두가지 페이지에서 효과는 다르지만, 동일한 로직으로 슬라이더를 구현할 일이 생겼다. 원래는 하나의 페이지마다 코드를 작성했지만, 반복되는 영역이므로 이를 Hook으로 처리해 주자. const useSlider = ( data: T[], duration?: number, moveScale?: number, opacity?: boolean, type?: 'spring' | 'linear' | 'tween' | 'inertia', ): [index: number, direction: number, increase: () => void, decrease: () => void, animationVariant: Variants]=>{ ... } 나중에 슬라이더의 애니메이션을 커스텀 할수 있도록, duration(지..
멋사사이트를 만드는 중 , 다음과 같은 3가지 아카이빙 페이지(프로젝트 아카이빙, 추억 아카이빙, 세션 아카이빙)을 제작해야 했다. https://github.com/cau-likelion-org/cau-likelion-next/pull/26 Archiving 데이터 타입 변경 by d0422 · Pull Request #26 · cau-likelion-org/cau-likelion-next 🛠️ 한 줄 요약 아카이빙 데이터 타입 변경 상세 🔥 바꾼거 Archiving 상위 인터페이스로 하여 Project, Session, Gallery에서 상속 받아 디테일 프로퍼티 적용 컴포넌트 제네릭 사용하여 타입별 랜더링 github.com 해당 페이지들은 모두 동일하게 아래와 같은 Card형식을 사용하고 있다. ..
github Action에서 serverless를 실행은 시켰는데, 제대로 실행되지 않는 문제가 발생했다. 도대체 무슨 오류인지 알 수 가 없어서 온갖 사이트를 뒤지며 해결하려 했다. 허무하게도 원인은 띄어쓰기 한칸이었다. distributionId: 후에 띄어쓰기를 한 칸 해야 했는데 하지 않았던 것이 원인이었다. vscode상에서 띄어쓰기를 하지 않으면 distributionId가 문자열처럼 표기된다. 이것 때문에 나의 3시간이 증발되었다. 이 글을 보는 당신은 안그랬으면 좋겠다.
NEXT.JS를 Serverless로 배포하고 CICD를 설정해보자. package.json 설정 1. npm run deploy 설정 우선 script에 deploy:serverless를 추가해서 github Action이 deploy명령어를 실행했을 때 자동적으로 serverless가 실행될 수 있도록 하자 { ... "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "deploy": "serverless" }, ... } 2. serverless 설치 둘중에 하나로 하면 된다. 1. package.json에 입력후 npm install { ... "devDependencie..
로컬 환경에서 mp4파일을 렌더링 하려고 했지만 개같이 실패! 웹팩 설정 웹팩에서 mp4파일에 대한 loader를 찾지 못해서 발생하는 오류이다. next.config.js에 다음과 같은 웹팩 설정을 추가해주자. const nextConfig={ webpack: (config) => { config.module.rules.push({ test: /\.(mov|mp4)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', }, }, ], }); return config; }, } module.export=nextConfig; .mov, .mp4와 같은 형태의 파일이 오는경우(test) use와 같은 설정을 사용하겠다는 것이다. 여기서는 f..
npm init 프로젝트가 npm으로 관리되어야 하므로 npm init을 진행한다. npm init -y 원래는 옵션 내용을 물어보나 -y옵션을 붙이게 되면 기본세팅 상태로 만들어지게 된다. 옵션 설명 name 프로젝트 이름 version 프로젝트의 버전 description 프로젝트에 대한 간단하 설명 main 프로그램의 시작점이 되는 모듈의 ID (우리도 npm 생태계에 올릴 수 있게 하는 옵션) scripts 현재 프로젝트 내부에서 사용할 수 있는 스크립트 명령들 ( "명령이름": "명령~" -> 터미널 $ npm run 명령이름 ) author 소유주 license 다른 사용자들이 이 패키지를 사용할 때 필요한 권한 웹팩 설치 npm install webpack webpack-cli webpack..
![]()
https://0422.tistory.com/210 바닐라 자바스크립트 dragger만들기 심심해서 하나 만들었다. 급한 사람은 아래 깃헙들어가서 전체 코드 긁어가면 된다. https://github.com/d0422/make-toy-vanillaJS/tree/main/dragger GitHub - d0422/make-toy-vanillaJS: 바닐라 자바스크립트로 장난감 만 0422.tistory.com 대애충 만든 dragger의 코드를 개선시켜 보자. 일단 함수에 중복되게 적힌 부분이 꽤 있는 것 같다. animationManage 이 친구의 if else문이 보기 싫고 중복되는 것 같아서 여기를 삼항연산자로 개선할 것이다. function animationManage() { const addOne..
![]()
초단기 강수예측앱을 TS로 전환중인데 ReactNative Stack Navigation에서 type오류를 해결하기 위해 이 게시글을 작성한다. createStackNavigator의 type을 보면 ParamListBase를 상속하는 ParamList를 받는 것을 확인할 수 있다. ParamList는 string, object 또는 undefined가 될 수 있다고 한다. 서칭해보니 각 페이지: 받는 props의 형태로 작성해주면 된다고 한다. 나는 이 세가지 페이지를 사용하므로 이렇게 작성해 주었다. app.tsx에는 이렇게 적용해주면 된다. 다른 페이지의 navigation props에 type을 지정하는 일은 StackScreenProps를 사용하는데, 얘는 이렇게 생겼다. 아까만든 ParamLi..
![]()
문제상황 방을 만들기 위해 post요청을 보내는 상황 axios.post를 사용했으나 자꾸 500에러가 발생함. access문제면 400대가 나야하는데 이상함 import axios from "axios"; import { BASE_URL } from "./BaseURL"; export default function postRoomData(props) { return axios.post( `${BASE_URL}/roomcreate`, { room_title: props.title, room_interest: props.interest, room_time: props.time, room_place: props.place, room_headcount: props.headcount, room_latitude:..
