인트로오늘은 클라이언트에서 프록시를 설정하여 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가 먼저 구축되어있어야합..

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 타입을 사용하여 요소의 타입과..

Cookie 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각. 브라우저는 쿠키를 저장해 놓았다가, 동일한 서버에 재 요청 시 쿠키를 함께 전송합니다. 쿠키를 사용하면 상태 정보를 기억할 수 있습니다. 쿠기의 주목적 세션관리 : 서버에 저장해야할 로그인, 장바구니, 게임 스코어 등의 정보 관리 개인화 : 사용자 선호, 테마 등 세팅 트래킹 : 사용자 행동 기록 및 분석 용도 Session 서버가 Client에 유일하고 암호화된 session id를 부여합니다. 중요 데이터는 서버에서 관리합니다. Token 인증과 권한 정보를 담고 있는 암호화된 문자열을 말합니다. 유저의 인증 상태를 클라이언트에 저장할 수 있습니다. OAuth 2.0 소셜 로그인 인증 방식을 구현할 수 있습니다. OAuth는 인증..

웹 표준란? 웹 표준은 '웹에서 표준적으로 사용되는 기술이나 규칙'입니다. 운영체제, 브라우저의 종류 및 버전이 다르더라도 웹페이지가 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법입니다. 웹 표준의 장점 유지 보수가 편하다. 영역이 분리되면서 유지 보수가 편해졌으며, 코드가 경량화되면서 트래픽 비용이 감소했습니다. 웹 호환성 확보 검색 효율성 증대 검색 엔진에서 더 높은 우선순위로 노출됩니다. 웹 접근성 향상 Semantic HTML , 보다 시멘틱 요소를 사용하자. 시맨틱 요소를 사용하면 요소의 이름만 보고도 어떤 역할을 하며 어떠한 내용이 들어갈 지 명확히 알 수 있습니다, - ~ 요소를 말함 시멘틱 HTML은 다음에 도움을 줍니다. 개발자 간 소통 검색 효율성 검색 엔진은 HTML 코드를 ..

FLUX 패턴? FLUX패턴은 단방향 데이터 흐름을 통해 예측가능하게 상태를 관리할 수 있게 해주는 클라이언트 사이드 웹 애플리케이션 아키텍처입니다. 기능에 따라 코드를 구성하여 각 구성요소가 독립적으로 작동하는 것을 목표로 하는 MVC패턴과 달리 FLUX패턴은 엄격한 단방향 데이터 흐름을 통해 데이터 흐름을 예측 가능하도록 하는 것이 목표입니다. FLUX패턴의 흐름 FLUX패턴은 ACTION, DISPATCHER, STORE, VIEW로 구성됩니다. 이때 흐름은 다음 그림과 같습니다. ACTION : Ajax나 View에서 발생한 상태 변경 요청 액션 생성자는 타입(type)과 페이로드(payload)를 포함한 액션을 생성합니다. 액션 생성자가 액션 메시지를 생성한 뒤에는 디스패쳐(dispatcher)..

인트로 오늘은 UI/UX에 대해 배웠습니다. 평소에 공부하고 싶었지만 다른 공부가 급급하여 못하고 있었는데 이렇게 따로 유닛으로 있으니까 좋네요. 바로 가봅시다. UI/UX란? UI(User Interface, 사용자 인터페이스)는 사람과 컴퓨터 사이의 상호 작용하는 시스템(시각적인 요소)을 말합니다. 화면상의 터치뿐만 아니라 키보드, 마우스, 버튼 등 물리적 요소도 UI입니다. GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 사용자가 그래픽을 통해 컴퓨터와 소통하는 방식 CLI(Command Line Interface) 글자 입출력을 통해 사용자가 컴퓨터와 소통하는 방식 NUI(Natural User Interface) 신체 움직임으로 직접적으로 소통하는 방식 NUI는 ..