코딩블로그

https://noogoonaa.tistory.com/110 PWA 시작하기 - Next.js 프로젝트로 PWA 만들기 이 글은 기본적으로 Next.js를 알고 계신 분들이 보기 좋은 글입니다. 하지만 모르시는 분들도 이해하실 수 있도록 작성하였습니다. 1. 프로젝트 생성 # 자바스크립트로 생성 npx create-next-app@latest # noogoonaa.tistory.com 이 분을 보고 엄청 많은 도움을 얻었다.. 1. Next.js에서 PWA를 적용하기 위한 next-pwa 패키지 추가 #npm npm install next-pwa next-pwa를 사용하게 되면 플러그인을 하나밖에 사용못하게 되서 추가적으로 플러그인을 사용할 수 있게 한번에 묶어주는 패키지가 필요하다. 그래서 next-c..

우리팀 서비스는 숏폼이 핵심 기능이었기 때문에 최대한 기획과 디자이너분들이 원하는 프레임으로 맞춰야 했다. 비디오 플레이어를 우리가 제작해서 넣는거는 시간이 너무 오래 걸릴 것 같아서 생각했던게 임베디드 방식이다. 사람들이 제일 많이 사용하는 유튜브!를 생각했었는데 유튜브는 임베디드하면 유튜브로고가 뜨고 여러가지 ui가 우리의 서비스와 맞지 않았다. 그래서 고민하다가 찾아낸 방식이 dailymotion이용하기!! 1.제일 먼저 생각했던게 react-player사용하기였다 2.react-player를 설치하여 dailymotion비디오 링크만 첨부하면 됬는데... 3.css를 마음대로 설정못하고, 자동재생 컨트롤도 못하고 무엇보다도 바로 다음 영상으로 넘어간다는 게 큰 문제점이었다 3.react-playe..

1.로그인하기 누르면 redirect로 uri로 이동하여 인가코드를 받는다 2.callback페이지를 따로 만들어서 callback페이지에서 accesstoken과 refresh token을 cookie로 저장하는 작업을 한다. 3.백엔드랑 통신할때 카카오에서 받은 인가코드를 넘겨줘야하는데, 백엔드 측에서 일일이 웹사이트 도메인을 등록하는 것보다 params: { redirect_uri: process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI }, 이런식으로 GET요청시 requestbody에 해당 도메인의 정보와 인가 코드를 유동적으로 보내주었다 4.callback페이지에서 code안에 인가코드를 넣어줬는데, 이 code가 있으면 loginHandler라는 함수로 가고 그 함수 안..

이 링크 들어가면 내가 참여한 웹앱서비스에 대한 자세한 정보가 나와있다 :인스타 링크 먼저 대략적인 ui는 여기서 나는 메인페이지, 테마상세페이지, 비디오페이지를 구현했다..물론 뒤로 갈수록 css 에러나 수정을 하는거는 다같이 했지만 일단 진짜 어려웠던 점:로그인 원래 현영이가 맡았는데 이해할 수 없는 오류들이 발생하기 시작해서....결국 같이 보게 됬다 결론은...로그인이 제일 어려웠다 ㅜㅜ 흑흑..그래서 로그인 부분에 대해서 먼저 다뤄보고 싶다! 1.로그인 2.비디오플레이어 어떻게 구현했는지 3.react-query에 대해 많이 배워가는 플젝이었다. 이에 대한 내용을 따로 정리하려고 한다