본문 바로가기

전체 글182

[자바스크립트] 강의 복습 Array 객체 Array 객체의 메서드 연습 문제 2022. 7. 22.
[자바스크립트] 강의 복습 객체와 DOM 요소 참조타입 내장 객체와 랩핑 메소드 체이닝과 옵셔널 체이닝 프로토타입과 프로토타입 체이닝 내장 객체 자바스크립트에는 다양한 객체가 미리 생성되어져 있음 ex. Number, String, Boolean, console, window 등 내방 객체의 프로퍼티(특별히 함수형 프로퍼티인 메소드!)를 많이 알면 알수록 생산성이 좋아진닷. 1. Number 객체 : Number라는 함수를 통해 만들 수 있다. (숫자 형변환이 이 원리로 된 것) 자주 쓰이는 메서드 - toFixed 2. String 객체 : String이라는 함수를 통해 만들 수 있다. (문자 형변환이 이 원리로 된 것) 3. Array 객체 : 순회와 변형 작업을 수행하는 메서드를 갖고, 자바스크립트의 배열은 길이, 요소의 자료형도 고정되어 있지.. 2022. 7. 22.
[React] 리액트 맛보기 라이브러리 vs 프레임워크 - 라이브러리는 개발 편의를 위한 도구들의 모음 like 공구 - 프레임워크는 기반 구조까지 잡혀있음 like 공장 리액트의 공식 문서 : https://ko.reactjs.org/ 만든이의 사용 설명서 그 안의 패턴을 찾고, 새로운 기술을 익히는 요령을 습득하자. React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 리액트를 라이브러리로서 접근하고, 약 20여개의 다양한 라이브러리들을 반복 접근하자. 리액트는 기술적으로 확실한 장점이 있다. Virtual DOM/ JSX / Flux / Functional Programming ... 새로.. 2022. 7. 21.
[모자듀 스터디] 객체, 메서드, this 객체 자바스크립트엔 8개의 자료형이 있다. 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type)'인 것 7개와 다양한 데이터를 담을 수 있을 수 있는 객체는 참조형으로 1개 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용 프로퍼티 키는 ‘프로퍼티 이름’ 혹은 '프로퍼티 식별자'라고도 부른다. 여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름을 따옴표로 묶어줘야 한다. ex. "make sth" : true; => 점 표기법으로 프로퍼티 값을 읽을 수 없다. => 대괄호 표기법으로 가능 cf. 단, 대괄호 표기법으로 프로퍼티 이름을 표시할 때는 따옴표로 묶어줘.. 2022. 7. 21.
[모자튜 스터디] Chrome으로 디버깅하기 디버깅(debugging)은 스크립트 내 에러를 검출해 제거하는 일련의 과정 Debugging - Wikipedia From Wikipedia, the free encyclopedia Jump to navigation Jump to search Process of finding and resolving defects or problems within a computer program In computer programming and software development, debugging is the process of finding and resolving bugs en.wikipedia.org 디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 .. 2022. 7. 21.
[자바스크립트] String 객체 String 전역 객체는 문자열의 생성자이다. : String 전역 객체를 직접 사용하여 문자열을 생성할 수 있다는 말이다. 기본형 : String(문자열로_반환하고_싶은_값) ex. let a = String(1) => console.log(a) // "1" 문자열은 텍스트 형태로 표현될 수 있는 데이터를 보관하는데 유용하다. 문자열에서 가장 많이 사용되는 작업들은, ① 문자열의 길이를 확인하는 length 속성 ② 문자열을 생성하고 연결하는 +와 += 문자열 연산자 ③ 서브문자열(substring)이 있는지 확인하고, 있으면 위치를 확인해주는 indexOf() 메서드 ④ 서브문자열을 추출해내는 substring() 메서드 문자 접근 문자열에서 개개의 문자에 접근할 수 있는 방법 ① return 'ki.. 2022. 7. 20.
TypeScript 설치 및 사용 node.js 설치 ⊙ https://nodejs.org Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org as by 2022/07/20 v16.16.0 LTS v18.6.0 Current ⊙ node.js version manager 1. nvm(권장) https://github.com/coreybutler/nvm-windows for Windows https://github.com/nvm-sh/nvm for macOS 2. n https://github.com/tj/n browser설치 보통은 Chrome 사용(권장) TypeScript 컴파일러 설치 1. npm (권장) npm i ty.. 2022. 7. 20.
[자바스크립트] 문서 객체 모델 DOM에서 노드 추가 및 삭제하기 DOM에서 노드 추가 및 삭제하기 웹 문서에서 처음 화면에는 내용이 보이지 않다가 클릭 등의 이벤트가 발생하면 내용이 나타나는 경우가 있다. 이러한 동작은 CSS의 display 속성을 사용해 만들 수도 있지만, DOM 트리에 새로운 노드를 추가(텍스트나 속성 노드 포함)하는 방법도 있다. 노드 리스트 DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트(node list)를 사용해야 한다. DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 노드를 한 번에 여러 개 가져올 수 있다. 이렇게 여러 개의 노드 정보를 저장한 것, 노드를 여러 개 저장한 데이터 형태를 노드 리스트라 한다. 노드 리스트는 배열과 비슷해서 인덱스 번호로 특정 위치의 노드에 접근할 수 있다. 텍스트.. 2022. 7. 20.
[자바스크립트] 문서 객체 모델 DOM, 이벤트 문서 객체 모델이란? DOM은 웹 문서를 하나의 객체로 정의한다. 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다. 그래서, DOM은 웹 문서와 그 안의 모든 요소를 객체로 인식하고 처리하는 것을 말한다. 이러한 문서 객체 모델(DOM)의 구조를 DOM 트리로 나타낸다. DOM 트리 DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다. DOM은 HTML 요소의 계층과 달리, 문서 안의 요소 뿐만 아니라 각 요소에 사용한 내용과 속성도 자식으로 나타낸다. ex. body의 자식인 h1의 요소 내용도 h1의 자식이 되지만, img 요소의 src이나 alt 속성도 각각의 자식이 된다. 부모와 자식 구조로 표시하면 마치 나무 형태가 되어 DOM 트리라고 한다. 이 DOM .. 2022. 7. 19.
SelfStudy 엘리코딩 자바스크립트 내부에 포함되어 있는 오브젝트들에 대한 레퍼런스 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference JavaScript reference - JavaScript | MDN This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more about this reference. developer.mozilla.org 2022. 7. 19.
[자바스크립트] 자바스크립트의 배경과 API, 공식 사이트 2004 년 AJAX : Asynchronous JavaScript and XML 비동기적으로 데이터를 서버에서 받아오고 처리할 수 있도록 도와주는 프로그램 2008년 구글에서 크롬이라는 JIT(just-in-time compilation) 엔진을 장착한 브라우저를 만들게 되었다. 자바스크립트를 실행하는 속도가 엄청나게 빠른 엔진 2015년 ECMA Script6 등장: 2009년 ECMA Script5로 표준화를 시작하고 그 뒤 현재까지 표준화된 자바스크립트의 큰 틀이 되고 있음. default parameter, class, arrow function이 이 때 정의되어 사용됨. ECMA Script5, 6이후로 자바스크립트가 브라우저에 구애받지 않고 잘 작동하게 되어 jQuery나 dojo, moot.. 2022. 7. 18.
[HTML] 김준태 강사 강의 복습 웹사이트에 들어간다고 하지만, 사실은 웹사이트에 우리가 주소로 접근(request, 요청)하는 순간에 해당 주소에 존재하는 HTML, CSS, JS 파일이 우리 컴퓨터에 순간적으로 다운로드(Response, 응답)되는 것일 뿐이다 ! 개발자 도구에서 네트워크를 통하여 주고받는 파일을 볼 수 있다. 결국 웹이라는 건, 어떤 주소에 접근하면, 어떤 파일을 건네줄 건지가 정의된 것이라고 생각하면 된다. HTML에서 Markup Language란 프로그래밍 랭귀지와 같이 특정한 논리를 가지고 작동하는 프로그램을 작성하기 위한 것이 아니라, 특정한 데이터를 표시하는 방법을 기술하는 언어를 말하는 것으로, 보여줄 데이터를 작성하는 방식을 정의한 언어일 뿐이다. CSS는 Cascading Style Sheet의 약자.. 2022. 7. 18.

티스토리툴바