초급개발자의공부노트

const calcalator = { plus: function(a, b) { return a + b; }, minus: function(a,b) { return a - b; }, multi: function(a,b) { return a * b; }, div: function(a,b) { return a / b; } } console.log(calcalator.multi(5,5));

함수 - 함수를 선언할 때 function 을 적고 그 뒤에 함수명을 적는다 일단 () 안에는 매개변수(argument)가 있을수도있고 없을수도 있는데 일단 없다고 생각하고 아래와 같이 함수를 선언했다. - 함수 호출은 아래와 같이 sayHello(); 로 선언한다. 매개 변수가 있다면 sayHello(......)가 되겠지. 매개변수가 있을 경우의 함수 사용 - 먼저 함수를 선언할 때 함수의 파라미터를 name 이라는 이름으로 주었다. - 그러면 저 함수 내에서는 name 이라는 값을 참조할 수가 있는데 함수 호출시 JongWan 이라는 문자열을 매개변수로 주었기 때문에 현재 함수 내에서 name 은 문자열인 JongWan 이 되는 것이다. - 아래와 같이 매개변수도 여러개가 올 수도 있다. 좀 더 섹..

1. Array - 아래와 같이 [] (대괄호) 안에 데이터를 삽입한다. ( 문자열이 올수도, 숫자가 올수도, true & false가 올 수도 있다. ) - 숫자는 0부터 세기 때문에 dayOfWeek[0] 을 하면 mon 을 참조 할 수 있다. 2. Object - 오브젝트는 배열과 달리 { } (컬리브라켓) 으로 선언한다. - 변수명:데이터 형식으로 데이터가 들어간다. - 오브젝트 안에 배열이 들어 갈 수도 있다. 아래와 같이 오브젝트 안에 배열과 오브젝트를 삽입할수 있다.

변수 = 변경되거나 변경 할 수 있는 것, 그 값을 저장하는 공간 - 기본적으로 변수 생성 -> 초기화 -> 사용 의 순서를 거친다. - 자바스크립트에서는 코드가 위에서 아래로 실행 - 변수의 값의 변경을 원하지 않으면 const(상수) 변수 선언 ES5 -> var ES6 -> let , const 담을수 있는 데이터의 종류 - string , number , boolean , float

1. 기본적인 HTML 틀과 body 태그 마지막에 라는 태그로 자바스크립트 파일을 불러온다 2. 자바스크립트 파일 안에는 이렇게 경고창으로 Hello World! 를 출력한다. alert('출력할 내용'); 3. 정상적으로 출력되는지 파일을 열어 웹 브라우저 확인해본다

1. 명령 프롬프트 -> 작업 폴더로 이동 -> npm install node-sass --save -> npm audit fix 2. App.css 파일을 App.scss 파일로 변경 3. App.js 에서 확인

웹 어플리케이션을 만들다 보면 ... 같이 반복되는 코드를 작성할 때가 있다. 코드가 좀 더 복잡해지면 코드의 양은 더욱 늘어나고 불필요한 파일 용량도 증가하면서 낭비가 될 것이다. 리액트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법은 아래와 같다. 9.1. 자바스크립트 배열 객체의 내장 함수인 map() 을 사용 문법 : arr.map(callback, [thisArg]) 파라미터 callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지 - currentValue : 현재 처리하고 있는 요소 - index : 현재 처리하고 있는 요소의 index 값 - array : 현재 처리하고 있는 원본 배열 thisArg(선택 항목) : callback 함수 내부에서 사용할 thi..

1. ref 는 어떤 상황에서 사용해야 하나 - "DOM을 꼭 간접적으로 건드려야 할 때 사용한다." 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 이 때는 어쩔수 없이 DOM에 직접적으로 접근해야 하는데, 이 때 ref 를 사용한다. 2. ref 사용법 - ref 를 달아야하는 DOM에 ref 속성을 추가할 때는 props를 설정하듯이 하면 된다. ref 값으로 콜백함수를 전달하고, 콜백 함수는 ref를 파라미터로 가지며 , 콜백 함수 내부에서 컴포넌트의 멤버 변수에 ref를 담는 코드를 작성한다. {this.input=ref}}> 이렇게 하면 앞으로 this.input 은 input 요소의 DOM을 가리키게 된다. ref 이름은 자유롭게 지정한다. (ex th..

이벤트(event) : 유저가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것. 이벤트 사용할 때 주의사항 1. 이벤트 이름은 camelCase 로 작성( 예 HTML -> onclick , 리액트 -> onClick ) 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니고, 함수 형태의 값으로 전달 3. DOM 요소에만 이벤트 설정 가능 이벤트 종류(그 외 : https://facebook.github.io/react/docs/events.html ) Clipboard Form Composition Keyboard Focus Mouse Selection Touch UI Image Wheel Animation Media Transition 임의 메서드 생성 이벤트에 실행할 자바스크립트 코드를 ..

리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소가 바로 컴포넌트 이다. 기능을 단위별로 캡슐화하는 기본 단위가 된다. ReactDOM.render 메서드의 시그니처 ReactDOM.render( ReactElement element , DOMElement container, [function callback]) -> ReactComponent 요소(element) : 우리가 화면에서 보고자 하는 것들에 대해 리액트에게 설명해 주는 서술자며, 리액트 중심에 있는 개념 리액트에서 리액트 요소 - 경량이고 상태가 없으며 내부 상태의 변경이 불가능한 요소 - ReactComponentElement, ReactDOMElement 타입의 두 가지가 존재한다. - ReactDOMEl..