nextjs 프로젝트에서 @toast-ui/react-editor라는 에디터를 사용하고 있습니다. 하지만 페이지에서 에디터 컴포넌트를 불러오면 다음과 같이 에러를 뱉어내고 있어요.왜 이런 현상이 발생할까요?아래는 에러 로그와 에디터 컴포넌트,컴포넌트를 불러오는 페이지

프로젝트 메인 페이지에 들어갔을 때, 네트워크 탭을 보니 아직 접속하지 않은 여러 페이지들에 대한 prefetch 요청이 있는 것을 확인했다. 강력새로고침을 하고 캐시를 제거했음에도 위와 같이 요청이 간다.아래 페이지들에 대하여 요청이 가고 있다. 아래 페이지들은 아직

Next.js 14의 App Router에서는 서버 컴포넌트가 도입되어 클라이언트 컴포넌트와 구분하여 사용할 수 있게 되었다. 그렇다면 서버 컴포넌트와 클라이언트 컴포넌트는 각각 무엇이며, 어떤 상황에서 사용하는 것이 적절할까? 이 글은 Next.js 14의 A

요즘 대부분 서비스를 확인해보면 프론트엔드 프레임워크로 nextjs를 대부분 사용하고 있는 것을 확인할 수 있다. nextjs 이전에는 react를 사용했었는데 왜 nextjs가 부상하게 되었을까? react 리액트는 SPA(Single Page Applicatio

nextjs 프로젝트를 ec2에 배포하였고 nginx를 웹 서버로 사용하였다.여러 페이지를 구성하였고 이미지 파일들을 프로젝트 최상단 public 디렉터리에 생성하여 관리하였다.로컬에서는 페이지들이 잘 나타났는데 배포 후 확인해보면 왠걸 메인페이지를 제외한 페이지는 다

신규 프로젝트를 구상중이고 개발 들어가기전에 서버 셋팅부터 하려고 한다.프론트는 nextjs로 구성하고 백엔드는 spring boot,DB는 postgresql을 사용할 예정이다.프론트부터 개발 환경 셋팅을 해보려한다.이전에 aws amplify를 통해 배포를 하였지만

회사에서 프론트엔드 프로젝트는 리액트나 nextjs 프로젝트로 진행하고 있는데 항상 백엔드 개발자분들이 자동배포 구성을 해주셨다. 백엔드 개발자분들이 aws 관련해서 rdb,ec2,s3 등 셋팅을 해주시고 계셔서 자연스럽게 그렇게 된 것 같다. 하지만 찾아보니

하나의 페이지가 여러 컴포넌트로 나누어져있을 때, 여러 컴포넌트 중 특정 컴포넌트를 참조해야하는 경우가 있다면 어떻게 해야할까?요구사항은 다음과 같다.특정 컴포넌트들이 특정 영역에서 position이 sticky 방식으로 움직이다가 특정 영역에 들어서면 sticky가

이미지 버킷 URL로부터 파일 다운로드 프로젝트 중 첨부파일을 다운로드하는 기능을 개발을 하고 있다. 프로젝트할 때마다 대부분 있는 기능이어서 보통 개발할 때, 이미지 버킷 URL에서 fetch를 해와서 a 태그 download 기능을 이용해 다운로드하게 한다.

사진과 같이 url path에 있는 짤스라는 값을 가져오려고 하는데 왠걸 위 검정색으로 표기한 것처럼 짤스라는 한글이 요상한 문자로 인코딩되서 나타났다.콘솔로도 찍어보면%EC%A7%A4%EC%8A%A4위와 같이 나타난다.nextjs에서 위http://local

현재 진행하고 있는 사이드 프로젝트에서 nextjs 이용해서 풀스택으로 개발하고 있다.next-auth를 활용하여 구글 소셜 로그인을 이용하고 있는데 공식문서를 참조하여 셋팅을 해보아도 계속해서 다음과 같이 에러가 발생하였다.app-index.js:35 ClientFe

nextjs 프로젝트를 aws amplify에 배포를 했다.db 연결 정보를 .env 파일에서 로드하여 가져오고 있다.amplify는 깃헙 레포지터리를 기준으로 하여 빌드하여 배포하는데 env파일은 깃헙에 올리지 않았기 때문에 amplify 에서 환경변수를 따로 설정해

이번에는 aws amplify를 통해 배포를 해보았다.이번에도 역시 서버 컴포넌트를 사용하는 페이지에서 에러가 발생했다.해당 서버 컴포넌트에서는 prisma에서 rds에 연결하여 데이터를 sql을 통해 가져오고 있다.클라우드 와치에서 에러를 확인해보니 다음과 같았다.주

nextjs 프로젝트를 vercel을 통해 배포했다.nextjs 에서 풀스택으로 개발하여 따로 백엔드는 없고 prisma와 aws rds(mysql)을 활용하였다.특정 페이지는 prisma를 통해 sql문을 통해 db 데이터를 불러오는데 로컬에서는 해당 데이터가 잘 불

app/layout.tsxnextjs14 규칙으로써 app 루트 내부 layout 파일은 필수적으로 존재해야하며 모든 페이지에서 나타나도록 설정되어있다.때문에 모든 페이지에 공통적으로 나타나야하거나 적용되야하는 부분이 있다면 위 layout.tsx에서 정의해주면 된다.

위 사진과 같이 체크박스가 포커스가 되면 체크박스 테두리에 파란색 선이 생기는 것을 확인할 수 있다.브라우저 자체적으로 체크박스가 포커스되면 위 같이 보이도록 설정된 것 같아보인다.이를 없애주려면 어떻게 해야할까?이를 제거하기 위해서는 다음과 같이 tailwind cs

apple 앞 뒤로 /를 달아주면 정규식 시작과 끝을 설정할 수 있다.괄호 안에 특정 문자들을 기입하면 해당 정규식을 사용했을 때, 입력 중 특정 문자가 하나라도 있다면 유효하도록 해준다.위 정규식은 "a" 또는 "p" 또는 "l" 또는 "e"를 포함한다면 이라는

여러 프로젝트를 하면서 회원가입이나 로그인 등 사용자의 입력을 받는 인풋 필드는 항상 있다.대부분의 경우, 인풋 필드에서 유효성 검사를 해주는데 요구사항별 정규식을 정리해보고자 한다.물론 프로젝트마다 요구사항이 다르겠지만 두고두고 기록해두면 차후에 유용하게 쓰이게 될

고민의 발단 나는 SI회사에 1년 가까이 재직중이고 여태까지 5~6개의 프로젝트를 경험한 것 같다. 프로젝트들 중 처음부터 시작한 프로젝트들도 있으며 프로젝트 중간에 투입한 적도 있고 프로젝트 유지보수를 한 경험들이 있다. 최근들어 드는 고민은 프로젝트 중간에 투입

최근에 사이드 프로젝트를 시작했고 메인 기능은 채팅이다.사이트 프로젝트에서 사용하는 기술 스택은 백엔드 없이 nextjs로만 사용하고 있다.nextjs내에서 prisma를 통해 mysql DB와 통신하여 데이터 통신을 하는 방식으로 진행하려한다.여러 프로젝트를 했지만