Nextjs

SSR vs SSG light house로 비교하여 서비스 성능 개선하기

https://blog.cau-likelion.org/ LikeLionCAU Blog this This 키워드동작은 나타내는 메서드는 자신이 속한 객체의 상태, 프로퍼티를 참조하고 변경이 가능해야 한다.그러기 위해서는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. blog.cau-likelion.org tistory, velog, 네이버 블로그등 동아리원들의 블로그를 모아 우리 동아리만의 피드를 제공하는 서비스를 제작했다. Next13으로 진행한 첫 프로젝트다. 배포는 vercel로 진행했다. 로직 1. rss를 받아온다. 2. 해당 rss를 rss-parser를 통해 파싱한다. 3. 불필요한 광고 태그를 제거한다. 4. content에서 제일 처음 만나는 img태그를 끌고와서 썸네일로 ..

중하하 - 멋쟁이사자처럼 중앙대학교 개발 회고

https://cau-likelion.org/ LikeLionCAU MAY I 기다리지 마세요, 메이아이하세요. 전문가-리포터 인터뷰 중개 서비스 메이아이 2022 해커톤 cau-likelion.org 시작 멋쟁이사자처럼 11기 운영진으로 활동을 시작하며 가진 목표는 함께 자라는 조직을 만드는 것이었다. 작년, 우아한 테크코스:프리코스에 참여해 진행하면서 불특정 다수의 사람들이 discussion탭에서 서로의 생각과 코드를 나누고, 질문과 답변을 이어가며 함께 성장하는 경험을 할 수 있었다. 나는 여기서 착안하여 우리도 우테코처럼 과제를 사이트로 제출하고, 제출시에 과제에 한주 회고를 작성, 그것을 공유해 읽으면서 세션과 운영을 해나가고 싶었다. 나는 그래서 이 사이트 아이디어를 투고했고, 좋은 반응을 ..

구글 소셜 로그인 배포/로컬에 적용하기

프로젝트에 소셜로그인을 구현했다. 로컬에서 테스트를 하고, 배포에서 실제 사용해야하니 로컬환경과 배포환경에서 동일한 작동을 구현하는데 문제가 생겼었다. 별거 아닌 문제였지만 이거 하는데 정말 하루는 온전히 갈아넣었던 것 같다. 배포된 백엔드에서 로그를 확인하며 진행해야했기 때문이다. (처음엔 심지어 이 생각도 하지 못했다.) 우리 문제는 redirect_uri였다. 그전에 우리 로그인 로직에 대해 설명하자면 우리 로그인 로직 로컬환경 구성 구글 client id와 redirect_uri, google_scope를 env형태로 관리해주었다. client_id와 google_scope는 변하지 않는 값이므로 따로 github에서 분기처리를 해주지 않았다. 배포환경 구성(Github action) .githu..

serverless 무반응

github Action에서 serverless를 실행은 시켰는데, 제대로 실행되지 않는 문제가 발생했다. 도대체 무슨 오류인지 알 수 가 없어서 온갖 사이트를 뒤지며 해결하려 했다. 허무하게도 원인은 띄어쓰기 한칸이었다. distributionId: 후에 띄어쓰기를 한 칸 해야 했는데 하지 않았던 것이 원인이었다. vscode상에서 띄어쓰기를 하지 않으면 distributionId가 문자열처럼 표기된다. 이것 때문에 나의 3시간이 증발되었다. 이 글을 보는 당신은 안그랬으면 좋겠다.

NextJS Serverless 배포, github Action CICD하기

NEXT.JS를 Serverless로 배포하고 CICD를 설정해보자. package.json 설정 1. npm run deploy 설정 우선 script에 deploy:serverless를 추가해서 github Action이 deploy명령어를 실행했을 때 자동적으로 serverless가 실행될 수 있도록 하자 { ... "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "deploy": "serverless" }, ... } 2. serverless 설치 둘중에 하나로 하면 된다. 1. package.json에 입력후 npm install { ... "devDependencie..

nextjs 비디오 import하기

로컬 환경에서 mp4파일을 렌더링 하려고 했지만 개같이 실패! 웹팩 설정 웹팩에서 mp4파일에 대한 loader를 찾지 못해서 발생하는 오류이다. next.config.js에 다음과 같은 웹팩 설정을 추가해주자. const nextConfig={ webpack: (config) => { config.module.rules.push({ test: /\.(mov|mp4)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', }, }, ], }); return config; }, } module.export=nextConfig; .mov, .mp4와 같은 형태의 파일이 오는경우(test) use와 같은 설정을 사용하겠다는 것이다. 여기서는 f..