본문 바로가기

전체 글

CI/CD, Github action 먼저 CI/CD가 무엇인지 알아보도록 하자! CI/CD는 약어로, 몇 가지의 다른 의미를 가지고 있다. CI/CD의 "CI"는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미하는데, CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있다. CI/CD의 "CD"는 지속적인 서비스 제공(Continuous Delivery) 및/또는 지속적인 배포(Continuous Deployment)를 의미한다. 이 두 용어는 상호 교환적으로 사용됩니다. 두 가지 의미 모두 파이.. 더보기
Lighthouse Lighthouse란! 구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴이다. 검사할 페이지의 url을 Lighthouse에 전달하면 Lighthouse는 해당 페이지에 대한 여러 검사를 실행하는데 Lighthouse는 성능, 접근성, PWA, SEO 등을 검사하고 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있다. Lighthouse는 Chrome DevTools부터 CLI, 노드 모듈 등 다양한 경로를 통해 사용할 수 있다. 검사를 실행 시키면 이런 화면이 나오게 된다. 하는법! 크롬에서 검사하고 싶은 페이지의 url을 입력한다. 개발자 도구를 들어간다. lighthouse 탭을 클릭한다. 분석결과 보기! 1. Performance Performance 항목에서는.. 더보기
번들링과 웹팩 프론트엔드 개발에서 번들링은 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정이라고 한다. 번들링이 무엇이냐! 번들링은 여러 자원들을 하나로 묶는것이다. 번들링을 쓰는 이유 같은 타입의 파일을 묶어서 요청/응답 받아 네트워크 코스트를 줄어들게 하기 위함이다. Webpack Webpack이란! 여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 말 한다. (애플리케이션 배포를 위해 가장 많이 쓰는 번들러이라 한다.) Webpack에서의 모듈 js의 모듈에만 국한되지 않고 HTML이나 CSS 혹은. jpg,. png 같은 이미지 파일도 전부 포함한 개념이다. Webpack의 필요성 Webpack은 웹 페이지의 코드 양을 줄여 웹 애.. 더보기
웹 표준과 웹 접근성 웹 표준과 웹 접근성에 대해 알아보자! 웹 표준 흔히 웹과 인터넷이 같다고 혼동할 수 있지만 두개는 다르다. 인터넷 보다 웹이 더 포괄적인 개념이다. 인터넷은 전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망이지만 웹은 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 말 한다. 웹을 한마디로 하지만 공간이라 할 수 있다. 다양한 정보를 다른 사람들과 공유할 수 있는 '공간' 인 것이다. 웹 표준은 W3C 웹에서 표준적으로 사용되는 기술이나 규칙을 말 한다. 사용자가 어떤 브라우저나 운영체제를 써도 동일한 결과를 낼 수 있게 해 준다! 웹 표준 4가지 장점 유지 보수의 용이성 : 웹 표준으로 JS, CSS, HTML이 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경.. 더보기
React 상태관리! 상태란? 상태는 변하는 데이터이다. 특히 UI, 프런트엔드 개발에서는 동적으로 표현되는 데이터이다! 웹 사이트를 보면 상태를 찾아볼 수 있다. 데이터가 동적인 "쇼핑몰 장바구니에 추가"나 선택된 탭이 무엇인지 알려주는 탭이나 상품의 선택여부, 상품의 수량도 상태라고 할 수 있다. 이번에는 Side Effect에 대해 보자! SIde Effect는 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인이다. 대표적인 예로은 네트워크 요청을 들 수 있다. React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것이다. 각 컴포넌트는 API요청이 없어도 작동이 잘 되어야 한다. 하지만 앱을 만들다 보면 Side Effect는 불가피하게 생기게 된다. 그래서 쉽게 상태를 관리하기 .. 더보기
[React] Custom Component 2 Styled Components 란 ? CSS in JS 개념(컴포넌트 단위에 캡슐화)이 대두되면서 나온 라이브러리이다. CSS in JS 를 사용하면 CSS도 Js 안에 넣어줄 수 있기 때문에 HTML , JS , CSS를 묶어서 하나의 JS파일안에 컴포넌트 단위로 개발할수 있게 된다! (개쩌러) CSS in JS 중에서도 다른 라이브러리도 있지만 가장 인기있다고 하는 Styled Components의 사용법에 대해 알아보자. Styled Components 사용법! npm install --save styled-components 로 설치를 해준다. 그리고 Styled Componets는 package.json에 { "resolutions": { "styled-components": "^5" } } .. 더보기
[React] Custom Component 1 먼저 CDD에 대해 알아보자. CDD(Component Driven Development) 란 무엇이냐! 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 말한다. CDD를 왜 알아야 하냐면 같은 컴포넌트를 가진 ui를 만들지 않고 전에 만들었던 것을 재활용 할 수 있기 때문이다. 구조적인 CSS 작성 방법 및 발전 인터넷이 나오고 사용자들이 다양한 환경에서 인터넷을 사용하고 발전하면서 CSS 작성 방법 또한 함께 발전했다. 하지만 CSS를 작성하는 일관된 패턴 없이 다양한 디바이스를 커버해야 했기에 CSS는 더 복잡해졌고 이런 문제를 해결하기 위해 CSS 전처리기(CSS Prepricessor) 라는 개념이 등장했다. CSS 전처리기(CSS Prepricessor) CSS가 구조적으로 작성될 수 있게 .. 더보기
UI/UX UI는 User interface 사용자 인터페이스 이다. 사용자가 컴퓨터와 상호작용하는 시스템을 의미한다. 화면상의 그래픽 요소 외에도 키보드, 마우스 등의 물리적인 요소도 ui에 포함된다. 이전에는 CLI 즉 키보드를 이용해서 텍스트로 상효작용을 했는데 요즘에는 GUI 그래픽으로 상요작용 하는것이 중요한 역할을 하고있다. UX는 User experience 사용자 경험을 말 한다. 사용자가 써보고 느끼고 생각한 총체적 경험을 말 한다. 내구성이 약해 잘 망가진다던가 as같은 사후 처리에 관한것도 총체적 경험에 포함된다. 이런 UX에서 프론트엔드 개발자에게 가장 중요한것은 UI를 만드는 것이다. 좋은 UX를 위해 좋은 UI를 만드는것이라 말 할 수 있다. UI디자인 패턴에 대해 알아보자! UI디자인 패.. 더보기

티스토리툴바