korean IT student

1. State 컴포넌트 내부에서 바뀔 수 있는 값을 의미 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state 2. 클래스형 컴포넌트의 State 컴포넌트에 state를 설정할 때는 다음과 같이 constructor 메서드를 작성, 이는 컴포넌트의 생성자 메서드. 클랙스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해 주어야 한다. 이 함수가 호출되현 상속받고 있는 리액트 Component 클래스가 지닌 생성자 함수를 호출 class Counter extends React.Component { constructor(props) { super(props); this.state = ..

1. Component 리액트로 만들어진 앱을 이루는 최소한의 단위 화면을 구성하게 되면, 사용자가 볼 수 있는 여러 가지 컴포넌트로 구성되어 있습니다. 사용자에게 보여지는 UI 요소를 컴포넌트 단위로 구분하여 구현할 수 있습니다. 컴포넌트 이름은 항상 대문자로 시작 (소문자로 시작하는 컴포넌트를 DOM 태그로 취급한다. ) "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환 2. 함수 컴포넌트와 클래스 컴포넌트 함수형 컴포넌트 : function 으로 정의하고 return 문에 jsx 코드를 반환합니다. 화살표 함수로 정의 가능합니다. function Welcome(props) { return Hello, {props.name}; } const..

1. React Element 실제로 화면에 표시할 내용을 기술 type(문자열, 컴포넌트 함수/ 클래스) 필드와 props(객체) 필드를 가지는 React의 객체 쉽게 말해 컴포넌트를 JSON으로 표현한 것 React 라이브러리에 있는 React.createElement()를 이용하여 만들 수 있으며 type으로 HTML 태그 이름을 가지고 그 이외의 특징을 props로 관리하는 객체 형태로 정의 // createElement를 이용해서 React Element 만들기 React.createElement( 'div', { className: 'name'}, 'React' ) // createElement를 이용해서 만들어진 React Element 객체 { type: 'div', props: { cla..

URLSearchParams 인터페이스는 URL의 쿼리 문자열에 대해 작업할 수 있는 유틸리티 메서드를 정의합니다. URLSearchParams를 구현하는 객체는 for...of 반복문에 바로 사용할 수 있습니다. 사용 예제 1. URLSearchParams 선언한다. 2. params에 for문을 통해 각각 키값에 담는다. 결과 값 각각 issueIds 파라미터값을 보낼 수 있다. - 참고 https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams URLSearchParams - Web API | MDN URLSearchParams 인터페이스는 URL의 쿼리 문자열에 대해 작업할 수 있는 유틸리티 메서드를 정의합니다. developer.mozilla...

vue-good-table에서는 고정 컬럼이 제공하지 않아 직접 css를 통하여 수정하였습니다. 또한 고정헤더는 제공하는데 좌우로 움직였을때 컬럼과 위치가 달라져 같이 수정 적용하였습니다. 아래 소스를 참고하세요!! https://jsfiddle.net/changhyun/0gon8c7x/1/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net

html2canvas는 밑에 홈페이지에서 .js에서 받을 수 있다. html2canvas.hertzen.com/ html2canvas - Screenshots with JavaScript Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture html2canvas.hertzen.com 위의 라이브러리를 이용하여 이미지 서버에 업로드하기 편리하다. 먼저 canvas에 ref를 정의하여 준다. 그리고 canvas에 그려진 그림을 @click 한다.(클릭 함수 구현) - 위의 함수를 통하여 this.$refs.canvas1 html정보를 가져온다. - document.getElementByI..

기본적인 callback 함수와 promise를 사용한 함수를 보면 promise를 사용한 함수가 더 직관적으로 보기 편한 것을 알 수 있다. 가장 중요한 차이점은 변수 a 와 변수 b를 로그를 보면 알 수 있듯이 b는 promise를 반환한다. promise는 비동기상황을 일급값으로 다룬다. Promise는 다음 중 하나의 상태를 가집니다. 대기(pending): 이행하거나 거부되지 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. Promise의 then을 통해 계속 값을 이어 나갈 수 있다.

공부를 하면서 REACT를 사용하면 가독성이 좋고 보안에도 좋아 보인다. 이제 막 시작하였지만 첨부된 이미지를 보면 이해하기 쉽다. REACT를 사용하면 영역을 나눠서 가독성이 좋고 나중에 정보를 추가하기에도 편리할 것 같다. 차근차근 REACT를 공부해보자!

https://ko.reactjs.org/docs/create-a-new-react-app.html 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org React 문서를 참고하여 설치 하였다. 1. 먼저 npm이 설치되어 있어야 한다. 구글에 npm 검색 후 설치하면 된다.) 2. 콘솔 창을 열어서 원하는 폴더위치에 npm create-react-app 실행을 하면 설치가된다. 3. npm start를 하여 로컬에 실행을 할 수 있다.