개발자
-
[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-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} /* 선택자 {속성: 값}..
-
[TIL] 2020-03-02Trainings/이전 TIL 기록 2020. 3. 2. 22:42
[CSS] 문법 정리 [노마드 코더] 바닐라 초급 JS 수강 완료! [배운 문법] API란? → Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스는 응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. “ 운영체제나 프로그래밍 언어가 제공하는 기능 ” → SK의 날씨정보, Daum의 지도정보, 카카오페이를 뜻한다. “응용 프로그램” → 우리가 만든 서비스라고 생각하면 이해가 편하다. fetch() 인자로 전달된 데이터를 서버로부터 서버에게 요청하는 방법이다. "Hello World!" fetch('html'). then(function(response){ response.text(). ..
-
HTML - <table>태그HTML/HTML 2020. 3. 2. 01:58
오늘은 태그에 대해서 알아보자! 태그란? → 표를 만드는 방법을 의미하며, HTML 태그 중에서 가장 복잡하고 이해하기 어려운 태그라고 할 수 있다. 테이블을 사용 할때, 값을 넣으려고 하면 어떤 특정한 태그로 묶어 줘야 한다. 그때 사용하는 태그가 바로 태그이다. 태그의 약자는 table data를 의미한다. 이름 성별 주소 즉, 항목 하나하나를 td라는 이름으로 묶어주며, 표에서 각각의 실제 데이터들을 의미한다는 뜻이다. 그러고 나서, 각각의 행들을 태그로 묶어 줘야 한다. 태그의 약자는 table row를 의미한다. 즉, 같은 행에 속하는 태그들을 이라는 태그로 묶어주면, 웹 브라우저는 태그 아래에 있는 태그들을 같은 행으로 표시한다. 하지만, 행과 열이 나뉘었지만 명확한 표시를 원한다. 그럴 때..