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..

1. EC2 인스턴스 생성AWS에서 EC2 인스턴스 생성이 필요한데, 이 과정은 인터넷에 매우 잘 나와있어서 생략하겠습니다.저같은 경우는 다음 블로그를 참고했습니다.https://velog.io/@kyj311/AWS-EC2-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 저는 Amazon Linux기반의 EC2로 생성해줬습니다! 2. 인바운드 규칙 설정HTTP 80포트와 HTTPS 443포트를 열어주고, NextJS프로젝트를 올리기 위해 3000포트도 열어주었습니다.80이나 443포트로 들어오는 요청을 3000포트로 포워딩해주면 브라우저로 NextJs프로젝트를 볼 수 있습니다. 3. SSH로 EC2 컴퓨터에 접속해서 nodejs, pnpm 설치SSH로 EC2 연결하는 과정은 AWS에서 ..

동행 기간 선택을 위해 캘린더를 이용해야했다.라이브러리중 그나마 유명하고, 그리고 커스텀 많이 하는 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 이렇게 보..