전체 글
[TIL] 엘리스 SW 엔지니어 트랙 Day 078
[TIL] 엘리스 SW 엔지니어 트랙 Day 078
2022.02.21📖 오늘 배운 내용 - 2022.02.16 랭크 페이지 버그 수정 실제 api 주소로 변경 📝 Nginx란? Nginx는 인터넷 네트워크 위에서 HTTP 프로토콜을 이용해 클라이언트 언어(HTML, CSS, JavaScript, 이미지와 같은 정보)를 웹브라우저에게 전송하는 웹서버이다. 배포를 위해 가장 많이 사용되는 웹 서버는 Apache이지만 Nginx 같은 경우 매우 가볍고 빠르며 웹 개발에 고정된 프로세스를 생성하고 비동기 이벤트를 기반으로 여러 접속 요청을 효율적으로 처리한다. 💡 오늘 깨달은 것 /src/utils/xxx.js 처럼 src에 utils 폴더를 만들면 함수를 사용하는 폴더뿐만 아니라 다른 폴더에서도 쉽게 접근이 가능해서 접근성을 높일 수 있다. git checkout Sprint..
[TIL] 엘리스 SW 엔지니어 트랙 Day 077
[TIL] 엘리스 SW 엔지니어 트랙 Day 077
2022.02.20📖 오늘 배운 내용 - 2022.02.15 랭크 페이지 작성 그래프 페이지 불필요한 코드 제거 💡 오늘 깨달은 것 오늘은 무난하게 지나갔던 하루이다. 코드를 다시 보니 이걸 왜 작성했지?라는 코드들을 삭제했다. 그 당시에는 필요에 의해 작성한 거 같은데 다시 보니 없어도 될 코드였다. 이래서 리팩터링을 진행하는구나! 이렇게 불필요한 코드를 삭제할 뿐만 아니라 주요 로직을 더 효율적으로 개선한다거나 코드를 읽기 쉽게 수정하는 리팩터링 작업을 반복하면 나중에는 처음부터 클린코드로 작성할 수 있을까?라는 생각을 해봤다. 이번 주가 프로젝트와 교육의 마지막 주라는 게 안 믿긴다. 후회하지 않도록 이번 한 주도 화이팅이다.
[TIL] 엘리스 SW 엔지니어 트랙 Day 076
[TIL] 엘리스 SW 엔지니어 트랙 Day 076
2022.02.17📖 오늘 배운 내용 - 2022.02.12 그래프 페이지 mock 데이터 연결 json 서버 연결해서 axios 사용 리액트 라이프 사이클 타입스크립트의 필요성 📝 axios 결정 이유 axios는 json을 자동으로 적용해서 response 객체를 바로 반환하지만 fetch는 promise자체를 반환해서 json으로 변환을 해야 한다는 차이점이 있다. axios는 data를 바로 전달하지만 fetch는 body로 json.stringify()를 통해서 서버가 이해할 수 있도록 문자열 파싱을 해야 한다. 📝 리액트 라이프 사이클 공부 추후 추가 📝 로딩 창 :: suspense 사용 import React, { useCallback, useEffect, useState, Suspense } from "r..
[React] Do not access Object.prototype method 'hasOwnProperty' from target object. 에러 해결 방법
[React] Do not access Object.prototype method 'hasOwnProperty' from target object. 에러 해결 방법
2022.02.17🎯 Do not access Object.prototype method 'hasOwnProperty' from target object. 에러 해결 방법 hasOwnProperty를 사용하려고 했는데 eslint 오류가 발생했다. 📝 해결 방법 (Object.prototype.hasOwnProperty.call) // error var hasBarProperty = foo.hasOwnProperty("bar"); var isPrototypeOfBar = foo.isPrototypeOf(bar); var barIsEnumerable = foo.propertyIsEnumerable("bar"); // correct var hasBarProperty = Object.prototype.hasOwnProperty..
[TIL] 엘리스 SW 엔지니어 트랙 Day 075
[TIL] 엘리스 SW 엔지니어 트랙 Day 075
2022.02.15📖 오늘 배운 내용 - 2022.02.11 esLint 문제 해결 PropTypes 적용 📝 esLint 문제 팀원 중 한 분이 eslint가 동작 안 되는 거 같다고 하셔서 확인해보니, 나를 포함해 다른 팀원분들도 동작하고 있지 않는다. eslint-plugin-prettier 패키지를 설치 안 해서 생긴 문제였다. 📕 웹팩 alias 설정으로 인한 eslint 경고 문제 해결 npm install -D eslint-import-resolver-webpack eslint-import-resolver-webpack Resolve paths to dependencies, given a webpack.config.js. Plugin for eslint-plugin-import.. Latest version:..
[TIL] 엘리스 SW 엔지니어 트랙 Day 074
[TIL] 엘리스 SW 엔지니어 트랙 Day 074
2022.02.15📖 오늘 배운 내용 - 2022.02.10 그래프 페이지 최적화 작업 suspense 공부 📝 최적화 작업 :: React.memo 파이 차트는 달력에 상관없이 모든 기간의 모든 레포의 언어 사용 비율을 보여주는 컴포넌트라서 변경될 필요가 없다. import React from "react"; import { PieChart, Pie, Sector, Cell } from "recharts"; import githubLangColors from "./github-lang-colors.json"; import * as PieCharts from "./style"; PieChartComponent.defaultProps = { codeRatioArray: [ { name: "JavaScript", value:..
[React] 리액트 React.lazy와 Suspense란?
[React] 리액트 React.lazy와 Suspense란?
2022.02.15🎯 리액트 React.lazy와 Suspense란? 📝 React.lazy const SomeComponent = React.lazy(() => import('./SomeComponent')); const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( ); } React.lazy()를 사용하면 동적으로 불러오는 컴포넌트를 정의할 수 있다. 번들의 크기를 줄이고, 초기 렌더링에서 사용되지 않는 컴포넌트를 불러오는 작업을 지연시킬 수 있다. React.lazy로 import 해준 컴포넌트는 반드시 Suspense의 자식으로 들어가야 한다. 📝 Suspense 특정 컴포넌트에서 사용되..
[React] 리액트 PropTypes 사용하기
[React] 리액트 PropTypes 사용하기
2022.02.15🎯 리액트 PropTypes 사용하기 컴포넌트의 props에 타입 검사를 하려면 propTypes을 사용해야 한다. 📝 PropTypes 설치 및 import npm i prop-types import PropTypes from "prop-types"; import PropTypes from 'prop-types'; const Greeting = () => { return ( h1>Hello, {this.props.name} ); } } Greeting.propTypes = { name: PropTypes.string }; prop에 유효하지 않은 값이 전달되었을 때, 경고문이 뜬다. 📝 기본 타입 optionalArray: PropTypes.array, optionalBool: PropTypes.boo..
[TIL] 엘리스 SW 엔지니어 트랙 Day 073
[TIL] 엘리스 SW 엔지니어 트랙 Day 073
2022.02.10📖 오늘 배운 내용 - 2022.02.09 리액트 조건부 렌더링 Recharts 사용법 svg 파일 줄이기 📝 리액트 조건부 렌더링 [React] 리액트 조건부 렌더링 방법 🎯 리액트 조건부 렌더링 import React from "react"; import * as FarmPictures from "./style"; export function FarmPicture({ ratio }) { const Render = () => { if (ratio >= 20) { return ; } else if (ra.. lakelouise.tistory.com 📝 리액트 차트 라이브러리 :: Recharts 사용법 [React] 리액트 차트 라이브러리 :: Recharts 사용법 🎯 Recharts 사용하기 프로젝트..
[React] 리액트 차트 라이브러리 :: Recharts 사용법
[React] 리액트 차트 라이브러리 :: Recharts 사용법
2022.02.10🎯 Recharts 사용하기 프로젝트에서 데이터 시각화하는 부분을 마크업 하게 되었다. 아래 링크에서 사람들이 많이 사용하는 차트 라이브러리 리스트를 보면서 장/단점을 검색한 후 심플하고 사용법이 간단한 Recharts를 사용하기로 결정했다. 10 Best React Chart Libraries in 2022 | Openbase A comparison of the 10 Best React Chart Libraries in 2022: react-flexmonster, react-horizontal-bar-chart, frappe-gantt-react, zingchart-react, react-bpmn and more openbase.com Recharts 📝 Recharts 설치 npm install re..
[React] 리액트 조건부 렌더링 방법
[React] 리액트 조건부 렌더링 방법
2022.02.10🎯 리액트 조건부 렌더링 import React from "react"; import * as FarmPictures from "./style"; export function FarmPicture({ ratio }) { const Render = () => { if (ratio >= 20) { return ; } else if (ratio >= 40) { return ( ); } else if (ratio >= 60) { return ( ); } ... ... }; return Render(); } 이런 식으로 조건에 따라 렌더링을 달리해주는 코드를 작성하고 있었다. 저렇게 작성하면 마지막 조건에서는 Container안에 10개의 아이콘들이 들어가게 된다. 구현은 하겠지만 중복되는 코드를 줄이고 싶었다...
[TIL] 엘리스 SW 엔지니어 트랙 Day 072
[TIL] 엘리스 SW 엔지니어 트랙 Day 072
2022.02.10📖 오늘 배운 내용 - 2022.02.08 Recharts를 이용해서 그래프 페이지 작성 useLocation() 웹팩 절대 경로 설정 :: alias 📝 헤더 부분 다르게 수정 import React from "react"; import Refresh from "../../assets/icon/header/refresh.svg"; import Seeds from "../../assets/icon/header/seeds.svg"; import { Link, useLocation, useNavigate } from "react-router-dom"; import { HeaderWrapper } from "./style"; import BackButton from "../../assets/icon/heade..