본문 바로가기

분류 전체보기

(179)
[#. VSCode] Mac에서 VSCode 제거하기, 삭제하기 Mac에서는 윈도우처럼 프로그램 추가/제거에서 프로그램을 삭제하는 게 아니라 깔끔하게 제거되는 느낌이 없다 실행 중이던 VSCode 프로그램을 종류 후에 터미널에서 아래 명령어를 입력한다 rm -fr ~/Library/Preferences/com.microsoft.VSCode.helper.plist rm -fr ~/Library/Preferences/com.microsoft.VSCode.plist rm -fr ~/Library/Caches/com.microsoft.VSCode rm -fr ~/Library/Caches/com.microsoft.VSCode.ShipIt/ rm -fr ~/Library/Application\ Support/Code/ rm -fr ~/Library/Saved\ Applicat..
[#. React] CRA(create-react-app)에 ESLint, Prettier 적용, 설정하기 CRA(CRA(create-react-app)로 시작한 React 프로젝트에 ESLint와 Prettier를 적용해 보자 ESLint(ES + Lint) 린트(lint)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 말한다 따라서, ESLint는 Javascript 문법에서 에러를 표시해주는 도구다 ESLint를 사용하게 되면 의도치 않은 실수뿐만 아니라 전반적인 코딩 스타일을 표준화한다 => 협업 시 균일화된 스타일을 유지할 수 있다 Prettier 정해놓은 규칙에 따라 자동으로 코드를 정렬해 준다 Formatting ESLint에도 Formatting 기능이 있기 때문에 ESLint의 기능은 종료해 둬야 한다 ① VSCode에..
[#. React] Webpack이란? CRA로 시작한 React 프로젝트에 숨겨져 있던 Webpack 설정 파일 확인하기 그동안 React 프로젝트를 진행했을 때 CRA(create-react-app)로 시작했기 때문에 Webpack 설정에 대해 들여다볼 일이 없었다 Webpack 모던 Javascript 애플리케이션을 위해 사용되는 정적 모듈 번들러 웹팩에서는 Javascript, 스타일시트, 이미지 등을 모듈로 보는데 번들러는 여러 패키지와 관련된 파일들을 하나로 묶어주는 도구 Webpack 속성 Entry Output Loader Plugins Mode 1. Entry 웹 자원을 변환하기 위해 필요한 시작점, Javascript 파일 경로 entry를 통해 모듈을 로딩하고 하나의 파일로 묶는다 2. Output entry를 통해 로딩한 모듈을 하나의 파일로 묶은 결과물을 반환할 위치 3. Loader 번들링할 파일에 ..
[#. react-router-dom] react-router-dom 5.2 버전으로 업데이트하고 useHistory, useParams, useLocation, useRouteMatch hooks 사용하기 React >= 16.8 react-router-dom >= 5.1 react 16.8 이상, react-router-dom 5.1 이상에서 사용 가능한 Hooks들에 대해 알아보려고 한다 reactrouter.com/web/api/Hooks React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com 업데이트 전에는 페이지 이동할 때 withRouter를 이용했다 import React from 'react'; import { withRouter } from 'react-router-dom'; function PurchasePage(props) { const moveToPurchase = () => { pro..
[#. Node] MongooseError [MongooseServerSelectionError]: connection <monitor> to ip address closed 몽고DB 에러 해결 회사에서 작업하다 집에서 작업을 하게 됐는데 MongooseServerSelectionError를 마주했다 mongoDB에 접근 가능한 IP가 아닐 때 발생하는 에러다 mongoDB에 접근 가능하도록 등록을 해주면 해결된다 ① mongoDB 사이트 접속 cloud.mongodb.com/ MongoDB Cloud MongoDB Cloud is a unified data platform for modern applications and includes a global cloud database, search, data lake, mobile, and application services. www.mongodb.com ② Network Access->IP Access List->IP 추가 Node 서버 재실행..
[#. JavaScript] 숫자 금액 세 자리 콤마 , 표시하기 숫자를 세 자리씩 끊어서 콤마 표시 하고 싶을 때 toLocaleString() 사용한다 number.toLocaleString(locales, options) toLocaleString() 함수는 숫자를 로컬의 language format에 맞는 문자열로 변경해 준다 number.toLocalString() 처럼 파라미터로 아무것도 전달되지 않으면 사용자 로컬 환경의 locale을 default로 사용한다 en-US 1,234,567 ko-KR 1,234,567 let total = 230000 total.toLocaleString()// 230,000
[#. React] TypeError: Cannot read property '' of undefined 에러 뜰 때 Json in Array, Object in Array 데이터 가져오기 [ { name: "상품1", price: 129000, _id: "602b6786323789511beea1d1" }, { name: "상품2", price: 99000, _id: "602b6786323789511beea1d2" } ] React에서 이런 형식으로 들어가 있는 데이터를 꺼내와서 보여주려고 한다 useEffect(() => { console.log(props.detail.option); },[props.detail.option]) useEffect()로 페이지를 렌더링할 때 로그를 찍어보면 데이터가 그대로 잘 나온다 useEffect(() => { const ProductOption = props.detail.option ProductOption.map((item, index) => (( ..
[#. JavaScript] slice() vs splice() 차이점을 알아보자 slice() vs splice() 배열을 다룰 때 자주 사용하는 함수 slice(), splice()에 대해 알아보자 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; ① slice() =조각(명사) begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다 원본 배열은 수정되지 않는다 ex) var arr1 = arr.slice(3, 5); // [4, 5] var arr2 = arr.slice(undefined, 5); // [1, 2, 3, 4, 5] var arr3 = arr.slice(-3); // [8, 9, 10] var arr4 = arr.slice(-3, 9); // [8, 9] var arr5 = arr.slice(10); // [] var arr6..