프로그래밍/Today I Learned
[TIL] 엘리스 SW 엔지니어 트랙 Day 081 - The End
[TIL] 엘리스 SW 엔지니어 트랙 Day 081 - The End
2022.02.22📖 오늘 배운 내용 - 2022.02.19 파이 차트 퍼센트 계산 로직 수정 페이지에서 발생하는 버그 및 css를 전체적으로 수정 forEach로 코드 개선 📝 파이 차트 퍼센트 계산 로직 수정 🛠 기존 로직 const denominator = reposLanguage.length; for (let i = 0; i b.value - a.value); codeRatioArray..
[TIL] 엘리스 SW 엔지니어 트랙 Day 080
[TIL] 엘리스 SW 엔지니어 트랙 Day 080
2022.02.22📖 오늘 배운 내용 - 2022.02.18 그래프 페이지, 랭킹 페이지 버그 및 css 수정 랭킹 페이지 스켈레톤 ui 적용 📝 스켈레톤 ui 적용 이렇게 초기 로드 시 ui가 깨지는 현상을 발생했다. 저 부분을 스피너를 이용해 로딩 중이라는 것을 보여주려고 했지만 ui측면에서는 스피너보다 스켈레톤 ui가 사용자 측면에서 적합하다고 생각해서 도입하기로 결정했다. 직접 만들 수 있겠지만 시간이 부족해서 react-content-loader를 설치해서 사용하기로 결정했다. npm i react-content-loader https://github.com/danilowoz/react-content-loader React Skeleton - Create Content Loader 위 링크에 들어가면 사용법이 나..
[TIL] 엘리스 SW 엔지니어 트랙 Day 079
[TIL] 엘리스 SW 엔지니어 트랙 Day 079
2022.02.22📖 오늘 배운 내용 - 2022.02.17 그래프 페이지 실제 api 연결 후 버그 수정 연간 그래프 코드 삭제 네브바 반응형 작업 그래프 페이지 반응형 작업 📝 실제 api 주소와 mock api 주소가 다를 때 처리 방법 🛠 webpack.config.js plugins: [ ... ... new webpack.DefinePlugin({ "process.env": { MODE: JSON.stringify("development"), // MODE: JSON.stringify("production"), SERVER_URL: JSON.stringify("http://localhost:8888"), }, }), ], 🛠 src/utils/api.js export const commitsTotalPerMon..
[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..
[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:..
[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 사용하기 프로젝트..
[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..
[TIL] 엘리스 SW 엔지니어 트랙 Day 071
[TIL] 엘리스 SW 엔지니어 트랙 Day 071
2022.02.08📖 오늘 배운 내용 - 2022.01.29 폴더구조 결정 웹팩, 바벨 설정 공부 초기 CSS 세팅하기 (GlobalStyles, styled-reset, ThemeProvider) 📝 폴더구조 ├─public │ index.html │ ├─src │ │ App.js │ │ App.test.js │ │ index.js │ │ │ ├─assets │ │ │ ├─components │ │ └─Name │ │ idnex.js │ │ style.js │ │ │ ├─pages │ │ ├─page1 │ │ │ index.js │ │ │ style.js │ │ ├─page2 │ │ │ index.js │ │ │ style.js │ │ │ │ │ └─page3 │ │ index.js │ │ style.js │ │ │ └..
[TIL] 엘리스 SW 엔지니어 트랙 Day 070
[TIL] 엘리스 SW 엔지니어 트랙 Day 070
2022.02.08📖 오늘 배운 내용 - 2022.01.28 피그마 작업 CRA 없이 리액트 보일러 플레이트 구성 연습 프론트엔드 오피스아워 💡 오늘 깨달은 것 오피스아워 때 api를 호출할 때의 성능 문제 해결방법으로 리액트 쿼리를 사용할 것을 추천해주셨다. 모바일 화면에서 창을 키워 데스크톱 화면으로 넘어가면서 모든 기능이 한 화면으로 들어간다면 라우터 부분에서 문제가 생길 수 있다는 말씀을 듣고 앱, 태블릿 사이즈만 구현하기로 결정했다. 타입스크립트 공부하면서 프로젝트에 도입하는 것을 추천하지 않는다. 제한된 시간 안에 플젝하기도 바쁜데 공부하는 것은... 시간이 부족하다..! 또는 일부만 TS를 도입해도 괜찮은 방법 중 하나다. 나중에 도입해도 늦지 않는다. CRA를 사용하면 웹팩이나 바벨 등을 커스텀하는데 제한적..