엘리스
[회고] 엘리스에서 2차 프로젝트를 마치고 작성하는 회고록 (feat. 유지 보수 및 리팩터링)
[회고] 엘리스에서 2차 프로젝트를 마치고 작성하는 회고록 (feat. 유지 보수 및 리팩터링)
2022.03.25📖 엘리스에서 2차 프로젝트를 마치고 🌱 GitFarm이란? GitFarm은 Git + Farm의 합성어로 농장을 컨셉으로 하여 Git 잔디 관리를 즐겁게 할 수 있도록 도와주는 서비스다. 개발자는 꾸준한 공부를 해야 하는데, 공부한 내용을 기록으로 남길 때 1일 1커밋을 주로 이용하곤 한다. 커밋 습관을 만들고 유지하도록 도와주어, 장기간 목표를 달성하고 성취감을 주기 위하여 GitFarm 프로젝트를 기획하게 되었다. GitHub - h1jun/GitFarm: GitFarm GitFarm. Contribute to h1jun/GitFarm development by creating an account on GitHub. github.com 🌟 GitFarm만의 차별점 기존 GitHub 페이지에서 제공하..
[회고] 엘리스에서 1차 프로젝트를 마치고 작성하는 회고록
[회고] 엘리스에서 1차 프로젝트를 마치고 작성하는 회고록
2022.03.22📖 엘리스에서 1차 프로젝트를 마치고 🐾 반려in이란? 국내 반려 인구 1500만 명 시대로 접어들었지만 그에 따라 유기되는 동물 또한 증가하고 있다는 기사를 접하게 되었다. 이러한 상황으로 펫샵이 아닌 보호소를 통해 유기 동물 입양을 독려하고 권장하는 "사지 말고 입양하세요"라는 캠페인이 진행되고 있다. 이러한 상황이 조금이나마 개선되기를 바라며 유기 동물을 입양에 관심 있는 사람들에게 정보제공 및 교류할 수 있는 커뮤니티를 제작하기로 결정했다. GitHub - h1jun/Pets-in: Pets-in Pets-in. Contribute to h1jun/Pets-in development by creating an account on GitHub. github.com ✍ 프로젝트에서 담당한 기능 - F..
[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..