코딩블로그

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에 대해 많이 배워가는 플젝이었다. 이에 대한 내용을 따로 정리하려고 한다

이 댓글 추첨 페이지는 관리자 페이지 말고 실제 티켓 예매 사이트에 있는 응원톡 부분과 관련이 있다. //src/components/CommentRandomPage/CommentRandomPage.js import React, { useEffect } from 'react'; import { randomCom } from '../../state/actions-creators/randomCom'; import { Table } from 'antd'; import { useSelector, useDispatch } from 'react-redux'; const { Column } = Table; function CommentRandomPage() { const { randm } = useSelector(st..

이 부분은 쉽게 만들 수 있었다. 이미 3월에 만들어 놓은 css부분이 있어서 css는 그대로 적용 하였다. import React, { useState, useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Box } from './Box'; import { Table } from 'antd'; import { LandingPage } from '../../state/actions-creators/LandingPage'; function Landing_Page() { const dispatch = useDispatch(); const { data } = useSelector(state => st..

시작하기 전에 대략 티켓 페이지의 기능을 설명해보자면: 공연 날짜별로(YB,OB)별로 구분할 수 있도록 ant-design에서 segmented를 이용하였다. 티켓 페이지네이션도 ant-design에서 table 부분에서 가져왔다. 단체 협업이다 보니 swagger을 이용하여 api키값을 가져와서 정보를 불러왔다. Action 부분에서는 상태를 변경할때마다 값들의 상태, 즉 티켓 상태를 변경할 수 있도록 만들어주었다. 1.티켓 페이지에서 페이지네이션 구현하기 페이지네이션을 구현하기 전에, 가장 중요한, data값을 불러오는 부분부터 설명을 해보겠어요. 여기서 actions-creators에서 ticketPagi와 ticketPagination, changeState를 import해 온것을 볼 수 있다. ..

7월, 컴퓨터 공학 밴드 동아리 답게 9월 공연을 위해,선배들이 티켓 페이지를 계획 하셨다. 말하는 감자인 나는 운 좋게 관리자 페이지 개발하는 부분에 참여하게 되었다. 피그마를 보면서 역할 분담회의를 했었는데 솔직히 말하면 지식이 그렇게 많은 편이 아니였어서 뭐가 만들기 어렵고 쉬운지 감이 안잡혔다. 그러다가 총괄 선배가 그냥 짜줬었는데 지금 생각해보면 진짜 잘 분담 잘 해 준것 같다. 아무튼, 나는 티켓페이지, 랜딩 페이지, 댓글 추첨 페이지 부분을 참여 하였다. 자바스크립트와 리액트를 사용하여 코드를 짜보았다. 티켓 페이지 랜딩 페이지 댓글 추첨 페이지