[TIL#2 내배캠 Chapter 1 미니프로젝트] 여전히 이게 뭐지?

<어제 검색해서 찾은 것들>

 

<데일리 루틴>

 내배캠 공부 

운동

 밥 잘 먹기 

 

'큰누나'분께서 CSS 파일을 따로 빼놓으신 걸 보고 따라 해보았다. HTML파일이 훨씬 깔끔해져서 좋았다.

다만 url 주소를 입력할 때, CSS의 경우 "../ㅁㄴㅇㄹ/ㅁㄴㅇㄹ/ㅁㄴㅇㄹ.jpg" 이런 식으로 앞에 ../ 을 붙여야 작동했다.

(적고 난 뒤에 알게되었는데 /앞에 . 하나당 상위 폴더를 의미하는 것 같다.)

 

내가 완성하지 못했던 체크박스 연동 달성도 표시기능과 검색기능을 코드를 보며 공부하고 있다. 

 

1. 검색기능

 1) let searchword = ' '; 라고 적으셨다. 뭔 뜻이지? ' '찾아봐야겠다. 

async function getSearchResult() { } 라는 함수를 사용하여 '서치워드'라는 변수?에 #search의 밸류를 넣고 if문을 통하여 서치월드에 상응하는 페이지를 설정했다. 그리고 없다면 경고창이 뜨도록 했다.

 

 2) $('#search').keydown(function (e) { 로 엔터를 눌렀을 때 검색어를 가져와서 전달하도록 했다고 주석을 달아 놓으셨다. 밑에  if (e.keyCode == 13) { e.preventDefault();      getSearchResult(); } 코드가 작성이 되어있는데 무슨 말인지 하나도 모르겠다. 큰일이다. e.keycode / preventdefault / getsearchresult 찾아보자.

 

2. 목표 달성도 기능

 1) 가져올 데이터베이스를 let dataPackage = await getDocs(collection(db, "goals")); 로 설정하셨다. 박스들은 어제 배운let boxes = $("input[type='checkbox']:checked"); 로 처리하시고 boxes.length를 checked라는 변수에 넣는다.

 

 2) 업데이트할 데이터들을 let update = { } 로 사전형태로 묶고 'main': $(`#main`).is(':checked') 형태로 각 데이터를 지정하고 데이터베이스 문서에다 업데이트한다. $( ).is( ) 찾아보기. 이런 형태로 업로드 하심

 

 3) 데이터를 불러오는 코드에서는  $(document).ready(async function () { // 목표 관련 로 겟닥스가 아닌 다큐먼트 레디를 사용하셨다. $( ).ready( )찾아보기. 가져올 데이터 지정하는 부분은 알고 있는 부분이고 $('#main').prop("checked", main); 이 부분을 잘 모르겠다. $( ).prop( ); 찾아보기. 이후 진행도 바는 progressbar.style.width = ((count / 5) * 100) + "%"; 로 길이 표시하셨다.

 

참고 블로그 : https://ohhand.tistory.com/36

[JQuery] 체크박스 선택여부, checked처리 방법

작업한 파일에서 css를 분리하고 js를 분리하는 작업을 했다.

 

script량이 얼마 없는 개인페이지는 잘 되었지만, script량이 많은 메인페이지는 잘 되지 않았다. 처음에는 단순히 기능이 많아서 그런가? 데이터베이스를 건드리는 거라서 그런가 했지만 이유는 그것이 아니었다. 정확하진 않지만 느낌상으로는 import의 문제였다.

 

시도했던 부분은 메인페이지 모든 js를 분리시키는 작업이었는데 js를 분리시킬 때 데이터베이스를 import 하는 부분까지 다 분리시킨 것이 안되는 원인이었다. js를 분리시키면 로컬에서 값을 찾는데 데이터베이스는 https프로토콜로 import되기 때문에 로컬에서 결국 못찾게 되어서 오류가 발생하게 되는 것이다.

 

따라서 js를 분리할 때 https로 import하는 부분은 제외하고 js를 분리해야 할 것 같습니다. 로컬의 경우는 그렇고 웹상태의 경우는 아직 잘 모르겠다.

 

참고 블로그 : https://evan-moon.github.io/2020/05/21/about-cors/

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

 

추가로 백엔드 개발하는 친구가 말하길, 조금 비약해서 추가 설명하자면 오류가 생기는 이유가 import { doc, collection, addDoc, updateDoc, getDoc } from ~~~~.js"; 에서 doc, collection, addDoc, updateDoc, getDoc 이런 애들은 파이어베이스가 사용하는 언어이고 js는 이해하지 못하는 언어이다. 그래서 오류가 난다 고 설명해 주었다.

그렇기 때문에 doc, collection, addDoc, updateDoc, getDoc이런 식으로 표시되어 있는 함수들을 사용하는 부분은 로컬에서 작업할 때는 .js로 따로 빼내지 못할 것 같다.

 

<TMI. 난 머리 안 돌아갈 때 커피보다는 제티가 더 효과 좋은 것 같다.>