HAN STORY

기존에 유튜브에서 영상을 불러와 띄우는 형식으로 반복되는 주소를 제외한 고유의 주소를 저장시켜서 띄우는 방식으로 video 탭을 구현했었다.  근데 영상이 쌓이면서 로딩 시간이 길어지기 시작했다. 그래서 더보기 버튼을 만들고, 우선은 3개의 영상 정도만 띄운 다음 더 보기 버튼을 누를 시에 나머지 영상들을 볼 수 있도록 수정하려한다. 나는 처음에는 그냥 이것도 display: none ; 같은 특성을 이용해서 보이지만 않게 하고 진행하면 될까? 라는 생각을 했는데 그럼 보이지만 않을 뿐 데이터를 가져오는 건 동일하기 때문에 속도적인 부분에서 이점이 없겠다는 생각을 했고, 기존에는 3개만 서버로부터 가져오게 하고, 이후에 더 보기 버튼을 누를 시에 json 형식으로 서버에 전송을 해서 나머지를 더 가져오는..

선수 스탯창 마무리 단계에 이르렀다. 특성 4개를 지정된 선수에게 부여하는 기능을 구현해야한다.  위의 특성 4개인데 stats_result 컬렉션 내부에  다음과 같이 넘버링을 매겨서 해당 번호 당 알맞은 이미지 주소를 DB 안에 저장시켜놓았다. 그런 다음 네 개의 특성을 부여하면 해당 번호들이 저장될 것이고 반대로 불러올 때에도 번호당 알맞은 이미지 주소를 불러온다음 띄울 계획이다.       div class="management-container">        h4>선수 특성 부여h4>        select class="form-select" id="chr-userID">          option value="박승룡">박승룡option>              option value="o..

최근 몇 일 선수스탯창 구현에 총력을 기울였고. 6/13일 목요일 까지 기획팀과 디자인팀과 커뮤니케이션하면서 선수스탯 입력기능까지 끝냈다. 여기서 나는 이후에 받은 데이터들을 효율적으로 출력해내기 위해서 우선 stats 컬렉션을 만들었고, 그 안에  이와 같이 입력한 사람을 userID 에, 대상을 to_userID 에 넣고 나머지 스탯을 넣어줬다. 그리고 내가 입력한 이 데이터들은 언제든지 변경할 수 있게 userID 가 같은 데이터끼리 묶여서    로그인한 유저와 userID 값을 비교해 to_userID 의 input 태그 안에 자동으로 기입되게 해놓았다. 그리고 stats 컬렉션의 각 항목별 평균치를 to_userID 값으로 묶어서 새로 stats_result 라는 이름의 컬렉션으로 만들어서  이..

선수스탯창 구현을 1주일 째 계속 하고있다. 우선 여기서 개선해야했던 문제는 사용자 자신의 스탯에는 점수를 부여할 수 없도록 설정을 해야했다. 그래서 나는 유저가 로그인 했을 시에 자신의 스탯창을 눌렀을 때 스탯부여하기 버튼 자체를 안 보이게 설정을 했다. 이 과정에서 새로 배운 게 있어서 기록을 한다. 우선 나는 기존에 선수 데이터들을 불러올 때 json 형식으로 데이터들을 서버로부터 클라이언트에 불러왔고. 그러다보니 기존에 실패했던 이유가  꼴로            if (typeof 유저 !== 'undefined') { %> 이와 같이 유저가 로그인을 했을 시에 라는 가정을 설정할 시 유저가 name 과 같다고 가정을 추가로 했어야 했는데, name 은 json 형식으로 전달되었기 때문에 안에서..

팀소개 탭은 아무나 들어올 수 있다.  로그인이 필요하지 않다. 근데 아무나 들어와서 우리에게 스탯을 부여하고 그렇게 데이터베이스에 넘나들고 하면 보안상 문제가 된다. 그래서          if (typeof 유저 !== 'undefined') { %>              modalLabel.innerHTML = num_plus_name + ' 스탯부여하기취소하기';        else {%>              modalLabel.innerHTML = num_plus_name;         코드를 sendPlayerInfo() 함수 안에 추가해줘서 유저가 있을 때만 스탯부여하기 버튼이 보일 수 있도록 구현하였다.

킥 파워를 보면 선수스탯창에서 스탯을 부여하기 눌렀을 때 input 태그로 수치들이 바뀌게끔 구현하는 과정을 구현하고 있는데, visibility : hidden; 속성을 이용하니까   수치가 없어도 영역이 공간이 할당되어있었다. 이를 해결하기 위해서 알아보니까 이는 visibility 속성의 특징이고 display : none; display : block;  속성을 이용해야 내가 원하는대로 공간을 차지하지 않는 방법으로 갈 수 있었다.       script>      document.addEventListener('DOMContentLoaded', function() {        document.querySelectorAll('.introduce-stat-inputstatbt').forEach(..

아주 고민이다.. 각 프로필 이미지 마다 각 모달로 연결시켜야하는데.. 포토탭 처럼 동적 변수를 사용하여 해결하려했는데 뭔가 다르다. 그리고 안된다. .... ... 음 각 이미지마다 다 다른 열쇠가 하나 담겨있어야하고 이미지를 클릭하면  그 열쇠로 작동을 해서 열리는 각 각의 모달이 있고. 그 모달에는 그 각 각의 열쇠에 반응한 정보들이 잔뜩 나와야한다. ... 알아보니 data-player-info 속성에 넣으면 javascript 에서 속성을 사용해 사용하기도 편해보인다. 심지어 - 를 이용해 복수의 데이터도 넣을 수 있고  var playerInfo = img.dataset.playerInfo.split('-');var playerId = playerInfo[0];var playerName = p..

어제 진행 이어서 하려한다. 우선 아래에 한 칸을 더 추가해야하는데 왼 쪽은 빈 칸으로 만들어야한다. 근데 지금 내 지식으로는                   thead>                    tr>                      th class="introduce-stat-subtitle" scope="col">th>                      th class="introduce-stat-subtitle" scope="col">th>                      th class="introduce-stat-subtitle" scope="col">수비th>                      th class="introduce-stat-subtitle" scope..

최근 SQLD 자격증 취득, 여름휴가로 인해 한동안 홈페이지 개발이 중단되었다. 그 사이 선수스탯창 디자인이 끝났고, 구현해야한다.  디자인 완성본은 위와 같다.  양 옆으로 50% 씩 영역을 확보해주고 그 안에 tr, th, td 태그를 이용해서 행 열을 맞추어서 스탯을 보이게 하고 싶었다. 근데 div style="background-color: blue; float: left; width: 50%;">                      tr>                      th>킥th>                    tr>                      td>슛파워td>                      td>6td>                    div> 이처럼 코드를..

기존에 구현에 실패해왔던 기능이다. 우리 페이지에서는 로그인을 해야만 들어갈 수 있는 사진탭, 공지사항, 승부차기 탭이 있다. 그런데 메뉴를 누르고 탭을 접근해도 로그인을 하면 다시 홈화면으로 가져서 번거로운 단점이 있었고, 공지사항 링크를 한 번에 운영진들이 공지할 때에도 로그인페이지로 이동된다음 다시 홈화면으로 이동되어서 다시 유저가 직접 공지사항을 찾아가야하는 번거로움이 있었다. 이를 해결하기위해서 구현해야하는 기능이었다. 기존에 알아본 방법으로는 우선, session 을 이용해야했는데 다시 천천히 접근을 해보기로 했다. exports.isLoggedIn = (req, res, next) => {  if (req.isAuthenticated()) {    next();  } else {    req..