Summary 나쁘지 않은 삽질이었다. 검색 후 바로 해결 완료. Problem const accessToken = localStorage.getItem('token'); export const instance = axios.create({ baseURL: import.meta.env.VITE_BASE_URL, headers: { 'Content-Type': 'application/json', Authorization: accessToken, }, }); 사용한 axios instance는 위와 같습니다. [오류 발견한 과정] 1. 로그인 2. 질문 상세 페이지로 이동 3. 답변 POST (오류 발생) 답변 POST 요청을 보낼 때 401 unAuthorization 오류가 발생했습니다. 그런데 새로고침..

인트로집중이 안돼서 오랜만에 알고리즘 복습하는 시간이나 가져보았습니다.클래스로 스택 구현class Stack { constructor() { this.stackArr = []; this.top = 0; } push(value) { this.stackArr[this.top] = value; this.top += 1; return value; } pop() { if(this.top === 0) { console.log('배열이 비었습니다'); return null; } this.top -= 1; return this.stackArr..

인트로오늘은 클라이언트에서 프록시를 설정하여 CORS 오류를 방지하는 실습을 진행했습니다.간단하게 package.json을 통해 설정할 수도 있지만 이번 포스트에서는 http-proxy-middleware를 사용해 여러 개의 도메인에서 응답을 받아오는 경우를 다뤄보겠습니다.설정npm install http-proxy-middleware//src/setupProxy.jsconst { createProxyMiddleware } = require("http-proxy-middleware");module.exports = (app) => { app.use( "/api", createProxyMiddleware({ target: "http://localhost:3080", chang..

CI/CD란애플리케이션 개발 단계를 자동화하여 짧은 주기로 서비스를 배포할 수 있습니다. Continuous Integration/Continuous Delivery의 약어로 CI/CD의 기본 개념은 지속적인 통합, 지속적인 서비스 제공, 지속적인 배포입니다. 개발, 운영팀에 발생하는 문제를 해결하기 위해 제시되었습니다.지속적인 통합 CI개발자가 동시에 애플리케이션 개발과 코드 작업을 할 때 서로 충돌하는 문제를 해결하기 위함.CI를 통해 각자 코드 변경 사항을 공유 브랜치로 병합하는 작업을 수월하게 자주 수행하여 코드 간 충돌을 빠르게 확인 및 수정할 수 있습니다.지속적 제공 CD빌드 자동화, 유닛 및 통합 테스트 수행 후 유효한 코드를 리포지토리에 자동으로 릴리스합니다. (CI가 먼저 구축되어있어야합..

인트로 라이브러리 없이 캐러셀을 구현하려고 합니다. 현재는 앞 뒤로 움직이는 버튼이 없이 자동으로 이미지가 오른쪽에서 왼쪽으로 스와이프 되는 모습입니다. 오른쪽에서 왼쪽으로 넘어가는 애니메이션이 없을 때는 버튼을 통해 이동할 수 있었으나 애니메이션을 추가했을 때 원하는 동작을 얻지 못해 제거하였습니다. 버튼은 다음에 추가할 예정입니다. 동작 모습 코드 전체코드 더보기 import { TMDB_IMG_URL, CAROUSEL_DELAY, CAROUSEL_LENGTH_LIMIT, CATEGORY, TRANSITION_TIME, } from '../../Assets/ConstantValue'; function Carousel() { const [imgArr, setImgArr] = useState(null);..

enum - 열거형enum Color { Red, Green, Blue,}Interface - 객체 구조 정의interface User { name: string; age: number;}타입 별칭type MyString = string;let str1: string = 'hello!';// string 타입처럼 사용할 수 있습니다.let str2: MyString = 'hello world!';클래스 - tsclass Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet(): void { console.log(`안녕..

타입기본적으로 boolean, number, string의 경우 다음의 형태로 타입을 선언해 사용할 수 있습니다.let 변수명: 변수타입 = 변수값;let name: string = "myname"; array는 두 가지 방법으로 배열 타입을 선언할 수 있습니다. 다음의 경우 배열 타입은 기본적으로 하나의 타입만 작성할 수 있습니다.//방법1let array: 타입[] = [선언한 타입을 가진 값1,선언한 타입을 가진 값2]let fruit: string[] = ['apple', 'banana', 'grape']//방법2let array: Array = [선언한 타입을 가진 값1,선언한 타입을 가진 값2]let numberList: Array = [96,7,17];Tuple 타입을 사용하여 요소의 타입과..

인트로 함수형 컴포넌트 렌더링 순서에 대해 다뤄봤습니다. 클래스 컴포넌트의 생명주기 클래스 컴포넌트의 생명주기에 대해 알고 가면 더 쉽게 이해할 수 있습니다. 📌 생명주기 순서 컴포넌트 실행 constructor() 실행 : 렌더링(DOM 생성) 이전에 수행되는 생성자 메서드 render() 실행 : 미리 구현한 HTML을 화면상에 보여줌 componentDidMount() 실행 : 렌더링이 수행된 이후에 실행됨 컴포넌트에 변화가 있을 때 componentDidUpdate() 실행 update가 발생하는 경우 props가 변경된 경우 state가 변경된 경우 부모 컴포넌트의 리렌더링 foreUpdate 강제로 변경하는 경우 컴포넌트가 제거될 때 componentWillUnmount() 실행 클래스형과 함..