목록혼자 발버둥/TIL (31)
On a couch
회고 오늘 드디어 오늘의집 클론코딩 modules 부분을 완료하나 했는데 웬 오류에 부딪혀 시간을 잡아먹었다. https://github.com/microsoft/vscode/issues/146567 저렇게 - 1 이 들어간 부분은 죄다 오류가 나고 있는데 변수를 인식 못해서 이러는 건가 싶기도 하고 도대체 뭘 원하는지 모르겠다. - 기호랑 숫자를 붙였다 떼었다 괄호를 쳤다 변수를 NUM으로 바꿔보고 어떻게 해서 해결. 이 와중에 티스토리 글쓰기 기능도 오류나서 필기고 TIL고 저장 안 되는데 미치는 줄 알았다!
1. '핸들러'의 정의 : 이벤트가 발생했을 때 실행되는 함수. 핸들러 할당 1 : onclick 속성 방법1 (자주 쓰이지 않음) : html 에서으로 속성값으로 괄호 포함한 함수 입력하여 할당 *onclick="alert('클릭!')" -> 브라우저가 속성값 "alert('클릭!')"을 본문으로 하는 핸들러 함수를 만듦. 방법 2 : DOM프로퍼티에서 button.onclick = function() { alert('클릭!'); }; 으로 직접 할당 *별도로 생성되어 있는 함수를 핸들러로 할당할 경우 button.onclick = sayHello ; 처럼 괄호 없이 입력. 괄호 입력하면 함수가 아니라 함수 실행한 결괏값이 할당됨. onclick프로퍼티는 하나밖에 없기 때문에 복수의 이벤트핸들러를 할당..
오늘 배운 것 1. 'getElementsBy'로 시작하는 모든 메서드는 살아있는 컬렉션을 반환한다. let divs = document.getElementsByTagName('div'); 선언 당시 div가 1개였지만, 이후 다른 div가 추가되고 그 뒤에 다른 곳에서 'divs'라는 변수를 호출했다면, 배열의 크기가 달라져 있을 것. 반면 let divs = document.querySelectorAll('div');의 경우 실행 당시의 배열로 고정된다. https://ko.javascript.info/searching-elements-dom 2. 문서에 요소를 삽입하는 다양한 메소드 노마드코더 강의에서 자주 보던 .appendChild(node) 가 '더 이상 쓰기를 권장하지 않는 오래된 메소드'라..
오늘(요즘) 배운 것 1. relative - absolute 활용 : 실제 용례를 보니 엄청 단순한 거였는데 그동안 너무 어렵게 생각했다. 2. mixin, function, 변수의 실제 활용법 3. 레이아웃 적용과 모양 꾸미는 법 : css가 '꾸미는' 언어라는 것을 잊고 있었다.. "아무리 그래도 저것까지는 코드로 못 하지" 싶었던 게.. 된다..! 회고 계속 오늘의집 클론코딩 강의 들으면서 내용을 정리했었는데 들어오는 정보가 너무 많으니까(+클론하는 과정에서 바로바로 리팩토링이 들어가니까) 도저히 그 내용을 다 받아적지를 못하겠더라. 또 듣고+따라하고+정리하려니까 너무 번잡스럽고 피로하기도 하고. 그래서 지난 며칠은 아예 처음부터 끝까지 2번씩 들을 각오를 하고, 내용을 이해하는 데만 집중했다. ..
오늘 배운 것 1. FLEX, GRID https://studiomeal.com/archives/197 기초강의 들으면서 한번 싹 정독했던 건데 SCSS강의에서 나오니 또 아리까리해서 ^^; 그래도 다시 읽으니 확실히 기초적인 부분은 편하게 읽히고, 지난번에 읽으면서는 미처 신경쓰지 못한 디테일들이 눈에 들어왔다. Flex는 'FLEXIBLE BOX'의 줄임말!! 정의만 잘 기억해도 '뭐였지' 하는 일은 줄 텐데!
오늘 배운 것 1. Mediaquery scss 강의를 듣다가 당연하다는 듯이 사용되는 미디어쿼리문을 몰라서 흠칫했다. 진작 찾아봤어야 했는데 부트캠프 문제 때문에 이제야 찾아봤다. https://offbyone.tistory.com/121 설명이 굉장히 잘 되어 있는데, 2019년에 새로 나온 기술을 접하면서 쓰신 글 같다. 공부할 시작할 때부터 하도 많이 들어서 당연히 오래 전부터 있던 것인 줄 알았는데 이제 4년째라니.. 프론트엔드는 기술 변화가 빠르다는 말이 확 체감됐다. 2. viewport 메타태그 미디어쿼리 mdn 문서를 읽다가 뷰포트에 관한 정보도 얻었다. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries..
오늘 배운 것 1. 패캠 실습 중 querySelector 안에 들어가는 : 의 존재가 궁금했다. 답 : CSS 선택자의 가상 클래스(pseudo-class) 알고보니 css에서 items :hover { } 설정하는 그 : 였다. querySelectorAll('ul > li:last-child') 여기서도 쓰이던 애. 정적인 items의 css와 hover를 얹었을 때의 css는 적용값이 다른데, 원래대로라면 둘을 구별하기 위해 class가 추가로 사용되어야 한다. 그러나 css를 적용하려고 class를 추가한다면 html가 지저분해져서, stylesheet 상에서 '가상의 클래스'를 만들어 쓰는 것. * 가상클래스 설명글 1 * 가상클래스 설명글 2 css를 적용하기도, js에서 선택해 오기도 훨씬..
오늘 배운 것 1. html의 body 요소가 미처 로드되기 전 head 요소 안에 있는 script가 먼저 실행되어 오류 나는 것을 예방하는 방법. //자바스크립트에서 Jquery로 $(document).ready( 함수() ) //html에서 2. 온갖 property와 method들 정말이지 js는 object와 property로 모든 걸 해결하는구나.. 노마드코더에서 moment 클론코딩할 때는 그냥 '아하아하' 하고 따라하기 바빠서 몰랐는데, 진짜 다 속성 변경으로 조작하는 거였다. * 요소에 class 추가하기 .classList.add(); * 요소에 이벤트리스너 추가하기 .eventlistener('행위', '반응'); * 요소 복사하기 .cloneNode(여기에 true 넣으면 내부 요소..
오늘 배운 것 1. 패캠 사전강의 CSS과제를 샘플 보고 그대로 수정해 봄 - relative을 효과적으로 사용할 줄 모르고 grid로 해결하려고 했다! 그 부분 다시 시청. - 화면 사이즈 구성할 때, px로 고정된 요소를 빼고 이렇게 계산할 수도 있겠구나. - 와.. 이 부분은 이마를 탁 침. 'li 옆에 구분선을 border로 넣어 줘. 마지막 li는 빼고!' 회고 이 간단한 복습을 하기까지 왜 이틀이나 걸렸는지 생각해 봤다. 1. css를 알맞게 읽으려면 선택자를 알아야 하는데, 그러려면 html 구조부터 바꿔야 할 거라는 생각에 두려웠다(귀찮았다). 2. 고치면서 '내가 틀렸다'는 생각에 기분이 다운되는 것, 그리고 모범샘플을 보고도 이해하지 못하는 상황이 무서웠다. 이미 좀 다운된 상태였기 때..
오늘 배운 것 1. CSS 다양한 선택자 (패캠 사전강의+mdn) 2. CSS 레이아웃 : relative-absolute 사용법과 fixed의 존재 : display:none과 visibility:none의 차이 : flex와 grid의 사용법 (https://studiomeal.com/archives/197) 3. 레이아웃 적용 실습 : 이론으로 볼 땐 다 알 것 같았는데 막상 하니 쉽지 않다! ^^ 4. attribute와 property의 차이 (https://medium.com/hexlant/attribute-%EC%99%80-property-%EC%9D%98-%EC%B0%A8%EC%9D%B4-c6f1c91ba91) : attribute는 html의 element에 부여되는 정적인 속성이고, p..