본문 바로가기

전체 글243

[축구모임 홈페이지개발] 04/15 개발일지 Nodejs / 공지사항 탭 기능 추가, 마이페이지 기능 계획 우선 다음과 같이 공지사항 상단에 지난 번 얘기했었던 날짜를 넣어줬다. 언제가 최근 업데이트인지 날짜를 알릴 필요는 있어보였다. 이전 버튼을 만들어서 공지사항으로 돌아갈 수 있도록 버튼을 추가했고, 위과 같이 업데이트 내용을 알리고자 했다. 디자인팀과 마이페이지 기능을 구현하고 개인 스탯 기능을 추가할 계획을 짰다. 우측 상단에 기존에 만들어놓은 저 버튼을 로그인이 되어있을 시에 누르면 마이페이지로 이동시켜야한다. 마이페이지를 구현하는데에 조사를 해보니, 동적 라우팅, 정적 라우팅 두 방법을 통해서 구현할 수 있었다. 정적 라우팅으로 구현을 하면 www.goalpostagain.com/mypage 이런 식으로 하나의 정적인 라우트에서 우리가 마이페이지를 구현하게 될 것이고, 거기에 로그인한 사람의 데이터.. 2024. 4. 15.
[축구모임 홈페이지개발] 04/06 개발일지 Nodejs / 업데이트 공지 탭 활성화 최근 구현한 승부차기 기능이 아주 효과적으로 활성화되어서 만족하고 있었다. 큰 이벤트나 업데이트, 사소한 기능 개선 업데이트 되었을 때 사용자들이 확인할 수 있도록 하는 탭이 필요했다. 그래서 공지사항 탭에 눈에 띄지 않을 정도로 가볍게 탭을 추가해주었다. 업데이트 내용 확인을 누르면 업데이트 탭으로 이동한다. 공지사항 탭과 구성이 같기 때문에 서버에서도 동일한 엔드포인트를 만들어줬고 이름만 바꿔줬다. 업데이트 탭으로 이동하면 새로운 게시판으로 이동한다. 글 서식은 메이플스토리 게임에서 사용하는 방식으로 그대로 따라갔다. 기존에는 없던 버튼을 만들어서 공지사항 탭으로 이동이 가능하게끔 추가해줬다. 이렇게 공지사항 탭에서 현재 업데이트 버전을 확인할 수 있다. 업데이트 날짜도 공지사항탭에서 미리 확인할 수.. 2024. 4. 7.
[축구모임 홈페이지개발] 03/27 개발일지 Nodejs / 승부차기 게임 구현 3 (불리언 타입 함수) 클라이언트에서 서버로 데이터가 전달되는 과정에서 데이터가 빠르게 전달되다보니 클라이언트 -> 서버 -> DB -> 서버 -> 클라이언트 과정을 다 겪기 전에 데이터 전송이 겹쳐서 충돌이 일어나보였다. 20회 제한이 1 씩 감소하다가 빠르게 충돌되면 더 이상 데이터가 전달이 되지 않고, 로그아웃 후 다시 로그인해보면 중간에 다시 횟수 제한이 남아있는 오류가 발생했다. 딜레이를 넣어서 안정화를 시켜야겠다고 생각이 들었고, setTimeout(function () { isClickDelayed = false; }, 800); 함수를 버튼 클릭 사이에 넣어서 클릭 딜레이도 넣어보았지만, 결국 막힘 팝업이 뜬 후에 다시 재시도 하는 상황에서 같은 문제가 발생했다. 또 모바일로 보통 버튼을 누르는데, hover 는.. 2024. 3. 28.
[축구모임 홈페이지개발] 03/26 개발일지 Nodejs / 승부차기 게임 구현2 문제가 생겼다. 우선, 접속시간 비교 후 20회 초기화 시키는 과정에서 내가 저장한 시간이 한국 시간이 아니었다. 이는 예전에 게시물 기능구현을 할 때 겪었던 시행착오여서 금방 해결할 수 있었다. passport.deserializeUser(async (user, done) => { try { let result = await db.collection('user').findOne({ _id: new ObjectId(user.id) }); if (result) { delete result.password; const timeZone = 'Asia/Seoul'; let today = new Date( new Date().toLocaleDateString('ko-KR', { timeZone })); let r.. 2024. 3. 26.
[축구모임 홈페이지개발] 03/25 개발일지 Nodejs / 승부차기게임 구현 지지난 게시물에 승부차기 게임에 기능 수정이 필요한 이유에 대해 말을 했었다. 우선 목적은 하루 20회 제한, 자정 초기화가 목적이다. 20회 제한과 자정 초기화를 하기 위해서 커뮤니티에 도움을 요청했었다. 지난 개인프로젝트에서는 자정초기화를 하는 것에 실패를 했었기 때문이다. 추천 받은 방법의 중요한 포인트는 초기화를 한 번에 진행하지 마라 였다. count 변수를 하나 만들고, 게임을 할 때마다 날짜를 기록 후 데이터베이스에 전송시킨다. 로그인을 새로 했을 시에 오늘 날짜가 위의 날짜와 다르다면 횟수 20회를 초기화. 같다면 유지. 이 틀을 유지한 상태로 코드를 짜보았다. 남은 기회 남은 기회를 나타내는 코드를 짜주었고, var userShootingCountElement = document.getE.. 2024. 3. 26.
[축구모임 홈페이지개발] 03/23 개발일지 Nodejs / 게시물 댓글 개수 표시 다른 사이트들을 참고하던 중에 게시판에서 제목 뒤에 해당 게시물의 댓글 개수가 표시되는 기능이 있다. 게시물에 댓글이 추가되었는지도 들어가지 않고 확인할 수 있고 여러모로 필요한 기능 같아서 추가하고자 했다. app.get('/notice/:number', async (req, res) => { let result = await db.collection('notice').find().sort({ _id: -1 }).skip((req.params.number - 1) * 10).limit(10).toArray(); let result2 = await db.collection('notice').find().sort({ _id: -1 }).toArray(); let commentCounts = []; for .. 2024. 3. 23.
[축구모임 홈페이지개발] 03/18 출시 이후 점검 출시한지 3주차. 출시 이후 몇 가지 갖게 된 고민과 추가 개선사항 몇 가지 기록하려한다. 1. 컨텐츠 부족 출시 전부터 고민이 많았던 부분이다. 컨텐츠 부족이 될거란 건 알고 있었고 사람들이 많이 이용할만한 뭔가가 있어야한다. 사람들이 들어와서 뭔가를 할 만한 컨텐츠로는 승부차기 게임, 사진&영상 이렇게 두 가지이다. 1-1. 승부차기 게임의 문제점 1-1-1. 승부차기 게임 가능 횟수를 무제한으로 설정해놓다보니 사람들이 매일 들어올 거라는 예상이 벗어났다. 초반에 바짝 점수를 냈던 사람들 몇 명이 있다보니 다른 사람들이 '와 저 점수를 어떻게 넘어' 라는 생각으로 의욕이 안 나 이후 참여가 저조한 문제도 발생했다. 그럼 기존에 아이디어가 나왔던 하루 20회 제한으로 두면 하루에 20번이라도 다 채우기.. 2024. 3. 18.
[축구모임 홈페이지개발] 02/27 개발일지 Nodejs / 사이트 확대 제어 meta tag 승부차기 탭에서 버튼을 빠르게 클릭하다보면 버튼 클릭이 인식되는 게 아니라 자동으로 확대가 되어서 좀 불편했다. 이를 해결하기 위해서 확대를 제어할 수 있는 방법이 있을까 알아보았는데, 위 meta 태그를 사용해보았다. "user-scalable=no" 모바일로 확인하니까 반응형 디자인이 다 초기화가 되었다. 웹버전으로 보여졌다. 위 meta 태그는 사용자의 확대/축소 제스처를 비활성화 하지만, 이로 인해 반응형 디자인이 초기화가 될 수 있다고 한다. 그래서 더 알아보니, 위 태그를 유지한 채 javascript 를 이용해야한다고 한다. document.addEventListener('gesturestart', function (e) { e.preventDefault(); }); 위와 같은 방법으로 중간.. 2024. 2. 27.
[축구모임 홈페이지개발] 02/26 개발일지 Nodejs MongoDB collection 삭제 승부차기 점수가 매 달 초기화가 되어야하는데, mongoDB 의 gamezone_shooting 이름의 collection 안에 점수들이 다 저장되어있기 때문에 통째로 그 collection 을 삭제하면 점수가 초기화가 되었다. 그래서 알아보니, const collectionName = 'gamezone_shooting'; await db.dropCollection(collectionName); 위와 같은 방법으로 collection 이름을 지정한다음 삭제해주면 되었다. 근데 문제가 하나 발생했다. 점수 순서대로 출력하기 위해서 승부차기 탭에서 const shootingScoreArray = Object.entries(ShootingScore); shootingScoreArray.sort((a, b) =.. 2024. 2. 26.
[축구모임 홈페이지개발] 02/19 개발일지 Nodejs / 로그인 에러 수정 출시가 얼마 안 남았다. 마무리를 하면서 기존에 수정하지 못한 몇 가지 부분들을 수정하고있다. 로그인 페이지에서는 기존에 form 태그를 이용해서 서버로 아이디와 비번을 보낸 후에 서버에서 DB와 비교 후, passport.use(new LocalStrategy(async (입력한아이디, 입력한비번, cb) => { let result = await db.collection('user').findOne({ userID: 입력한아이디 }) if (!result) { return cb(null, false, { message: '아이디잘못침' }) } if (await bcrypt.compare(입력한비번, result.password)) { return cb(null, result) } else { ret.. 2024. 2. 19.
[축구모임 홈페이지개발] 02/14 개발일지 출시 전 세부 디자인 수정 WEB 버전에서 LAST MATCH 글씨가 아래로 내려간 오류 수정 .carousel-item img { max-width: 460px; max-height: 100%; width: 100%; height: auto; margin: auto; } @media only screen and (max-width: 460px) { .story-main { width: 100%; } } @media only screen and (min-width: 461px) { .story-main { width: 460px; } } 핸드폰 가로 화면 460px 까지는 사진탭 사진 가로가 꽉차도록 설정 기존에는 보통 풋살을 금요일로 하기 때문에 그냥 요일은 따로 입력칸을 안했다. (운영진 입력시 편의성 위함) 근데 아예 val.. 2024. 2. 19.
[축구모임 홈페이지개발] 02/13 개발일지 사진탭 미팅 보호되어 있는 글 입니다. 2024. 2. 14.
[축구모임 홈페이지개발] 02/12 개발일지 Nodejs css / 승부차기 게임 구현 app.get('/gamezone-shooting', this.isLoggedIn, async (req, res, next) => { let mvpboardDic = await db.collection('mvpboard').find().sort({ _id: -1 }).limit(1).toArray(); let mvpboard = mvpboardDic[0].member_score; let ShootingScore = await db.collection('gamezone_shooting').find().toArray(); console.log(ShootingScore) res.render('gamezone-shooting.ejs', {mvpboard : mvpboard, ShootingScore : Shoo.. 2024. 2. 12.
[축구모임 홈페이지개발] 02/11 개발일지 디자인 회의 및 수정 메뉴바 화면 100% 채워지도록 수정 하단 로그인버튼, 로그인시 로그아웃 버튼 추가 메뉴 폰트 확대 시간 폰트 수정 Anton navi-area 높이 수정 네이버지도 로고 높이 자동 조정되도록 수정 height:auto; 점수 숫자 폰트 수정 Anton top-area-logo 90% 크기 축소 2024. 2. 12.
[축구모임 홈페이지개발] 02/06 개발일지 / 디자인,기능 피드백 구현 MVP 폰트 수정 Gloock, Regular (Google Font) 날짜, vs 폰트 연하게 설정 상대팀 로고 연하게 설정, 크기 축소 네비게이션 버튼 상하 확대 상단바 우측 마이프로필 버튼 추가 클릭시 로그인페이지 이동 기능 추가 메뉴탭 배경이미지 추가 메뉴탭 메뉴 글씨 확대 LAST MATCH 상하 중앙정렬 공지사항 상세페이지 댓글 입력칸 아이폰 미니 버전 추가 사진&영상 탭에 소제목 추가 PHOTO, VIDEO 버튼 div 태그에서 button 태그로 변경 (갤럭시 오류 수정 목적) 2024. 2. 6.

티스토리툴바