본문 바로가기

전체 글143

[Javascript] 자바스크립트 Dictionary 사용하기 Javascrpt에서 객체를 사용하다보면 키,값으로 된 dict를 자주 사용하게 됩니다. 하지만 MDN이 제공하고 있는 문서에 보면 dict이나 Dictionary는 찾아 볼 수 없는데 딕셔너리라는 표현은 파이썬에서 사용하는 용어이기 때문입니다. MDN Document에서 Dicionary에 관한 부분을 보고 싶다면 Object를 찾아야해요. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects 표준 내장 객체 - JavaScript | MDN 이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다. developer.mozilla.org Object든 Dictionary든 사용하다보면 A.. 2022. 3. 23.
[React] Chart 라이브러리 비교하기 Reacts에서 트리맵 차트를 사용하기 위해서 트리맵 차트를 제공하는 여러 가지 라이브러리를 찾아보고 데이터를 쉽게 다루면서 쓸 수 있는 라이브러리 세 가지를 비교하여 봤습니다. 1. React Google Chart 2. React Apex Chart 3. high Charts React Official 각 라이브러리마다 Column, Line, Treemap 차트를 비교해보겠습니다. npm trends에서 각각의 라이브러리가 공식적으로 발표한 React 라이브러리 다운로드 비교하여 보았을때 high chart가 많이 다운 받은 것으로 보여집니다. 1. React Google Chart [ 1 ] 설치 yarn add react-google-charts # or npm i react-google-cha.. 2022. 3. 21.
3년만 돌아온 V리그 올스타전 안녕하세요. YERIEL입니다. 기쁜 소식과 함께 배구 리뷰 블로그를 다시 시작 해보려고 합니다. 볼거리 많고 놀거리 많기로 소문난 V리그 올스타전이 3년만에 돌아왔습니다. 도드람 2021 ~ 2022 V-리그 올스타전은 2022년 1월 23일 일요일에 광주 페퍼스타디움에서 진행됩니다. 팀 구성은 지난 시즌을 기준으로 1,3,5위팀이 K-스타, 2,4,6,7위팀이 V-스타팀으로 나뉘게됩니다. K-스타 팀에은 대한항공, OK금융그룹, 한국전력, GS칼텍스, IBK기업은행, KGC인삼공사가 속해 있고 V-스타는 우리카드, KB손해보험, 현대캐피탈, 삼성화재, 흥국생명, 한국도로공사, 현대건설, 페퍼저축은행이 속하면서 V-스타 팀이 K-스타팀보다 두 팀이 더 많습니다. 올스타 투표는 2021.12.10 ~ 2.. 2022. 1. 11.
[Javascript] 일주일 날짜 구하기 Javascript의 Date와 Date.parase를 이용하여 오늘 기준으로 이전, 이후 일주일 날짜 구하기 입니다. getMonth, getDay 메서드를 이용해서 1씩 더하거나 빼는 로직는 생각보다 고려해야할 부분이 많아서 오늘 날짜를 구한 후 Millisecond로 변환 후 하루씩 빼서 다시 날짜 형태로 바꿔주는 로직으로 작성했습니다. var date = new Date().toLocaleDateString() var today = Date.parse(date) var result = [] result.push(date) for (var i=0; i 2021. 12. 3.
[React] Error : A component is changing an uncontrolled input of type text to be controlled index.js:1451 Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components 구성 요소가 제어할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다. 입력 요소는 제어되지 않음에서 제어됨으로.. 2021. 10. 12.
[React] Error : Element type is invalid: expected a string Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. React로 개발하다가 오랜만에 본 에러 같은데... 뭔지 모르겠는 그런 에러.... 프로젝트 코드를 작성할 때는 VSCode 스니펫을 이용해서 기본 작성이 된 상태에서 하다보니 거의 만나기 어려운 에러인데 간단한 테스트를 할 때 codesand.. 2021. 10. 7.
[Javascript] console log, group, table Javascript를 그나마 잘한다고 생각했는데 아직도 모르는것 투성이 yeriel입니다. 이번에 console 종류 중에 group과 table을 발견하고 얼마나 신기했는지..... 그래서 이번 포스팅은 console.log, console.group, console.table에 대해서 다뤄볼까합니다. console.log Web Console에 메시지를 출력합니다. console.log('log') log에 스타일도 추가할 수 있습니다. console.group console.group(label) Web Console log 에 새로운 인라인 그룹을 만듭니다. console.log('yeriel') console.group() console.log('r-0o0-j.tistory.com') conso.. 2021. 9. 28.
[ERROR] Do not use String as a constructor Date를 String으로 변환 시키는 과정에서 발생한 에러이다. var date = new Date(); var month = new String(date.getMonth()); 일단 코드를 짜면서 javascript는 따로 타입 지정이 없다는 사실을 간과하였다.(바보) 단순하게 String만 씌워주면 되는 상황에서 new는 왜 쓴걸까?? Test Code Javascript int to String, Javascript date to String var date = new Date(); typeof date //"object" var month = date.getMonth(); month //7 typeof month //"number" var test = new String(month) test /.. 2021. 8. 20.
React Quill Image Resize Code 2021.04.22 - [[YERIEL] 개발일기/React] - React-Quill Image resize React-Quill Image resize React project 중 Text Editor를 추가하는데 한글 지원 되는 Editor가 React-quill 밖에 없어서 React-quill 적용 중 React Quill로 이미지를 리사이징하기 위해 모듈을 추가하는데 이것때문에 딥빡 할 줄이야...... r-0o0-j.tistory.com 이미 React Quill Image Resize에 대해서 블로그를 썼지만 전체 코드 공유에 대해서 댓글로 요청이 많아서 2탄으로 code에 대한 블로그를 작성하려고 합니다. 제 code는 react 함수형 컴포넌트로 되어 있고 Container - Pres.. 2021. 8. 19.
[React] Html2Canvas를 이용하여 화면 캡쳐하기 a tag와 Html2Canvas 라이브러리를 사용해서 react 화면 캡쳐 기능 만들기 1. a Tag https://developer.mozilla.org/ko/docs/Web/HTML/Element/a - HTML: Hypertext Markup Language | MDN HTML 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. developer.mozilla.org a tag의 href와 download를 이용해서 image를 다운 받을 수 있습니다. 2. Html2Canvas https://html2canvas.hertzen.com/ html2canvas - Screenshots .. 2021. 7. 20.
[React] 페이지 이동시 scroll 복귀 history.push를 통해서 page를 이동하는 과정에서 scroll이 아래에 있는 경우 페이지 이동 할 때 그대로 유지가 되는 문제를 발견 어떻게 하면 좋을까 고민하다가 useEffect를 사용해서 component 렌더링시 스크롤을 위로 복귀 시키는 코드 추가 import React, {useEffect} from 'react'; const ScrollOn = ()=>{ useEffect(()=>{ document.getElementById('scroll-container').scrollTop=0; },[]) return ( scroll on ) } id가 scroll-container인 div는 scroll이 생기는 div이고 이 div를 찾아 스크롤 위치를 0으로 지정 해주면 간단히 끝 2021. 5. 20.
[C언어] 베이스볼게임 만들기 해당 글의 코드는 제가 학교 과제를 위해 만들었고 꽤 잘 만들었다고 생각해서 작성한 블로그입니다. 과제 시즌이 되었는지 이런 댓글이 남겨졌더라구요... 이 코드를 만든지 벌써 1년이나 지났지만 이 과제 하기 위해서 저도 꽤 많은 레퍼런스도 찾아보고 시간도 투자한 기억이 나고 꽤 많은 예외처리까지 잘한 코드라고 생각해서 자랑스럽게 블로그에 회고록을 남긴건데 연달아 댓글이 저렇게 달려버리니 속상하네요... 이 블로그 작성하면서 또 다른 이슈를 발견 했고 고쳐서 수정 할 수 있도록 하겠다고 물론 제가 글을 남겼지만 당연하듯 코드 수정됬냐고 물어보는 질문은 물론 그런 의도는 아니였을 수도 있지만 속상해서... ㅠㅠ 당분간 코드는 내려놓도록 하겠습니다. 이 코드를 복사해서 실행해보고 정말 이슈가 있는지 테스트를 .. 2021. 5. 13.
728x90
반응형

티스토리툴바