FEB:)DAIN

https://stackoverflow.com/questions/64933543/parsing-error-cannot-read-file-tsconfig-json-eslint Parsing error: Cannot read file '.../tsconfig.json'.eslint The error Parsing error: Cannot read file '.../tsconfig.json'.eslint shows in all .ts files in the src folder including index.ts. I have no idea how to set up configs. The issue just shows a red li... stackoverflow.com 위 링크에 들어가면 Parsing erro..

1. 데이터를 효과적으로 시각화 개선 전 개선 후 1) 혼잡도라는 말이 명확하지 않다고 생각해 혼잡도 → 사용량으로 이름 변경 2) 사용량에 관계없이 단조로운 색깔이라 차이가 눈에 확 들어오지 않음 ⇒ 사용량이 많아질 수록 빨간색이 보이도록 변경해 데이터를 효과적으로 시각화 3) 전체적인 디자인 개선 2. 사용자의 편의성 증대 [수정 전] 왼쪽 네비게이션 바에 있는 메뉴(목록, 필터)는 열기 전용 버튼 여러 사용자가 열려 있는 패널을 닫기 위해 목록 버튼을 한 번 더 클릭하는 것을 목격 → 편의성을 위해 네비게이션 바 메뉴 버튼을 열기 버튼이 아닌 토글 버튼으로 바꾸면 좋겠다고 생각했다. 하지만 열기 버튼을 토글 버튼으로 바꾸기 위해서는 컴포넌트 비교가 필요했다. // NavigationBar/Menu...

0. 🧐 어떻게 에러 핸들링을 해야 할까?사용자 경험을 해치지 않으면서, 에러가 발생했다는 것을 사용자에게 알리고 싶었다. 그러기 위해서는 1) 사용자에게 무슨 에러가 발생했는지 친절하게 알려주어야 한다. (에러 재발생 방지) - 어떤 에러가 발생했는지 개발자가 아닌 사용자도 알 수 있도록 알려주어야 한다. - 다음 동작은 어떻게 해야 하는지 정확하게 안내해야 한다. 2) 화면이 최대한 많이 변경되지 않아야 한다. - 필요없는 화면 전환이 발생하면 사용자 경험이 저하된다. 위 사항을 염두에 두면서 에러를 처리했다. 1. GET 요청시 에러가 발생하면 해당 컴포넌트를 에러 컴포넌트로 변경예를 들어 충전소 시간별 사용량 정보를 GET 요청을 통해 받아올 때, 에러가 발생하면 (데이터를 가져오는 데 너무 오래..

[ ⚠️ 옛날 블로그에서 2022년 10월 9일에 작성한 글을 가져왔습니다. ] 리액트 공부를 하면서 공식 문서(영문)를 읽다가 문득 한국어 번역이 궁금해져서 한국어 버전을 읽어봤다. 리액트 - 엘리먼트 렌더링 엘리먼트 렌더링 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 그런데 위 글에서 한 문장만 번역이 안 되어 있었다. 이번 기회에 오픈 소스에 기여를 해보고자 오픈 소스 기여 방법을 검색했다. 주니어 개발자가 오픈 소스 기여하는 방법 주니어 개발자가 오픈소스 컨트리뷰션 하는 방법 내 인생 첫번째 오픈소스 컨트리뷰션(OpenSource Contribution) soniacomp.medium.com 검색을 ..

- 클로저를 설명하기에 앞서, 클로저는 하나의 어떤 것을 정의하는 개념이 아니기 때문에 사람마다 말하는 클로저가 다를 수 있다. 1. 함수의 주변 상태(렉시컬 환경)에 대한 참조를 같이 가지고 있는 함수는 클로저다. 즉 (new Function을 제외한) 모든 함수가 클로저라고 할 수 있다. (= 자바스크립트의 클로저) A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an..

React를 이용해 프로젝트를 하면서 제목과 같은 오류를 맞닥뜨렸다면 index.html 파일로 들어가 manifest 부분을 확인하면 된다. 만약 manifest.json 파일을 사용하지 않는다면 아래와 같은 코드를 지우면 된다. // index.html 하지만 PWA를 위해 manifest.json을 사용해야 한다면 3가지를 확인해야 한다. 1. 경로/오타 문제 rel="manifest" href="manifest.json" ✅️ [rel] "manifest"라고 잘 적혀있다. ✅️ [href] 올바른 경로로 설정되어있다. (index.html과 manifest.json이 같은 폴더 안에 있다면, manifest.json 파일 안 start_url이 "/"이라면 위의 경로가 맞다.) ⚠️ index...

1. 요청 크기 줄이기 1-1. 소스코드 크기 줄이기 - minify/uglify const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); plugins: [ ... new MiniCssExtractPlugin() ], module: { rules: [ ... { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] }, ... optimization: { minimize: true, minimizer: ['...', new CssMinimizerPlugin()]..

0. 리팩터링을 진행한 이유와 요구사항 팝업 메뉴를 구현한 팀원의 코드를 보니 ref를 쓰지 않고, css만으로도 간단하게 구현할 수 있을 것 같아 리팩터링을 진행했다. 팀원의 요구사항은 다음과 같았다. 1) 트리거의 위치가 바뀌어도 팝업 메뉴가 그 트리거 옆에 있어야 한다. 1-1) 얼마나 떨어져 있을지도 정할 수 있어야 한다. 2) 팝업 메뉴 크기는 자식 메뉴에 맞춰 유동적으로 바뀌어야 한다. 2-1) 자식 메뉴 수는 줄이거나 늘릴 수 있다. 메뉴 수에 따라 팝업 메뉴 높이가 바뀌어야 한다. 2-2) 자식 메뉴 글자 수가 길어지면 그 길이에 맞춰 팝업 메뉴 너비가 늘어나야 한다. 1. 코드 비교 1) Ref를 이용한 팝업 메뉴 - 리팩터링 전 // Menu.tsx // PopupMenu.tsx imp..