IT V-log

Version React 18.2.0 , Typescript 4.9.5 , Sass 7.0.1 사용법 import React from 'react'; import { useState } from 'react'; const Pagination = () => { // 페이지당 보여줄 게시물 수 const MaximumContentItems = 10; // DB에서 가져오는 게시물 data const [posts, setPosts] = useState(DummyRankingData); // 페이지 초기설정 const [page, setPage] = useState(1); // /** * 게시물의 위치 구하는 공식 = 현재 페이지 번호 * 페이지당 보여줄 게시물 수 * 현재 페이지 번호를 기준으로 표시해줘야할 ..

Version React 18.2.0 , Typescript 4.9.5 , Chart.js 4.4.0 설치 npm install react-chartjs-2 chart.js yarn add react-chartjs-2 chart.js 사용법 import React from 'react'; import {Chart, ArcElement, Tooltip, Legend} from 'chart.js' import { Doughnut } from 'react-chartjs-2'; // chart.js // https://www.chartjs.org/docs/latest/configuration/legend.html const DoughnutChart = () => { // chart data 1 const cha..

AOS Install npm install --save aos@next 또는 yarn add aos@next AOS 타입스크립트 Install npm i --save-dev @types/aos 또는 yarn add --save-dev @types/aos 타입스크립트는 AOS, types 둘다 설치 해야 됩니다. 사용 할 컴포넌트에 AOS import import React, { useEffect } from 'react'; import 'aos/dist/aos.css'; import './App.css'; && JSX useEffect(() => { AOS.init(); }, []) 남은 사용법은 AOS 공식 페이지에서 확인 후 사용하시면 됩니다! https://michalsnik.github.io/ao..

전 회사 개발자 분과 이야기를 하다 괜찮은 프로젝트가 떠올라 새로운 프로젝트를 시작하게 되었고 가장 먼저 앱으로 출시한 뒤 웹으로도 개발을 하자는 이야기가 나오게 되었습니다. 현재 인원은 디자이너, 기획자, 백엔드 개발자, 프론트 개발자로 구성이 되어 있으며, 프로젝트를 구현 하면서 필요하다면 그때마다 사람을 모집할 계획입니다. 주요 서비스와 프로젝트의 기능 부가서비스 및 비즈니스 모델은 어느 정도 준비가 되어있는 상태이며, 완성이 되어가는 과정들과 결과들에 관한 내용들을 작성할 예정입니다! Expo CLI가 아닌 React Native CLI를 선택한 이유 각각의 장단점이 있지만 가장 큰 이유는 Native CLI Expo보다 자유도가 높으며, 모듈을 직접 제작할 수 있기 때문에 단순 프로젝트가 아닌 ..

MySQL Workbench를 통해 스키마를 생성하는 중 생긴 오류 해결 방법: amg user의 권한을 부여해주면 됩니다. 1. 명령프롬프트 관리자 권한으로 실행 2. mysql -u root -p 3. root 패스워드 입력 4. (mysql 스키마 선택) use mysql; 5. host와 user 확인 select user, host from user; 6. 사용자 권한 확인 show grants for amg; 권한이 없음을 확인 7. 권한 부여 # amg 유저에게 모든 권한 부여 grant all privileges on *.* to amg; 8. 변경된 내용 메모리에 반영 flush privileges; 사용자 추가 mysql> create user 사용자ID; # 사용자(user)를 추가하..

ANSI SQL 이란 Oracle, MySQL, PostgreSQL 등 다양한 DBMS들이 있다보니 미국 표준협회에서 SQL문의 표준이 필요하다 판단하여 SQL문을 정립시켜 놓은 것 입니다. ANSI SQL의 특징 - DBMS의 종류에 제약받지 않고 사용이 가능 합니다. - WHERE절과 JOIN절의 분리가 잘 되어있어 가독성이 좋습니다. --ANSI쿼리 SELECT I.NAME, I.GRADE, G.GNAME FROM SEE_INFO I INNER JOIN SEE_GRADE G ON I.GRADE = G.GRADE; --오라클쿼리 SELECT I.NAME, I.GRADE, G.GNAME FROM SEE_INFO I, SEE_GRADE G WHERE I.GRADE = G.GRADE; 오라클 쿼리에서는 W..

설치 npm install react-csv --save; yarn add react-csv 사용법 import { CSVLink, CSVDownload } from "react-csv"; const csvData = [ ["firstname", "lastname", "email"], ["Ahmed", "Tomi", "ah@smthing.co.com"], ["Raed", "Labes", "rl@smthing.co.com"], ["Yezzi", "Min l3b", "ymin@cocococo.com"] ]; Download me; // or ; CSVLink는 엑셀 파일을 다운로드 할 수 있는 링크 입니다. 해당 링크를 클릭했을 때에만 csv 파일을 다운받을 수 있으며, CSVLink 대신 button 태그..

얼마전 아는 지인이 영어학원 사이트 오류와 몇 가지 기능을 구현 해달라는 부탁을 받았습니다. 하지만 제 실력으로 다른 사람이 구현한 코드를 해석하고 문제를 해결해줄 정도는 안된다고 생각하여 거절 하였지만 계속되는 부탁에 결국 오류정도는 봐보자는 생각을 하게 되어 해당 사이트와 소스코드를 보았습니다. 해당 사이트는 프론트는 리액트로 백엔드는 파이썬으로 구현이 된 영어학원의 학생관리 및 실제 시험을 볼 수 있는 사이트였고 readme가 작성되어 있지 않아 readme가 작성 되어있지 않아 인수인계 관련해서 물어보았는데 현재 프론트 개발자와 연락이 안 되는 상태라는 이야기를 들었습니다.. 결국 맨땅에 헤딩 하면서 해결하는 방법밖에 없다고 생각 했습니다. 더군다나 현 사이트에서 사용하는 Netlify와 Ant-..

리액트가 실행이 되면 JSX 파일 및 함수가 전부 읽혀지고 화면에 렌더링 해주는 방식이라 렌더링 된 후에 데이터가 변경되거나 화면이 변경되면 리액트는 그걸 인지하지 못 합니다. 그래서 리액트에 다시 알려줘야 하는데 그러기 위해 사용하는 것이 state 입니다. State 사용법 const [name(현재상태 값), setName(값을 변경해주는 함수)] = useState(props.name(초기값을 할당하는 곳)); state 값 변경하는 방법 위에서 설명했듯이 state 값은 setState 함수를 이용하여야 합니다. setState 함수를 이용하여 값을 변경해야지만 react가 state 값이 변경되었다는 것을 인식하여 화면을 렌더링 하기 때문 입니다. state 변경 시 값 주의점 예를들어 set..

컴포넌트가 렌더링이 될때마다 수행하게 되는 리액트 훅 으로 Side-effect를 처리하기 위해 사용합니다. Side-Effect(부작용) 란? 기대했던 효과 외에 나타나는 다른 작용을 말하며, 부작용은 흔히 유해하다고 생각하는 분들이 많지만 항상 나쁜 방향으로만 일어나는 것은 아닙니다. 그 예로 고혈압 치료제 성분 중 하나인 미녹시딜이 현재는 탈모치료에도 사용되는 것 처럼 말이죠 하지만 React에서 side-effect는 조금 다른 의미를 가지고 있으며, 부정적으로 생각하고 있습니다. React에서 side-effect란 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 Side-Effect(부작용)라고 합니다. 예를들면 함수의 전역변수 값을 변경하거나 혹은 함수 외부에 존..