매일 해내는 개발/Develog62 [Develog] js와 jsx, ts와 tsx의 차이 / jsx를 js로 변환하는 과정 JS와 JSX의 차이 JavaScript(JS)와 JSX는 React 프로젝트에서 사용되는 두 가지 파일 형식이다. JSX는 JavaScript XML의 약자로, React에서 UI를 구성하는 데 사용된다. JS 파일은 일반적인 JavaScript 코드를 포함한다. 함수, 변수, 제어문 및 객체와 같은 JavaScript의 모든 구성 요소를 사용하여 구성된 파일이다. JS 파일은 React에서 UI를 구현하는 데 사용될 수 있지만, JSX를 사용하는 것이 일반적이다. JSX 파일은 HTML과 JavaScript를 혼합한 문서이다. JSX 파일에는 JavaScript 코드가 포함되어 있지만, HTML 요소와 유사한 구문을 사용하여 React에서 UI를 구성하는 데 사용된다. 예를 들어, JSX에서는 HTM.. 2023. 2. 3. [Develog] Throttling & Debouncing Throttling 개념: 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것 예) 무한스크롤 Type1 Leading Edge 처음 이벤트 핸들러만 호출 // Leading Edge Throttling const throttle: ControlDelay = (delay) => { if (timerId) { // timerId가 있으면 바로 함수 종료 return; } console.log(`API요청 실행! ${delay}ms 동안 추가요청 안받음`); timerId = setTimeout(() => { console.log(`${delay}ms 지남 추가요청 받음`); // alert("Home / 쓰로틀링 쪽 A.. 2023. 1. 31. [Develog] 유튜브 API 요청 후 파이어베이스에 저장하는 방법2 1탄 [Develog] 타입스크립트 + 유튜브 API로 데이터 요청 후 파이어베이스로 저장하는 방법 첫 번째로 했던 작업은 타입스크립트로 유튜브 API를 요청하고 요청한 데이터를 가공해서 파이어베이스에 저장하는 방법이었다. 이 때는 API 사용법이 아직 익숙하지 않아 플레이리스트를 요청 subtlething.tistory.com 저번시간에 유튜브 API를 이용해 데이터를 받아 오는 것 까진 했는데 생각해보니 우리 프로젝트에서는 플레이리스트가 필요했다. 우리가 짠 와이어 프레임 상 대시보드 페이지에 아래처럼 강의 리스트를 보여줘야 하기 때문이다.. 근데 이미 데이터를 단일 데이터로 넣었는뎅...... 힝 대시보드 없애버릴까 싶었지만 개발자로서 그럴 쑨 없쥐 플레이리스트 가져오기? 그게 왜 안되겠어. 바로 .. 2023. 1. 29. [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. 유튜브 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. [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. 이전 1 2 3 4 5 6 7 다음
