Project82 [축구모임 홈페이지개발] 12/26 개발일지 Nodejs css / 홈화면 경기결과 탭 배치 수정 어제 홈 화면에 경기결과를 나타내는 탭에 배치를 잘못 구성한 것 같아서 오늘 처음부터 다시 배치하고있다. 오늘은 접근방식을 완전히 바꾸어서 큰 구역마다 영역을 확실히 만들고 % 를 이용해서 애초에 영역을 고정시켜보고 그 안에서 사이즈를 변동해보기로 했다. 다음 색상과 같이 영역을 나누었고 여기서 이제 미세하게 조절해볼 계획이다. .home-lastmatch-logo-area { margin-left: 1%; width: 13%; } .sharklogo { width: 85%; } .home-lastmatch-info-area { margin-left: 1%; width: 52%; } .home-lastmatch-awayname { font-size: 200%; } .home-lastmatch-date {.. 2023. 12. 28. [축구모임 홈페이지개발] 12/25 개발일지 Nodejs / 회원가입, 로그인페이지 구현, 로그인 예외처리 오늘 손봐야할 부분은 우선 로그인, 회원가입 디자인 구현하기, 공지사항 게시할 때 다수의 이미지 게시하기. 우선 로그인 화면을 구성했다. 디자인팀이 시안을 준 대로 잘 디자인 된 거 같아서 만족도가 높다. 근데 회원가입 버튼을 누를 때 회원가입 이렇게 영역을 클릭하면 function gotoRegister() { window.location.href = '/register'; } 다음과 같은 함수가 실행되도록 구현했는데, 제일 처음에 버튼을 클릭하니까 "Missing credentials" 다음과 같은 에러가 발생했다. 이유는 내가 로그인 화면에 내용들을 중앙정렬 하느라 form 태그 안에 영역을 만들고 그 안에서 중앙정렬하기 위해서, 회원가입 버튼을 form 태그 안에 배치해서 였다. 그건 다시 회원가.. 2023. 12. 25. [축구모임 홈페이지개발] 12/24 개발일지 Nodejs / new Date() 함수로 한국시간 맞추기 기존에 갖고있던 오류 중 하나가 공지사항을 작성하면 상세페이지에 시간까지 나오는 기능이 있는데, 아이폰으로 작성을 하면 그리니치 천문대 기준 시간으로 나오는 오류가 있었다. 그를 해결하기 위해서 let Today = new Date().toLocaleDateString('ko-KR') 위처럼 뒤에 한국버전으로 통일을 시켜주니까 표기방법은 한국식으로 맞게 바뀌었는데, 여전히 아이폰에서 등록을 하면 여전히 시간이 9시간 이른 시간으로 나왔다. 그래서 알아본 바로는 const timeZone = 'Asia/Seoul'; let Today = new Date().toLocaleDateString('ko-KR', { timeZone }); let Time = new Date().toLocaleString('ko-.. 2023. 12. 25. [축구모임 홈페이지개발] 12/23 개발일지 / 검색결과 탭 삭제기능, 삭제권한 기능 추가 경기일정에서 특정 아이디로 접속시 경기일정을 삭제할 수 있는 기능을 넣고 싶었다. 삭제 위와 같이 삭제버튼을 만들었고, 이름이 test 인 유저에게만 삭제가 보이게 만들었다. 그리고 위처럼 만들면 로그인이 안되어있는 상태에서는 분명 에러가 뜰 것이기 때문에 유저가 있을 때, 유저 이름이 test 면 보이게 했다. function confirmDeleteResult(event) { event.preventDefault(); var commentId = event.target.getAttribute('data-result-id'); var confirmDelete = confirm('글을 삭제하시겠습니까?'); if (confirmDelete) { window.location.href = '/match-re.. 2023. 12. 24. [축구모임 홈페이지개발] 12/21 개발일지 / 디자인 이번 디자인 회의에서 로그인화면, 회원가입화면, 공지사항 상세페이지 화면이 디자인 되었다. 2023. 12. 24. [축구모임 홈페이지개발] 12/20 개발일지 Nodejs html css js / 경기결과 탭 디자인 및 기능구현 보호되어 있는 글 입니다. 2023. 12. 23. [축구모임 홈페이지개발] 12/12 개발일지 Nodejs css / 구글폰트적용, 여러개의 변수 쿼리전달, 검색창디자인변경 우선 폰트 문제를 해결하기 위해서 구글폰트에서 폰트를 새로 지정했고, font-family: 'Noto Sans KR', sans-serif; 위 코드들을 추가해주면서 폰트를 통일시켰다. 그리고 두께별로 한 번에 추가해서 font-weight : 300 ; 와 같이 두께를 조절할 예정. 디자인팀에서 검색기능의 디자인 수정요청을 해서 .search-container { background-color: #f0f0f0; padding: 10px; display: flex; align-items: center; width: 95%; margin: -1px auto 25px auto; border-radius: 7px; } .search-icon { width: 20px; /* 돋보기 이미지의 크기에 맞게 조절 .. 2023. 12. 12. [축구모임 홈페이지개발] 12/10 개발일지 Nodejs css / notice-post 영역 확장 오늘도 수정이 필요해보이는 부분들을 정리해봤다. 첫 번째로는 글 작성 영역을 모바일에서 보면 너무 좁아서 넓혀줬다. 일단 폰트에서 문제가 생겼다. ttf 파일은 웹,앱 둘 다 적용이 안되고, woff woff2 파일은 웹에서 적용이 되고 안드로이드에서도 적용이 되지만, 아이폰에서는 적용이 안된다. ios 에서 호환이 안되는 폰트인건지 해결방안을 좀 더 찾아보고 정 안되면 구글폰트를 사용하기로 디자인팀과 합의를 봤다. 생각보다 공지사항탭의 활용도가 그렇게 많지 않을 것 같다. 이 활용도대로면 검색기능과 글의 다음 글을 보여주는 기능을 추가할 필요가 없다고 판단했다. 더 상의를 해야겠지만 어차피 같은 디자인으로 커뮤니티 탭을 만들거라면 미리 구현해놓아도 괜찮아보인다. 2023. 12. 10. [축구모임 홈페이지개발] 12/09 개발일지 html css / Local 폰트 적용, 팀소개 탭 디자인 공지사항탭 기능구현이 끝나간다. 오늘은 디자인에 조금 더 힘을 써볼 생각이다. 7일날 디자인팀원들이랑 회의를 해서 피드백을 받았기 때문에 그 결과를 내어주어야한다. 우선 폰트변경을 진행했다. Pretendard-Light.woff 디자인팀원들이 폰트를 보내줬다. .woff 확장자의 저 폰트파일을 main.css 파일이 들어있는 폴더 안에 넣고 @font-face { font-family: 'Pretendard-Light'; src: url('../Pretendard-Light.woff') format('woff'); font-weight: normal; font-style: normal; } main.css 에 다음과 같은 코드를 짜줬다. 또 body 태그 안에 font-family: 'Pretendar.. 2023. 12. 10. [축구모임 홈페이지개발] 12/07 개발일지 Nodejs / 한국식 날짜 표기 고정 출력, 반응형 웹디자인 구현, 팀 미팅 밖에서 공지사항탭에서 발견한 에러들을 발견했다. 오늘은 이걸 해결해볼 예정 1. 로그인으로 상세페이지 접속 후 목록 누르면 다시 로그인화면으로 돌아가는 에러 function gotoNotice(){ window.history.back(); } 기존 목록 버튼 클릭시 실행하는 함수에서 function gotoNotice_Home(){ window.location.href = '/notice/1' } 아래와 같이 변경. let Time = new Date().toLocaleString('ko-KR'); 상세페이지에 시간을 기입하고 싶어서 Time 변수를 하나 더 DB로 추가해주고 상세페이지에서 Time 을 호출했다. 큰 소득이 하나 있다. 나는 지금 main.css / management.css / noti.. 2023. 12. 7. [축구모임 홈페이지개발] 12/05 개발일지 Nodejs / 공지사항탭 페이지네이션, 검색기능 어제 새벽에 미처 다 마무리 못한 페이지네이션 기능을 수정하고자했다. 우선 어제와 같이 코드를 짰을 때에는 글의 개수가 20개일 때에 페이지가 3개가 나오는 에러가 발생했다. 그래서 내가 생각한 방법은 올림 기능을 이용한 아래와 같은 코드이다. 우선 나는 일의자리에서 십의자리로 올림을 하고 싶었다. 하지만 Math.ceil() 을 이용하면 소수점에서 일의자리로 올림이 되기 때문에 먼저 글의 개수를 10으로 나누어서 소수점을 만들어주고 올림을 했다. 그럼 결국 내가 원하고자 하는 십의자리로 올림한 것과 같게 된다. 검색을 통해서 알았는데 이러한 방법을 이용하면 원하는 자리로 올림이든 내림이든 할 수 있을 거 같다. 기억해두자. 그러고 0부터 시작했기 때문에 출력을 i+1 로 해줬다. app.get('/no.. 2023. 12. 6. [축구모임 홈페이지개발] 12/04 개발일지 Nodejs / 변수 렌더링 유무 확인, 메뉴바 구현, app.use 사용, 네비 기능 구현 어제 message 변수가 없을 시에 login 페이지를 띄우기 위한 if 문을 마저 못끝냈었다. alert(''); 위와 같은 코드를 입력했다. if (typeof message !== 'undefined' && message) { typeof 연산자를 사용해서 message 가 정의되어있는지 확인하는 코드이다. undefined 가 아닌 경우에만 다음 조건을 체크한다. // &&message 는 message 변수가 존재하면서 값이 있는지를 확인한다. 즉 위와 같은 코드는 그냥 message 변수 안에 값이 있으면 아래를 실행하겠다는 거고 없으면 넘어가는거다. 이렇게하면 login-need.ejs 를 따로 만들지 않아도 상황에 맞게 message 변수를 사용하거나 안 할 수 있다. 앞으로 많이 이용할.. 2023. 12. 4. [축구모임 홈페이지개발] 12/03 개발일지 Nodejs / 공지사항탭 상세페이지 글 출력 정리, 댓글 영역 정리, 댓글 삭제 기능 추가(작성자만 가능) , input 태그 자동완성 기능 삭제, 로그인 필요 메세지.. 우선 12월 1일 디자인팀과 회의를 준비하던 도중 공지사항 탭에서 몇 가지 에러를 발견했다. 첫 번째, 내용탭에서 입력내용이 줄바꿈 없이 길어지면 자동 줄바꿈이 되지 않고 옆으로 늘려짐. 이를 해결하기 위해서 위의 코드로 수정해줬다. 우선 max-height: 200px; 출력 영역의 최대 높이를 설정한다. 이 값은 내용이 초과할 경우에 자동으로 줄바꿈이 되도록 한다. 우선 200px 로 설정을 했는데, 지금 상태로는 지장이 없는데 만약 나중에 이 부분에서 오류가 생길 가능성이 있다고 생각한다. 인지하고 있어야함. overflow-y: auto; 길이가 영역을 오버했을 시에 세로 스크롤이 필요하면 자동으로 생기게 하는 기능이다. auto 를 하면 원래는 없다가 필요할 때만 나오게 한다. white-spa.. 2023. 12. 4. [축구모임 홈페이지개발] 12/01 개발일지 디자인 보호되어 있는 글 입니다. 2023. 12. 3. [축구모임 홈페이지개발] 11/30 개발일지 Nodejs 이전에 공지사항탭에서 게시물을 눌러서 notice-detail 로 렌더링시 로그인이 안되어있으면 login.ejs 로 이동시켜서 로그인을 강제시키고 게시물 접근을 막았었다. 근데 alert 를 이용해서 사용자에게 로그인이 필요하다는 문구를 보여줄 필요가 있다고 판단되었다. 지금 아직 풀리지 않은 의문인건데, 만약에 서버에서 res.render('login', {message: '로그인이 필요합니다.'}); 다음과 같은 꼴로 message 변수에 문자를 넣어서 특정 ejs 로 넘긴다고 가정해보자. 그러면 나는 ejs 파일에서 저 변수를 사용하기 위해서 다음과 같이 변수를 출력할텐데, 그럼 저 변수가 불러와있지 않은 상태에서 접근을 하면 서버 에러가 난다. 이럴 때 전문가들은 어떤 방법으로 코드를 작성할까?.. 2023. 12. 1. 이전 1 2 3 4 5 6 다음
