현재 진행하고 있는 사이드 프로젝트에서 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와 통신하여 데이터 통신을 하는 방식으로 진행하려한다.여러 프로젝트를 했지만

회사 프로젝트들을 하다 보니 프로젝트에서 공통적으로 사용되는 함수들을 있어 이를 라이브러리로 구성하면 어떨까라는 생각을 했다. 그래서 helper,hooks 등 함수들을 라이브러리로 구성하여 npm 배포를 연휴동안 해보았다.npm으로 배포하는 과정은 여러 레퍼런스들이

기존에는 mysql과 nestjs를 연결하여 nestjs내에서 엔티티만 만들어준다면 엔티티를 토대로 자동으로 mysql 테이블을 만들어줬었다.하지만 다른 컴퓨터에서 nestjs 애플리케이션을 실행시켜려했을 때, 설정해둔 엔티티 코드를 토대로 mysql 테이블을 생성해주

app.module.ts

클라이언트 설정 코드위와 같이 클라이언트쪽에서 axios 설정이 되어있어도 서버쪽에서 모든 도메인에 대해 cors를 허용해준다고 하여도 Cors오류가 발생하는 이슈가 발생했다.Credentials 이란 쿠키, Authorization 인증 헤더, TLS client c

Record 타입이란 객체 데이터의 타입을 지정할 때,사용한다.Key : 객체의 키에 대한 타입을 지정Type : 객체의 값에 대한 타입을 지정위의 예시에서 Record를 사용한 경우는 key값에 대한 제한 범위 string으로 제한 범위가 크다.name과 email로

프론트쪽에서 서버에 데이터를 보낼 때, 데이터 중 파일 객체 데이터가 포함되어있다면 특정 작업들을 추가적으로 해줘야한다. 특정 작업들이란 크게 두가지이다. 헤더의 content-type을 mulitpart/form-data로 변경 요청 데이터를 formData로 변

사내 프로젝트 중 로그인을 구현하고 있다.로그인 유지 기능이 있어 구현을 해야하는데 조건은 다음과 같이 정의할 수 있다.체크시, 브라우저창을 닫거나 탭을 닫아도 다시 들어올 때에도 로그인이 유지되어야함.체크를 안할시, 브라우저창을 닫거나 탭을 닫으면 다시 들어왔을 때

파일을 선택할 수 있는 파일 입력창에서 선택한 이미지를 미리볼 수 있게 해보자.전체적인 코드는 다음과 같다.<input type="file"/>을 사용하면 사용자의 디바이스에 접근하여 사용자의 파일을 선택할 수 있게 해준다.이 때 <input type="fi

axios를 사용할 때, 서버 통신을 위해 해당 서버와 통신할 인스턴스를 만드는 사용되는 옵션들을 알아보자.axios.create라는 메서드를 통해 특정 서버에 대한 인스턴스를 생성할 수 있다.위와 같이 옵션이 설정되어있다고 했을 때 각 옵션에 대하여 살펴보자.base

브라우저에서 응답받을 문서에 대하여 알아서 인식하는데도 불구하고 http 서버에서 응답보낼 문서에 대한 헤더를 설정해줘야하는 이유가 뭘까요?다음 코드를 살펴봅시다.with headerres.wrieHead : 서버에서 클라이언트에게 응답해줄 데이터(body)에 대한 헤