0308 이전에 만들었던 to-do list 는 CRA 프로젝트로 생성해 JS 언어로 써서 만든 것 이번에는 Vite - React - TypeScript 프로젝트로 생성해서 JS => TS 로 바꿔봤다 (vite 을 통해 바로 typescript 템플릿으로 설정해 만들면 알아서 tsconfig.json 등 설정이 되어있으니 그냥 파일확장자만 ts / tsx 로 변경해서 쓰면 된다 ㅎㅎ 다만 패키지 설치는 ts 임을 고려해주자 나는 yarn 패키지 관리자를 썼다. (npm 이면 npm install ~ ) ) yarn add typescript @types/node @types/react @types/react-dom yarn add @types/styled-components (스타일컴포넌트를 쓰면) ..

export interface Todo { id: string; title: string; content: string; deadline: string; isDone: boolean; } const [todoList, setTodoList] = useState([ ]); 일 때, setTodoList 타입을 (cb: ..) 콜백함수 인자를 넣어주는 식으로 고쳤다. export interface TodoSetList { todoList: Todo[]; setTodoList: (todoList: Todo[]) => void; // 이거를 } // 이거로 고치자 ! (cb:(todoList:Todo[])=> Todo[]) => void 그럼 타입을 바꿔줘서 setTodoList( (prev) => prev. ..

* 참고로 타입스크립트 실행 - 터미널 명령어는 ts-node TS파일명.ts * 함수에서 TS 사용하는 법 다음과 같이 함수에서 ts를 사용할 수 있다. 2가지 방법! 각각의 인자에 콜론 ( :) 뒤에 타입을 명시해준다. 또한 리턴내용에 대한 타입도 인자를 묶은 소괄호 ( ) 뒤에 명시 function sum(a: number, b: number): number { return a + b; } function objSum({ a, b }: { a: number; b: number }): string { return `${a + b}`; } * 비동기함수에서 TS 사용하는 법 그런데 async가 붙은, 비동기함수라면? 그냥 함수 방식대로 함수 선언부에 타입만 써줘서는 에러가 뜬다. 비동기함수는 Promi..

https://school.programmers.co.kr/learn/courses/30/lessons/12910?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr * 참고로 배열 원소개수 0인지 (빈 배열인지) 체크 할 때, arr === (혹은 ==) [ ] 이런 식으로 쓰면 안된다 ! arr.length == 0 과 같이 배열 원소개수를 알려주는 .length 를 써야 한다 * 그냥 .sort( ) 쓰면, 숫자도 ASCII 문자 순서대로 (문자처럼) 배열되어, 맨 앞자리 수 우선으로 배열되니 (오름차순 5, 10 이 ..

* JavaScript - 페이지에 동적 효과를 주기위해 만들어진 언어 - Node.js를 통해 백엔드 또한 다룰 수 있다 - 단점 : 너무 관대한 언어 1) 런타임에 타입이 결정되는 동적 타입 언어 -> 오류 발생 가능성 높음, 디버깅 어려움 2) 약한 타입 체크 (변수/상수 구분하는 let, const 만 지원) 3) 객체 성질 수시로 변화 가능 =>> 그래서 등장한 타입스크립트 ! * TypeScript - microsoft에서 개발한 오픈소스 프로그래밍 언어 - JS를 기반으로 만들어져, JS 의 단점을 보완한 언어. - 타입을 명시해줌 - 현재는 필수 스택이 되었음! (한번 TS를 쓴 개발자는 JS로 못돌아간다구 한다 ..!ㅇ_ㅇ) JS의 단점 보완 아래와 같이 JS의 단점을 보완함으로써, 생산..

❌ React - Error ❗Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 알아보니 - router component로 설정해놓은 page 컴포넌트가 export 없이 비어있어서 - import한 컴포넌트의 네이밍 문제로 . . 등으로 발생하는 에러라고 한다. 내 경우도 위와 ..

0228 즐겨찾기 (or 좋아요) 기능은 구현해보고 싶었지만 한번도 시도해본 적이 없었다. 다른 분들이 하신 걸 보면서 우와 어떻게 한거지, 생각만 했던 거 같다. 근데 이번 기회에 구현해볼 수 있게 돼서 넘넘 뿌듯하고 좋은 경험이었다 !! ㅠ^ㅠ 사실 로그인/회원가입을 맡아주신 팀원분이 session stroage에 유저 uid를 set하고, 내가 그걸 get해서 쓰는 식으로, firestore를 활용해 데이터 넣고 가져오고 하면 될 거라고 잘 알려주시고, 필드값도 어떻게 할 건지 잘 전달해주셔서 정말 수월하게 된 것 같다. 세션스토리지는 처음 써봤는데, 로컬스토리지와 쓰는 방법이 똑같았다. 또 파이어스토어는 이전에 활용한 경험이 있어서, 다시 구글링해서 잘 써먹은 거 같다. (근데 배열에 원소 추가,..

프로젝트 메인페이지에서 필요한 정보들을 api - axios get 해서 가져오고, 그 정보들을 하나의 객체로 묶어, 배열 state (useState) 에 하나씩 담고 map으로 돌리면서 출력했다. 은 컴포넌트 ! 그 외에도 input에 부여하는 onKeyDown 속성 등을 배웠다. 이번에는 trim() 메서드를 사용해 유효성 검사도 추가 ! (다른 분들이 쓰신 코드도 있음 /스타일컴포넌트 부분은 생략) import { useEffect, useState } from 'react'; import styled from 'styled-components'; import HeaderSlider from '../sliders/HeaderSlider'; import { useMostPopularVideos } ..

이런 식으로 api 를 쓰는게 맞는 지 모르겠으나.. 아마 api - axios.get 제외한 부분은 따로 빼는 게 좋을 것 같긴 하다. ...api.js import axios from 'axios'; import request from './request'; // 메인페이지 BodySlider - 유튜버 영상 슬라이더에 사용될 youtube data api export const mainSliderDataClient = axios.create({ baseURL: import.meta.env.VITE_APP_YOUTUBE_BASE_URL_GET, headers: { 'Content-Type': 'application/json' }, responseType: 'json' }); // input: 영상id..

2.23 TanStack | High Quality Open-Source Software for Web Developers TanStack | High Quality Open-Source Software for Web Developers tanstack.com React-Query (aka. Tanstack-Query) 리액트쿼리는 서버 상태관리를 쉽게 하도록 도와주는 라이브러리로, 서버 DB 연결 관리와 전역상태관리를 한 번에 해준다 ! (Redux 미들웨어이자, Redux Toolkit에 내장되어있는, Thunk의 대체재라고 할 수 있다. Thunk는 요새 안 쓰는 추세라고도 하고, 또 Thunk보다 React-Query 가 더 쉽다고 한다.) * 리액트쿼리의 서버상태관리 용이성 - 다음의 4가지를 ..