Project/축구모임 홈페이지개발68 [축구모임 홈페이지개발] 06/20 개발일지 Node.js / video 탭 오류 수정 및 성능 향상 기존에 유튜브에서 영상을 불러와 띄우는 형식으로 반복되는 주소를 제외한 고유의 주소를 저장시켜서 띄우는 방식으로 video 탭을 구현했었다. 근데 영상이 쌓이면서 로딩 시간이 길어지기 시작했다. 그래서 더보기 버튼을 만들고, 우선은 3개의 영상 정도만 띄운 다음 더 보기 버튼을 누를 시에 나머지 영상들을 볼 수 있도록 수정하려한다. 나는 처음에는 그냥 이것도 display: none ; 같은 특성을 이용해서 보이지만 않게 하고 진행하면 될까? 라는 생각을 했는데 그럼 보이지만 않을 뿐 데이터를 가져오는 건 동일하기 때문에 속도적인 부분에서 이점이 없겠다는 생각을 했고, 기존에는 3개만 서버로부터 가져오게 하고, 이후에 더 보기 버튼을 누를 시에 json 형식으로 서버에 전송을 해서 나머지를 더 가져오는.. 2024. 6. 21. [축구모임 홈페이지개발] 06/16 개발일지 Node.js / 선수스탯창 출력 완성 선수 스탯창 마무리 단계에 이르렀다. 특성 4개를 지정된 선수에게 부여하는 기능을 구현해야한다. 위의 특성 4개인데 stats_result 컬렉션 내부에 다음과 같이 넘버링을 매겨서 해당 번호 당 알맞은 이미지 주소를 DB 안에 저장시켜놓았다. 그런 다음 네 개의 특성을 부여하면 해당 번호들이 저장될 것이고 반대로 불러올 때에도 번호당 알맞은 이미지 주소를 불러온다음 띄울 계획이다. div class="management-container"> h4>선수 특성 부여h4> select class="form-select" id="chr-userID"> option value="박승룡">박승룡option> option value="o.. 2024. 6. 16. [축구모임 홈페이지개발] 06/15 개발일지 Nodejs / 선수스탯창 스탯입력 정리 / 출력 기능 구현 최근 몇 일 선수스탯창 구현에 총력을 기울였고. 6/13일 목요일 까지 기획팀과 디자인팀과 커뮤니케이션하면서 선수스탯 입력기능까지 끝냈다. 여기서 나는 이후에 받은 데이터들을 효율적으로 출력해내기 위해서 우선 stats 컬렉션을 만들었고, 그 안에 이와 같이 입력한 사람을 userID 에, 대상을 to_userID 에 넣고 나머지 스탯을 넣어줬다. 그리고 내가 입력한 이 데이터들은 언제든지 변경할 수 있게 userID 가 같은 데이터끼리 묶여서 로그인한 유저와 userID 값을 비교해 to_userID 의 input 태그 안에 자동으로 기입되게 해놓았다. 그리고 stats 컬렉션의 각 항목별 평균치를 to_userID 값으로 묶어서 새로 stats_result 라는 이름의 컬렉션으로 만들어서 이.. 2024. 6. 16. [축구모임 홈페이지개발] 06/14 개발일지 Node.js / 선수스탯창 개인 권한 설정 선수스탯창 구현을 1주일 째 계속 하고있다. 우선 여기서 개선해야했던 문제는 사용자 자신의 스탯에는 점수를 부여할 수 없도록 설정을 해야했다. 그래서 나는 유저가 로그인 했을 시에 자신의 스탯창을 눌렀을 때 스탯부여하기 버튼 자체를 안 보이게 설정을 했다. 이 과정에서 새로 배운 게 있어서 기록을 한다. 우선 나는 기존에 선수 데이터들을 불러올 때 json 형식으로 데이터들을 서버로부터 클라이언트에 불러왔고. 그러다보니 기존에 실패했던 이유가 꼴로 if (typeof 유저 !== 'undefined') { %> 이와 같이 유저가 로그인을 했을 시에 라는 가정을 설정할 시 유저가 name 과 같다고 가정을 추가로 했어야 했는데, name 은 json 형식으로 전달되었기 때문에 안에서.. 2024. 6. 15. [축구모임 홈페이지개발] 06/07 개발일지 Nodejs / 선수 스탯창 스탯부여권한 팀소개 탭은 아무나 들어올 수 있다. 로그인이 필요하지 않다. 근데 아무나 들어와서 우리에게 스탯을 부여하고 그렇게 데이터베이스에 넘나들고 하면 보안상 문제가 된다. 그래서 if (typeof 유저 !== 'undefined') { %> modalLabel.innerHTML = num_plus_name + ' 스탯부여하기취소하기'; else {%> modalLabel.innerHTML = num_plus_name; 코드를 sendPlayerInfo() 함수 안에 추가해줘서 유저가 있을 때만 스탯부여하기 버튼이 보일 수 있도록 구현하였다. 2024. 6. 8. [축구모임 홈페이지개발] 06/06 개발일지 Nodejs / 선수스탯창 디자인3, 개인화2 킥 파워를 보면 선수스탯창에서 스탯을 부여하기 눌렀을 때 input 태그로 수치들이 바뀌게끔 구현하는 과정을 구현하고 있는데, visibility : hidden; 속성을 이용하니까 수치가 없어도 영역이 공간이 할당되어있었다. 이를 해결하기 위해서 알아보니까 이는 visibility 속성의 특징이고 display : none; display : block; 속성을 이용해야 내가 원하는대로 공간을 차지하지 않는 방법으로 갈 수 있었다. script> document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.introduce-stat-inputstatbt').forEach(.. 2024. 6. 6. [축구모임 홈페이지개발] 06/05 개발일지 Nodejs / 선수스탯창 개인화 아주 고민이다.. 각 프로필 이미지 마다 각 모달로 연결시켜야하는데.. 포토탭 처럼 동적 변수를 사용하여 해결하려했는데 뭔가 다르다. 그리고 안된다. .... ... 음 각 이미지마다 다 다른 열쇠가 하나 담겨있어야하고 이미지를 클릭하면 그 열쇠로 작동을 해서 열리는 각 각의 모달이 있고. 그 모달에는 그 각 각의 열쇠에 반응한 정보들이 잔뜩 나와야한다. ... 알아보니 data-player-info 속성에 넣으면 javascript 에서 속성을 사용해 사용하기도 편해보인다. 심지어 - 를 이용해 복수의 데이터도 넣을 수 있고 var playerInfo = img.dataset.playerInfo.split('-');var playerId = playerInfo[0];var playerName = p.. 2024. 6. 6. [축구모임 홈페이지개발] 06/04 개발일지 Nodejs / 선수스탯창 디자인 구현2 어제 진행 이어서 하려한다. 우선 아래에 한 칸을 더 추가해야하는데 왼 쪽은 빈 칸으로 만들어야한다. 근데 지금 내 지식으로는 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.. 2024. 6. 5. [축구모임 홈페이지개발] 06/03 개발일지 Nodejs / 선수 스탯창 디자인 최근 SQLD 자격증 취득, 여름휴가로 인해 한동안 홈페이지 개발이 중단되었다. 그 사이 선수스탯창 디자인이 끝났고, 구현해야한다. 디자인 완성본은 위와 같다. 양 옆으로 50% 씩 영역을 확보해주고 그 안에 tr, th, td 태그를 이용해서 행 열을 맞추어서 스탯을 보이게 하고 싶었다. 근데 div style="background-color: blue; float: left; width: 50%;"> tr> th>킥th> tr> td>슛파워td> td>6td> div> 이처럼 코드를.. 2024. 6. 4. [축구모임 홈페이지개발] 05/04 개발일지 Nodejs / 로그인 후 접근하려 했던 페이지로 이어서 이동하기 기존에 구현에 실패해왔던 기능이다. 우리 페이지에서는 로그인을 해야만 들어갈 수 있는 사진탭, 공지사항, 승부차기 탭이 있다. 그런데 메뉴를 누르고 탭을 접근해도 로그인을 하면 다시 홈화면으로 가져서 번거로운 단점이 있었고, 공지사항 링크를 한 번에 운영진들이 공지할 때에도 로그인페이지로 이동된다음 다시 홈화면으로 이동되어서 다시 유저가 직접 공지사항을 찾아가야하는 번거로움이 있었다. 이를 해결하기위해서 구현해야하는 기능이었다. 기존에 알아본 방법으로는 우선, session 을 이용해야했는데 다시 천천히 접근을 해보기로 했다. exports.isLoggedIn = (req, res, next) => { if (req.isAuthenticated()) { next(); } else { req.. 2024. 5. 4. [축구모임 홈페이지개발] 04/24 개발일지 Nodejs / tooltip 직접 만들기 어제 그제, bootstrap 으로 tooltip 을 구현하는데에 실패했다. 내 코드 안에서는 아무리 해도 구현이 안되었다. 그래도 그 과정에서 bootstrap 의 css 코드와 js 코드를 가져오는 방법을 더 자세히 알게 되었고, tooltip 이나 popovers 그리고 그 둘을 사용하지 않을 때에 용량을 줄이기 위한 따로 불러오는 코드를 알았다. 버전도 신경써야한다는 것을 알았다. script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODew.. 2024. 4. 24. [축구모임 홈페이지개발] 04/21 개발일지 Nodejs / 로그인 성공 시 기존 접근 주소로 이동하기 4/18 목요일 진행한 회의에서 선수 스탯창 관련해서 회의를 진행했었다. 우선 1차적으로 선수들의 스탯을 볼 수 있는 창은 팀소개 탭을 활용하기로 했다. 팀소개 탭에서 각 각의 선수들의 프로필을 누르면 팝업이 하나 뜨면서 그 곳에서 우리는 스탯을 확인할 수 있게 된다. 닫기버튼 하나 정도 만들어주면 팀소개 페이지 안에서 모든 선수들을 다 편하게 볼 수 있을 것이다. 그리고 만들어진 마이페이지 기능에서는 자신의 스탯을 확인할 수 있고, 버튼을 이용해서 다른 선수들의 스탯을 평가할 수 있는 기능을 추가해줘야한다. 추후에 마이페이지 창에서는 기능들을 추가해 나갈 것이기 때문에 신경써서 처음부터 코드를 잘 정리해서 작성하면 좋을 것 같다. 오늘은 우선 저번에 실패한 로그인 성공 시에 기존에 접근하려고 했던 주소.. 2024. 4. 22. [축구모임 홈페이지개발] 04/16 개발일지 Nodejs / 마이페이지 구현 우선 알아보니 나는 main.js 와 server.js 간에 데이터를 주고받아야 하기 때문에 이는 직접적으로 데이터를 전달할 수 없다. 그래서 AJAX 요청을 통해서 전달을 해야했다. 마이페이지 아이콘을 눌렀을 때 실행하게 될 gotoMypage() 함수이다. function gotoMypage() { fetch('/user') .then(response => response.json()) .then(data => { const userId = data.userId; window.location.href = '/mypage/' + userId; }) .catch(error => console.error('Error fetching user data:', error)); } app.get('/user', .. 2024. 4. 16. [축구모임 홈페이지개발] 04/15 개발일지 Nodejs / 공지사항 탭 기능 추가, 마이페이지 기능 계획 우선 다음과 같이 공지사항 상단에 지난 번 얘기했었던 날짜를 넣어줬다. 언제가 최근 업데이트인지 날짜를 알릴 필요는 있어보였다. 이전 버튼을 만들어서 공지사항으로 돌아갈 수 있도록 버튼을 추가했고, 위과 같이 업데이트 내용을 알리고자 했다. 디자인팀과 마이페이지 기능을 구현하고 개인 스탯 기능을 추가할 계획을 짰다. 우측 상단에 기존에 만들어놓은 저 버튼을 로그인이 되어있을 시에 누르면 마이페이지로 이동시켜야한다. 마이페이지를 구현하는데에 조사를 해보니, 동적 라우팅, 정적 라우팅 두 방법을 통해서 구현할 수 있었다. 정적 라우팅으로 구현을 하면 www.goalpostagain.com/mypage 이런 식으로 하나의 정적인 라우트에서 우리가 마이페이지를 구현하게 될 것이고, 거기에 로그인한 사람의 데이터.. 2024. 4. 15. [축구모임 홈페이지개발] 04/06 개발일지 Nodejs / 업데이트 공지 탭 활성화 최근 구현한 승부차기 기능이 아주 효과적으로 활성화되어서 만족하고 있었다. 큰 이벤트나 업데이트, 사소한 기능 개선 업데이트 되었을 때 사용자들이 확인할 수 있도록 하는 탭이 필요했다. 그래서 공지사항 탭에 눈에 띄지 않을 정도로 가볍게 탭을 추가해주었다. 업데이트 내용 확인을 누르면 업데이트 탭으로 이동한다. 공지사항 탭과 구성이 같기 때문에 서버에서도 동일한 엔드포인트를 만들어줬고 이름만 바꿔줬다. 업데이트 탭으로 이동하면 새로운 게시판으로 이동한다. 글 서식은 메이플스토리 게임에서 사용하는 방식으로 그대로 따라갔다. 기존에는 없던 버튼을 만들어서 공지사항 탭으로 이동이 가능하게끔 추가해줬다. 이렇게 공지사항 탭에서 현재 업데이트 버전을 확인할 수 있다. 업데이트 날짜도 공지사항탭에서 미리 확인할 수.. 2024. 4. 7. 이전 1 2 3 4 5 다음
