2023.09.02(vanilaJS필기 정리)

• Nomad Coder - 바닐라 JS로 크롬 앱 만들기 필기

-geolocation, weather

// 위치와 날씨 받기
//navigator , geolocation
// 매개변수를 2개 입력받아야 하는데 첫번째 인자는 정상적으로 작동했을때 실행할 함수,
// 두번째 인자는 오류가 발생했을때 실행할 함수
navigator.geolocation.getCurrentPosition(geolocationOk, geolocationError)

// 출력시 위도와 경도로 출력되기때문에 이것을 나라와 도시로 알려줄 api가 필요하다.
// openweathermap.org
// 가입 --> API --> currentWeather --> docApi
// apikey는 아이디에 마우스 호버하면 MyApiKey있는데 거기서 확인.
// apikey는 상수화 시키자
const API_KEY = ''

function geolocationOk(position) {
  const lat = position.coords.latitude
  const lon = position.coords.longitude
  console.log('당신의 위치는', lat, lon)

  const URL = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}7&lon=${lon}&appid=${API_KEY}&units=metric`
  console.log(URL)
  // fetch???? patch는 들어봤는데 fetch???
  //fetch : 서버에 요청하는 메서드 서버가 응답할때까지 기다린후 응답하면 우리가 받아옴. 따라서 then을 입력해줘야한다.
  fetch(URL).then((response) =>
    response.json().then((data) => {
      const city = document.querySelector('#weather span:first-child')
      const temp = document.querySelector('#weather span:nth-child(2)')
      const weather = document.querySelector('#weather span:nth-child(3)')
      console.log(data.weather[0].main, data.main.temp, data.name)
      city.innerText = data.name
      console.log(typeof data.main.temp)
      const temp1 = String(data.main.temp).split('.')
      console.log(temp1)
      temp.innerText = temp1[0] + '°C'
      //temp.innerText = data.main.temp + '°C'
      weather.innerText = data.weather[0].main
    }),
  )
}
function geolocationError() {
  alert('위치를 찾을 수 없습니다.')
}

--> 여기까지가 강의 완료

CSS 및 추가 기능(사용자 별로 저장한 todolist 띄우기 )

style.css

.hidden {
  display: none;
}

#background {
  position: fixed; /* 이미지를 고정된 위치에 표시합니다.*/
  top: 0;
  left: 0;
  width: 100%; /*가로 폭을 100%로 설정하여 화면 가득 채우도록 합니다.*/
  height: 100%; /*  세로 높이도 100%로 설정합니다.*/
  z-index: -1; /* 배경 이미지를 다른 요소 뒤에 표시합니다.*/
  opacity: 0.8;
}

.mainContain {
  text-align: center; /* 텍스트를 가운데 정렬합니다. */
  position: fixed; /* 요소를 화면에 고정시킵니다. */
  top: 50%; /* 화면 상단에서 50% 위치에 배치합니다. */
  left: 50%; /* 화면 왼쪽에서 50% 위치에 배치합니다. */
  transform: translate(-50%, -60%); /* 요소를 중앙으로 이동시킵니다. */
  max-height: 280px; /* 컨테이너의 최대 높이를 설정합니다. */

  /* 다른 스타일 속성 추가 및 조절 가능 */
}

#clock {
  color: #c2b280;
  font-size: 10vw; /* 원하는 폰트 크기로 설정합니다.
  -vw : vw는 Viewport Width를 약자 브라우저 크기에 반응하여 알아서 바뀌게 할 수 있다.*/
  margin-top: 0;
  margin-bottom: 0;

  /*transition: color 0.5s ease-in-out;*/
}

#greeting {
  color: #d2691e;
  font-size: 4vw;
  margin-top: 0;
  margin-bottom: 0;
}

/* #clockImg {
  margin-right: 10px;  이미지와 텍스트 사이의 간격을 조절합니다. 
}
 */

#quotes {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden; /* 텍스트 넘침 숨김 */
  white-space: nowrap; /* 텍스트 줄 바꿈 방지 */
  width: auto; /* 너비 자동 조절 */
  font-size: 1.2vw;
  background-color: #0067a3;
  color: white;
  /* 다른 스타일 속성 추가 및 조절 가능 */
}

#weather {
  position: fixed;
  top: 0;
  right: 10px;
  font-size: 1.5vw;
  color: white;
  /* 다른 스타일 속성 추가 및 조절 가능 */
}

#todo-list {
  list-style-type: none; /*  앞에 붙는 점을 없앰 */
  max-height: 19vw; /* ul의 최대 높이를 10px로 설정 */
  overflow-y: auto; /* 세로 스크롤바를 표시하여 내용을 스크롤할 수 있게 함 */
}

#todo-list > li > span {
  /* 여기에 스타일 속성을 추가하세요 */
  font-size: 1.2vw;
}

#todo-list > li > button {
  /* 여기에 스타일 속성을 추가하세요 */
  padding: 0.5vw 0.5vw;
}

#login-input {
  border: none; /* 기본 테두리 제거 */
  border-bottom: 2px solid #000; /* 밑줄 스타일 및 색상 설정 */
  background-color: transparent; /* 배경색 투명으로 설정 */
  outline: none; /* 클릭 시 테두리 제거 */
  font-size: 2vw;
  width: 35vw;
  height: 2vw;
}

#login-input::placeholder {
  color: #000; /* 검정색으로 플레이스홀더 텍스트 색상 설정 */
  font-size: 10px;
  font-size: 2vw;
}

#todo-input {
  border: none; /* 기본 테두리 제거 */
  border-bottom: 2px solid #000; /* 밑줄 스타일 및 색상 설정 */
  background-color: transparent; /* 배경색 투명으로 설정 */
  outline: none; /* 클릭 시 테두리 제거 */
  font-size: 2vw;
  width: 35vw;
  height: 2vw;
  /* 다른 스타일 속성 추가 및 조절 가능 */
}

#todo-input::placeholder {
  color: #000; /* 검정색으로 플레이스홀더 텍스트 색상 설정 */
  font-size: 10px;
  font-size: 1.5vw;
}

#logout {
  position: fixed;
  top: 10px;
  left: 10px;
}

css 및 추가기능(사용자별로 저장한 todolist 출력하기)
https://github.com/pmjn1025/JSCromeWeb/blob/main/MOMENTUM/css/style.css

배운점

전체적으로 중요한 부분이고 화면을 이루는 가장 기초적인 부분이라는 것을 배우게 되었다.

내가 아무것도 모를때 js css를 했을때는 낮설었는데, 니코샘 강의를 따라가다보니 내가 예전에 막힌게 아 이것때문에 막혔구나라고 알게 되었다.

또한 내가 저번에 놓친것들을 니코샘을 통해서 상당히 많이 캐치하게 되었다. 키 포인트를 잘집어서 설명을 해주시는 것 같다.

js파일을 나누어서 개발하는 것도 그냥 그런가 보다 하지만 이게 기능별로 나누어서 개발하면 나중에 html, css도 구분지어서 효율적으로 개발할 수 있게 된다는 것을 알게되었다.

또 ChatGpt의 css 및 html에 대한 답변이 생각을 넘어서 너무 고퀄리티였다. 장난 아니다. 내가 올린 style.css의 대부분의 코드가 챗GPT한테 물어보고 짠것이다.

elemet를 찾고
event를 listen하고
event에 반응하라.