프도

DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있습니다. const oneTweet = document.querySelector('.tweet') //이렇게하면 클리스 이름 tweet인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있다. const tweets = document.querySelectorAll('.tweet') // HTML 문서에는 클래스 이름이 tweet 인 엘리먼트가 여러 개 있는 데, 변수 oneTweet 에 할당된 엘리먼트는 단 하나입니다. 여러 개의 엘리먼트를 한 번에 가져오기 위해서는, querySelectorAll 을 사용합니다 다음 코드를 입력하면 container의 ..

append는 여러 개의 자식 엘리먼트를 동시에 추가 기능 appendChild는 한 번에 하나의 자식 엘리먼트 추가 기능 remove는 반환 값 X, 자식 레벨에서 접근해도 노드 삭제 가능 removeChild는 반환 값 O, 부모 레벨에서 접근해야 노드 삭제 기능

이번주에 Dom으로 HTML을 조작하는 방법중 기초적인 새로운 element를 만들겠다 let newDiv = document.createElement('div') // 여기서는 div element를 변수 newDiv 에 할당합니다 근데 이렇게하면 화면에 어떤 변화도 나타나지 않습니다. 아직 화면에 변호가 없는 게 당연합니다. newDiv 라는 요소는 현재 공중부양 중입니다. 위 그림처럼 공중에 떠있는 엘리먼트를 확인하기 위해서는 APPEND 로 newDiv 트 리구조에 연결한다. 그러면 document.body.append(newDiv)//변수 newDiv에 담기 새로운 엘리먼트를 body 엘리먼트에 append 한다 그러면 태그에 안에 바로 자식으로 추가 가능 하다

1주차 2주차 3주차를 진행하면서 어려운 부분들로 가득했다 ... 코플릿을 풀면서 페어분들과 하는데 부족한 부분들이 정말 많이 있었습니다. 근데 그런 부분들이 성장할 수 있는 기회라고 생각하고 앞으로 계속 지속해서 나아갈 것이다 객체,배열 Git,부분들은 계속해서 해나가면 적응은 할 것 같은데 CSS부분 목업 구현하기에서 페어분 도움을 정말 많이 받았다 주말 동안 CSS에 대해 다시 공부하고 목업 구현하는 부분들을 다시 복습하였다 공부하면서 느끼는 거지만 복습이 정말 중요한 것 같다 예습도 좋지만, 예습은 현재 진도를 확실히 이해한 상태에서 해야 하는 것 같다 주말 동안 CSS 스킬을 좀 더 익히고 복습을 더해야 될 것 같다 다음 주는 Spread, Rest 문법 Dom 이해하기 고차함수 그리고 리액트가..

이번 챕터에서는 Linux 터미널을 실행하고, 바로 사용해볼 수 있는 예제를 안내합니다. 터미널을 통해 명령어를 입력하려면 먼저, 터미널을 실행해야 합니다. 사용중인 OS(Operating System, 운영체제; Windows, Ubuntu, macOS)가 Ubuntu 또는 macOS인지 확인하고, 운영체제에 맞는 방법으로 터미널을 실행하세요. Ubuntu 단축키: Ctrl(컨트롤 키) + Alt(알트 키) + t(영문 t) 대시 홈을 이용해 터미널을 실행하는 방법 대시홈을 클릭하여 Ubuntu에 설치된 모든 응용 프로그램을 확인할 수 있는 대시보드로 이동합니다. 대시보드 상단의 검색창에 Terminal을 입력하고 Enter(엔터 키)를 누르거나, 화면에 나타난 프로그램을 클릭합니다. 대시보드를 좌, ..

컴퓨터를 조작하기 위해서는 다양한 입력(Input)이 필요합니다. 이 화면을 보기 위해 마우스를 사용하고, 메시지를 입력하기 위해 키보드를 사용합니다. 입력을 담당하는 키보드나 마우스를 입력소스(Input source)라고 합니다. 키보드나 마우스 외에도 카메라나 마이크 등 컴퓨터에 새로운 명령을 전달하는 모든 소스가 입력소스입니다. 반대로, 입력소스에 의해 또는 작성된 프로그램에 의해 모니터에 화면을 나타내거나, 음악을 재생하면 소리를 스피커로 전달하여 사용자가 인식할 수 있도록 하는 일을 출력(Output)이라고 합니다. 시각적 출력를 담당하는 모니터나 청각적 출력를 담당하는 스피커를 출력소스(Output source)라고 합니다. 모니터나 스피커 외에도 스마트 홈을 연결하여 전등이나 공기청정기를 조..

문자열 자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없습니다. 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장됩니다. 자바스크립트에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따릅니다. 따옴표 따옴표의 종류가 무엇이 있었는지 상기해봅시다. 문자열은 작은따옴표나 큰따옴표, 백틱으로 감쌀 수 있습니다. let single = '작은따옴표'; let double = "큰따옴표"; let backticks = `백틱`; 작은따옴표와 큰따옴표는 기능상 차이가 없습니다. 그런데 백틱엔 특별한 기능이 있습니다. 표현식을 ${…}로 감싸고 이를 백틱으로 감싼 문자열 중간에 넣어주면 해당 표현식을 문자열 중간에 쉽게 삽입할 수 있죠. 이런 방식을 템플릿 리터럴(templa..

모던 자바스크립트는 숫자를 나타내는 두 가지 자료형을 지원합니다. 일반적인 숫자는 '배정밀도 부동소수점 숫자(double precision floating point number)'로 알려진 64비트 형식의 IEEE-754에 저장됩니다. 튜토리얼 전체에서 이 형식을 사용하여 숫자를 표현할 예정입니다. 임의의 길이를 가진 정수는 BigInt 숫자로 나타낼 수 있습니다. 일반적인 숫자는 253이상이거나 -253이하일 수 없다는 제약 때문에 BigInt라는 새로운 자료형이 만들어졌습니다. BigInt는 아주 특별한 경우에만 사용되므로, 별도의 챕터 BigInt에서 자세한 내용을 다루겠습니다. 자, 그럼 일반적인 숫자에 대해서 자세히 알아봅시다. 숫자를 입력하는 다양한 방법 10억을 입력해야 한다고 상상해 봅니..

new 연산자와 생성자 함수 객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있습니다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇죠. 'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있습니다. 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫 글자는 대문자로 시작합니다. 반드시 'new' 연산자를 붙여 실행합니다. 예시: function User(name) { this.name = name; this.isAdmin = false; }..

메서드와 this 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성됩니다. let user = { name: "John", age: 30 }; 사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 합니다. 이와 마찬가지로 사용자를 나타내는 객체 user도 특정한 행동을 할 수 있습니다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줍니다. 메서드 만들기 객체 user에게 인사할 수 있는 능력을 부여해 줍시다. let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sa..