분류 전체보기23 [밴픽사이트] 밴픽 게임페이지 구성하기 2 오류 해결하기 오늘은 어제에 이어서, 게임페이지를 만들었다. https에서 http api에 요청을 보낼 수 없게 막힌 보안 관련 문제(Mixed Content)가 발생했다. 구글링 해보니, 메타 태그를 추가하면 된다고 한다. Next.js에서는 태그 안에 아래 코드를 추가하면 된다고 하더라. 이를 layout.tsx에 추가해서 배포해봤더니, 여전히 문제가 해결되지 않았다. 디버그 콘솔에서 html 태그를 확인해봤더니, 의도한 태그가 전혀 나타나지 않는 것을 확인할 수 있었다. Next.js 문서에서 확인해보니, 지원하지 않는 사항이므로 Middle ware나 Security Headers, 혹은 redirect() 로 해결하라고 일러줬다. Functions: generateMetadata | Next... 2023. 5. 31. [밴픽사이트] 밴픽 게임페이지 구성하기 게임페이지 구성 오늘은 챔피언을 선택할 수 있는 게임페이지를 구성하는데에 목표를 두었다. 당장은 redis연결이나 socket.io가 준비되지 않아서, 일단은 혼자 밴픽을 할 수 있는 1인용 게임페이지를 구성하기로 했다. 먼저 지난번까지 구성한 팀명 입력 페이지에서, 입력된 팀명을 바탕으로 아래와 같은 화면이 나오도록 했다. 상단에는 양쪽에 팀명을 두고, 중앙에 타이머를 두었다. 하단에는 양쪽에 각 팀이 선택한 챔피언이 표시되도록 할 예정이고, 중앙에는 현재 패치 버전에 있는 챔피언 리스트를 보여주고 선택할 수 있게끔 만들 것이다. 오늘 막힌 것, StaticGenBailoutError 오늘 대부분의 시간동안 막혀서 끙끙댔던 에러다. 구글링을 해보면서 대략 이해한 것은, 백엔드에 구성한 정적인 경로와 동.. 2023. 5. 30. [밴픽사이트] 팀명 입력 폼 만들기, DB 정하기 첫 페이지 구성, 팀명 입력 폼 만들기 유저가 처음 웹페이지에 들어와서 하는 것은 밴픽을 생성하는 것이다. 그 다음에야 밴픽을 진행할 수 있다. 따라서 가장 먼저 만들 것은 밴픽 생성 폼을 만드는 것이다. TeamForm 컴포넌트에 입력란과 버튼을 생성해줬다. TeamForm은 아래와 같이 구성된다. register와 errors, handleSubmit은 react-hook-form 라이브러리에서 쓸 수 있는 것이다. 이로인해 밴픽 생성버튼을 눌렀을 때, 입력란에 적힌 데이터를 그대로 전송할 수 있다. DB 정하기 이제 밴픽을 생성해서, DB에 생성되도록 해야한다. 지난 번에는 Heroku로 서버를 만들고, redis를 붙여서 DB를 썼다. redis를 썼던 이유는, 밴픽 데이터가 오래 지속될 필요가 .. 2023. 5. 29. [밴픽사이트] Next.js로 갈아엎기 밴픽사이트 개요 기존에 만들었었던 한글판 리그오브레전드 밴픽사이트를 냅두고, Next.js로 새로 만들어 보기로 했다. 아래의 github 코드들은 일단 냅두려고 한다. GitHub - MarigoldJ/lol-clash-banpick-ko: League of Legends 한글판 밴픽사이트 League of Legends 한글판 밴픽사이트. Contribute to MarigoldJ/lol-clash-banpick-ko development by creating an account on GitHub. github.com 이유는 크게 3가지가 있다. 기존 사이트의 서버였던 Heroku에서 redis를 사용할 수 없게 되었다. 기존 서버의 코드를 Typescript로 리팩토링하고자 한다. CSS를 좀 활용.. 2023. 5. 28. 이전 1 2 3 4 5 6 다음
