일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 함수 실행
- 배열메소드
- 이벤트핸들링
- REACT
- DOM
- CSS
- frontendstudy
- 이벤트
- promise
- 배열
- useRef
- addEventListener
- FrontendStydy
- this 객체
- Props
- 비동기함수
- input
- 메소드 실행
- typeScript
- HTML
- 렌더링
- callback함수
- 자바스크립트
- JavaScript
- webProject
- useState
- Frontend Study
- 리액트
- 컴포넌트
- try.. catch
- Today
- Total
목록전체 글 (77)
이다닷
반복문 반복문은 비슷하거나 동일한 구문을 반복해서 수행할 수있는 구문이다. 대표적인 반복문은 다음 두 가지이며, 두 반복문은 구조 및 동작방식에서 차이를 보인다. while 문 for 문 while문 키워드 while을 이용해 만드는 구문 while문은 '주어진 조건이 참일 동안에 구문을 반복하는' 반복문이다. while문의 기본 형태는 다음과 같다. while(조건){ // 조건이 참인 동안에 반복 수행할 코드 } 오늘의 실습 1 let number = 1; while(number < 3){ // 1, 2까지만 실행 시키고 종료됨 console.log(number); // 현재 number을 출력함 number += 1; // number의 수를 1 더함 } 실습의 결과 1 오늘의 실습 2 while(..
조건문이란? 조건문이란 주어진 조건의 참/거짓의 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문을 뜻한다. 여기에서 조건이란, 불리언 데이터를 반환하거나 불리언 데이터로 해석할 수 있는 표현식을 의미한다. ex) 게임 캐릭터의 HP가 0입니까? => true일 경우 캐릭터가 죽는다. if문 키워드 if를 이용해 만드는 구문 'if문'은 가장 일반적인 형태의 조건문이다. If문의 기본 형태 if(조건) { // 조건이 true일 때 실행할 코드 } //예시 let HP = 0 if(HP === 0) { console.log("You are die!") } // You are die! 가 출력된다. if - else문 else를 추가하여 조건이 거짓일 때의 할일을 추가 정의할 수 있다. 📌독립적인 els..
자바스크립트에서 비교란? 자바스크립트는 주어진 두 항을 비교할 수 있는 '비교 연산자'를 제공한다. 다음 두 가지 유형의 비교를 할 수 있다. 대소 비교 (크다, 작다) 등가 비교 (같다, 다르다) 📌무언가를 비교하는 작업 또한 '연산'의 일종으로 취급한다! 비교 연산의 특징 비교 연산식은 언제나 boolean 데이터를 반환한다. 크냐 작냐를비교하는 대소 비교, 같냐 다르냐를 비교하는 등가 비교는 모두 하나의 질문이며, 질문에 대한 답이 참(True) 또는 거짓(False)인 것이다. 대소 비교 대소 비교는 다음 네 가지 연산자를 사용해 처리할 수 있다. 의미 연산자 사용 형태 크다 > A > B 작다 = A >= B 작거나 같다
window.document window.document은 현재 브라우저에 렌더링되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근할 수 있다. 즉, DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다! 이를 이용하면 페이지의 정보를 얻거나 웹 요소를 생성 및 조작할 수 있다. 속성과 메소드를 제공 document는 문서(HTML, XML, SVG 등)에 대한 공통의 속성과 메소드를 제공한다. 즉, 다양한 API를 제공한다. 📌관련 문서 링크 Document - Web API | MDN (mozilla.org) Document - Web API | MDN Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다. D..
DOM을 알아보기 전에 웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면을 통해 보여주는 과정을 '렌더링'이라고 한다. 렌더링의 세부 과정 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서를 생성한다. 이를 DOM이라고 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. 아래에 있는 사진처럼 트리 형태를 띄우게 된다. DOM의 존재 목적 DOM은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다.
NULL 널(null) 데이터는 '없다'를 의미하는 데이터이다. 의도적으로 데이터가 없음을 나타내기 위해 사용하는 일종의 표현 수단이다. 📌 숫자 0이 아닌 null로 아무것도 없다는 뜻이 된다. number = 0; => 이 변수는 0이다 number = null; => 이 변수에는 아무 것도 없다 UNDEFINED 언디파인드(undefined)는 아직 데이터가 정의되지 않았음을 나타낸다. 📌정의하는 코드를 적어주어야 콘솔에서 숫자 확인이 가능하다. let number; console.log(number); => undefined 가 출력됨 number = 3; console.log(number); => 3 이 출력됨 BOOLEAN 불리언(boolean)은 숫자, 문자열과 같은 데이터 타입 중 하나이다..
연산 연산이란 '식이 나타낸 일정한 규칙에 따라 계산함'을 뜻한다. 사용자는 자바 스크립트 코드를 통해 연산을 처리하는 식을 만들 수 있고, 여기에 사용하는 기호를 '연산자'라 한다! 산술 연산 산술 연산은 더하기, 빼기 등 수를 이용한 계산이다. 두 개의 숫자 데이터를 피연산자로 받아서 하나의 숫자 데이터를 결과로 반환한다. 의미 연산자 예제 더하기 + 2 + 2 -> 4를 반환 빼기 - 5 - 2 -> 3을 반환 곱하기 * 3 * 2 -> 6을 반환 나누기 / 1 / 2 -> 0.5를 반환 나머지 % 12 % 5 -> 2를 반환 결과의 반환 산술 연산을 처리하는 식을 사용하면, 해당 식은 연산 결과를 반환한다. 즉, 식이 데이터로 대체된다! 📌실제 코드가 바뀌는 게 아닌, 실행 시에 결과가 반영된다는..
템플릿 리터럴 기존의 문자열은 따옴표를 이용해 표현했지만, 템플릿 리터럴은 백틱을 이용해 표현한다. 기존의 문자열과는 달리 표현식을 내장할 수 있는 문자열 표현법이다. //따옴표를 이용한 기존의 문자열 const str1 = '작은 따옴표' const str2 = "큰 따옴표" //백틱을 이용한 템플릿 리터럴 const str3 = `백틱` 표현식 삽입 방법 템플릿 리터럴로 표현한 문자열 내부에 플레이스홀더 (${})를 기입하고, 그 안에 데이터를 기입하면 데이터는 문자열의 멤버가 된다. 데이터를 반환하는 메소드 또한 데이터와 마찬가지로 취급할 수 있다. 데이터를 대신해 사용될 수 있는 것이라면 무엇이든 템플릿 리터럴에 삽입될 수 있다. 변수, 메소드 등 모두 가능. 오늘의 실습 1 let number ..