본문 바로가기

그래도 해야지105

[Develog] 타입스크립트 + 유튜브 API로 데이터 요청 후 파이어베이스로 저장하는 방법 첫 번째로 했던 작업은 타입스크립트로 유튜브 API를 요청하고 요청한 데이터를 가공해서 파이어베이스에 저장하는 방법이었다. 이 때는 API 사용법이 아직 익숙하지 않아 플레이리스트를 요청하는 방법을 몰랐고 videoId가 있는 단일 영상 데이터만 받았다. 코드 설명 1. API 요청 axios .get( `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&q=자바스크립트&order=relevance&key=${구글APIkey}` ) .then((res) => { console.log(res); setPlaylist(res.data.items); }) .catch((err) => { console.log(err); }); axio.. 2023. 1. 25.
[develog] React 아웃소싱 프로젝트 S.A https://slash-quiver-80f.notion.site/React-S-A-e47d9765fa854a98add99c778a6f2df1 React 아웃소싱 프로젝트 S.A 1. 프로젝트 소개 slash-quiver-80f.notion.site 팀 그라운드 룰 개발 일정을 못 맞출 것 같을 땐 팀원들에게 꼭 미리 말해주기 주기적으로 진행 상황 공유하기 시간 약속 잘 지키기(늦을 것 같을 땐 미리 양해 구하기) 코드 컨벤션 tapSize 2 Auto Create Quotes : false Quote Style : single or double Prettier : Single Quote True 커밋 컨벤션 feat : 새로운 기능, 페이지 추가 fix : 버그 수정, 코드 내용 변경 docs : 문서.. 2023. 1. 25.
vs Code에서 tab키 안먹을때는? https://leeborn.tistory.com/entry/VS-Code-%ED%83%AD%ED%82%A4%EA%B0%80-%EC%9E%91%EB%8F%99-%ED%95%98%EC%A7%80-%EC%95%8A%EC%9D%84%EB%95%8C [VS Code] 탭키가 작동 하지 않을때 오늘 VS Code를 사용하던 중 띄어쓰기로 작동하지 않고, 포커스 이동만 계속되었다. 그래서 내가 뭔가를 건드렸나? 싶으면서도 그냥 무시하고 대신해서 스페이스를 열심히 사용했다. 근데 탭과 스 leeborn.tistory.com ctrl+m 2023. 1. 24.
[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.

티스토리툴바