Life is Peanuts and Butter Life is Peanuts and Butter

Let's Code/JavaScript

• React 자습서 따라하기 (1) Constructor

  Let's Code/JavaScript 2021. 7. 17. 23:18

  오랜만에 본 React가 하나도 기억이 안 나서 다시 시작하는 Tic-tac-toe 게임! (https://reactjs.org/tutorial/tutorial.html#inspecting-the-starter-code) 튜토리얼을 따라가며 배운 것: 1. Constructor 사용하기 class Square extends React.Component { constructor(props) { super(props); this.state = { value: null, }; } } Constructor를 사용하는 경우 1) React가 DOM에 Mount되기 전에 (즉, Rendering 전에) Component의 초기 state을 설정해야 할 필요가 있을 때 2) Event Handling을 통해 User..

  Read More
• React와 JSX

  Let's Code/JavaScript 2021. 7. 17. 14:14

  JSX란? - JSX는 리액트에 필수적이진 않지만 리액트 경험을 훨씬 편리하게 만드는, 리액트에 특화된 XML이다. - JSX 문법을 이용해서 createElement 사용 없이 리액트에 바로 HTML을 삽입할 수 있다. const myelement = JSX를 사용하면 짱 편리하다구!; const myelement = React.createElement('h3', {}, '나 그냥 JSX 안 쓸래!'); 위가 JSX를 사용한 버전, 아래가 JSX를 사용하지 않은 코드다. 한 눈에 봐도 위가 더 편리하다. JSX안에 함수 넣기 function sayhiName(user) { return 'hi' + ' ' + user.firstName + ' ' + user.lastName; } const user = ..

  Read More
• 자바스크립트 드럼 키트 만들기

  Let's Code/JavaScript 2021. 3. 29. 22:51

  1. 키보드의 특정 키를 누르면 매칭되는 음원 재생시키기 function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if (!audio) return; audio.currentTime = 0; audio.play(); key.classList.add('playing'); } const keys = document.querySelectorAll('.key'); window.addEventListener('keydown', playSound); document.querySel..

  Read More
• 자바스크립트 시계 만들기

  Let's Code/JavaScript 2021. 3. 16. 23:46

  DOM HTML의 모든 컨텐츠를 웹 브라우저의 메모리 상에 올려 자바스크립트로 접근하기 위해 DOM 문서를 사용한다. HTML의 모든 태그를 자바스크립트에서 객체로 불러올 수 있다. 요소 접근 메서드 document.getElementById(""): document는 가장 포괄적인 범위로, HTML 전 문서를 탐색하여 ""사이 들어가는 Id 요소를 호출한다. document.querySelector(""): 특정 태그, 또는 .가 붙을 경우 클래스, #가 붙을 경우 ID 요소를 호출한다. 요소 변환 메서드 요소.innerHTML = 을 통해 해당 요소 내 값을 재할당할 수 있다. 날짜 호출 메서드 Date()은 달, 날짜, 요일, 시간, 분, 초 등 시간과 관련된 모든 요소를 호출한다. date.get..

  Read More
• 자바스크립트: 객체의 기본

  Let's Code/JavaScript 2021. 3. 10. 17:30

  객체의 기본 - 자바스크립트의 8가지 자료형은 '객체형' (객체)와 '원시형primitive type' (나머지 7)로 구분할 수 있다. 원시형은 한 가지 데이터 타입만, 객체형은 다양한 데이터 타입을 저장할 수 있다. - 객체 문법: { 키Key: 값Value, 키2: 값2 } // 여기서 키: 값의 한 쌍이 프로퍼티Property. 키 (또는 프로퍼티 이름이나 식별자)에는 문자형만 허용되지만 값에는 제한 없음. - 객체 생성법: 1) '객체 생성자' 문법 2) '객체 리터럴' 문법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 - 프로퍼티 접근: 점 표기법(dot notation)을 사용하여 프로퍼티 값만 호출 또는 특정 ..

  Read More
• 자바스크립트: 함수 선언, 표현, 콜백

  Let's Code/JavaScript 2021. 3. 9. 21:16

  함수의 기본 - 정의: 프로그램을 구성하는 주요 구성 요소로, 유사한 동작을 하는 코드를 중복 코드 없이 간편하게 호출하기 위한 장치 - 함수 선언(function declaration) 문법: function 키워드, 함수 이름, (매개변수parameter) { 함수 본문 } - 호출: 함수 선언 이후 함수 이름 옆에 괄호 ()를 붙여 호출 - 변수: 함수 내에서 선언한 변수는 지역 변수(local variable)로, 외부 변수(outer variable)과 달리 함수 밖에서 접근 불가능. 외부 변수는 전역 변수(global variable)로 더 흔히 불리는데, 모든 함수에서 접근 가능하다. 전역 변수는 최소한으로 사용하는 것이 좋다. - 함수 내에서 외부 변수와 동일한 이름의 지역 변수를 선언할 ..

  Read More
• 자바스크립트: If, While, For, Switch

  Let's Code/JavaScript 2021. 3. 6. 21:12

  모던자바스크립트 2.10 ~ 2.14 (https://ko.javascript.info/first-steps) If문 (If statement) - 조건에 따라 다른 행동을 취할 때 사용하며, 괄호 안의 결과가 true일 경우만 동작을 실행한다. - if 문 후 ( ) 안에 조건을, { } 안에 실행할 동작을 쓴다. (동작이 하나일 경우 {}를 쓰지 않아도 되지만 가독성이 하락한다.) - If 문의 ( ) 는 값을 불린형으로 반환한다. - False일 경우 행동을 별도로 지정해주고 싶다면 else, 조건문을 nest하고 싶으면 else if를 사용한다. if (year == 2015) { alert( "정답! 와아~~" ); } 조건부 연산자 ? (Conditional operator) - 조건부 연산자..

  Read More
• 자바스크립트의 기본 연산자

  Let's Code/JavaScript 2021. 3. 6. 19:34

  모던자바스크립트 2.7 ~ 2.9 (ko.javascript.info/first-steps) 형 변환 형 변환(Type Conversion): 적절한 자료형으로 자동으로 변환하는 과정 - alert 메서드는 자동으로 전달받은 값을 문자형(string)으로 변환 - 수학 연산자 (+, -, *, /)는 자동으로 값을 숫자형으로 변환하여 계산: 이 때 null은 0, boolean은 0 혹은 1, 숫자 이외의 값이 포함된 string 혹은 undefined의 경우 NaN으로 변환 - 논리 연산은 자동으로 값을 불린형으로 변환하여 연산을 수행: 0/빈 문자열/null/undefined/NaN 외엔 모두 true ("0"도 true) 기본 산술 연산자 - 피연산자(operand): 연산이 수행되는 대상, 인수(..

  Read More