Front End/Web
TDD 방법론
TDD(Test-driven Development)TDD를 사용하는 이유테스트 코드를 작성하는 방법React 환경에서 테스트하기React 기본 테스트 환경 확인직접 만든 컴포넌트 테스트하기CodeSandboxTDD(Test-driven Development)TDD는 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론이다. 개발자 자신이 바람직하다고 생각하는 코드의 결과를 미리 정의하고 이를 바탕으로 코드를 작성하는 방법으로, TDD를 통해 소프트웨어를 개발하는 것은 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미한다.TDD의 개발 주기TDD의 개발 주기를 그림으로 나타내면 위와 같이 총 3단계로 이루어진다.Write Failing Test : 실패하는..
AWS
Cloud Computing서비스의 형태AWS (Amazon Web Service)EC2 (Elastic Compute Cloud)Instance 생성 및 연결보안 그룹(Security Group)RDS (Relational Database Service)S3 (Simple Storage Service)정적 웹 사이트 호스팅 과정Deploy (배포)Deploy 시 주의점AWS를 이용한 Deploy 전략Cloud Computing클라우드 컴퓨팅은 여러 거대 기업에서 사용하는 데이터 센터의 유휴자원을 대여해 기존 방식으로 구축한 서버의 물리적인 한계와 리소스를 대신할 수 있는 기술이다. 현대의 클라우드 컴퓨팅은 가상화(Virtualization) 기술의 발달에 따라 물리적인 컴퓨터가 아닌 가상 컴퓨터를 대여..
최적화(__Optimization)__
JavaScript 파일 불러오기HTML 코드 파싱 중에 브라우저 이미지 최적화이미지 스프라이트클라이언트에서 서버 요청이 증가하면 로딩 시간은 점점 늘어난다. 간단한 아이콘이나 작은 이미지 요청을 위해 수십번의 요청을 보내는 것은 비효율적이기 때문에, 서버 요청 수를 줄이기 위해 사용하는 것이 이미지 스프라이트 기법이다. 네이버 메인 화면에서 사용하는 스프라이트 이미지이미지 스프라이트는 작은 아이콘이나 버튼 등을 한 이미지 파일에 모아서 저장하고, 실제 출력은 특정 요소에 width, height, background-image, background-position등의 스타일 속성을 사용하여 이미지를 삽입할 수 있다. 해당 기법을 이용하면 한 번의 이미지 요청으로 대부분의 개별 이미지를 사용할 수 있어 ..
브라우저 렌더링(리플로우, 리페인트)
🌐브라우저 렌더링브라우저 렌더링 과정파싱(Parsing)DOM TreeCSSOM Tree렌더 트리(Render Tree)레이아웃페인트리플로우(Reflow) / 리페인트(Repaint)리플로우와 리페인트의 최적화불필요한 레이아웃 줄이기CSS에서 레이아웃, 페인트를 발생시키는 속성들영향을 주는 노드 줄이기브라우저 렌더링브라우저 렌더링(rendering)이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미한다. 브라우저는 기본적으로 렌더링을 수행하는 렌더링 엔진을 가지고 있다.브라우저 렌더링 과정사용자가 브라우저를 통해 웹 사이트에 접속한다.브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 필요한 리소스를 다운받는다.렌더링 엔진은 전달받은 ..
반응형 웹
반응형 웹탄생 배경모바일 퍼스트(mobile first)반응형 웹의 장단점장점단점미디어 쿼리미디어 쿼리 적용법태그 속성을 이용한 적용법CSS 파일 또는 태그에서 직접 작성미디어 쿼리 구문복잡한 미디어 쿼리논리곱(and) 미디어 쿼리논리합(or) 미디어 쿼리부정(not) 미디어 쿼리반응형 웹반응형 웹이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트를 의미한다. 즉, 브라우저(스크린)의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미하며, 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론이기도 하다.반응형 웹은 위의 예시처럼 하나의 URL을 기반으로 화면이 바뀐다. 만약 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있다면 ..