📍GitHub Action 이란? GitHub Actions는 Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다. 레포지토리에서 Pull Request 나 push 같은 이벤트를 트리거로 GitHub 작업 워크플로(Workflow)를 구성할 수 있다. 워크플로는 하나 이상의 작업이 실행되는 자동화 프로세스로, 각 작업은 자체 가상 머신 또는 컨테이너 내부에서 실행되며 테스트, 배포 등 기능에 따라 여러 개의 워크플로도 만들 수 있다. 생성된 워크플로는 .github/workflows 디렉터리에 yml (혹은. yaml ) 파일로 저장된다. 📍YAML 이란? Yet Another Markup Language의 약자로, 사람이 읽을 수 있는 데이터 ..

📍LightHouse란? LightHouse는 웹페이지의 성능을 측정해주고 개선책을 제공해주는 자동화 도구입니다. 개발자는 Lighthouse의 검사 결과를 기반으로 웹페이지의 품질을 개선 할 수 있습니다. Lighthouse는 Chrome DevTools부터 CLI, 노드 모듈 등 다양한 경로를 통해 사용할 수 있습니다. 검사할 페이지의 url을 Lighthouse에 전달하면 Lighthouse는 해당 페이지에 대한 여러 검사를 실행합니다. 📍Lighthouse 사용 2020년 5월 19일 Lighthouse 버전 6.0 배포 이후 Chrome 개발자 도구에서 Lighthouse가 들어왔습니다. 검사하고 싶은 페이지에서 개발자 도구를 엽니다. Lighthouse 탭으로 들어옵니다. Analyze pag..

📌웹 표준 웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고있습니다. 2000년대 초에는 브라우저간 호환이 되지 않아서 화면이 아예 정상적으로 나오지 않는 일도 있었습니다. 이러한 상황을 막고 웹을 정상적으로 구동시키기 위해서는 개발자들이 각 브라우저마다 따로 개발을 해주어야만 했습니다. 이런 수고를 없애고 웹 개발의 형식을 통일 시킨 것이 바로 웹 표준입니다. 최신 웹 브라우저들은 모두 웹 표준을 지원합니다. 따라서 웹 표준에 따라 웹 페이지를 작성하면 사용자가 어떤 브라우저를 사용하든..

컬럼 그리드 시스템 Margin 가로가 좁은 스마트폰 특성상 양쪽 여백이 10px로 좁게 들어갔습니다. 홈 탭의 마지막 카드 콘텐츠는 마진을 넘겨서 보여줌으로서 다음 콘텐츠에 대한 궁금증을 자극하여 가로로 스크롤을 유발하도록 했습니다. Column 스마트폰에 맞는 표준적인 컬럼 갯수인 4개를 사용해서 제작되었습니다. 컬럼에 맞게 버튼과 컨텐츠들이 대칭적으로 잘 정렬되어 있습니다. Gutter 버튼들 사이에 Gutter는 넓게 주어서 각 버튼을 구분하는 느낌을 주었습니다. 카드 컨텐츠 사이는 버튼보다 좁에 만들어서 각 주제별로 묶인 콘텐츠들이 독립적으로 보이지않게 했습니다. 전체적으로 스마트폰에 잘 맞는 배치를 가지고 각 아이템들이 잘 정돈되어 있다고 판단됩니다. 추가적으로 화면 크기에 변화에 유연하게 대..

UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템. GUI(Graphical User Interface)와 물리적 UI를 모두 포함하지만 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미한다. UX(User Experience, 사용자 경험)는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험 UI와 UX의 관계 UX는 UI를 포함한다. 하지만 좋은 UI가 항상 좋은 UX를 보장하지는 않는다. UX에 영향을 주는 이 많은 요소 중에 프론트엔드 개발자에게 가장 중요한 요소는 바로 UI다. 좋은 프론트엔드 개발자라면 제품이나 서비스의 UI가 사용자로 하여금 가능하면 좋은 UX를 가질 수 있도록 해야한다. UI/UX 사용..