목록공부 (179)
저장을 습관화
const func(a, b) { return a+b; } console.log(func(1,2)); 위 코드에서 함수의 정의 부분에 나열되어 있는 a와 b는 parameter, 매개변수이다. 함수의 사용 부분에 있는 1과 2는 argument, 전달인자이다. 함수를 호출할때 전달할 실제값이다. 용어를 명확하게 하자 멍청한걸 들키는 것은 말 한마디로 충분하다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/RnYby/btsiBMxNOZo/f3DOlyZnT7mngywtuHkvM1/img.png)
0. 에러인가 기능인가 자바스크립트의 module화를 공부하기 위해 기존 프로젝트가 가지고 있던 js파일을 여러개로 쪼개고 있었다. 각 기능별로 1.js, 2.js, 3.js, 4.js로 나누었고(파일 이름은 예시) html 파일에서 아래와 같이 사용할 js파일들을 지정해주었다. 라는 내용을 넣었고 a.js 안에 const test = 'test string' 이라는 변수 선언을 하였는데 b.js 안에서 test 변수를 이용한 코드를 사용할 수 있었어 서로 다른 파일에 있는 변수나 함수 등 코드를 사용하려면 import export 선언이 필요한 것으로 알고있는데 이러한 import export 선언 없이도 b.js에서 a.js가 선언한 변수를 사용할수 있었던 이유가 뭐야? ChatGPT: 일반적으로 자..
1. 브라우저 저장소, 로컬 스토리지 혹은 웹 스토리지 https://www.daleseo.com/js-web-storage/ [자바스크립트] 웹 스토리지 (localStorage, sessionStorage) 사용법 Engineering Blog by Dale Seo www.daleseo.com 2. module화 - import와 export 현재 상황 예를들어 a.html과 b.js, c.js를 가지고 있음 a.html에서 라고 두 js 파일을 쓰겠다고 표시해주었음 b.js에서 const로 변수 test를 선언해주었고 export는 하지 않았음 c.js에서 import를 쓰지 않았는데 c.js가 변수 test를 사용할수 있는 상황임 왜??? chatgpt에게 물어봤음 ChatGPT: 일반적으로 자바..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rHFSR/btsiQkFW1cv/IdjdhzjeGPTPPqtYlsdufK/img.png)
python, 한국어 팩 등 필수적인 것은 제외 - Live Server HTML 문서 작성 중 우클릭 -> open with live server를 클릭하면 브라우저에서 127.0.0.1:5500으로 현재 HTML 문서의 결과를 띄워줌 HTML 문서를 수정하고 저장만 해주면 자동으로 브라우저 새로고침까지 해주니 알트탭만 해주면 됨. 편함 - prettier 코드의 줄맞춤이나 탭간격을을 맞춰줌 엥 VSC에 기본 기능 shift+alt+f 있는데 뭐한다고 이런건 또 씀? 이라고 생각했는데 얘는 문서 저장만 누르면 포매팅이 자동임. 사용자가 일일이 손목꺾어가며 쉬프트 알트 에프 누를 필요 없음 나같은 습관적 컨트롤 에스 사용자에겐 안쓸 이유가 없는 프로그램 그리고 팀원들이 모두 prettier를 사용한다면 ..
1. input 입력값 가져와서 출력하기 https://hianna.tistory.com/411 https://velog.io/@woosungkim0123/%EB%B6%84%EA%B8%B0%EC%B2%98%EB%A6%AC-%EA%B8%B0%EB%8A%A5 https://wikidocs.net/112349 2. getElementbyId https://kyounghwan01.github.io/blog/JS/JSbasic/getElementById/ id를 가지는 태그에 접근하는 함수 해당 id가 없을 경우 null 에러 발생 주어진 id와 일치하는 dom 요소를 나타내는 element를 반환하거나 주어진 id와 일치하는 dom요소가 없다면 null 반환 하지만 그대로 사용하면 원하지 않는 결과가 발생하는데..
https://www.yes24.com/Product/Goods/92742567 모던 자바스크립트 Deep Dive - YES24 『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드 www.yes24.com 읽자
💡 DOM 제어에 쓰이는 문법들 1. 문서 객체 생성과 선택 document.createElement(tagName) : 새로운 HTML 요소를 생성합니다. document.getElementById(id) : id 속성을 기준으로 요소를 선택합니다. document.getElementsByTagName(name) : 태그 이름을 기준으로 요소를 선택합니다. document.getElementsByClassName(name) : 클래스 이름을 기준으로 요소를 선택합니다. document.querySelector(selector) : CSS 선택자를 이용하여 요소를 선택합니다. document.querySelectorAll(selector) : CSS 선택자를 이용하여 모든 요소를 선택합니다. 2. 문서 ..
1. Math Math.ceil() 소수점 올림 Math.ceil(.95); // 1 Math.ceil(4); // 4 Math.ceil(7.004); // 8 Math.ceil(-0.95); // -0 Math.ceil(-4); // -4 Math.ceil(-7.004); // -7 Math.floor() 소수점 내림 Math.floor( 45.95); // 45 Math.floor( 45.05); // 45 Math.floor( 4 ); // 4 Math.floor(-45.05); // -46 Math.floor(-45.95); // -46 Math.round() 소수점 반올림 Math.round( 20.49); // 20 Math.round( 20.5 ); // 21 Math.round( 42 );..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bdIPub/btsh2l0WDCl/81yBjQDtTk0HFUHze4k5E0/img.png)
내용 출처 - ?. (Optional chaining) 아래와 같이 변수 user에 object name과 age를 입력하였다. var user = { name: 'kim', age : }; console.log(user.name); // kim console.log(user?.age); //undefiend 하지만 age에는 그 값이 지정되지 않았고 만일 이 상태에서 console.log(user.age); 를 실행시켰을 경우 TypeError: Cannot read properties of undefined가 발생하고 이 줄 아래의 코드로는 더 이상 진행되지 않는다. 이를 방지하기 위해서 if문으로 user의 age 오브젝트에 값이 지정되었는지 확인하던가, ?.를 사용할 수 있다. console.lo..