전체 글
인트로 오늘은 클라이언트에서 프록시를 설정하여 CORS 오류를 방지하는 실습을 진행했습니다. 간단하게 package.json을 통해 설정할 수도 있지만 이번 포스트에서는 http-proxy-middleware를 사용해 여러 개의 도메인에서 응답을 받아오는 경우를 다뤄보겠습니다. 설정 npm install http-proxy-middleware //src/setupProxy.js const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = (app) => { app.use( "/api", createProxyMiddleware({ target: "http://localhost:3080", changeOrigin: t..
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!'; 클래스 - ts class 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는 두 가지 방법으로 배열 타입을 선언할 수 있습니다. 다음의 경우 배열 타입은 기본적으로 하나의 타입만 작성할 수 있습니다. //방법1 let array: 타입[] = [선언한 타입을 가진 값1,선언한 타입을 가진 값2] let fruit: string[] = ['apple', 'banana', 'grape'] //방법2 let array: Array = [선언한 타입을 가진 값1,선언한 타입을 가진 값2] let numberList: Array = [96,7,17]; Tuple 타입을 사용..
인트로 함수형 컴포넌트 렌더링 순서에 대해 다뤄봤습니다. 클래스 컴포넌트의 생명주기 클래스 컴포넌트의 생명주기에 대해 알고 가면 더 쉽게 이해할 수 있습니다. 📌 생명주기 순서 컴포넌트 실행 constructor() 실행 : 렌더링(DOM 생성) 이전에 수행되는 생성자 메서드 render() 실행 : 미리 구현한 HTML을 화면상에 보여줌 componentDidMount() 실행 : 렌더링이 수행된 이후에 실행됨 컴포넌트에 변화가 있을 때 componentDidUpdate() 실행 update가 발생하는 경우 props가 변경된 경우 state가 변경된 경우 부모 컴포넌트의 리렌더링 foreUpdate 강제로 변경하는 경우 컴포넌트가 제거될 때 componentWillUnmount() 실행 클래스형과 함..
Cookie 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각. 브라우저는 쿠키를 저장해 놓았다가, 동일한 서버에 재 요청 시 쿠키를 함께 전송합니다. 쿠키를 사용하면 상태 정보를 기억할 수 있습니다. 쿠기의 주목적 세션관리 : 서버에 저장해야할 로그인, 장바구니, 게임 스코어 등의 정보 관리 개인화 : 사용자 선호, 테마 등 세팅 트래킹 : 사용자 행동 기록 및 분석 용도 Session 서버가 Client에 유일하고 암호화된 session id를 부여합니다. 중요 데이터는 서버에서 관리합니다. Token 인증과 권한 정보를 담고 있는 암호화된 문자열을 말합니다. 유저의 인증 상태를 클라이언트에 저장할 수 있습니다. OAuth 2.0 소셜 로그인 인증 방식을 구현할 수 있습니다. OAuth는 인증..