Project/축구모임 홈페이지개발68 [축구모임 홈페이지개발] 01/30 개발일지 Nodejs css 빈 칸 알림 기능 에러 수정 어제 댓글을 입력 안 하고 게시를 눌렀을 때, 팝업을 띄우는 기능을 구현했었다. 근데 간과했던 게 있는데, input 태그의 id 값을 다 똑같이 설정했다는 것이다. 이를 해결하기 위해 id 뒤에 동적 변수를 지정해줬고, PostPhotoComment 함수 선언에도 변수를 똑같이 넣어줬다. 함수의 이름 뒤에도 이렇게 동적변수 선언이 되는 줄 몰랐다. function PostPhotoComment(event) { event.preventDefault(); var commentInput = document.getElementById('story-photo-add-comment-input'); var commentId = commentInput.value; if (commentId == '') { alert(.. 2024. 1. 31. [축구모임 홈페이지개발] 01/29 개발일지 Nodejs / 빈 칸 시 팝업 생성, 부트스트랩 Carousel 스와이핑 기능 구현 Previous Next 사진탭의 코드이다. 정말 애를 많이 쓴 코드인데 일단 부트스트랩에서 Carousel 기능을 통해 슬라이드 기능을 구현했다. 부트스트랩 코드를 내 코드에 입히는 과정에서 게시물마다 각 각 슬라이드 기능을 구현해야했기 때문에 나는 수정 일단 html 코드는 위와 같이 구현했다, function EditPhoto(event) { event.preventDefault(); var editId = event.target.getAttribute('data-photo-id'); window.location.href = '/photo-edit/' + edittId; } 수정 a 태그 안에 onclick 함수를 넣었다, event,preventDefault(); 는 form 태그의 동작을 우선 .. 2024. 1. 29. [축구모임 홈페이지개발] 01/28 개발일지 Nodejs css 우선 photo 탭의 글 삭제 기능, 댓글 삭제 기능을 추가해주었다. 그리고 왜인지 모르지만 갑자기 photo img 속성에 _utilities.scss 로 부터 w-100 class 가 붙어서 img 의 width 가 100% 로 자동으로 바뀌었는데, 부트스트랩에서 제공하는 속성이라고 한다. 내가 부트스트랩에서 carousel 코드를 붙여넣기 하면서 같이 딸려온 거 같다. 그냥 지워주었지만 가끔 이렇게 알 수 없는 이유로 어딘가의 우선순위 때문에 내 코드가 적용이 안 될 때는 .carousel-item img { max-width: 100%; /* 최대 너비 */ max-height: 350px; /* 최대 높이 */ width: auto !important; /* 자동으로 너비 조절 */ height.. 2024. 1. 29. [축구모임 홈페이지개발] 01/23 개발일지 Nodejs, css / 사진탭 기능구현 시험 합격 후 다시 프로젝트를 달리기 위해서 돌아왔다. 우선 사진&앨범 탭에서 등록된 사진의 개수에 따라서 id를 동적으로 생성하여 각 Carousel에 고유한 id를 부여해 각각의 앨범마다 고유의 번호가 있게 해야했다. (생략) Previous Next 위 처럼 carousel 에 넘버링을 해주고, prev next 버튼에 data-bs-target 으로 그 넘버링에 각각 맞춰주면 되었다. 이제 아래코드들을 사진의 개수만큼 반복을 해줘야한다. 내 기억에 사진 파일들이 Location 배열로 들어가기 때문에 그에 접근해서 개수를 확인하면 될것이다. 우선 mongoDB 에 저장된 값으로 확인을 했을 때, 위와 같은 코드로 사진의 개수와 동일하게 next, prev 버튼이 작동되게 할 수 있었다. 다음은 그.. 2024. 1. 23. [축구모임 홈페이지 개발] 01/22 개발일지 디자인미팅 보호되어 있는 글 입니다. 2024. 1. 23. [축구모임 홈페이지개발] 01/15 개발일지 * 빈 칸 팝업경고문 출력 * id를 동적으로 생성하여 각 Carousel에 고유한 id를 부여하는 방법 * 수정시 이미지 location 불러오기 2024. 1. 23. [축구모임 홈페이지개발] 01/14 개발일지 Nodejs 문제가 생겼다. 일단 지금 디자인도 구현을 어느정도 해냈고, 기능을 추가하고 있는데 공지 탭처럼 글과 댓글을 가져올 때 :id 값을 주소에 띄우고 그 값을 param 으로 가져와서 해당 댓글과 글 정보를 가져왔었다. 근데 인스타처럼 한 번에 보여지려고 하다보니까 어떻게 해야할지 고민중이다. 일단 당장 생각나는 것은 param 으로 id 값을 가져오는 게 아니라 display : none; 으로 설정을 해놓고 게시글에 id 값을 지정을 해놓고 그 id 값을 기준으로 가져오면 되지않을까 한다. 또 글이 점점 쌓이면 로딩이 오래걸리게 될텐데 이를 페이스북이나 인스타그램처럼 어느 정도 글만 먼저 로딩해오고 추가로 아래방향으로 스크롤을 할 시에 로딩을 더 하는 식으로 해볼 수 있으면 좋을 것 같다. 제일 처음 스.. 2024. 1. 15. [축구모임 홈페이지개발] 01/13 개발일지 Nodejs 시험테스트를 하던 와중에 이번주 매채에서 현재 저장된 주소에 전 주 주소가 저장되어있는 걸 확인한 이상 주소 input 에 따로 주소를 안 넣게 되는 현상을 발견했다. 그래서 이미 주소칸에 전 주의 주소를 value 값으로 지정을 해놓는 것이 좋아보였다. 진행을 하던 도중에 전 주의 주소를 value 값으로 하는 건 주소지가 바뀔 경우 지워야할 요소들이 너무 많아보였다. 그래서 주소값이 빈칸이 저장되면 이전의 주소를 저장하는 방식으로 채택해보았다. app.post('/match-plan', async (req, res) => { let previousAddress = req.body.planaddress; if (!previousAddress) { let lastRecord = await db.colle.. 2024. 1. 14. [축구모임 홈페이지개발] 01/08 개발일지 Nodejs / 이미지 다수 저장 및 불러오기 게시판에서 여러장의 이미지를 저장시키고 불러오고자했다. 파일을 등록하는 위 코드 맨 뒤에 multiple 을 붙여주고 서버에서 upload.array('img1',5)(req, res, async (err) => { 다음과 같이 single 을 array 로 바꿔주고 img1 옆에 최대 저장 가능한 사진 수를 지정해줬다. 그러고나서 req.file 로 불러오던 값을 s 를 붙여서 console.log(req.files) 이렇게 출력해봤다. 나는 이렇게 출력하면 이미지 주소같은 것이 배열로 정리가 되고 이를 req.files[0], req.files[1] 이런 꼴로 배열처럼 불러올 수 있을거라고 생각했다. 근데 location: 'https://bigstarhan33.s3.ap-nows.com/17047'.. 2024. 1. 9. [축구모임 홈페이지개발] 01/07 개발일지 팀미팅 보호되어 있는 글 입니다. 2024. 1. 8. [축구모임 홈페이지개발] 01/06 개발일지 Nodejs 오늘은 공지사항탭 기능을 좀 더 수정해볼 생각이다. 저번 미팅 때 공지사항탭과 일반 사용자들이 이용할 수 있는 자유게시판탭을 분리할 것인지 합칠 것인지를 고민했는데 합치되, 자유게시판 맨 위에 빨간색 강조로 공지가 먼저 띄워지게 구현해보기로 했다. 여기서 문제는 이렇게 먼저 위에 띄워지게 하는 기능을 어떻게 구현할 것인지, 또 결국 평생 그 공지사항탭에 글을 유지할 수는 없는데 이를 나중에 어떻게 뺄 것인지. 고민해봐야한다. 먼저 지금 생각이 드는 건 기존에 운영관리 탭에서 공지사항 작성하기 버튼을 누르면 공지사항DB, 자유게시판DB 둘 다 동시에 저장하고 공지사항DB의 내용들은 위에 먼저 css로 색을 입혀서 띄우고 아래에는 자유게시판이 띄워지게 해보려고 했다. 근데 이렇게 진행하면 각 DB에 저장될 .. 2024. 1. 8. [축구모임 홈페이지개발] 01/04 개발일지 Nodejs / 딕셔너리(객체)를 배열로 변환, 내림차순 sort() 어제 MVP Board 탭 기능구현을 했었다. 남은 단계는 이제 점수가 높은 순으로 배치를 하는건데. 문제는 어제 얘기했듯 javascript 에서 딕셔너리는 순서를 변경하는 기능을 지원하지 않는 것. 그래서 Map() 을 이용해보려했는데 다른 방법을 찾았다. 딕셔너리를 통째로 키-값 을 배열로 변환하고 배열을 출력하는 것. const mvpArray=Object.entries(mvpboard); mvpboard 딕셔너리(객체) 를 mvpArray 배열로 변환해줬다. const mvpboard = { player1: 100, player2: 80, player3: 120 }; 위 코드를 배열로 변환시키면 [ ['player1', 100], ['player2', 80], ['player3', 120] ] .. 2024. 1. 4. [축구모임 홈페이지개발] 01/03 개발일지 Nodejs / MVP Board 기능구현 보호되어 있는 글 입니다. 2024. 1. 4. [축구모임 홈페이지개발] 01/02 개발일지 Nodejs / 딕셔너리,new Map(); 어제 수정 계획한 대로 b[1] - a[1])); 위 코드를 통해서 순서대로 재배치할 수 있다. 위 속성을 기반으로 기능을 구현해보려한다. 2024. 1. 3. [축구모임 홈페이지개발] 01/01 개발일지 Nodejs css / MVP Board 디자인, 매치일정 탭 서버 DB 연결 홈 화면에 남은 마지막 탭인 MVP Board 탭을 css 로 구현했다. 시즌 MVP 를 뽑기위해서 누적된 MVP 포인트와 순위를 보기 위함이다. MVP BOARD RANK NAME SCORE 01 ㅇㅇㅇ 265 위와 같이 html 코드고, MvpBoard-area 영역이 인원수만큼 복사붙여넣기를 했다. 근데 개발일지를 쓰다보니 반복문으로 그냥 만들어도 괜찮겠다는 생각이 들었다. 아직 디자인만 해놓은 상황이라서 서버랑 js 로 기능을 구현할 때 시도해봐야겠다. .MvpBoard-Container { margin-top: 50px; width: 95%; margin: 30px auto 100px auto; } .MvpBoard-title { color: white; font-size: 300%; font-.. 2024. 1. 2. 이전 1 2 3 4 5 다음
