Proxy에 대해 알아보자 Proxy는 CORS 정책을 우회할 수 있는 React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 기능입니다. 이 기능이 필요한 이유를 알려면 CORS 정책이 필요한 이유를 먼저 알아야 합니다. CORS 정책이 필요한 이유가 뭘까요 ? 브라우저에서 API를 요청할 때는 브라우저의 현재 주소와 API 주소의 도메인이 일치해야만 데이터를 접근할 수 있습니다. 만약 다른 도메인에서 API를 요청해서 사용할 수 있게 하려면 CORS 설정이 필요합니다. 로컬 환경에서 개발한 앱은 기본적으로 localhost:3000 으로 시작합니다. 그러나, 나중에 로컬 환경에서 개발한 실제 서비스 및 프로젝트의 클라이언트에서 서버의 API로 요청하게 되면,이 포트로 요청하는 것이..
CI/CD 알아보기 CI/CD란 ? CI/CD의 "CI"는 개발자를 위한 자동화 프로세스인 지속적인 통합을 의미한다. CI/CD의 "CD"는 지속적인 서비스 제공 및/또는 지속적인 배포를 의미한다. 즉, CI/CD는 소프트웨어 개발 및 배포 프로세스를 자동화하여 개발자들이 소프트웨어를 더 빠르고 안정적으로 제공할 수 있게 해주는 방법이다. 지속적 통합(Continuous Integration, CI) 지속적 통합으로 보안 이슈, 에러 등을 쉽게 파악할 수 있어 해당 이슈를 빠르게 개선할 수 있다. Code - Build - Test 단계 Code : 개발자가 코드를 원격 코드 저장소에 push하는 단계 Build : 원격 코드 저장소로부터 코드를 가져와 유닛 테스트 후 빌드하는 단계 Test : 코드 빌..
HTTP 특징 클라이언트 서버 구조 무상태 프로토콜, 비연결성 무상태 프로토콜 장점 : 서버 확장성 높음 / 단점 : 클라이언트가 추가 데이터 전송 비 연결성 요청을 주고받을 때만 연결을 유지, 응답을 주고 나면 TCP/IP 연결을 끊음으로써 최소한의 자원으로 서버 유지가 가능 HTTP 메세지 단순함, 확장가능 HTTP Headers의 종류와 특징 표현 헤더 HTTP 메시지 : 헤더 / 바디로 구분이 가능 HTTP 바디 : 데이터 메시지 본문을 통해서 표현 데이터를 전달한다. 페이로드 : 데이터를 실어 나르는 부분 📷 표현 헤더 형식 주요 요청 헤더 From: 유저 에이전트의 이메일 정보 Referer: 이전 웹 페이지 주소 User-Agent: 유저 에이전트 애플리케이션 정보 Host: 요청한 호스트 ..
인터넷 프로토콜 IP는 출발지와 목적지의 정보를 IP 주소라는 특정한 숫자값으로 표기하고 패킷단위로 데이터를 전송하는 것 패킷교환 방식 패킷이라는 단위로 데이터를 잘게 나누어 전송하는 방식 특정 회선이 전용선으로 할당되지 않기 때문에 빠르고 효율적으로 데이터를 전송할 수 있다. IP/IP Packet IP는 지정한 IP 주소(IP Address)에 패킷(Packet)이라는 통신 단위로 데이터 전달한다. IP 패킷에서 패킷은 pack과 bucket이 합쳐진 단어이다. / IP 패킷은 이를 데이터 통신에 적용한 것 IP한계 비연결성 패킷을 받을 대상이 없거나 서비스 불능 상태여도 클라이언트는 서버의 상태를 파악할 방법이 없기 때문에 패킷을 그대로 전송 비신뢰성 중간에 있는 서버가 데이터를 전달하던 중 장애가..
웹이란 공간으로 정의가 가능 문서,이미지,영상 등 다양한 정보를 여러사람들과 공유할 수 있는 공간 웹 표준이란, W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’이다. 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹페이지 제작 기법을 담고 있음 HTML, CSS, JavaScript 등의 기술을 다룸 (화면의 구조,표현,동작을 각각 담당) 웹 표준 장점 유지 보수의 용이성 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과 웹 호환성 확보 웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 ..
와이어프레임(wireframe) 와이어프레임은 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 한다. 전환 효과나 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX를 판단하는 것이 아니라 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이다. 와이어프레임을 표현할때의 품질 수준을 전문용어로 피델리티로 표현하며 3가지 레벨이 나뉜다. Low Fidelity Wireframe (Lo-Fi Wireframe) 손으로 빠르게 그린 수준의 와이어프레임을 Lo-Fi 와이어프레임이라고 한다. Middle Fidelity Wireframe (Mid-Fi Wireframe) Lo-Fi 와이어프레임을 그리면서 아이디어가 어느 정도 구체화되고 확정된 후에 보기 좋게 다듬어주면 Mid-..
UI (User Interface, 사용자 인터페이스)알아보기 UI 란, 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템도 UI를 의미한다. 대부분의 UI는 GUI(Graphical User Interface, 그래픽 사용자 인터페이스)를 의미한다. GUI : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 UI 디자인 패턴 모달 : 화면 위에 오버레이 되는 창 토글 : On/Off를 설정할 때 사용하는 스위치 버튼 탭 : 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴 태그 : 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할 자동완성 : 말 그대로 사용자가 내용을 입..
SOP / CORS 기본 개념 알아보기 SOP - SOP의 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주기 때문에 생겨났다. - SOP의 동일 출처 정책이란 말은 같은 출처의 리소스만 공유가 가능한 정책이다. 출처는 프로토콜, 호스트, 포트 3가지 조합으로 되어있다. 3가지 조합 중 하나라도 다르면 동일한 출처로 보지 않는다. SOP은 이러한 보안상 이점 때문에 SOP은 모든 브라우저에서 기본적으로 사용하고 있는 정책이다. CORS - CORS는 SOP이 다른 출처의 리소스 공유를 막는 것을 CORS를 이용하여 접근 권한을 얻을 수 있기 위해 생겨났다. - CORS는 교차 출처 리소스 공유를 뜻한다. 교차 출처 리소스 공유는 추가 HTTP 헤더를 사용하여..
