전체 글

html 사용자 정의 데이터 속성 data- 방명록의 수정과 삭제 기능을 구현하면서 데이터베이스에 저장되어있는 값을 어떻게 불러오는가 에 대한 고민에 프로젝트 둘쨋날 내내 머리를 싸맸었다. 서치를 하면서 주워온 삭제기능 코드를 하나하나 읽어보는데 안에 class 선언 말고도 이렇게 처음 보는 속성들이 들어있었다. 저 변수들은 여기서 나온 것인데 getDocs 를 통해 collection 속 docs를 불러오고 각각의 doc에서 가져와서 선언한 변수들을 안에 사용자 정의 데이터로서 추가적으로 저장한 것이다. 그리고 수정 과 삭제 버튼을 클릭했을 때도 그 값을 불러올 수 있도록 버튼 각각의 속성에 사용자 정의 데이터로서 붙여넣었다. 이렇게 추가적으로 넣은 값을 수정과정과 삭제과정에서 계속 이용한다. 급한것 ..

팀원분들이 완성한 수정삭제 비밀번호 검사 기능을 병합하니 수정 기능에서 에러가 발생해서 그걸로 시간이 훅 가버린데다가 TIL작성을 까먹어서 허둥지둥 켜보니 캡쳐본도 없고 남은건 console 의 오류뿐... Cannot read propertues of null (reading 'addEventListenter') addEventListener의 파라미터로 따라온 editModal Id 참조가 잘못 되어 있었다고 한다. -> 내가 못본거라 다시 확인해야한다. 그래서 그 아래의 value 값도 안 뜨고 수정버튼을 누르면 모달창이 뜨는데 확인이 실행이 안되는거다... 오늘은 느낀 점이 너무 많다. 새로운 기능을 찾고 다른 것들과 겹치지 않게 조정하는 등등에서 허둥대다가 시간이 다 가버렸다. 그나마 삭제 기능..

css button 꾸미기 hover : 영역에 커서를 올렸을 때 색상이 진해지는 효과 button에 링크 달기 주소 링크 달때처럼 a 태그에 href 하려다가 안돼서 찾아봤더니 버튼에 링크를 달 때는 onclick 속성 이용! 상세페이지각 html 파일에 css는 참조파일로 넣으려고 링크를 넣었는데 다른 건 다 정상적으로 뜨면서 제일 큰 box의 정렬이 풀려버린다!!! 분명 flec-direction : row; 로 적용했고 그 안의 또 다른 부모 컨테이너들은 그 안에서 column 설정 잘 지켜주고 있는데 제일 큰 부모 컨테이너만 적용이 안되니....왜 그런 건지 한참을 이것저것 해봐도 모르겠다 css 파일에 태그를 주고 있었다.................. 저 태그 지우니까 정상적으로 작동된다. ..

교육 개강 날 팀을 소개하는 웹 페이지 만들기 미니 프로젝트를 시작했다. 상세페이지 레이아웃 작업을 하는데 먼저 하나의 상세 페이지를 대략적으로 만들고 그 html 과 css 틀을 그대로 다른 팀원들 상세 페이지에 넣었더니 박스가 제멋대로 찌그러진다. 검사를 이용해서 확인한 margin 의 좌우 양옆값이 -이 아닌 29.~~~로 설정한 것과는 달라져 있었다. margin: 10px auto 10px auto; auto 값이 왜 페이지마다 달랐는지 이해하려면 더 알아봐야겠다. 일단 margin 좌우 값을 0으로 줬더니 다 동일해져서 해결은 됐다. 저번에 로그인 페이지 만들 때 활용했던 display :flex; 속성이 레이아웃 짜기에 정말 편한 것을 느꼈다. 그전엔 grid속성으로 조정해보려했는데 grid..

css - display : flex; 강의를 듣는데 타이틀을 설정할 때 이것만 그대로 복사하면 된다고 한다. 그런데 뭔지도 모르고 복사해서 쓰니 찝찝하다. 아래 블로그에 css의 flex에 관해서 다 정리되어있어서 편하게 봤다. https://narup.tistory.com/210 [CSS] display : flex 정리(flexbox) flexbox(flex) 1. 개요 일반적으로 웹페이지의 레이아웃은 css의 display, float, position 등과 같은 속성을 사용해 구현하는데, 이러한 속성을 사용할 경우 레이아웃을 표현하는 것은 굉장히 복잡해집니다 narup.tistory.com flex는 복잡한 레이아웃을 간단하게 구현할 수 있도록 요소를 효율적으로 배치 분산 정렬 시킬 수 있다. ..

.append 와 .text 차이 .append let temp_html = `감자`; $('#q1').append(temp_html); 선택된 요소의 마지막에 새롭게 추가한다. .text let temp_html = `감자`; $('#q1').append(temp_html); 기존에 있는 모든 내용을 지우고 새롭게 세팅한다. 태그요소의 경우 문자 그대로 출력된다. 아무것도 나타내지 않는 구문으로 속성 사용 또는 스타일 지정 목적으로 그룹화하는데에 쓰인다. JQuery $(document).ready() 가 헷갈릴 때 https://7942yongdae.tistory.com/77 html 문서의 로딩이 끝나면, 이미지를 포함한 요소들이 로드되기 전에 실행된다. ${'#') ${} 헷갈린다..강의 들으면서..

종합반 1주 복습하면서 노마드에서 배운거랑 섞었다. 연도 월 일 요일을 뽑아내려고 하니 11월이 10으로 나오고 요일은 숫자로 반환된다. 어떻게 하면 될까? 리스트에 일요일부터 토요일까지 집어넣고 Getday로 나오는 숫자를 이용해서 뽑아낸다. 11월은 왜 10으로 나오나 했더니 month는 1월이 0부터 시작하더라. 그냥 1을 더해줬다. 다른 방법도 있나? console에는 잘 뜨는데 뭐가 문제인지 innerText가 실행이 안된다. null값이 있다는 말인가? 그러면 console에 뜨는 건 뭐지...선택자가 잘못됐나싶어 id도 다시 써보고 아예 다시 새로 써보기도 했는데 안된다. js를 따로빼서 저장하고 참조로 넣으니 실행된다. 뭐지? 코드는 변한게 없는데?? 뭐가 문제였던거지...😑 다시 html..

새 폴더를 만들어서 집어넣으면 경로를 고치자!setInterval (함수, 시간(ms단위)) : 지정된 주기로 계속 실행 setTimeout (함수, 시간(ms단위)) : 지정된 타임이 지난 후 1회 실행 더 깊게 찾아보니 이해가 하나도 안된다.🤣아직 너무 깊게 가지말자... 시계가 표시된다. 이제 여기서 시간이 두자릿수 (00분 05초 등)으로 표시되게하는데에 string을 쓰는데 검색해보니 string 과 tostring 이 있다. 무슨 차이일까? String & .toString 숫자를 문자열로 변환이 필요한 경우 사용한다 String : null, undefined 상관없이 어떤 형태든 문자열로 변환 가능 .toString : null, undefined 를 변환시키면 오류가 뜬다 그러면 toSt..

LocalStorage 브라우저에 무엇인가를 저장하게 해줌 불러오고 삭제도 가능 1 Hoisting JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables, classes, or imports to the top of their scope, prior to execution of the code. (MDN) console.log(x === undefined); // true var x = 3; console.log(x); // ReferenceError const x = 3; console.log(y); // ReferenceError let ..

1 toggle addEventListener 안에 있는 함수는 우리가 직접 실행하는게 아니라 브라우저가 실행하는 것 원래 존재하던 클래스를 없애버리지 않고 특정 클래스만 추가 삭제하는 다섯줄의 과정이 toggle 로 인해 단 한 줄이 되었다. 종합반에서 박스작업할 땐 toggle이 그저 '나타났다 사라지게한다' 라고만 이해했었는데 toggle 을 사용하지 않았을 땐 If도 가져오고 class에 특정값을 포함하고 있는지 확인하고 추가하고 제거하고 이런저런 과정들을 거친다는 것을 알게 된 후에 보니까 더욱 기억에 잘 남고 이해도 잘 된다. 무엇보다 다섯줄이 한줄이 되는 느낌이 너무 좋다. classList : class들을 작업할 수 있게 허용 className : className이 주어지면 이전에 있던..