분류 전체보기
-
React - Component의 StateReact/기본 2020. 5. 13. 22:12
state state란 말 그대로 컴포넌트의 상태 값을 의미한다. state와 props는 둘 다 Object이고, 화면에 보여줄 정보(상태)를 가지고 있다. 그런 점에서 서로 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모 쪽에서 전달해야만 사용할 수 있다. 마치 parameter(값)을 보내는 것과 같다. 반면, state는 컴포넌트 내에서 정의하고 사용한다. 특징 - state정의 할때, 반드시 constructor()함수를 호출하고 super()를 해줘야 사용 해야한다. - state 타입은 Object이고, 키와 값으로 이루어진 그 안에 배열, 객체와 같은 타입들을 다 담을 수 있다. ex) 이미지 리스트(배열) - 이벤트 발생 요소와 반영 되는 요소는 엄연히 다르다. 공부 할 예제를..
-
React - Component의 PropsReact/기본 2020. 5. 12. 14:40
Component란? - 재사용 가능한 UI 단위라 부른다. Component를 왜 사용해야 할까? 만약, '회원정보 페이지'와 '회원정보 수정 페이지' 두 개의 페이지를 만들어야 한다. Component를 모르면 회원정보 페이지의 html과 css를 작성하고, 회원정보 수정 페이지의 html과 css를 작성할 것이다. 이렇게 동일한 코드를 두 번 작업하는 것은 상당히 귀찮은 일이다. 이럴 때, 동일한 코드가 반복되는 부분을 하나의 Component로 만들어서 같은 디자인 input이 필요한 곳마다 재사용 한다면 귀찮은 작업을 피할 수 있게 된다. 그렇기 때문에 Component를 써야한다. Component의 특징 Component는 독립적으로, 재사용이 가능한 코드로 관리할 수 있다. 컴포넌트도 in..
-
React - JSXReact/기본 2020. 5. 12. 12:27
JSX란? 자바스크립트의 확장 문법이다. JSX를 왜 사용하는 가? function App() { return ( Hello react ); } 이렇게 작성된 코드를 function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null, "react")); } 이런 식으로 코드를 변환된다. 하지만 컴포넌트를 계속 랜더링 할 때마다 JSX 코드를 작성하는 것이 아니라 위에 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편할 것이다. 그렇기 때문에 JSX가 생겨났고, JSX를 사용하면 매우 편하게 UI를 랜더링 할 수 있다. 그렇다면 JSX도 자바스크립트 문법이라고 할수있나?..
-
Github 정리Trainings/세션 정리 2020. 5. 9. 21:47
Git이란? 프로그램의 소스 코드 관리를 위한 분산 버전 관리 시스템이다. 즉, 여러 명의 개발자가 특정 프로젝트를 자신의 컴퓨터로 협업하면서 개발할 때, 버전을 관리할 수 있는 시스템이다. Github이란? 원격저장소를 제공하여 전 세계 개발자들이 협업을 가능하게 하여 오픈소스를 만드는 서비스이다. 즉, 원격 저장소란 지역 저장소에서 작업한 내용을 업로드 하여 여러 개발자들이 협업할 수 있도록 만드는 중앙 저장소라고 보면 된다. github repository(저장소) 생성 방법 +항목에 new repository 클릭 Create repository 버튼을 누르면 이렇게 helloGithub이라는 repository(저장소)가 생성된다. github 사용방법 git init : Git 저장소를 새로 ..
-
자바스크립트 - 클래스 기본 개념JavaScript/기본 2020. 5. 6. 10:41
Class의란? Class는 사실 함수이다. 함수는 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class표현식과 class선언 두 가지 방법을 제공한다. Class의 선언 class를 정의하는 한 가지 방법은 class 선언을 이용하는 것이다. class를 선언하기 위해서는 클래스의 이름과 함께 class 키워드를 사용해야 한다. class Person { constructor(name, age) { this.name = name; this.age = age; } } 단, 함수 선언과 클래스 선언의 중요한 차이점은 호이스팅 여부이다. 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다. 클래스를 사용하기 위해서는 클래스를 먼저 선언 해야하며, 그렇지 않으면 Refer..
-
자바스크립트 - 객체 메소드 정리JavaScript/기본 2020. 5. 5. 19:33
자바스크립트에서 객체를 어떻게 선언하고, 사용할 수 있는지 알아보자. 먼저 객체는 {}(중괄호)로 감싸져 있고, :(클론)으로 구분된 이름/값 쌍들이 , (쉼표)로 분리된 목록의 형태이다. 다시 말하면 객체는 이름과 값으로 구성된 프로퍼티의 집합이라고 할 수 있다. 위에서 propertyName1,2로 나누었는데, 프로퍼티 이름은 중복이 되면 안 되기 때문에 숫자로 구분해 놓았다. 객체를 만들때는 규칙 1. property 이름은 중복될 수 없다. 2. property이름과 property값 사이에 :(콜론)으로 구분한다. 3. property를 추가할 때는 , (쉼표)를 붙여준다. 4. property 값에는 어느 type이나 가능하다.(string, numberm array, object, funct..
-
[wecode 3주차] 함수 - 호출, 정의카테고리 없음 2020. 5. 4. 23:23
함수란? 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다. 변수도 이름이 있듯이, 함수도 이름이 존재한다. 함수 이름을 부르면, 함수 내에 있는 코드가 실행된다. 함수 이름을 부르는 것을 앞으로 "함수를 호출한다"라고 표현한다. // 함수 정의 function checkCorrect() { let hi = "안녕하세요"; return hi; } // 함수 호출 checkCorrect(); 함수 이름이 checkCorrect이고,위와 같이 함수를 생성하고, 아래와 같이 이름을 불러 호출할 수 있습니다. 단, 함수 정의만 해놓고 함수 호출을 하지 않는다면, 함수의 body 부분이 실행되지 않는다. 1. 함수는 function 키워드로 시작한다. 2. 함수 이름을 정해주고 함수를 알리는 ()(..
-
자바스크립트 - 배열 메소드 정리JavaScript/기본 2020. 5. 4. 22:10
Array.map()이란? map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. map은 callback 함수를 각각의 요소에 대해 한 번씩 순서대로 불러 그 함수의 반환 값으로 새로운 배열을 만든다. callback 함수는 배열 값이 들어있는 인덱스에 대해서만 호출된다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않는다. 예시를 통해 알아보자. map()을 이용해서 구구단 3단의 수를 출력 해보도록 하자. data변수 안에 1 ~ 9까지의 배열이 담겨져 있고, map매서드를 통해서 각 항목에 × 3을 해서 새로운 배열을 result라는 변수에 담아서 출력한다. 출력한 결과 구구단 3단의 수들이 result에..