분류 전체보기
-
[TIL] 2020-03-08Trainings/이전 TIL 기록 2020. 3. 8. 23:54
[노마드 코더] ReactJS로 웹 서비스 만들기 #3.1 All you need to know about State까지 수강 [배운 내용] this의 값은 함수를 호출하는 방법에서 결정된다. 1. 전역에서 this console.log(this); // window {...} this.a = 'A'; console.log(window.a) // 'A' this.hello = 'world'; console.log(window.hello) // 'world' cat = "Meow"; console.log(window.cat) // 'Meow' console.log(cat) // 'Meow' thist는 기본적으로 전역 객체인 window에 바인딩된다. 2. 함수에서의 this function foo() {..
-
[TIL] 2020-03-07Trainings/이전 TIL 기록 2020. 3. 7. 23:53
[노마드 코더] ReactJS로 웹 서비스 만들기 #2 JSX & Props 까지 수강 [배운 내용] React 란? Facebook이 만든 UI 컴포넌트 라이브러리이다. React 특징 1. 컴포넌트 기반 아키텍처 - 템플릿언어가 아닌 자바스크립트로 컴포넌트 작성한다. - 특정 관심사에 집중된 기능 블록(관심사의 분리) 2. JSX 3. Virtual DOM 4. 단방향 데이터 흐름 지향 map() 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리된 새로운 결과를 새로운 배열에 담아 반환하는 함수이다. const numbers = [1, 2, 3, 4, 5]; const result = numbers.map((num) => num *2); console.log(result); result 배..
-
[TIL] 2020-03-06Trainings/이전 TIL 기록 2020. 3. 6. 23:00
[노마드 코더] 1. 바닐라 JS로 게임 만들기 수강 완료! 2. ReactJS로 웹 서비스 만들기 #2.0 Creating your first React Component까지 수강 [배운 내용] cmd 명령어 "mkdir" 은 명령어 뒤에 디렉토리명을 적어 새로운 디렉토리를 생성해준다. // mkdir helloworld "cd" 원하는 디렉터리로 이동하는 동작을 한다. // cd helloworld "ls" 명령어로 하위 디렉토리명을 확인 가능하다. git 명령어 git init : Git 저장소를 만들어주는 명령어. 실행하면 현재 디렉터리를 Git 저장소로 만들어준다. // git init git remote : 변경 내용을 반영할 원격 저장소를 조작한다. 'git remote'로 원격 저장소의 이..
-
[TIL] 2020-03-05Trainings/이전 TIL 기록 2020. 3. 5. 23:45
[노마드 코더] 바닐라 JS로 게임 만들기 #2.6 Saving the Image까지 수강 [스스로 미니 프로젝트 만들기] 바닐라 JS로 간단하게 틀린 그림찾기 만듬 [배운 내용] addEventListener 마우스 이벤트 [종류] mousemove : 마우스가 해당 객체의 영역에서 커서가 움직이는 순간 발생 mouseleave :해당 영역에서 커서가 빠져나가는 순간 발생 mousedown : 해당 객체의 영역에서 마우스 버튼이 눌려지는 순간 발생 mouseup : 해당 객체의 영역에서 마우스 버튼이 떼는 순간 발생 offsetX, offsetY - 이벤트 발생한 객체(태그)의 좌측상단을 기준점 - 많이 사용(relative) JavaScript 타이머 함수 setInterval(function, du..
-
[TIL] 2020-03-04Trainings/이전 TIL 기록 2020. 3. 4. 23:23
[노마드 코더] 바닐라 JS로 게임 만들기 #2. 2 Recap! 까지 수강 [생활코딩] HTML - form 태그 복습 [프로그래머스 JS 강의] Callback Function 조건을 등록해 두고 그 조건을 만족한 경우, 나중에 호출되는 함수 setTimeout( function, time ) time 시간이 지난 경우 function 함수를 콜백하는 함수 time 은 millisecond (1/1000초) 단위 timerId를 반환함 clearTimeout( timerId ) setTimeout 함수 호출의 결과로 반환된 timerId를 인자로 받아 예약되어 있던 function호출을 취소 이미 function이 호출된 경우(시간이 지나 이벤트가 발생한 경우)에는 효과 없음 setInterval( ..
-
HTML - <form> 태그HTML/HTML 2020. 3. 4. 21:54
오늘은 form 태그에 대해서 알아보자! form 태그란? → 로그인을 하거나 회원가입을 하거나 물건을 사거나 글을 작성할 때, 입력한 정보를 서비스를 제공하는 서버한테 정보를 전송할 때 사용하는 글자를 입력하는 것들 또는 무언가 선택하는 것들을 우리는 form이라 부른다. 즉, 사용자가 입력한 정보를 서버로 전송할 때 사용할 때 쓰는 태그가 form 태그이다. 그러면 form 태그로 과연 어떠한 것을 보낼까? 우선 사용자가 입력한 정보를 서버로 전송하기 위해서는 사용자로부터 정보를 입력 받을 수 있는 것을 만들어야 한다. 그때 사용하는 태그가 바로 input태그이다. input 태그에 type이라는 속성에 text라고 설정하게 되면, 사용자로부터 문자 정보를 일력 받을 수 있는 박스가 생긴다. 아이디 ..
-
[TIL] 2020-03-03Trainings/이전 TIL 기록 2020. 3. 3. 22:34
[노마드 코더] 바닐라 JS로 게임 만들기 #1Setup + Styles까지 수강 [프로그래머스] 자바스크립트와 웹 프론트엔드 파트 2. DOM + JS까지 수강 [배운 내용 정리] HTML, CSS, JS의 개념 HTML : 웹 페이지의 구조를 나타낸다. CSS : 웹 페이지 안에 존재하는 요소들의 스타일을 나타낸다. JS : JS로직을 통해 문서의 구조와 스타일에 변화를 줄 수 있다. 브라우저에서는 Javascript에서 HTML, CSS에 접근할 수 있는 API를 제공한다. window 객체 Javascript 실행 시 가장 상위에 존재하는 객체이다. 변수를 선언하거나 함수 선언 시 window 객체 안에 선언됨 표시된 웹 페이지의 정보에 접근하거나 변경을 할 수 있다. [종류] window.loc..
-
CSS - 문법CSS/CSS 2020. 3. 2. 23:17
오늘은 CSS 문법에 대해 알아보자! 다음은 가장 간단한 CSS 코드이다. h1 { color: red} h1, color, red 세 개의 단어가 의미하는 것은 무엇인가? 이 세 개의 단어들을 각각 선택자, 속성, 값이라고 한다. h1 -> 선택자(selector) 선택자(selector)란 무엇을 꾸밀지 정한다. h1은 h1 요소를 꾸미겠다는 뜻이다. color -> 속성(property) 속성(property)이란 어떤 모양을 꾸밀지 정한다. color는 색을 꾸미겠다는 뜻이다. red -> 값(value) 값(value)은 어떻게 꾸밀지 정한다. red는 빨간색으로 만들겠다는 뜻이다. 즉, CSS 코드는 이렇게 구성된다. selector { property: value} /* 선택자 {속성: 값}..