(22-02-17) 17강. 리팩토링, 중복의 제거 [목적] 리팩토링(ReFactoring. 다시 공장(?). 코드의 비효율적인 것을 제거하는 것. 중복코드를 개선하는 등 코드를 깔끔히 정리해주는 것.)을 통해 코드의 중복을 제거한다. [실습] 16강에서 했던 조건문을 좀 더 깔끔히 바꾸어본다. (1) -> value값 써주는 곳은 다 this로 표현. (4) 그런데 여기서 document.querySelector('body')가 계속 중복으로 나오므로 var target = document.querySelector('body')으로 target 변수를 지정해서 더 짧은 코드로 완성 가능. 이 target변수는 input태그 안에서만 유효한 변수. [코드] cf) ctrl+D를 누르면 같은 문자열을 중복 선택해준다. (하나씩 추가되는 형태) Ctrl+Shift+L을 누르면 커서가 위치된 문자열을 전부 선택해 준다는데, 제꺼에서는 안되네 ^_ㅠ
해야되는 것 2가지 1) 너무 긴 코드는 짧게 해주기 - document.querySeletor("#night_day") 이거 계속 나오는 선택자인데 사실 input태그 안에 지정한 id값인 자기 자신이므로 전부 value값 지정할 때 this로 지칭 가능. - ex) if(this.value === 'night') { 이하 같은 방법으로 처리..) 2) 중복되는 것은 변수의 활용으로 짧게 해주거나 없앤다. - 코드 안에 document.querySelector('body')가 중복해서 나오는데 이 코드를 input 태그 안에 변수를 지정함으로써 간단하게 표현해줄 수 있다.
이고잉 프로그래머 선생님, 새로운 진도를 나가지 않고 계속 배운것을 반복하면서 학생의 마음가짐으로 기초를 다지고 있습니다. 제꿈은 창조하는것입니다. 새로운것을 만드는것입니다. 삶의 문제를 해결하기위해서 코딩을 배우고 새로운것을 만들고 싶습니다. 어렸을떄 초등학생떄 컴퓨터 부품 분해해서 CPU 만지작 만지작 거리는것이 기억이 납니다. 그래서 컴퓨터 3번 고장냈습니다. 지금이라도 컴퓨터 프로그래밍 배워서 행복합니다. 현실과 환경에 타협하지 않고 계속 공부를 배우는것이 즐겁습니다. 하루에 2시간 3시간씩 조금씩 조금씩 배우고 있습니다. 곧있으면 새해입니다. 한해 잘마무리하시고 화이팅입니다.
답변감사드립니다^^ 저는 데이터 분석쪽에서 일하기를 희망하는 학생인데, 데이터 visualization 공부하면서 HTML CSS JavaScript때문이 강의를 듣고있습니다. 정말 비유를 잘 들어주시고 기능별로 필요성도 잘 설명해주셔서 이해가 잘 됩니다. 처음 시작하는 사람에게 정말 도움이 많이되는 강의인것 같습니다. 감사합니다^^
밑에 복사해서 버튼을 하나더 만들었을 때 위에 있는 버튼 내용만 바뀌는 이유 ‘자바스크립트는 HTML에 중복된 값이 있을 때, 대상을 선정하지 못하고 제일 첫번째로 기술된 요소를 선택하게 된다’ 이 내용때문 같아요. 밑에 복사한 내용의 #night_day 는 선택되지 못하고 위의 버튼 코드속 #night_day가 선택되고 value는 계속 night, day로 바뀌니까 색은 바뀌지만 선택되지않은 #night_day 가 포함된 글씨는 바뀌지 않는거죠. (저랑 같은 고민하실 분 계실까봐 최대한 적어봤는데 도움이 될까 모르겠네요ㅠㅠ 혹시 틀린 내용있다면 알려주세요!)
document.querySelector('body') 만을 블록씌워서 target 으로 변환하려 하는데 하나씩 블록 씌워가는 단축키가 있나요? ctrl+f 로 찾아버리면 모든 document.querySelector('body')에 블록이 씌워져서 강의영상과 똑같이 안됩니다 ㅠ
안녕하세요 이고잉님 영상에서 보여주신 것처럼 이벤트 등록을 html태그 안에 인라인으로 하는게 아니라 js파일을 따로 만들고 script태그로 불러들여서 실행할때는 this 키워드를 쓰면 작동이 안되더라구요. this 라는 키워드는 이렇게 js파일 호출식으로 할때는 아예 못쓰는건가요? ㅠ
a와 b 문장이 여러번 나와서 a와b 문장 모두 var target을 사용하고싶을때는 var target을 어떤식으로 사용하면 되나요? 자체적으로 추측하자면 1. var target의 다음 문장을 지정하기 전까진 지정하기 전의 문장으로 입력된다. or 2. 테그 안에서만 var target이 작동한다.
선생님 자바스크립트 강의중에 저는 이 강의가 가장 신기하면서 재밌었어요
뭔가 처음에 엄청 길었던 코딩들을 하나하나 압축해서 나중엔 보기좋게 정리되는것들이 되게 신기하면서 또 재밌어요
따로 공부하면서도 자주 참고하는 저에겐 정말 좋은 강의같아요 감사합니다
web1-html 들을 때보다 점점 어려워지네요. ^^; 흔히 말하는 비전공에 나이도 30대지만, 개념을 이해하려 노력중입니다. 이해가 안 가 자리를 박차고 일어나기도 하지만, 이고잉님의 "축하해용~"에 힘을 얻으면서 다시 도전합니다!
(22-02-17)
17강. 리팩토링, 중복의 제거
[목적] 리팩토링(ReFactoring. 다시 공장(?). 코드의 비효율적인 것을 제거하는 것. 중복코드를 개선하는 등 코드를 깔끔히 정리해주는 것.)을 통해 코드의 중복을 제거한다.
[실습] 16강에서 했던 조건문을 좀 더 깔끔히 바꾸어본다.
(1)
-> value값 써주는 곳은 다 this로 표현.
(4) 그런데 여기서 document.querySelector('body')가 계속 중복으로 나오므로
var target = document.querySelector('body')으로 target 변수를 지정해서
더 짧은 코드로 완성 가능. 이 target변수는 input태그 안에서만 유효한 변수.
[코드]
cf) ctrl+D를 누르면 같은 문자열을 중복 선택해준다. (하나씩 추가되는 형태)
Ctrl+Shift+L을 누르면 커서가 위치된 문자열을 전부 선택해 준다는데, 제꺼에서는 안되네 ^_ㅠ
해야되는 것 2가지
1) 너무 긴 코드는 짧게 해주기
- document.querySeletor("#night_day") 이거 계속 나오는 선택자인데 사실 input태그 안에 지정한 id값인 자기 자신이므로 전부 value값 지정할 때 this로 지칭 가능.
- ex) if(this.value === 'night') { 이하 같은 방법으로 처리..)
2) 중복되는 것은 변수의 활용으로 짧게 해주거나 없앤다.
- 코드 안에 document.querySelector('body')가 중복해서 나오는데 이 코드를
input 태그 안에 변수를 지정함으로써 간단하게 표현해줄 수 있다.
정리 너무 잘해주셧네요 감사합니다!
와.. 진짜 이번 강의는 정말 깨달은 게 많아요.. 이 강의 듣기 전에는 기계적으로 var, this 사용했었는데 이 강의 듣고 서야 이해가 되네요.. 감사합니다!!
이고잉님... 당신은 그저 빛...그 자체..... 늘 복 받으세요ㅠㅠㅠㅠㅠ
이고잉 프로그래머 선생님, 새로운 진도를 나가지 않고 계속 배운것을 반복하면서 학생의 마음가짐으로 기초를 다지고 있습니다.
제꿈은 창조하는것입니다. 새로운것을 만드는것입니다. 삶의 문제를 해결하기위해서 코딩을 배우고 새로운것을 만들고 싶습니다. 어렸을떄 초등학생떄 컴퓨터 부품 분해해서 CPU 만지작 만지작 거리는것이 기억이 납니다. 그래서 컴퓨터 3번 고장냈습니다.
지금이라도 컴퓨터 프로그래밍 배워서 행복합니다. 현실과 환경에 타협하지 않고 계속 공부를 배우는것이 즐겁습니다. 하루에 2시간 3시간씩 조금씩 조금씩 배우고 있습니다. 곧있으면 새해입니다. 한해 잘마무리하시고 화이팅입니다.
2:40 이 코드가 속해있는 index 태그 (x)
이 코드가 속해있는 input 태그 (o)
ㅋㅋㅋ아 이거 뭔가했는데
3:08에 하신 것 ctrl+d 입니다...!
와 this 랑 target 하나로 이렇게 정리되다니ㅠㅠ 오늘도 감사합니당 :)
다른 강의들도 마찬가지지만 이번 강의는 유독 깨달음을 많이 얻어갑니다! 좋은 강의 감사드립니다!🙇♀️
최고네요. 항상 강의 감사합니다
this의 위력 어마어마하네요
"중복을 제거하라"를 금과옥조로 품고 살겠습니다 ㅎㅎ 감사합니다!
와 소름돋는 강의 감사드립니다!!! 정말 넘 재밌어요
강의 너무 잘하세요!
강의보면 querySelector라인등 수정 할때 동일 라인을 한번에 여러개 선택해서 하시던데 어떤 단축키를 사용하시는지 궁금합니다!
수정하고 싶은 단어를 선택한후 ctrl+shift+L (윈도우기준) 누르시면 한번에 변경 가능합니다
코드를 다시함 수정해 봅니다.
function changeColor(el) {
var target = document.querySelector('body');
if(el.value === 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
el.value = 'day'
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
el.value = 'night'
}
}
와 진짜 이번 강의는 힙합의 거의 뭐 FLEX 해버린 느낌이네 속이 뻥 뚫린다!
좋은 강의 감사합니다.
2:44 index 가 아니라 input 아닌가요..?
저도 같은 생각 입니다. ^^ 하지만 내용을 잘 따라간 분들은 input을 말하는데 실수로 index라고 말하신거라고 다 알아 차릴 꺼라고 생각합니다.
자막에도 index 태그라고 나와서 내용 잘 따라 갔다고 생각했는데 제가 모르는 뭔가가 있나 검색도 해보고 한참 해맸어요ㅠㅠ 이상해하다가 댓글 보고 알았어요! 짚고 넘어가주셔서 감사합니다!
많이 어렵습니다. 그렇지만 이 산을 넘어야 다음 산을 탈 수 있겠죠
atom에서 "night_day"인 글자들 한번에 선택하는 방법이 먼가요?
저는 ctrl한 상태에서 마우스로 클릭했는데 굉장히 편해보이네요
아시는 분 알려주시면 감사하겠습니다
+Shin Kim ctrl+d 키를 눌러보세요~
답변감사드립니다^^
저는 데이터 분석쪽에서 일하기를 희망하는 학생인데, 데이터 visualization 공부하면서
HTML CSS JavaScript때문이 강의를 듣고있습니다.
정말 비유를 잘 들어주시고 기능별로 필요성도 잘 설명해주셔서 이해가 잘 됩니다.
처음 시작하는 사람에게 정말 도움이 많이되는 강의인것 같습니다.
감사합니다^^
덕분에 배웠습니다 ㅋㅋ 감사합니다.
@@coohde 혹시 그 반대로 위에 중복 글자들을 한번에 선택하는 방법 알수 있을까요??
@@coohde 감사합니다!
this로 바꿀때 소름 바로 돋네요 ㅋㅋㅋㅋ
밑에 복사해서 버튼을 하나더 만들었을 때 위에 있는 버튼 내용만 바뀌는 이유
‘자바스크립트는 HTML에 중복된 값이 있을 때, 대상을 선정하지 못하고
제일 첫번째로 기술된 요소를 선택하게 된다’ 이 내용때문 같아요.
밑에 복사한 내용의 #night_day 는 선택되지 못하고 위의 버튼 코드속
#night_day가 선택되고 value는 계속 night, day로 바뀌니까
색은 바뀌지만 선택되지않은 #night_day 가 포함된 글씨는 바뀌지 않는거죠.
(저랑 같은 고민하실 분 계실까봐 최대한 적어봤는데 도움이 될까 모르겠네요ㅠㅠ
혹시 틀린 내용있다면 알려주세요!)
감사합니다ㅠㅠ
진짜 이게 궁금했었는데! li 3개를 같은 id로 지정했었는데 가장 처음 것만 변화가 있어서 왜그러나 했었는데 바로 이런 이유였나봐요. 감사합니다!
감사합니다. 개념이 질 이해가안가서 그냥 중복값이 value를 못 받는걸보고 중복값이 고유값에 영향을 줄 수는 있지만 돌려받지는 못한다 정도로 이해하고 넘기려구요 ㅠㅠ
2:44 제가 좀 찰떡같이 알아듣지 못해서 그런데 index Tag가 아니라 input Tag 말씀하시는거 맞죠? 말실수하신거죠? 제가 조금만 이해안가도 불안해서요
맞습니다~
영롱하네요
선택된 텍스트 찾는 단축키
브라켓 은 ctrl + B 입니다 저도 검색해서 알았네요
중복을 없애는 것이 코딩을 잘하는 길이며 코딩 실력이 업업 할 것이다.
최고최고!
브라보!
감사합니다
위 아래의 버튼에서 값이 변할 때 동시에 day라고 바뀌거나 night라고 바뀌게끔 하는 방법은 무엇일까요?
전 동영상 보면 조건문 달아서 하는 방법 나와있어요!
@@minseongkim4562 위 아래 다 같이 안바뀜 클릭한 버튼만 바뀜
이렇게 하니깐 동시에 바뀌네요~
2:40 초에나오는 "이 코드가 속해 있는 태그, 즉 여기에서는 index 태그" 라는말이 혹시 input 태그를 잘못 말하신건가요?
그런 것 같아요 !
document.querySelector('body') 만을 블록씌워서 target 으로 변환하려 하는데
하나씩 블록 씌워가는 단축키가 있나요? ctrl+f 로 찾아버리면 모든 document.querySelector('body')에 블록이 씌워져서
강의영상과 똑같이 안됩니다 ㅠ
좀 늦었지만 ctrl + d 누르면 됩니다!
@@아카시아-f6q 질문하려고 했는데.. 답변 감사합니다 ㅠㅠㅠ
저는 대입연산자로 document.querySelector 까지만 설정하고 싶은데, (a 태그 선택자도 있어서요.) var tg = document.querySelector 이렇게 두니 value만 바뀌고 스타일이 실행이 안되더라고요. var tg = document.querySelector('body') 처럼 꼭 선택자까지 설정해야 하나요? 기준이 뭘까요ㅠ
night_day 언어를 동시에 이름을 바꾸려 한다면 단축키가 무엇인지 가르쳐주실수가 있을 까요?
5:53 뽁팔적
똑같은 코드 여러개를 이고잉님 처럼 단축키로 어떻게 선택하는 거죠? 저는 alt 키를 누르고 마우스로 일일이 클릭하는데...
Ctrl로 해보셔요
우와~~재밌당
자기 자신을 가르키는 코드는 this로 바꾼다. =>코드 훨씬 간결해짐
정말 궁금한데 그 같은 글자 한번에 수정하는거(ex. target) 어떻게 하나요 1억개면 하나하나 할 수 없는데 방법을 몰라서 아직은 하나하나 수정중입니다,,,,,
제가 아는 거라고는... 맥 기준 커맨드 누르면서 하나 하나 짚어주시면...
하나 드레그하고 컨트롤 디 하면 드레그한내용들과 똑같은것들이 드레그됩니다.
안녕하세요 이고잉님
영상에서 보여주신 것처럼 이벤트 등록을 html태그 안에 인라인으로 하는게 아니라 js파일을 따로 만들고 script태그로 불러들여서 실행할때는 this 키워드를 쓰면 작동이 안되더라구요.
this 라는 키워드는 이렇게 js파일 호출식으로 할때는 아예 못쓰는건가요? ㅠ
사용할수 있습니다. 아마 불러오는 방식이 틀렸거나 신택스 에러가 있었을 거에요
20200927 잘 듣고 갑니다!!
감사합니당
var target 같은 경우 타겟을 한번에 여러가지를 설정할 수 있나요? 이해한대로 보면 한 태그 안에 타겟은 하나만 지정할 수 있는 것 같은데 여러 타겟을 지정하려면 어떻게 하는건가요? 다른 태그?가 있는 건가요?
querySelectorAll이란 걸 이용하면 배열을 리턴해줍니다. 반복문을 이용해서 제어 하면 됩니다.
@@coohde 댓글 감사합니다. 반복문 수업까지 듣고나서 다시 찾아보고 이해해보겠습니다. 검색해서 봤는데 아직 querySelectorAll에 대해 완벽히 이해를 못한 것 같아요. 항상 좋은 수업 무료배포 감사드립니다!
저는 왜 버튼이 night ,day 화이트에서 블랙으로, 블랙에서 화이트로 한번씩만 바뀌고 게속 되지 않을까요?...ㅜㅜ
목소리 게속 누구랑 비슷하지 했는데
셋쇼마루 성우이신 김승준 성우님 목소리랑 비슷하시네요 ㅋ
a와 b 문장이 여러번 나와서 a와b 문장 모두 var target을 사용하고싶을때는 var target을 어떤식으로 사용하면 되나요?
자체적으로 추측하자면
1. var target의 다음 문장을 지정하기 전까진 지정하기 전의 문장으로 입력된다. or
2. 테그 안에서만 var target이 작동한다.
이상한데... 버튼이 같이 바뀌어야 되는 거 아닌가요?
처음에 버튼 밑에다가 만들때 안바뀐느 이유는뭔가요?? 안바뀔 이유가 없지 않나요??
18강 클리어
index가 뭐죠?
input을 잘못말씀하신거 같아요
5:18
재밋넹
22/9/20
20201027
*중복혐오*
감사합니다