활동/롤 한글판 밴픽사이트9 [밴픽사이트] CSS 어렵다... 꼬박 이틀동안 막혀있는 CSS 어제 오늘 계속 게임페이지를 적절히 구성하고 보이도록 하는 작업을 했다. 하지만 내 CSS 실력이 모자라서인지, 뜻대로 화면이 구성되지 않았다. 글을 쓰는 지금 막혀있는 가장 큰 문제는, 부모 태그를 벗어나는 자식 태그 디자인이다. 위 사진에서는 지금 초록색 테두리가 최상단 div인데, 그 하위에 있는 자식 div인 주황색 테두리가 이를 밑으로 뚫고 넘어섰다. 이를 방지하기 위해 overflow도 찾아보고 flex와 관련해서도 찾아봤지만, 아직 잘 해결이 되지 않는다... 주말내로 해결해보고 싶다. 계속 만져봐야지. 2023. 6. 2. [밴픽사이트] 밴픽 게임페이지 구성하기 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. 이전 1 2 3 다음
