본문 바로가기

728x90

전체 글

(464)

[Fast Campus , React] 6. TicTacToe 앱 만들기 (2) - props, state Pros를 통해 컴포넌트 간에 데이터를 전달하기 Props : Properties의 줄임말 Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법 읽기 전용 (immutable)으로 자녀 컴포넌트 입장에선 변하지 않는다 (변하게 하고자 하면 부모 컴포넌트에서 state를 변경시켜줘야 한다 1. 상위 컴포넌트가 임의이 이름으로 (여기선 value) props 설정하고 하위 컴포넌트에 값 설정 export default class Board extends Component { renderSquare(i) { return } render() { const status = "Next Player: X"; return ( {status} {this.renderSquare(0)} {th..

[Fast Campus , React] 5. JSX , TicTacToe 앱 만들기 (1) JSX (Javascript Syntax Extension) 자바스크립트 확장 문법 리액트에서는 이 JSX를 이용해서 UI가 보이는 모습을 표현해 준다. JSX를 이용하면 UI를 나타낼 때 자바스크립트(logic)와 HTML구조(markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 쉽게 구현할 수 있다 JSX 사용이 의무는 아니지만, 자바스크립트 안에서 UI 작업을 하는데 편리하기에 리액트를 사용할 때는 거의 모든 사람들이 JSX를 사용한다. 원래 리엑트에서 화면을 그리는 방식 React.createElement API를 사용해 엘리먼트를 생성한 후 이 엘리먼트를 In-Memory에 저장. 그리고 ReactDom.render 함수를 사용해서 실제 브..

[Fast Campus , React] 4. SPA React 파일 렌더링 순서 현재 App.js 파일의 소스코드를 변경하면 변경한 부분이 화면에 적용이 된다. 이게 어떤 순서대로 실행되고 있는지 봐보면, public/index.html HTML 템플릿파일. root를 div로 선언해 놓음 You need to enable JavaScript to run this app. 웹브라우저의 렌더링 소스 (html)를 보면 root가 App의 내용이 추가되어 있음 src/index.js 자바스크립트 시작점. 여기서 위에 root id를 가진 div 엘리먼트를 잡아주며, 그 엘리먼트 안에서 화면을 꾸밀 수 있게 된다 onst root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); M..

[Fast Campus , React] 3. 프로젝트 설치와 구조 원래 리액트 앱 설치 위해서 필요했던 것들. Webpack? 오픈소스 자바스크립트 모듈 번들러. 여러 개로 나뉘어 있는 파일들을 하나의 자바스크립트 코드로 압축, 최적화하는 라이브러리 Babel? 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서, 최신 자바스크립트 문법을 구형 브라우저에서도 쓸 수 있게 변환시켜 주는 라이브러리 이젠 npx create-react-app [폴더 이름] 으로 쉽게 설치 가능 리액트 앱을 만들 폴더 생성 터미널 실행 npx create-react-app ./ (현재 디렉터리) npx? Node.js를 통해 Node패키지 실행을 도와주는 도구. create-react-app 이란 npx 레지스트리에 있는 패키지를 react-todo-app폴더에서 실행해서 리액트를 설..

[Fast Campus , React] 2. 가상돔 Virtual Dom , 가상돔? 브라우저가 그려지는 원리 및 가상돔 React의 주요 특징 중 하나는 가상돔을 사용한다는 것. 왜 가상돔을 사용하는지 알기 위해 브라우저가 렌더링 하는 과정을 알아봐야 한다. - 돔 (DOM, Document Object Model, 문서객체) html, head, body같은 태그들을 javascript가 이용, 수정할 수 있는 객체 의미 - 가상돔. Virtual Dom 실제 DOM에서 처리하는 방식이 아닌, 가상돔과 메모리에서 미리 저장,처리하고 실제 DOM과 동기화하는 개념 웹 페이지 빌드 과정 (Critical Rendering Path, CRP) 웹 브라우저가 HTML 문서를 읽고 스타일을 입히고 뷰포트에 표시하는 과정 - 뷰포트 (viewport) 컴퓨터 그..

[Fast Campus , React] 1. React란? React란? 사용자 인터페이스 (UI)를 만들기 위한 Javascript 라이브러리 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용. Vue.js나 Angular.js와 많이 비교하게 된다 Angular, Vue는 프레임워크. React는 라이브러리 React 나무위키 링크 Framework vs Library 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다 라이브러리는 어떠한 특정 기능들을 모듈화 해놓은 것 React가 라이브러리인 이유는 전적으로 UI를 렌더링 하는데 관여하기 때문 화면을 바꾸는 라우팅은 react-router-dom 모듈을 사용 상태 관리를 위해선 redux, mobx 등 빌드를 위해선 webpack, npm 등 테스트를 위해서는 Jest, Mocha 등 ..

4. 데이터분석과 엑셀 : MATCH, INDEX, 날짜함수, 텍스트함수, 텍스트나누기, 중복항목 제거 MATCH 함수 내가 찾고 싶은 값이 한 행/열에서 몇 번째에 있는지를 숫자로 알려준다 INDEX 함수 특정 범위에서 행 번호와 열 번호로 원하는 데이터를 불러온다. MATCH & INDEX 함수 조합으로 사용 DAYS / DATEIF 함수 DATEIF에서 3번째 항목 D: 일수 / M : 월수 / Y : 연수 / YM : 올해의 월수 / MD : 이번달의 일수 * 만약 종료일을 기간에 포함시켜야 한다면? 기간을 구하는 수식에 +1을 한다 YEAR / MONTH / DAY : 연월일 데이터의 경우 각각 연/월/일만 추출해야 한다면 =YEAR(D3) > 2033 =MONTH(D3) > 11 =DAY(D3) > 8 FIND 함수 긴 텍스트에서 특정 단어나 문장이 시작되는 위치를 숫자로 출력 띄어쓰기까지 포함..

3. 데이터분석과 엑셀 : 데이터 전처리 , IF, VLOOKUP 데이터 전(前)처리 데이터의 분석 목적과 방법에 맞게 데이터를 가공 또는 처리하는 과정 데이터 및 변수 형태 변환 변수선정 결측치 및 이상치 처리 데이터 분류 (카테고리) 데이터 분리 및 결합 기타 데이터 가공 및 처리 데이터 분석 과정 중 가장 많은 시간과 비용이 필요한 과정 (60~80%) IF 함수와 중첩 부등호/등호 (>, IF 함수를 N번 중첩 사용하면 데이터가 N+1가지로 구분 값을 직접 넣을수도 있으나, 엑셀의 셀을 참조하는 방식으로 사용할 수 도 =IF(E5>=N5, M5, IF(E5>=N6, M6, M7)) 기준 연령에 맞춰서, 구분을 표시하도록 =IF(E5>=$N$5, $M$5, IF(E5>=$N$6, $M$6, $M$7)) 데이터 참조할 건 절대참조 (구분 & 기준연령) 인원수를 구할..

2. 데이터분석과 엑셀 : 탐색적 데이터 분석 (EDA) 탐색적 데이터 분석 (EDA, Exploratory Data Analysis) 기존 통계학이 정보 추출에서 가설 검정 등에 치우치다 보니, 자료 본연의 의미를 찾는데 어려움이 존재함. 이를 보완하고자 주어진 자료만 가지고도 충분한 정보를 찾을 수 있도록하는 여러 탐색적 자료 분석 방법. 내 입맛대로 수집되는 데이터는 1도 없다 데이터의 분포를 파악할 수 있다 분석에 필요한 데이터 전처리를 수행할 수 있다 데이터의 생김새를 알아야 올바른 분석을 할 수 있다 결측치, 이상치를 파악하고 처리할 수 있다 가장 적합한 분석 방법을 결정할 수 있다 - 결측: 계획된 실험 배치에서 어떤 사고로 이루어지지 못한 관측 기초 통계량 계산 * 합계=SUM(범위) * 중앙값=MEDIAN(범위). 자료를 크기 순서로 나열해 놓..

1. 데이터분석과 엑셀 : 데이터 분석 개념 , 엑셀의 참조 ※ 데이터 분석. Data Analysis 유용한 정보를 발굴하고 결론 내용을 알리며 의사결정을 지원하는 것을 목표로 데이터를 정리, 변환, 모델링하는 과정. 의사결정을 더 과학적으로 만들어주고 비즈니스를 더 효율적으로 운영할 수 있도록 도와주는 역할을 한다. ※ 데이터 분석의 개념과 과정 과거 데이터를 분석해서 현실 상황 반영. 단, 현실과 이상의 GAP을 고려해야 한다. 문제를 해결하고 개선할 수 있는 인사이트를 도출해야 한다. 데이터 수집 : 업무상황에서 발생하는 다양한 데이터 수집 데이터 전처리 : 분석목적 및 방법에 부합하도록 데이터의 내용, 형태 가공 데이터 모델링 : 결과도출을 위한 수식/함수/기능 적용. 의사결정나무, 랜덤포레스트, 인공신경망 검증 및 평가 : 개선효과계산. 과거데이터와 비..

이전 1 2 3 4 5 6 7 ··· 47 다음

티스토리툴바