공부하자 공부 공부하자 공부

CI / CD란? CI : 개발자를 위한 자동화 프로세스인 지속적인 통합을 의미한다. CD : 지속적인 서비스 제공 및 지속적인 배포를 의미한다. 지속적 통합(Continuous Integration, CI) 개발자를 위한 자동화 프로세스(Code - Build - Test) Code : 개발자가 작성한 코드를 원격 저장소에 push하는 단계 Build : 원격저장소에 있는 코드를 가져와 유닛 테스트후 빌드하는 단계 Test : 빌드의 결과물이 다른 컴포넌트와 잘 통합되는지 확인하는 과정 지속적인 통합 과정을 통해 보안 이슈, 에러 등을 쉽게 파악할 수 있으며 해당 이슈를 빠르게 개선할 수 있다. 지속적 배포(Countinuous Delivery / Deployment, CD) 지속적인 서비스 제공 및 ..

Light house Lighthouse는 구글에서 개발한 어떤 웹페이지라도 품질 검사를 할 수 있는 오픈소스이다. 개발자도구, CLI, 노드 모듈 등 다양한 경로로 사용할 수 있다. 위의 사진과 같이 결과에 따른 리포트를 생성하고 개발자는 리포트를 기반으로 웹페이지를 개선할 수 있다. Light house의 분석 결과 항목 1. Performance(성능) 웹의 성능을 측정하며 콘텐츠가 표시되는데 걸리는 시간, 표시된후 사용자와 상호작용하기까지 걸리는 시간, 등을 확인한다. 2. Accessibility(접근성) 웹이 접근성을 잘 갖추고 있는지 확인하며 대체 택스트가 잘 작성되어있는지, 배경색과 콘텐츠 색상의 대비가 충분한지 등을 확인한다. 3. Best Practices(권장사항) 웹 페이지가 웹 표..

Webpack이란? 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링 하는 도구이다, webpack에서 모듈은 js뿐만 아니라 HTML, CSS와 이미지 파일들도 전부 포함하는 개념이다. Webpack의 필요성 웹 어플리케이션의 빠른 로딩 속도와 높은 성능을 위해서다. 코드의 양이 많아지면 많아질수록 웹페이지의 로딩 속도와 성능이 느려진다. Webpack의 핵심 개념 Entry //기본 값 module.exports = { ... entry: "./src/index.js", }; //지정 값 module.exports = { ... entry: "./src/scr..

HTML 웹 페이지를 구성하는 마크업 언어 tag (부등호로 묶인 HTML의 기본 구성 요소)의 집합 트리구조 (부모와 자식으로 구성) 자주 사용하는 HTML의 요소 한 줄을 차지한다. 콘텐츠의 크기만큼 차지한다. 이미지 삽입할 때 쓰인다. src = '경로' alt = '대체 택스트' 링크를 삽입할때 쓰인다. href = '경로' 새창으로 띄우고 싶다면 target = '_blank' 속성 추가 & 리스트를 작성할 때 쓰인다. ul 대신 ol을 사용하면 li에 자동으로 넘버링이 된다. 데이터를 입력할 때 쓰인다. type 속성에 여러 값을 넣어 여러 가지 형태의 input태그를 만들 수 있다.(text, radio, password, checkbox) placeholder 속성을 사용하여 input안에..

변수 let num; //변수 선언 num = 10; //변수 할당 // 선언과 할당 동시에 let num = 10; // undefined 자동 할당 let str; //undefined // 재할당 let num = 10; num = 5; //5 데이터 보관함에 데이터를 저장하고 변수의 이름으로 데이터를 불러올 수 있다. 데이터 보관함에 이름을 달아주는 것을 변수의 선언이라고 한다. 데이터 보관함에 데이터를 저장하는 것을 변수의 할당이라고 한다. 변수의 선언과 할당은 같이 할 수 있다. 아무것도 할당하지 않는 변수는 undefined가 자동으로 할당된다. 할당되어 있는 변수에 새로운 값을 할당할 수 있다. = 재할당(const로 할당한 값은 재할당 불가) 변수 네이밍 규칙 //문자, 숫자, 언더스코어..

웹 표준 웹 개발자들이 각 브라우저마다 따로 개발을 해야 하는 수고를 없애기 위해 웹 개발 형식을 통일시킨 것 W3C (https://www.w3.org/)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙 웹 표준 준수시 장점 1. 유지 보수의 용이성 웹 표준을 준수하며 웹 페이지를 작성하면 유지 보수가 용이해지며 코드가 경량화되며 트래픽이 감소하는 효과가 생긴다. 2. 웹 호환성 확보 웹 표준을 준수하여 웹사이트를 제작하면 어떤 운영체제든, 어떤 브라우저든 사용하는 기기와는 관계없이 동일한 결과를 얻을 수 있다. 3. 검색 효율성 증대 검색 엔진은 HTML의 요소 등을 보고 정보의 중요도를 파악하여 표출해주며 웹 표준에 맞춰 작성하면 검색엔진의 더 높은 우선순위에 노출될 수 있다. 4. 웹 접근성..

Redux 전역 상태를 관리할 수 있는 저장소인 Store를 제고 상태를 저장했다가 바로 전달하기 때문에 props driling해결, 불 필요한 리렌더링 해결 Redux는 React에서 사용하는 것이라고 생각할 수 있지만, React 없이도 사용할 수 있는 상태 관리 라이브러리 Redux의 상태 관리 순서 상태가 변경되어야하는 이벤트가 발생하면 변경될 상태에 대한 정보가 담긴 Action 객체 생성 Action 객체는 Dispatch 함수의 인자로 전달 Dispatch 함수는 Action 객체를 Reducer 함수로 전달 Reducer 함수는 Action의 객체의 값을 확인하고 그 값에 따라 전역 상태 저장소 Store의 상태를 변경 상태가 변경되면 React는 화면을 다시 렌더링 ★ Redux에서는 ..

함수 논리적인 일련의 작업을 하는 하나의 단위 가장 작은 기능의 단위 함수를 사용한다는 것은 특정한 코드실행 과정을 하나의 묶음으로 묶어서 필요할 때마다 호출하여 실행한다는 것 (함수의 정의) 함수 외부에서 입력값을 주어 함수를 호출할 수 있다. 호출하게 되면 함수 내부의 코드블록에 있는 코드가 실행되고 실행 결과를 함수 외부로 반환하게 된다. 함수 선언문과 함수 표현식 // 함수 선언문 function func () { // 코드 } // 함수 표현문 const func = function () { // 코드 } 함수 선언문은 function으로 함수를 선언 함수 표현식은 변수에 함수를 할당하여 표현 함수 호출 function func () { // 코드 } // 함수 호출 func() 함수는 함수를 ..