진주의 개발괴발

📌 CORS 정책 교차 출처 리소스 공유(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 콘텐츠의 출처(Origin) : URL의 스킴(프로토콜), 호스트(도메인), 포트 동일 출처란 스킴, 호스트, 포트가 모두 일치하는 출처를 말한다. 백엔드에 프론트엔드 도메인 허용 요청을 해두고 응답 헤더에 필요한 값을 전달받아야 한다. 📌 Proxy : CORS 정책 위반 에러를 회피하는 방법 중 하나이다. 프록시는 요청이 동일한 출처에서 온 것처럼 속여준다. 따라서 CORS 에러가 나지 않는다. Proxy 사용 방법 React 라이브러리, Webpack Dev Server에 Proxy 기..

📌 CI/CD 간단 정의 CI : 지속적인 통합 (Continuous Integration) 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합된다. 즉, 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 충돌하는 문제를 해결할 수 있다. CD : 지속적인 서비스 제공 (Continuous Delivery), 지속적인 배포 (Continous Deployment) CD는 지속적인 서비스 제공과 지속적인 배포 두 가지를 의미하며 두 용어는 상호 교환적으로 사용된다. 두 가지 의미 모두 파이프라인의 추가 단계에 대한 자동화를 뜻하지만 때로는 얼마나 많은 자동화가 이루어지고 있는지를 설명하기 위해 별도로 사용되기도 한다. 📌 지속적 통합 ..

⭐ Lighthouse 시작하기 1. chrome 개발자 도구에서 실행 2. Node CLI에서 실행 npm install -g lighthouse -g 옵션을 사용하여 전역 모듈로 설치하는 것을 권장한다. lighthouse // 검사 실행 명령어 💬 Lighthouse 분석 결과 항목 1. Performance 웹 성능 측정 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인한다. 2. Accessibility 웹 접근성 확인 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인한다. 3. Best Practices 웹 표준 모범 사례에..

📌 번들 : 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 📌 번들링의 필요성 1. 변수 간 충돌에 대처할 수 있다. 2. 코드를 최적화 할 수 있다. 3. 배포 코드를 읽기 어렵게 하여 개발을 할 줄 아는 사용자가 애플리케이션을 임의로 조작하지 못하게 한다. 📌 webpack : 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용되는 모듈 번들러 공식문서 모듈 번들러 : HTML, CSS, Javascript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구 모듈 번들러가 생긴 이유 모던 웹으로 발전하며 Javascript 코드의 양이 증가했고, 대규모 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장하므로써 세분화된 모듈 파일도 증가했다. 그러면서 ..

IP(인터넷 프로토콜) IP는 지정한 IP주소 (IP Address)에 패킷(Packet)이라는 통신 단위로 데이터 전달을 합니다. IP 패킷 Packet(패킷) : Pack + bucket 소포에 비유할 수 있다. IP패킷은 출발지 IP,목적지 IP와 같은 정보가 포함되어 있습니다. 패킷 단위로 전송을 하면 노드들은 목적지 IP에 도달하기 위해 서로 데이터를 전달합니다. 서버에서 무사히 데이터를 전송받는다면 서버도 이에 대한 응답을 돌려줘야 합니다. 서버 역시 IP패킷을 이용해 클라이언트에 응답을 전달합니다. IP 한계점 비연결성 1. 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송 : 클라이언트는 서버의 상태를 파악할 방법이 없기 때문에 패킷을 그대로 전송하게 된다. 비신뢰성 1. 중간에 ..

1. 네트워크의 시작 지금 우리가 사용하는 인터넷 프로토콜, 즉 IP 기반의 네트워크는 미 국방성에서 1969년 진행했던 아르파넷(ARPANET) 프로젝트에서 시작되었습니다. 이 프로젝트는 당시 냉전시대에서 핵전쟁을 대비하기 위한 통신망 구축을 위해 추진되었습니다. 이떼 기존에 사용되었던 회선교환 방식이 아닌 패킷교환 방식으로 네트워크를 구축하게 되는데 이를 토대로 현재의 인터넷 통신 방식의 기반이 세워졌습니다. 회선교환 방식 회선교환 방식은 발신자와 수신자 사이에 데이터를 전송할 전용선을 미리 할당하고 둘을 연결합니다. 그래서 내가 연결하고 싶은 상대가 다른 상대와 연결 중이라면, 상대방은 이미 다른 상대와의 전용선과 연결되어 있기 때문에 그 연결이 끊어지고 나서야 상대방과 연결할 수 있습니다. 또한 ..

📌 웹 표준 웹 : 문서, 이미지, 영상 등 정도를 타인과 공유할 수 있는 공간 웹 표준 짧은 설명 : 브라우저 간 호환을 위해 웹 개발의 형식을 통일 시킨 것 정의 : W3C(World Wide Web Consrtium)에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙' 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다. 웹 개발에서 사용되는 언어인 HTML, CSS JavaScript 등의 기술을 다룬다. 웹 표준의 장점 1. 유지 보수의 용이성 HTML, CSS, JavaScript의 영역이 분리되며 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과가 생겼다. 2. 웹 호환성..

📌 useRef : 요소의 주소값을 담아 사용할 수 있게 돕는 함수 DOM 노트, 엘리먼트, React 컴포넌트 주소값 참조 가능 언제 사용할까? ref를 생성하는 방법에는 createRef도 있지만 이는 함수형 컴포넌트에서 작동하지 않음 따라서 함수형 컴포넌트일 때 useRef 사용 상태를 관리하며 리렌더링 되지 않게 하고 싶을 때 (동영상 재생 바를 리렌더링 하면 안 됨) 리렌더링 되어도 동일한 참조값 유지할 때 사용 사용방법 const 주소값을_담는_그릇 = useRef(참조자료형) // 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다. return ( {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/} {/* 주소값을_담는_그릇 변수에는..

📌 Component Driven Development (CDD) : 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식 (상향식 개발) ◽ 구조화된 CSS의 필요성이 대두되며 생긴 CSS 전처리기 CSS 전처리기(CSS Prepocessor) : CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 전처리기에 맞는 컴파일러를 사용하여 웹 서버가 인지할 수 있게 변환함 문제점 : 전처리기 내부 작업을 생각하지 않고, 스타일 겹치는 문제를 해결하기 위해 계층구조를 만들어 CSS 파일 용량 커짐 ◽ CSS 전처리기 문제 보완하는 방법론들 CSS 방법론들의 공통 지향점 코드의 재사용 코드의 간결화 (유지 보수 용이) 코드의 확장성 코드의 예측성 (클래스 명으로 의미 예측) 문제점 클래스명 선택자가 장황해졌음..

📌 와이어프레임 (Wireframe) : 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지의 구조를 잡기 위한 목적으로 만듭니다. 피델리티(fidelity) :와이어프레임, 프로토타입의 품질 수준을 전문용어로 표현한 것이며 3가지 레벨로 나뉩니다. 1. Low Fidelity Wireframe(Lo-Fi Wireframe) : 손으로 빠르게 그린 수준의 와이어프레임 작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉬움 아이디어 구체화, 큰 그림을 잡을 때 유리 2. Middle Fidelity Wireframe(Mid-Fi Wireframe) : Lo-Fi 와이어프레임을 그리며 아이디어 구체화하고 확정된 후에 보기 좋게 다듬은 와이어프레임 와이어프레임을 ..