본문 바로가기

매일 해내는 개발102

[React] useParam React Router는 React 기반의 라우팅 라이브러리로, SPA(Single Page Application)에서 URL 경로를 기반으로 컴포넌트를 렌더링하고, 상태를 관리하는 기능을 제공한다. React Router의 useParam 훅은, URL 경로에 포함된 동적 파라미터를 가져와서 사용할 수 있게 해주는 훅이다. useParam 훅은 useParams 훅과 함께 사용된다. useParams는 URL 경로에서 파라미터 값을 객체로 반환하는 훅이고, useParam은 URL 경로에서 특정 파라미터 값을 가져오는 훅이다. 예를 들어, 다음과 같은 URL 경로가 있다고 가정해보자. /posts/:postId 위 경로에서 postId는 동적 파라미터로, postId 값에 따라 렌더링되는 컴포넌트가 달.. 2023. 1. 24.
type 에러처리 https://velog.io/@win/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%90%EB%9F%AC-string-undefined-%ED%98%95%EC%8B%9D%EC%9D%98-%EC%9D%B8%EC%88%98%EB%8A%94-number-%ED%98%95%EC%8B%9D%EC%9D%98-%EB%A7%A4%EA%B0%9C-%EB%B3%80%EC%88%98%EC%97%90-%ED%95%A0%EB%8B%B9%EB%90%A0-%EC%88%98-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4 타입스크립트 에러-'string | undefined' 형식의 인수는 'number' 형식의 매개 변수에 할당될 수 없습니 par.. 2023. 1. 24.
Error: error:0308010C:digital envelope routines::unsupported Error: error:0308010C:digital envelope routines::unsupported opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' 찾아보니까 노드 버전 다운그레이드 하래서 다운그레이드도 해봤는데 해결이 안됐다. package-json의 react-scripts 버전의 react-script의 버전이 예전 버전이라서 그렇다. 나는 2.x.x였는데 npm install --save react-scripts@5.0.1 명령어를 통해 버전 업그레이드 하여 오류를 해결할 수 있었.. 2023. 1. 23.
유튜브 API 사용하는 방법 링크 모음 https://han-py.tistory.com/432 찐 API 요청 [youtube api] 유튜브 데이터 가져오기 유튜브의 영상데이터를 가지고 와서 브라우저에 보여주는 방법을 알아보자. 만약 react나 nodejs를 통해 구축환경을 고려하고 있다면, 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 기본적 han-py.tistory.com https://velog.io/@boyfromthewell/React-Youtube-API-%EA%B0%80%EC%A7%80%EA%B3%A0-%EB%86%80%EA%B8%B0-1 React에서 쓰는법 [React] Youtube API 가지고 놀기 1 유튜브 API를 활용해서 특정 채널 재생목록, 동영상 리스트, 동영상 정보(조회수.. 2023. 1. 21.
[오류] Error message "error:0308010C:digital envelope routines::unsupported" 와 ReferenceError: React is not defined 내가 마침 중요한 파일을 로컬에서 지우고 난 후에 확장 프로그램이든 뭐든 다 삭제가 되고 이런 에러가 발생해서 너무 당황했다.... 처음으로 npm start 시 ERR!! 가 엄청 떴다. react_script 폴더가 없단다. 그래서 npm instll 후에 npm install -g react-script 를 설치했다. 아래 블로그를 참고했음 [Error] npm start 에러 처리 방법 나의 하찮은 뻘짓을 기록하고 다음에 같은 삽질을 반복하지 않고자 이 글을 남깁니다...^^ 아직 js 초보인 나는 이전 테스트 프로젝트에서 잘만 돌아가던 npm start가 왜 실행이 안되지 하면서 맨 첫 chuun92.tistory.com 그래도 해결이 안됐다. 그러고 나서 이런 오류가 떴다. "error:030.. 2023. 1. 20.
[Develog] 타입스크립트로 TodoList만들기2 어제에 이어서 추가 진행된 부분 1) 삭제 기능 2) 완료 기능 3) 취소 기능 4) 상세페이지 토글창 구현 삭제까지는 유데미 영상을 보면서 클론코딩으로 진행했고 이후 기능은 깃허브링크 GitHub - jeLee94/type_prac Contribute to jeLee94/type_prac development by creating an account on GitHub. github.com 0. 이미지 1. 삭제 기능 TodoItems.tsx는 Todos에서 RemoveItem을 받아온다. Todos.tsx는 App.tsx에서 onDeleteHandler를 받아온다. App.tsx에서는 state를 set하도록 함수를 정의한다. 2. 완료/취소 기능 흐름은 위와 같고 App.tsx에서 정의하는 함수만 다.. 2023. 1. 20.
[Develog] 타입스크립트로 TodoList만들어보기 과제는 기존 프로젝트의 리팩토링이었지만 따로 수업을 듣고 있었던 터라 새로운 프로젝트로 개발하였다. 깃허브 링크 GitHub - jeLee94/type_prac Contribute to jeLee94/type_prac development by creating an account on GitHub. github.com 0. 현재까지 완성된 모습 2. 파일 구조 src ㄴcomponents ㄴAddTodo.tsx ㄴTodoItems.tsx ㄴTodos.tsx ㄴmodels ㄴtodo.ts ㄴstyles ㄴGlobalStyle.ts App.tsx indes.tsx 3. 코드 해설 App.tsx function App() { const [todos, setTodos] = useState([]); const [.. 2023. 1. 19.
[Develog] 리액트 + 타입스크립트 프로젝트 만들기 Adding TypeScript | Create React App Note: this feature is available with react-scripts@2.1.0 and higher. create-react-app.dev CRA를 사용해 타입스크립트를 사용하는 리액트 프로젝트를 생성할 수 있다. 새로운 CRA 프로젝트 사용시 npx create-react-app my-app --template typescript 또는 yarn create react-app my-app --template typescript 기존 CRA 프로젝트에 타입스크립트 추가하고 싶을 경우 npm install --save typescript @types/node @types/react @types/react-dom @type.. 2023. 1. 18.
[Develog] 타입스크립트 기초 1. 타입스크립트란? 자바스크립트에 타입이 추가된 문법이다. 자바스크립트는 자료형이 동적이기 때문에 프로젝트 실행 전에는 어떤 오류가 있을지 파악하기 어렵기 때문에 유지보수가 어렵지만 타입스크립트는 자료형을 정적으로 할당하기 때문에 IDE에서 컴파일 타임에 에러를 빨간 줄로 미리 알려줄 수 있다. TypeScript : 변수의 타입이 컴파일 타임에 결정됨 JavaScript: 변수의 타입이 런타임에 결정됨 *컴파일 타임: 작성한 소스코드가 (js, binary 등으로) 변환되는 과정 *런타임: 프로그램이 실행되는 과정 2. 타입스크립트를 사용하는 이유 장점 단점 TypeScript 1. Microsoft에서 만들었고 꾸준히 업데이트한다. 2. 생태계가 크다. 3. Microsoft에서 개발한 vscode.. 2023. 1. 17.

티스토리툴바