타입스크립트의 기본 타입 1. boolean참, 거짓 값을 나타낸다.세 가지 이상의 상태를 표현하고 싶을 때는 enum이나 string을 사용하는 것이 좋다. 2. number 말 그대로 숫자를 나타낸다. 3. string텍스트 데이터를 나타낸다. 4. 배열기본 타입에 대괄호가 붙은 형태이다. 5. 튜플서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열이다.배열은 같은 타입의 원소만 가질 수 있다면, 튜플은 다양한 타입의 원소를 가질 수 있다.const person: [string, number, boolean] = ['Spartan', 25, false];// const person2: [string, number, boolean] = [25, 'Spartan', false]; //..
드디어 프로젝트 하나가 또 끝이 났다... 우리 팀의 경우엔 객관적으로 봐도 너무 좋은 결과물이 나와서 튜터님도 피드백 드릴 게 없다고 하셨는데 (얼대박) 팀원분들 모두가 꼼꼼하게 신경쓴 덕이라고 생각한다. 코드를 좀 자세히 뜯어볼 시간이 있으면 좋겠는데 그렇지 못할 것 같아서 일단 문제가 있었던 부분만 조금 정리해보려고 한다. 나같은 경우에는 수파베이스 다를 줄 모름 + 테일윈드 다룰 줄 모름 으로 시간이 짺꼼 걸렸는데 이 수파베이스 오류가 진짜 사람을 괴롭혔다. (외래키 연결 안 됨, 근데 다른 팀원이 하면 됨(?)) 일단 테이블이 3개였고, 이리저리 연결이 되어 있어서 헷갈렸다. 테이블이 일단 장소, 유저, 이 두 개를 묶은 테이블 1 이렇게 3개였는데, 처음에 아~무 생각도 없이... 물론 헷..
어제 리액트 라우터 돔에 대해 이어서 정리한다! url에 따라 상품 정렬 필터링 하기는 쿼리 파라미터를 사용하면 된다. 웹사이트에서는 url에 따라 상품을 정렬하거나 필터링 할 수 있는데, 이를 위에 url에 ?를 사용하여 정보를 추가할 수 있다.여러 개의 정보를 넣을 때는 &를 사용한다. https://comic.naver.com/challenge?genre=FANTASY&page=2예를 들면 이렇게 코드가 있으면, 두 가지 정보를 나타내는데genre=FANTASY&page=2는 각각 장르와 페이지 정보를 나타낸다. 여기서 ? 뒤에 키와 값 형태로 정보를 추가할 수 있고, 여러 정보를 추가하려면 &로 구분한다. 이제 url 쿼리 파라미터를 사용하려면 useSearchParams 코드를 추가해야 한다. ..
리액트 라우터 리액트는 웹페이지를 새로고침 하지 않고도 화면이 바뀌는 싱글 페이지 애플리케이션 (=SPA)를 만들 수 있다. 그래서 페이지 이동이 빠르고 부드럽게 느껴진다. 리액트 라우터 돔을 설치하는 방법은 먼저,yarn add react-router-dom터미널에 입력해 설치한다. // 1. 필요한 것들 가져오기import { BrowserRouter, Route, Routes } from "react-router-dom";function App() { return ( // 2. BrowserRouter로 감싸기 {/* 3. Routes로 감싸기 */} {/* 4. Route로 경로 설정 */} 메인페이지} /> 상품리스트} />..
useEffect가 필요한 이유 리액트에서는 상태가 변경되면 컴포넌트가 다시 렌더링 되는데, 컴포넌트가 렌더링 될 때마다 코드가 실행된다.axios.get 호출도 이때마다 실행된다.컴포넌트가 다시 렌더링 될때마다 axios.get이 실행되고, set~가 호출되어 상태가 변경되고 다시 렌더링된다.그럼 이 과정이 반복되면서 무한 렌더링이 발생한다. 이때, useEffect를 사용하면 컴포넌트가 처음 렌더링 될때만 코드가 실행되게 할 수 있다.useEffect(() => { axios.get("http://localhost:3000/posts").then((response) => { setPosts(response.data); });}, []);저기 뒤에 빈 배열은 컴포넌트가 처음 마운트 될 때만 실..
이번에 수정한 코드를 총정리해보고자 한다. 이번엔 쿼리를 배워서 해봤는데 진짜 말도 안 되는 것이... 리덕스를 배울 땐 뭔 소린지 하나도 몰겠어서 미치는 줄 알았는데 이제 리덕스 좀 쓴다 하니까 쿼리.. (그리고 1도 모르겠음) 너무 헷갈려서 코드 분리도 좀 많이 해뒀고... 그래서 정리가 필요할 것 같아 쓴다. 먼저 기존에 있던 리덕스 슬라이스 파일을 두고 파일을 하나 더 만들었다. 1. userSliceimport { createSlice } from '@reduxjs/toolkit';const initialState = { token: localStorage.getItem('accessToken'), userInfo: null,};export const userSlice = createSl..
