분류 전체보기787

• 

  [React]csv 파일로 다운로드 React에서 csv파일로 추출 가능한 Package를 소개합니다. 다운로드 수가 많은 Package부터 작성합니다. react-csv data를 csv파일로 생성합니다. data는 array의 array, object의 array 또는 문자열이 될 수 있습니다. 공식 사이트 : https://www.npmjs.com/package/react-csv 설치 npm install react-csv --save; Import import { CSVLink, CSVDownload } from "react-csv"; 코드 ※ CodePen에서 react-csv Package가 정상적으로 설치되지 않아서 코드 블록으로 작성하였습니다. headers = [ { label: "First Name", key: "firs.. React/유용한 NPM 2021. 7. 13.

• 

  [React]현재 브라우저 정보 확인하기 React에서 Browser 정보를 확인할 수 있는 Package를 소개합니다. React-browser-detection 사용 브라우저를 체크 하기 위한 용도는 아니며, 현재 실행되고 있는 브라우저에 따라서 값을 return 합니다. IE 버전별로 처리해야 하는 경우에는 사용 불가능합니다. 공식 사이트 : https://www.npmjs.com/package/react-browser-detection 설치 npm install --save react-browser-detection Import import BrowserDetection from 'react-browser-detection'; 코드 See the Pen React-browser-detection_EX by JaeSung2386 (@jae.. React/유용한 NPM 2021. 7. 13.

• 

  [JavaScript]Warning : Excepted to return a value at the end of function.(array-callback-return) 경고 『 Expected to return a value at the end of function. (array-callback-return) 』 경고 원인 if 문에서 val === 'A'인 경우에만 return을 하여 경고가 발생합니다. find() 메소드의 callback() 함수에서 if 문에 대응되는 else 문이 존재하지 않아서 경고를 발생합니다. const arrTest = ['A', 'B', 'C']; const testdata = arrTest.find(function (val) { if (val === 'A') { return true; } }); console.log('result : ' + testdata); // result : A 경고 해결 else 문을 추가하면, 경고가 사라집.. JavaScript/JavaScript 문법 2021. 7. 12.

• 

  [React]table Element를 엑셀 파일로 다운로드 React에서 table Element를 엑셀 파일로 다운로드하는 방법에 대해 설명합니다. react-html-table-to-excel 사용 공식 사이트 : https://www.npmjs.com/package/react-html-table-to-excel 특징 HTML ...을 .xls 형식의 Excel 파일로 다운로드 IE 11 지원 설치 npm install --save react-html-table-to-excel Import import ReactHTMLTableToExcel from 'react-html-table-to-excel'; 코드 See the Pen TableToExcel by JaeSung2386 (@jaesung2386) on CodePen. 다운로드한 엑셀 파일 react-h.. React/유용한 NPM 2021. 7. 12.

• 

  [React]Key 이해하기 React에서 배열 요소를 렌더링하는 경우 map()을 사용합니다. 아래 예제는 header라는 array의 object 수만큼 ...를 렌더링하는 예제입니다. See the Pen by JaeSung2386 (@jaesung2386) on CodePen. 위 코드를 실행하면, 콘솔 창에서 아래 사진과 같은 경고문을 볼 수 있습니다. ※ CodePen에서는 에러 및 오류를 무시하는 경우가 있으므로 VSCode나 CodeSandBox와 같은 다른 툴에서 테스트하시면 됩니다. 「 list 내부 각 child는 고유한 "key" prop를 가져야 한다. 」 배열 요소를 map()을 사용하여 렌더링 하는 경우에는 key라는 prop가 필요합니다. key란 무엇인가? 재조정(Reconciliation)이 나타난 .. React/React 문법 2021. 7. 11.

• 

  [React]이벤트 핸들러 바인딩(Event Handler Binding) 이벤트 핸들러 바인딩이란? 컴포넌트(Component)와 이벤트 함수를 연결(bind)하는 것입니다. 바인딩하지 않아도 이벤트 함수는 실행이 되지만, 누가(어떤 컴포넌트가) 호출을 했는지 알 수 없습니다. 바인딩하지 않았는데, 이벤트 함수에서 this.state 또는 this.props를 사용할 경우 undefined로 처리됩니다. 바인딩하지 않고 이벤트 함수에서 this를 사용하는 경우 class TestComponent extends React.Component { constructor(props) { super(props); this.state = { applyText: "빈 값" }; } NotBindingBtnClick() { console.log(this.state.applyText); } r.. React/React 문법 2021. 7. 7.

• 

  [ORACLE]ORA-00970: GROUP BY 표현식이 아닙니다 토드, SQL Developer, DBeaver와 같은 SQL 개발 도구에서는 쿼리가 정상적으로 실행이 되는데, mybatis 또는 ibatis에서 「 ORA-00970: GROUP BY 표현식이 아닙니다 」 라는 에러가 발생하는 경우가 있습니다. 에러 원인 GROUP BY 절에 파라메타가 있을 경우 SELECT COLUMN1 , #{PARAM} FROM TABLE GROUP COLUMN1, #{PARAM} 에러 해결 방법 #을 $로 변경($로 변경시 보안상 문제 있으므로 추천하는 방안은 아님) InLine View 적용 SELECT COLUMN1 , COLUMN2 FROM ( SELECT COLUMN1 , #{PARAM} AS COLUMN2 FROM TABLE ) GROUP COLUMN1, COLUMN2 DataBase/Oracle 2021. 7. 7.

• 

  CodePen에서 React 개발환경 구축하기 아주 간단한 React 코드를 작성하는 경우 CodePen에서 작업이 가능합니다. CodePen 간단한 사용방법은 여기서 확인 부탁드립니다. 예제 코드 추가 아래 코드를 복사해서 HTML과 JS에 추가합니다. HTML JS const element = ( Hello, react!!!!! ); ReactDOM.render(element, document.getElementById("root")); CodePen에서 React 설정이 되지 않아 에러가 발생합니다. 아래 순서대로 CodePen에서 React 설정을 합니다. CodePen에서 React 설정 1. Settings 선택 2. JavaScript Preprocessor에서 Babel 선택 Babel 컴파일러는 JavaScript 최신 문법이 모든 .. 기타 2021. 7. 4.

• 

  2021년 6월 블로그 결산 및 7월 목표 블로그 개설은 2020년 5월이지만, 본격적으로 운영을 한 시기는 2021년 4월입니다. 2021년 4월 주로 챙겨보는 유튜버 김작가TV에서 리뷰요정리남님이 출연한 영상을 계기로 약 3개월 블로그를 운영하고 있습니다. 6월 목표 아직까지는 수익형 블로그가 목표가 아니므로 포스팅만 하였습니다. 6월 목표는 하루 10명 이상 방문, 30포스팅을 목표로 하였습니다. 6월 수익 애드 핏과 애드센스를 합산해도 1000원이 되지 않습니다! 블로그 수익 구조에 대해서는 150개의 포스팅을 달성하고 알아보려고 합니다. 6월 방문자 수 6월 방문수가 324명입니다. 평균적으로 10명 이상 방문했으니 하루 10명 이상 방문이라는 목표는 달성하였습니다! 주말에는 방문자가 수가 급격히 줄어드는 것을 확인할 수 있습니다. 주말.. 티스토리/블로그 결산 2021. 7. 4.

• 

  CodeSandBox 사용 방법 CodeSandBox CodeSandBox는 온라인 코드 에디터입니다. 이클립스 또는 VSCode 같은 개발 도구를 설치하지 않아도 온라인에서 웹 개발 및 간단한 코드를 작성할 수 있습니다. 단, FrontEnd 개발 및 테스트 한정입니다. 링크 : https://codesandbox.io/dashboard CodeSandbox CodeSandbox is an online editor tailored for web applications. codesandbox.io CodeSandBox에서 지원하는 기능 및 특징 GitHub 연동 심플한 코드 관리 VSCode와 비슷한 UI와 편리한 사용방법 작업한 코드 파일로 다운로드 가능 유료 버전 구매했을 경우 코드 비공개 가능함 CodeSandBox 간단한 사용 .. 개발자 도구/CodeSandbox 2021. 7. 2.

• 

  [React]props 객체의 타입 검사 PropTypes 자바스크립트는 타입 검사에 유연하게 처리됩니다. Java에서 String str = "1"; 은 문자열이지만, 자바스크립트에서 var str = 1; 은 숫자가 될 수도 있고 문자가 될 수도 있습니다. React에서는 props 객체의 타입과 필수 여부 검사를 지원하는 PropTypes Module을 지원합니다. PropType Module 설치 npm install --save prop-types PropTypes Module Import import PropTypes from 'prop-types'; PropTypes Module 사용 코드 const node = document.getElementById("root"); const Search = (props) => { return ( ); } //.. React/React 문법 2021. 6. 29.

• 

  [MsSQL]임시 테이블의 종류 MsSQL에서 사용 가능한 임시 테이블(Temporary Tables) 종류에 대해 포스팅합니다. 임시 테이블(Temporary Tables)이란? 임시 테이블은 말 그대로 임시로 사용되는 테이블이며, SELECT, UPDATE, INSERT, DELETE와 JOIN 기능을 사용할 수 있습니다. 임시 테이블은 종류에 따라서 제약조건과 삭제되는 경우가 다릅니다. 대표적인 예시로 테이블 변수는 기본 키 설정이 가능하지만, 로컬 임시 테이블과 전역 임시 테이블은 기본 키 설정이 불가능합니다. 그리고 대부분의 임시 테이블은 연결된 세션이 종료되면 삭제되지만, tempdb에서 직접 테이블을 생성했을 경우에는 서버를 재시작해야 삭제됩니다. MsSQL에서 임시 테이블 종류 1. 테이블 변수(Table variable.. DataBase/MsSQL 2021. 6. 27.