전체 글
-
Toy Project - 계산기Java Script 2021. 4. 14. 18:50
솔직히 과제 3주차까지는 CSS 뭐야... 자바스크립트를 더 잘해봐야지 싶었는데, 다른 사람들이 과제를 한 것을 보니, 자극 받더라. 스각코 사람들과 카드맞추기 게임만들고, 3일만에 후다닥 만들어보았다. 기본 사칙연산되는데... 예외처리가 완벽하지 않아서 사칙연산이 연속적으로 입력될경우 에러난다 ^ㅠ^ 깨달은 점 & 나아진 점 좀 더 가독성이 좋은 코드를 쓰는 것을 고려하기 시작했다. (띄어쓰기나 인덴팅을 더 고려했다.) ev 요소를 함수의 인자로 넣어서 주르륵 돌릴 수 있다. 개선할 점 셀렉터를 남용하는건 아닐까? forEach와 querySelector를 활용해보자. 왜 여전히 코드가 복잡해보이는지 모르겠다. 아마 적절한 메소드를 내가 못사용하는 곳이 분명이 있을거다. string 을 숫자로 변환할 ..
-
This 판별하기Java Script 2021. 3. 26. 16:41
This 는 공부해도 해도 헷갈린다...! ㅋ님의 강의 + 책을 참고해서 공식을 적어보면 좀 덜 헷갈릴까....? This 는 함수가 호출되는 방식에 따라 참조하는 객체가 달라진다. 1. Regular Function call ( function (); ) Strict mode 가 아니면 -> 브라우저에서는 window, 런타임 환경에서는 global. Strict mode 라면 undefined. 2. Dot notation ( something.function(); ) .function 앞의 객체로 찾아가서 참조. 3. Call / Apply / Bind 위 세 가지는 this 에 사용가능한 메소드들이다. Call과 Apply는 둘 다 첫 번째 인자를 this 값으로 바인딩한다. function.ca..
-
CSS property의 순서Java Script 2021. 3. 25. 12:35
과제를 할 때 마다 '기한 내에 어떻게든 기능을 구현한다' 에 촛점을 맞췄고, 그 때마다 내게 익숙한 객체만을 사용해서 CSS에 속성 때려넣기를 반복했는데, 그러다보니 property에도 순서가 있다는 피드백을 받았기에 기록차 블로그글을 작성한다. 사실 CSS properties의 순서는 그렇게 중요하지 않다고 생각하는 사람들이 39%나 되지만 , CSS-tricks.com에서는 CSS properties의 순서에 따라 하나 이상의 value를 전달할 때에 예상치 못한 결과가 나올 수도 있다고 말하고 있다. (이하 예제 출처: css-tricks.com/ordering-css3-properties/) 여기 있는 두 개의 상자는 둘 다 border-radius 와 -webkit-border-radius를 ..
-
innerHTML, textContent, innerTextJava Script 2021. 3. 18. 20:09
셋 다 문장을 넣어주는 메소드인데, 뭐가 다르고 뭐를 써야할까? 일단 innerHTML은 보안이슈때문에 사용을 지양해야 한다. innerHTML은 전달된 내용을 HTML로parsing(= 구문 분석. 문장을 구성 성분으로 쪼개고 분석해서 문장의 구조를 결정한다.)하기 때문이다. 따라서 MDN에서는 HTML로 parsing을 하지 않는 textContent를 권장하고 있다. (Security considerations from MDN) 그렇다면 textContent와 innerText의 차이점은 무엇일까? (출처: innerText & textContent, from MDN) textContent 는 모든 요소의 콘텐츠를 가져온다. 반면 innerText는 웹상에서 유저가 '읽을 수 있는' 요소를 가져온..
-
querySelectorAll와 "Array-like objects"카테고리 없음 2021. 3. 17. 15:01
1. querySelectorAll이란? : MDN 문서에 따르면, querySelectorAll() 메소드는 "셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적 Nodelist를 반환"하는 메소드이다. 여기서 정적(static)이라고 함은 변동성이 없는 상태(not live)를 말한다. (MDN) 그러니까 CSS에서 선언해준 셀렉터라면, 그 엘리먼트를 콕 찝어주는 메소드인데, 이 메소드가 일반 querySelector()와 다른 점은 바로 뒤에 All이 붙는다는 것이다. 즉, 지정한 셀렉터와 하나라도 일치한다면, 그 일치하는 엘레멘트를 죄다 끌어와서 정적 Nodelist를 보여준다. 예를 들면, 현재 다큐먼트 내의 모든 엘리먼트의 목록을 불러오고 싶다면 var node_list = do..
-
Prep Calendar project 첫 번째 코드 리뷰Boot Camp/Coding_Prep 2021. 3. 8. 17:36
달력과제 제출한 것에 대한 코드 리뷰가 2일 전에 달렸다. 뜨든. 근데 나의 고질병 중에 하나인 아 어떡해 못보겠다 병이 도져서 오늘에서야 열어봤다. 이 것들은 다음 번 코드 작성시에 더 신경쓰도록 하자. README File 컴퓨터 구성, 설치법, 사용법, 저작권, 사용권, 배포자 연락처, 알려진 버그, 트러블 슈팅, 체인지 로그 등으로 구성되어 있다. 약간 코드의 사용설명서 + 히스토리를 담고 있는 내용? 자세한 점은 위키피디아 참조. Array 재활용 monthName, monthDays를 따로따로 Array 로 만들어서 지정해줬는데, Array 안에 key & value를 이용하여 하나의 큰 array를 사용하는 것을 권장해주셨다. const months = { JAN: { name: 'JAN',..
-
After Prep Project: Need to be improvedBoot Camp/Coding_Prep 2021. 3. 2. 16:19
CSS, JS, 그리고 html 삼위일체로 웹 프로젝트를 만들 수 있다는걸 깨달은 것도 잠시, 내 실력의 한계 ㅋㅋㅋㅋ 를 여실히 느낄 수 있었다. JS) 함수 안에 함수가 있을 때, 파라미터 혹은 글로벌 변수를 이용하여 다른 제 3의 함수에 값 건네주기 JS) addEventListener에서 function(event)와 function()의 차이 (직접 해봤을 때는 별 다른 점이 없어보였습니다.) JS) addEventListener 내부에 다른 함수가 또 있을 때, function 안에 function이 되는거라면 제일 자식 function은 글로벌로 어떻게 값을 보낼 수 있는지? (첫번째 질문과 유사) CSS) div말고 좀 더 다양한 요소를 다음에는 사용해보자 CSS) class말고 좀 더 다..