본문 바로가기

전체 글

(55)
[Udemy - 100일 코딩 챌린지] 3/1 개발공부일지(조건문, 반복문 연습문제) 2/27 네이버 DEVIEW 2023 다녀오고 몸살 기운 있어서 바로 집가고 어제는 개발이든 글쓰기든 못하고 아 네이버 블로그에 다녀온 후기글 남겼다. 후후 핸드폰으로 작업하기는 네이버블로그가 티스토리보다 훨씬 편한 듯! 오늘부터 section13 연습문제! 아래사진처럼 결과가 나와야 하는데 코드 실행이 안 된다. 열심히 구글링 해보니, 내가 오류 메시지에서 이해한 대로, 해당하는 요소가 없다고 한다. 잘 선언했는데, 뭐가 문제지.. 하고 한 10분 이리저리 고치고 저장다시하고 아 " 와 ' 사이에는 큰 차이가 없다. 쌍따옴표 작은따옴표 수정이나 하고 있고 ㅋㅋㅋㅋ 그러다가 js code const userNumberInputElement = document.getElementById("user-name..
[Udemy - 100일 코딩 챌린지] 2/26 개발공부일지(반복문(for, while)) for / for ... of ... / for ... in ... / while 문에 대해서 배운다. for (let i = 0; i < 10; i++) { console.log(i); } 기본 for문 형식 let i = 0 : for문 반복에 사용할 변수 i를 선언하고 값 0을 지정 i < 10 : for문 반복 조건 설정 i++ : 반복을 위한 변수의 값 재지정을 위한 조건 설정 const users = ['hwanhee', 'sungyun', 'soleeno']; for (const user of users) { console.log(user); } 반복 시마다 호출되는 상수 user 를 for 문 안에서 새로 선언하고 users의 값을 입력한다. 씌운다. const랑 let의 차이가 헷갈린다...
[Udemy - 100일 코딩 챌린지] 2/25 개발공부일지(javascript property(style), if문, boolean 등) javascript에서 선언한 변수의 style property 선언 시, vscode 자동완성 기능 제공 안 됨. (당황하지 말 것) camelCaseNotation 방식으로 코드 올바르게 입력해서 style property 변경 할 수 있음 javascript 에서 조건문(if-statements), 반복문 실행하기(드디어) (if문 실행을 위한) 부울값 이해하기 if (true) {} (o) if ('true') {} (x) if (false) {} (o) if ('false') {} (x) == : 값만 비교한다. === : 값과 타입을 비교한다. >, < 연산자 사용 시 string type의 알파벳 순서도 비교 가능! javascript는 불리언이 필요한 위치에서 불리언이 아닌 값을 truth..
[Udemy - 100일 코딩 챌린지] 2/24 개발공부일지(eventListener, className, event에 대한 고찰 조금 and so on) 분명히 강의 때 보고 코드 실행도 해본 거지만, 기억이 안난다. 우캬캬캬 패착1. 같은 이름의 css가 여러개이다 보니 className 을 올바르게 부여했어도, 외부 파일 링크가 바르지 않다면 백날 새로고침해도 안 바뀐다. ㅅㅍ 페착2 eventListener에 대한 이해 부족 function에 대한 이해 부족 - 무적권 매개변수가 있어야 함수가 실행되는 줄 착각 function secondBtnClicked(secondButtonElement) { what i did let secondBtn = secondButtonElement; console.dir(secondBtn); } 뭐 이런식으로 혼자 맘껏 착각했으니 코드는 실행될 리 만무. 위처럼 매개변수를 선언했으면 함수 호출 시 매개변수에 넣어 사용..
[Udemy - 100일 코딩 챌린지] 2/22 개발공부일지(변수, 상수, className, classList) variabel vs Constants const productNameInputElement = document.getElementById('product-name'); const remainingCharsElement = document.getElementById('remaining-chars'); // console.dir(productNameInputElement); const maxAllowedChars = productNameInputElement.maxLength; function updateRemainingCharacters(event) { const enteredText = event.target.value; const enteredTextLength = enteredText.length;..
[Udemy - 100일 코딩 챌린지]2/21 개발공부일지(addEventListener, input) javascript 코드.. 혼자 비벼봤는데 못 했다. ㅋㅋㅋㅋ 근데 그전에 배운 것들(css, form, span, div, input element) 다 활용해서 만들어야 하는 거였음 근데 완성 폼도 안 주고 만들라는 게.. 학습하는 입장에서는 맞는 건가 의문이.. 서비스 런칭하는 입장에서야 무에서 유를 만들어야 하지만, 요즘 유에서 무를 만드는 게, 아니 요즘이라고 할 것도 상관없이 콜럼부스의 시대부터 처음하는 건, 무에서 유를 만드는 건 항상 어렵다. 계란 세우기도 그렇고, 알고보면 쉬운 것. 그러나 처음하기에는 어려운 것. 클론코딩 말고 예제랑 강의자료 그정도 던져줬으면 내선에서 해내고 싶었는데 ㅋㅋㅋ 아직 코드 구성이 어떻게 되는지조차 이해를 못해서, 메서드를 써도 되는가, 함수에 리턴을 할당..
[Udemy - 100일 코딩 챌린지] 2/20 개발공부일지(javascript - append(), remove(), eventlistener) 꾸준하기가 쉽지 않다. 그래도 꾸역꾸역 오늘을 갈아넣는다. javascript 에서 새로운 element를 추가하려면 1. element 생성 2. 새로운 element를 추가할 parent element 접근(선택) 3. 새로운 element를 parent element에 추가한다. (append() method 사용) 기존 element를 제거하려면 1. 제거할 element 선택(variabled에 할당) 2. 제거!(remove() method 사용) firstH1Element.remove(); firstH1Element.parentElement.removeChild(firstH1Element); // 옛날 브라우저에서는 .remove() 못읽을 수도 있으니까 알아두셈 .innerHTML vs ...
[Udemy - 100일 코딩 챌린지] 2/15 개발공부일지 Java Script selector(선택자) a tag 링크 수정을 html에서 말고 javascript에서도 가능하다. nest 관계를 이해하여 웹사이트 내 특정 요소를 선택할 수 있게 된다. nested 혹은children 혹은 parent! document.body.children[1].children[0].href = 'https://google.com'; 이 때 head tag에 있는 script의 코드를 먼저 실행시켜서 위와 같은 결과를 console창에서 확인할 수 있다. 위와 같은 상황을 방지하기 위해 script tag 안에 defer attribute를 작성하여 body tag의 코드를 먼저 실행하고 난 뒤 script의 외부 코드를 읽도록 할 수 있다. document의 method를 사용하여 element를 선택할 수 있다. ..