전체 글

[React] 'concurrently' 은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다 << 오류 해결 방법

npm run dev 를 통해서 프로젝트를 실행하려는데 'concurrently'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 같은 오류가 출력된다. 해결방법 방법1) package.json 버전 상향 (안됐었음❎) npm i concurrently express --save 방법2) bcrypt 버전 상향 ✅ package.json > dependencies > bcrypt "bcrypt": "^3.0.6" 에서 "bcrypt": "^5.0.0", 로 상향시켜준 후 npm install 해서 dependencies 다시 다운받기 그리고 아래 명령어 입력해서 업데이트 (*dependencies 다운받고 나면 아래 명령어 입력하도록 뜨긴 한다) npm audit f..

react-async 로 요청상태 관리하기

[React/리액트] react-async 로 요청상태 관리하기 react-async 는 useAync 와 비슷한 함수가 들어있는 라이브러리이다. 이 라이브러리 안에 들어있는 함수 이름도 useAsync 인데, 사용법이 조금 다르다. 만약 매번 프로젝트를 만들때마다 직접 요청 상태 관리를 위한 커스텀 Hook을 만들기 귀찮다면 이 라이브러리를 사용하면 된다. 기존에 만들었던 커스텀 Hook은 결과물을 배열로 반환했다면, 이 Hook은 객체 형태로 반환한다. 설치 $ yarn add react-async 사용법 react-async 의 useAsync 를 사용할 때 파라미터로 넣는 옵션 객체에는 호출 할 함수 promiseFn 을 넣고, 파라미터 필드 이름과 함께 (customerId) 넣어주어야 한다. ..

useAsync 커스텀 Hook 만들기

데이터를 요청해야 할 때 마다 리듀서를 작성하는 것은 번거롭다. 매번 반복되는 코드를 커스텀 Hook을 만들어서 요청 상태 관리 로직을 쉽게 재사용 하는 방법을 알아보자. useAsync.js import { useReducer, useEffect, useCallback } from "react"; function reducer(state, action) { switch (action.type) { case "LOADING": return { loading: true, data: null, error: null, }; case "SUCCESS": return { loading: false, data: action.data, error: null, }; case "ERROR": return { loadin..

useReducer 로 요청 상태 관리하기

API 연동하기 [React/리액트] API 연동하기 CRA로 프로젝트 폴더를 생성하고, API를 호출하기 위해서 axios 라는 라이브러리를 설치해준다. npx create-react-app api-integrate cd api-integrate yarn add axios axios를 사.. devts.tistory.com 이전에 구현했던 User 컴포넌트에서 useState 대신에 useReducer 를 사용해서 구현해보고자 한다. useReducer 를 사용해서 LOADING, SUCCESS, ERROR 액션에 따라 다르게 처리를 해보려고 한다. useReducer 로 구현했을 때의 장점은 useState 의 setState 함수를 여러번 사용하지 않아도 된다는 점과, 리듀서로 로직을 분리했으니 다..

API 연동하기

[React/리액트] API 연동하기 CRA로 프로젝트 폴더를 생성하고, API를 호출하기 위해서 axios 라는 라이브러리를 설치해준다. npx create-react-app api-integrate cd api-integrate yarn add axios axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다. (REST API) API요청을 하면 Promise를 반환한다. 더보기 ⭐ REST API란? 간단하게, 클라이언트와 서버가 소통하는 방식을 말한다. 소통하는 방식은 여러가지 형태가 있는데, 이를 HTTP 메서드라는 것을 사용해서 구분을 한다. 이 중에 HTTP 메서드는 대표적으로 GET, POST, PUT, DELETE 가 있다. REST AP..

[Javascript] new Date(), toLocaleDateString (현재 날짜, 시간 표시하기)

[Javascript/자바스크립트 ] new Date(), toLocaleDateString (현재 날짜, 시간 표시하기) // 한글식 표기 function printKorDate() { const today = new Date(); const dateString = today.toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric', }); const dayName = today.toLocaleDateString('ko-KR', { weekday: 'long', }); return `${dateString} ${dayName}`; // 2022년 5월 30일 월요일 } // 영어식 표기 function printDate()..

ContextAPI(2) - useReducer로 dispatch context 만들기

[React/리액트] ContextAPI 활용 - useReducer로 dispatch context 만들기 (ContextAPI 이전글 바로가기) TodoList를 만들면서 이런 식으로 TodoList에서는 사용하지 않는 기능을 TodoItem에 넘겨주기 위해서 중간다리 역할로 넘겨주고 있으므로 이를 ContextAPI를 이용해서 관리하고자 한다. 이런 작은 프로젝트에서는 ContextAPI를 꼭 사용하지 않아도 되지만, 대규모 프로젝트나 실무에서는 context API를 사용하면 편리하다. ContextAPI를 통해 컴포넌트에서 dispatch로 참조하는 방법은 다음과 같다. useReducer 를 사용하여 상태를 관리하는 컴포넌트를 만든다. >> TodoProvider state 와 dispatch..

리액트 컴포넌트 스타일링

1. Sass Sass는 CSS pre-processor 로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해준다. ⭐ Sass 가이드 참고 Sass에서는 .scss 와 .sass 두 가지의 확장자를 지원한다. Sass 가 처음 나왔을 땐 sass 만 지원됐었는데 .sass 는 중괄호를 쓰지 않고 들여쓰기를 쓰고, 세미콜론을 쓰지 않는 형태도 있었기 때문에 개발자들이 헷갈려하자 .scss 라는 확장자를 만들어서 이점을 보완하여 css 문법과 유사하게 작성할 수 있도록 되었다. 따라서 Sass 로 스타일링을 한다고 하면 .scss 확장자를 많이 이용한다. .sass $font-stack: Helvetica, sans-serif ..

React icons 라이브러리 사용하기

[React/리액트] React icons 라이브러리 사용하기 링크를 참고해서 원하는 아이콘을 리액트에 불러와서 사용할 수 있다. 설치하기 $ yarn add react-icons 사용법 import React from 'react'; import { MdCheckBox, MdCheckBoxOutlineBlank } from 'react-icons/md'; function CheckBox({ children, checked, ...rest }) { return ( {checked ? : } {children} ); } export default CheckBox; import 로 불러온 뒤, 컴포넌트 형태로 그대로 사용하면 된다. ⭐ input custom 스타일링 하는 방법 .checkbox input ..

...rest props 전달하기

component/Button.js function Button({ children, size, color, outline, fullWidth, onClick }) { return ( {children} ); } 여기서 이벤트를 더 추가하게 된다면 function Button({ children, size, color, outline, fullWidth, onClick, onMouseMove }) { return ( {children} ); } 이런 식으로 필요한 이벤트가 있을 때 마다 매번 이렇게 넣어주게 되는 것은 번거롭다. 이러한 문제를 해결해 줄 수 있는 문법이 바로 spread 와 rest 이다. function Button({ children, size, color, outline, fullW..

[MongoDB] pymongo.errors.ServerSelectionTimeoutError: ~ [SSL: CERTIFICATE_VERIFY_FAILED] 해결 방법

[MongoDB] pymongo.errors.ServerSelectionTimeoutError: ~ [SSL: CERTIFICATE_VERIFY_FAILED] 해결 방법 파이참에서 DB Atlas 사용 할 때나, MongoDB를 사용해서 파일을 실행하다가 pymongo.errors.ServerSelectionTimeoutError: ~~ [SSL: CERTIFICATE_VERIFY_FAILED] 에러메세지가 뜨면서 안될 때가 있다. 이런 경우에는 사용하고 있는 인터넷 환경에 따라 보안 관련 추가 설정을 해주어야 할 때가 있다. 1. 파이참 인터프리터에서 가상환경에 certifi 패키지를 설치해준다. 2. 아래와 같이 코드를 추가해준다. from pymongo import MongoClient import..

Flexbox Froggy

[CSS] Flexbox 정렬하기 연습 Flexbox Froggy 연습하기 flex-direction : 정렬할 방향을 지정한다. row (요소를 텍스트의 방향과 동일하게 정렬 / 보통 가로정렬) row-reverse (↔ 뒤집기 / 텍스트의 반대방향) column (요소를 위에서 아래로 정렬 / 보통 세로정렬) column-reverse( ↕ 뒤집기) justify-content : Flex 요소들을 가로선 상에서 정렬한다. flex-start (요소를 컨테이너의 왼쪽으로 정렬) flex-end (요소를 컨테이너의 오른쪽(끝)으로 정렬) center (요소를 컨테이너의 가운데로 정렬) space-between (요소들 사이에 동일한 간격) space-around (요소들 주위에 동일한 간격) space..