본문 바로가기

분류 전체보기182

[리액트] 시작하기 https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 내 컴퓨터에 리액트 개발환경을 설치하지 않고 이용해보기 좋은 온라인 서비스, StackBlitz https://stackblitz.com/ StackBlitz | Instant Dev Environments | Click. Code. Done. Instant dev experiences Wait, I can enjoy web dev again? Significantly reduce time to market with matchlessly secure, instantly reprod.. 2022. 7. 29.
[자바스크립트] 강의 복습 DOM과 이벤트 + 구조분해할당 script를 body 밖에서 작성하긴 했지만 script가 body 안에 들어가 있고, body 안에 div가 추가된 것이 콘솔 창에서 보인다. 요소에 스타일을 줄 때, 보통 인라인보다는 클래스 명으로 해서 스타일을 주는 것을 권장한다. 위에 박스들은 클래스 이름으로 묶고, 색깔별로 다시 클래스 이름을 붙여 스타일을 줄 때 복합 클래스 이름을 사용하였다. 구조 분해 할당(Destructing assignment) 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 배열 구조 분해 ex. let users = ['Aiden', 'Tom', 'Harry']; let [user1, user2, user3] = users; // → let user1 = users[0]; let user.. 2022. 7. 25.
Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at JS의 DOM으로 div를 추가하려고 head에 script를 작성하고 실행하니 다음의 오류가 발생 그 이유에 대해서는 차후에 자세히 설명을 적기로 하고, head에 넣었던 script를 body 뒤로 넣으면 오류 해결 ! 2022. 7. 23.
[자바스크립트] 강의 복습 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.

티스토리툴바