[축구모임 홈페이지개발] 01/13 개발일지 Nodejs

시험테스트를 하던 와중에 이번주 매채에서 현재 저장된 주소에 전 주 주소가 저장되어있는 걸 확인한 이상 주소 input 에 따로 주소를 안 넣게 되는 현상을 발견했다.

그래서 이미 주소칸에 전 주의 주소를 value 값으로 지정을 해놓는 것이 좋아보였다.

 

진행을 하던 도중에 전 주의 주소를 value 값으로 하는 건 주소지가 바뀔 경우 지워야할 요소들이 너무 많아보였다.

그래서 주소값이 빈칸이 저장되면 이전의 주소를 저장하는 방식으로 채택해보았다.

 

app.post('/match-plan', async (req, res) => {

  let previousAddress = req.body.planaddress;

  if (!previousAddress) {

    let lastRecord = await db.collection('matchplan').findOne({}, { sort: { _id: -1 } });

    if (lastRecord) {

      previousAddress = lastRecord.address;

    }

  }

  let result = db.collection('matchplan').insertOne({

    month: req.body.planmonth,

    date : req.body.plandate,

    time : req.body.plantime,

    timeto : req.body.plantimeto,

    awayteam : req.body.planawayteam,

    place : req.body.planplace,

    address : previousAddress

  })

  res.redirect('/')

})

 

previousAddress 변수를 만들고, 이는 주소 input 에 입력된 값을 불러왔다.

 

만약 그 값이 공백이라면,

가장 최근의 주소 데이터를 lastRecord 에 저장시킨다.

그러고 DB 에 previousAddress 값으로 저장시켰다.

---

이 홈페이지에서 사용하는 색상이 아무래도 채도가 높다보니 눈의 피로도가 높다고 디바이스가 판단했는지, 갤럭시 다크모드에서 내가 지정한 색상이 바뀌어서 표현되는 현상이 발견했다.

다크모드에서도 내가 지정한 색상이 바뀌지 않는 코드를 css 안에 넣어줘야한다.

 

@media (prefers-color-scheme: dark) { body { /* 아무것도 지정하지 않음 */ } }

 

우선 main.css 에 위와 같은 방법으로 시도해봤는데, 실패했다.

 

다음 방법으로 

 

:root {

  color-scheme: light only;

}

 

main.css 에 위와 같은 코드를 추가해주고

 

    <meta name="color-scheme" content="light only"/>

    <meta name="supported-color-schemes" content="light"/>

 

두 줄의 meta 태그를 넣어줬다.

 

매번 배포를 한다음 갤럭시를 사용하는 친구한테 테스트중인데 역시나 또 실패했다.

 

근데 이게 크롬 개발자모드에서는 다크모드로 지정을 해도 위처럼 라이트모드로 유지가 된다.

삼성 브라우저의 문제일지도 모른다는 생각이 들었다. 

 

---

 

기존부터 계속 겪어오던 화면이 커질 수록 홈 화면의 배치들이 눌리거나 사이즈가 망가지는 현상이 있었다.

그 때문에 100px 단위로 반응형을 적용해서 하나하나 코드를 짜줬는데, 이렇게 하더라도 완벽하게 비율이 일치하지 않으니까 기기별로 이질감이 드는 버전이 있었다.

일상생활중에 문득 든 생각인데, 보통 내가 % 를 이용해서 css 코드를 짰다 보니까 큰 틀이 고정이면 전부 다 그 값들이 고정이 되어서 비율이 망가지지 않겠다는 생각이 들었다.

나는 기준으로 설정해두었던 

  .home-main,

  .white-main {

    width: 100%;

    border-radius: 0px;

  }

 

위 설정을 500 px 까지만으로 한정을 두고,

디바이스의 너비가 500px  이상일 시에

@media only screen and (min-width: 500px) and (max-width: 1000px) {

  .home-main,

  .white-main {

    width: 480px;

    border-radius: 0px;

  }

}

 

위와 같이 너비를 480px 로 고정을 해버렸다.

디바이스별로 너비가 커질수록 양 옆에 여백이 크게 존재하겠지만,

 

 

오히려 비율이 계속 고정되어 내가 생각했던 대로 안정적인 모습을 띄웠다.

 

 

---

 

사진영상 탭을 구현하던 중에 bootstrap 에서 carousel 을 이용한 슬라이드를 구현하려고 했다.

발생한 문제는

 

 

 

이미지 사이즈에 맞게 슬라이드시에 영역이 변경되어서 아래 댓글도 다같이 위로 올라온다는 점이다.

그래서 나는 사진이 띄워지는 영역을 고정으로 지정시켜줬다.

일단은 400px 로 지정했다.

 

 

그렇게 하니까 아래에 여백이 생기더라도 영역이 고정되어있다보니까 아래에 댓글이 위로 당겨서 올라오는 현상이 없어졌다.

근데 사진의 영역이 위 아래로 균등해야하는데 사진이 위로 정렬된다.

이를 해결을 해보려고 했는데 잘 안됐다.