분류 전체보기

[프론트엔드] "npm run start" = "react-scripts: Permission denied" 문제 해결

1. 문제 원인 윈도우 환경에서 개발한 프로젝트를 맥북에서 실행하니 위와같은 오류가 발생하였다. stackoverflow 내용을 찾아보니 서버가 바뀌면 권한 관련 문제가 발생하는 문제가 있다고 한다. 다음과 같이 문제의 해결을 시도하였다. 2. 문제 해결 방법 1: 먼저 원인이 발생한 스크립트를 설치해주기로 하였다. npm install react-scripts --save 방법 2; 동일한 오류가 발생하여 원인이되는 node파일 권한을 변경헀다. Password 창이 나오면 clone한 본인의 github 패스워드 입력 sudo chmod +x node_modules/.bin/react-scripts 2번까지 진행하니 오류는 해결되었고 서버가 실행되었다. 끝.

[프론트엔드] REACT 뉴스 뷰어 만들기 [9]

이전 글 2022.03.26 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [8] 1. usePromise 커스텀 hook 이번에는 usePromise 훅을 프로젝트에 적용해보려 한다. src 디렉토리 하단에 lib/usePromise 디렉토리 및 파일을 생성해준다. - usePromise.js 기본 API 상태를 관리해줄 파일을 만들어준다. promise 문을 사용하여 유틸 프로세스를 함수로 만들어서 재사용 할 수 있다. APi 호출 시 사용한 loading, 성공시에 결과값을 받을 resolved, API 오류 발생 시 넘겨받을 error 3가지 타입의 state 를 선언해주자 대기: loading을 보여주고 완료: 응답값을 반환 실패: error 타입을 반환해준다 . 완..

[프론트엔드] REACT 뉴스 뷰어 만들기 [8]

이전 글 2022.03.26 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [7] 1. 리엑트 라우터 적용 이번에는 state로 관리했던 카테고리 값을 라우터로 변경해볼 예정이다. 먼저 라우터 라이브러리를 프로젝트에 설치한다. **주의사항 router 설치 시에 6.x.x 이상 버전을 설치하면 기존 라우터 사용 방식이 달라져서 오류가 발생하여 5.x.x 버전을 설치하고 진행한다. 관련 글은 아래애 있으니 참고 2022.03.15 - [프론트엔드/React] - [프론트엔드] React Router v6 업데이트 yarn add react-router-dom - index.js 해당 파일에 라우터를 적용한다. import React from 'react'; import Reac..

[프론트엔드] REACT 뉴스 뷰어 만들기 [7]

이전 글 2022.03.26 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [6] 1. 활성화된 카테고리 API 지정하기 이번에는 지정한 카테고리로 변경될때 뉴스 API도 변경되도록 연동할 생각이다. 이전에 App.js "NewsList" 컴포넌트에 props로 category state를 넘겨준 적이 있다. props로 넘겨준 state로 APi만 호출하면 이제 NewsList가 API 변경시 자동으로 랜더링 된다. - NewsList.js NewsList 컴포넌트에 먼저 props로 전달해준 category state를 선언한다. 선언한 props 값에 따라 API를 호출할 수 있도록 query파라미터를 만들어서 API에 넣어준다. 기본 값이 'all'이면 빈값을 주어서 ..