초급개발자의공부노트

React.createElement 메서드 React.createElement( String/ReactClass type, [object props], [children...] ) ->ReactElement React.createElement 함수는 문자열이나 컴포넌트, props 객체, 그리고 자식 컴포넌트들을 인수로 전달받아 리액트 요소를 리턴한다. 리액트 요소는 리액트를 이용해 렌더링하고자 하는 뭔가를 표현하는 경량의 요소임. 따라서 이 요소는 DOM 요소를 가리킬 수도 있고 또 다른 리액트 컴포넌트를 가리킬 수도 있음. type 매개 변수 : 생성할 HTML 요소의 태그 이름을 문자열로 전달하거나 리액트 클래스를 전달하면 된다. props: 속성(properties) 의 줄임말. HTML 요소에 ..

백그라운드에 이미지 추가하고 기타 CSS 효과주기 - bg.js 파일 생성하고 이미지 3장 준비(init() , genRandom() , paintImage(imaNumber) 3개의 함수 생성) 1. genRandom() 함수 1.1 임의의 숫자를 랜덤으로 생성하여 리턴한다. 1.2 Math 라는 객체를 이용하고 floor 함수를 이용한다. floor 은 올림수를 모두 버린다. 2. paintImage(imgNumber) 함수 2.1 먼저 image 라는 이름으로 변수를 하나 생성하고 객체를 만든다. 2.2 우선 작업폴더에 images 라는 폴더를 하나 만들었고 그 안에 이미지 3장이 들어있다. 물론 파일이름은 1,2,3.jpg 2.3 src는 파일의 경로를 얘기한다. 2.4 그 다음 classList..

1. paintTodo 함수 수정 1.1 X 버튼을 누르면 삭제를 하기 위해 delBtn에 이벤트리스너를 달아준다. 1.2 이벤트 리스너는 클릭이 발생했을 때 삭제를 하는 함수인 deleteToDo 를 넣었다. 2. deleteToDo(event) 함수 생성 2.1 이벤트 객체의 target에 접근하여 해당 객체를 얻는다. (버튼이 선택되었지만 부모가 누구인지 알 수 없다.) 2.2 해당 버튼에 대해서 부모를 찾는다. (parentNode) 2.3 toDoList 에 접근하여 도큐먼트에 있는 해당되는 li 요소를 removeChild 한다. 2.4 cleanToDos 변수를 하나 선언하고 toDos를 let 으로 변경한다. 2.5 filter는 array의 모든 아이템을 통해 함수를 실행한다. 즉 tru..

1. saveToDos() 함수 생성 - 이 함수는 localStorage 에 toDos 라는 key를 가지고 데이터를 저장하는 함수이다. - 여기서 JSON(JavaScript Object Notation)을 이용하여 오브젝트 형태인 데이터를 string 으로 저장한다. 2. paintTodo(text) 함수 - newId 라는 변수를 하나 생성하여 toDos(배열)의 길이만큼 +1을 더하여 Id 값을 부여하였다. - 그다음 li 요소에 id 라는 이름으로 newId를 지정함. - 텍스트와 id를 저장하는 오브젝트를 하나 만들어서 오브젝트가 배열에 push 를 하게된다. - 그 다음 saveToDos 함수를 이용하여 localStorage에 저장하게 한다. 3. loadToDos() - 이 함수는 새로..

todoList 만들기 1. index.html 파일 수정(일부) 1.1 form 하나를 만들고 class 명을 준다. 그 다음 텍스트 입력창을 하나 만든다. 1.2 ul을 하나 만들고 class 명을 준다. 1.3 마지막으로 todo.js 라는 파일을 하나 만들고 파일을 html 에서 포함시킨다. 2. todo.js 파일 2.1 우선 함수를 4개 만든다. init() , loadToDos(), handleSubmit(event), paintTodo(text) 2.2 그 다음 querySelector 로 js-toDoForm, input , js-toDoList 를 가져와 각각의 변수들에 담는다. 2.3 init() 초기화 함수 2.4 loadToDos() - 이 함수는 로컬 스토리지에있는 데이터를 가져..

노마드 코더의 모멘텀 클론코딩3-2 1. gretting.js 파일에 각각의 함수 추가 1.1 askForName() , handleSubmit(event) , saveName(text) 1.2 askForName 함수는 localStorage 에 아무런 데이터가 없을 때 인풋 값을 보여주게 하는 함수이다 1.3 그리고 form 에 대해서 submit 이 발생했을 때 handleSubmit 이라는 함수를 실행한다. 1.4 handleSubmit 함수에서는 event라는 이름의 매개변수를 받는다. 1.5 preventDefault() 라는 함수는 브라우저에서 엔터를 눌렀을 때 새로고침을 일어나지 않게 한다. 1.6 그다음 input 값의 value를 얻어 currentValue 라는 변수에 저장하고, 이전..

노마드 코더의 모멘텀 클론코딩3 이 단계에서 할 것 : User Name 을 입력받아 컴퓨터에 저장한다. 1. index 파일 수정 1.1 아래와 같이 index.html 파일에 form 과 input 을 넣고 form에 대해 클래스를 지정한다. 1.2 h4 태그를 선언하고 class 를 지정한다. 2. grettings.js 파일 생성 및 CSS 수정 2.1 먼저 html 파일에서 선언했던 요소들을 쓰기위해 querySelector 로 가져와야 한다. 2.2 먼저 부모요소인 도큐먼트에있는 js-form 이라는 클래스를 가져오고 그 다음 자식요소인 input 을 가져온다. 2.3 함수를 총 3개(paintGreeting, loadName, init) 을 만들어 주고 아래와 같이 코딩한다. 2.4 먼저 i..

노마드 코더의 모멘텀 클론코딩 2 여기서 알아야 할 것 : setInterval , 삼항연산 setInterval 함수 - 아래 사진과 같이 첫번째 인자로 실행할 함수를 넣고, 두번째 인자로는 실행시간(간격)을 넣는다. - 여기서 실행시간은 밀리세컨드 단위이기 때문에 1초마다 실행하려면 1000을 넣어야 한다. 삼항연산 - 아래와 같이 innerText 를 보면 작은 if문이라고 생각하면 된다. - 만약 시간이 10보다 작으면 True 일때는 0${hours} , False 일 경우는 그냥 시간을 출력한다. 결과 - 1초 마다 시간이 계속 업데이트 된다.

노마드 코더의 모멘텀 클론코딩 index.html - 우선 div 를 하나 선언하여 class 를 부여함. - div 안에 자식요소로 h1 태그를 넣음 clock.js - clock.js 파일에서는 먼저 도큐먼트에있는 클래스를 가져와 clockContainer 에 넣음 - 그 다음 clockContainer 안에 자식요소로 있는 h1 태그를 clockTitle에 넣음 - 그다음 함수를 하나 선언하여 Date 클래스를 선언하여... 이하 생략, 솔직히 기본적인 클래스를 선언하고 사용하는거라서 굳이 설명 안해도 될거같음. - 마지막으로 h1 태그의 innerText 에 접근하여 현재 시간을 출력한다. 여기서 새로고침을 하면 현재시간으로 업데이트 된다.

if-else (조건문) - 모든 프로그래밍 언어에서 볼 수 있는 조건문임 - 형식은 아래와 같음 물론 else if 도 있지 응용 먼저 css 파일을 아래와 같이 고침 index.js 파일 - rgb 값은 js 에서 console 로 색상을 찍어보면 나오는데 #34495e 와 같은색임 - init 이라는 초기화 함수 안에 색상을 BASE_COLOR로 지정하였고, 클릭 이벤트가 발생했을 때 handleClick 을 호출 한다. - currentColor 라는 변수 안에 현재 색상을 넣고, if 문으로 만약 BASE_COLOR 와 같으면 OTHER_COLOR 로 색상 변경 - else 인 경우는 그 반대로 실행 근데 위의 같은 방식경우 css를 건드리는거라 별로 ...... 아래 방식은 DOM