1. Skeleton UI란?Skeleton UI는 콘텐츠가 로드되기 전에 표시되는 임시 화면으로, 실제 콘텐츠의 레이아웃을 미리 보여주는 플레이스홀더입니다.주로 회색 막대나 박스 형태로 표시되며, 로딩 중임을 나타내는 애니메이션 효과를 포함하는 것이 일반적입니다.2. Skeleton UI를 사용해야 하는 이유인지된 성능 향상사용자는 빈 화면이나 로딩 스피너보다 Skeleton UI를 볼 때 로딩 시간이 더 짧게 느껴진다.콘텐츠의 구조를 미리 보여줄 수 있다.더 나은 사용자 경험갑작스러운 레이아웃 변경을 방지하여 CLS(Cumulative Layout Shift)를 줄일 수 있다.앱이 더 반응적이고 생동감 있게 느껴진다.3. SkeletonUI 적용하는 법 컴포넌트 이름은 BoardPreview(Boar..

구현 환경AWS EC2 (Amazon Linux 2)Next.js 14PM2NginxGitHub Actionsgithub CI/CD 1. 깃허브 레포지토리 키 설정하기 - EC2_HOST : EC2의 인스턴스 퍼블릭 IP 주소 (54:232~~ )- EC2_KEY : EC2 인스턴스에 액세스 할 수 있는 SSH 키 (EC2 인스턴스를 만들 때 받은 .pem )- EC2_USER : EC2 인스턴스의 사용자 이름 (amazon linux 사용하면 ec2-user) 2. main.yml 브랜치 main 에 생성[프로젝트 루트/.github/workflows/main.yml]name: Deploy to Amazon EC2# main에 push 될 때 실행on: push: branches: [main]..

설명원래는 Next클라이언트 -> tripmingle 서버로 데이터를 요청했었는데,이번에 Next서버 -> tripmingle 서버 방식으로 바꾸게 되었다. 🔍 왜? 트립밍글 프론트를 배포하면서 발생한 브라우저 오류 때문.처음에는 CORS오류 인가 했는데, CORS와는 다른 MixedContent(혼합된 콘텐츠 정책)오류 였다. Mixed Content: The page at 'https://example.com/index.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://example2.com/endpoint'. This request has been blocked; the content must..

동행 기간 선택을 위해 캘린더를 이용해야했다.라이브러리중 그나마 유명하고, 그리고 커스텀 많이 하는 react-calendar를 선택했다. 근데 커스텀해보니 그냥 shadcnui처럼 나와있는 거 쓰는거 추천하긴 한다.우선 결과는 다음과 같다.더보기 react-calendar 깃허브 가서 무슨 설정할 수 있는지 보면서 작업했다.CSS만질때는 개발자 모드 켜놓고 className마다 어떤 요소를 꾸미는 건지 확인했다.  Calendar 컴포넌트 Propshttps://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/src/Calendar.tsx react-calendar/packages/react-calendar/src/Calend..

결과 미리보기 더보기 구현하고 싶은 것페이지는 최대 다섯개까지만 보여줌내가 선택한 페이지가 가운데 위치했으면 좋겠음ex) 총 페이지가 8페이지, 내가 선택한 페이지가 6이라면, 4 - 5 - 6 - 7 - 8 이렇게 보여주기 구현한 방법현재 페이지와 총 페이지를 상위 컴포넌트로부터 Props로 받는다.1~총 페이지까지 배열 PageArray를 생성한다.PageArray배열을 slice를 이용해 현재 페이지 기준 앞 뒤로 2개씩 자른다.여기서 예외를 처리해줘야 하는데 가능한 예외는 다음과 같다.일단, 현재 페이지가 1이라면 그냥 1 2 3 4 5 이런식으로 보여줘야 함현재 페이지가 2여도 1 2 3 4 5그리고 현재 페이지가 총 페이지 - 1이라면 총 페이지가 8이라고 했을때, 4 5 6 7 8 이렇게 보..

이번 프로젝트에서 GmarketSans 폰트를 적용해야하는데next 기본 폰트모음에는 없기 때문에 직접 적용해줘야 함!1. public 밑 GmarketSansTTF폴더 생성하고 폴더 안에 ttf 파일을 넣기 2. font.css.ts 파일 생성 후 GlobalFontFace 코드 작성import { globalFontFace } from '@vanilla-extract/css';const gmarketSans = 'gmarketSans';globalFontFace(gmarketSans, [ { src: 'url("/GmarketSansTTF/GmarketSansTTFBold.ttf")', fontWeight: 'bold', }, { src: 'url("/GmarketSansTTF/..

1. 여러장의 이미지 파일 업로드하고 미리 보여주기 input 태그에서 onChange일때 addImageFile이라는 함수를 호출해준다.const [imageFiles, setImageFiles] = useState([]);const addImageFile = (e: React.ChangeEvent) => { let tmp = e.target.files; if (tmp) { const reader = new FileReader(); reader.readAsDataURL(tmp[0]); reader.onloadend = () => { if (reader.result) { setImageFiles(prev => ..

goodplassu 글 상세보기 페이지에서 댓글 작성하는 부분을 만들겁니다!결과 미리 보기 ↓더보기 1. 자동으로 크기 조절되는 textarea 만들기 (react + typescript)const textRef = useRef(null);const changeHandler = (e: React.ChangeEvent) => { setComment(e.target.value); if (textRef.current) { textRef.current.style.height = `auto`; textRef.current.style.height = `${textRef.current.scrollHeight}px`; }}; { changeHandle..