본문 바로가기

전체 글61

CSR(Client-side Rendering)이란? (+SSR 비교) 🤔 CSR(Client-side Rendering)이란? Client-side Rendering(CSR)은 웹 페이지의 콘텐츠를 클라이언트(브라우저)에서 렌더링하는 방식이다. 서버에서 HTML, CSS, JavaScript 파일을 클라이언트로 보내고, 클라이언트에서 JavaScript를 실행하여 동적인 웹 페이지를 생성하게 된다. 이로 인해 서버의 부하가 감소하고, 많은 인터랙티브한 기능을 제공할 수 있게 된다. 자주 사용되는 웹 프레임워크로는 React, Angular, Vue.js 등이 있다. 😎 장점 ✅ 인터랙션 향상 CSR은 사용자 경험(UX) 측면에서 이점을 가지고 있다. 페이지의 동작에 따라 실시간으로 콘텐츠가 변경되어 사용자가 웹사이트를 더 쉽게 이용할 수 있다. 예를 들면, 기존 웹에서 페.. 2023. 6. 28.
Next.js 13 에서 NextResponse 사용 방법 해당 글은 App Router 방식을 따르고 있습니다. cookies response의 Set-Cookie 헤더를 읽거나 변경한다. set(name, value) name과 value에 값을 넣어 쿠키를 설정한다. // /home 들어오는 요청이 주어지면 let response = NextResponse.next(); // 배너를 숨기도록 쿠키 설정 response.cookies.set('show-banner', 'false; HttpOnly; Secure;'); // 옵션은 값 옆에 ; 을 붙이면 된다 // 위 코드는 Response에 `Set-Cookie:show-banner=false; HttpOnly; Secure; path=/home` 헤더가 있다와 같은 말이다. return response; .. 2023. 5. 17.
[ERROR] Prisma 마이그레이션 후 타입스크립트 에러(feat.MongoDB)-해결 카카오톡 결제 api를 추가하면서 MonogoDB 스키마에 새로운 변수와 값을 추가해줘야 하는 일이 생겼다. 그래서 Prisma의 공식 문서를 참고하여 추가한 것까진 좋았으나, create에 새로 추가한 변수를 넣자마자 타입에러를 뿜어냈다. 당황해서 에러에 관련된 건 캡처를 못했지만, 해결한 방법을 올린다. 접근한 생각은 한번 데이터를 인식을 시켜줘야 할거 같단 생각이 들었다. 그렇게 찾은 방법이 prisma studio다. npx prisma studio 위 명령어를 치면, localhost 주소를 준다. 해당 주소로 들어가면, 이런 화면이 나온다. 사진의 맨 상단 위에 보이는 + 버튼을 누른다. 그러면 위와 같이 등록한 모델들이 나온다. 필자 같은 경우엔 Reservation이 문제였으므로 Reser.. 2023. 5. 17.
[ERROR] 구글 Oauth 카카오톡 인앱 에러(※해결법 없음 주의) 베포후 테스트를 하던 도중 다른 로그인은 다 잘되는데 카카오톡에서 링크로 들어간 홈페이지에서는 로그인시 에세스 차단됨이 뜬다. 전부 다 안된다면 미천한 내가 무릎꿇고 빌어야 됐지만 이번만큼은 억울 했다. 그래서 찾아 본 결과, 카카오데브톡에 해당 이슈에 대한 내용이 있었다. 결론 제한이 있을 수밖에 없다... 실질적으로 Oauth를 이용했을 때 액세스 차단에 대해 해결 할 순 없었지만, 안되는 이유를 알아보았다. 2023. 5. 15.
[ERROR] Vercel 배포시 Prisma 에러 - 해결 해당 글은 Next.js 13.2.4 버전 기준입니다. Next.js에서 Prisma를 채택해서 배포했을 때, 해당 에러가 떴었다. 🤔 Vercel 빌드하며 난 에러 문구 PrismaClientInitializationError: Prisma has detected that this project was built on Vercel, which caches dependencies. This leads to an outdated Prisma Client because Prisma's auto-generation isn't triggered. To fix this, make sure to run the `prisma generate` command during the build process. 간단히 말하면.. 2023. 5. 15.
Next.js에서 Next-Auth의 AuthOptions구성 할 때, Callbacks 옵션에 타입주기 해당 글을 작성할 때 각 라이브러리 버전입니다. Next.js : 13.3.4 TypeScript : 5.0.4 Next-Auth : 4.21.1 Next.js를 하면서 Next-Auth 라이브러리를 사용하면 소셜로그인을 정말 쉽게 구현할 수 있다. 소셜 로그인을 구현하는 만큼 일반 로그인도 쉽게 구현할 수 있는데, 구현할 때 CredentialsProvider를 사용하게 된다. 로그인 방식에는 크게 두 가지 방식이 있는데, 첫 번째는 Session을 이용하는 방법, 두 번째는 JWT를 사용하는 방법이 있다. CredentialsProvider을 사용하게 되면 무조건 JWT방식을 사용하게 되니 Session을 이용해서 만들고 싶은 분은 Next-Auth 삽질할 필요 없이 따로 개발을 하면 될 거 같다. .. 2023. 5. 7.
[프로그래머스] H-Index(정렬) 👁‍🗨 문제 설명 H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과1에 따르면, H-Index는 다음과 같이 구합니다. 어떤 과학자가 발표한 논문 n편 중, h번 이상 인용된 논문이 h편 이상이고 나머지 논문이 h번 이하 인용되었다면 h의 최댓값이 이 과학자의 H-Index입니다. 어떤 과학자가 발표한 논문의 인용 횟수를 담은 배열 citations가 매개변수로 주어질 때, 이 과학자의 H-Index를 return 하도록 solution 함수를 작성해주세요. ❌ 제한 사항 과학자가 발표한 논문의 수는 1편 이상 1,000편 이하입니다. 논문별 인용 횟수는 0회 이상 10,000회 이하입니다. 입출력 예 citati.. 2023. 4. 28.
[프로그래머스] 가장 큰 수(정렬) 👁‍🗨 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. ❌ 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 numbers return [6.. 2023. 4. 28.