문자열 관련 메소드(String Method) javascript에서 문자열을 사용할 때 자주 사용하는 methods charAt : index에 해당하는 위치의 문자를 반환 const str = 'Hello World' console.log(str.charAt(0))// H console.log(str.charAt(5))// ' ' console.log(str.charAt(10))// d console.log(str.charAt(11))// '' indexOf : 인자로 전달된 문자 or 문자열이 처음 나타나는 위치의 index를 반환 const str = 'Hello World' console.log(str.indexOf('H'))// 0 console.log(str.indexOf('l'))// 2 ..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Publish 1. Publish Platform 웹 애플리케이션 배포 플랫폼에는 여러 종류가 있다. Microsoft Azure, Gitbub Pages, Vercel, AWS, Netlify, Heroku 등 여러 플랫폼이 존재하며 Google 검색 시 배포 방법을 확인 할 수 있다. 여기서는 Netlify 를 통한 배포 방법에 대해 설명하고 추가로 이전에 AWS를 사용하여 PHP 웹 애플리케이션을 배포했던 예제 링크를 참조하였다. . 🔎 Netlify 1. netlify 회원가입 netlify 홈페이지에서 회원가입을 진행한다. Develop and deploy websites a..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Testing 3. Test Pyramid 🔎 마틴 파울러 Test Pyramid 각 단계는 인수 테스트(UI) - 통합 테스트(Integration) - 단위 테스트(Unit) 로 구성되는데, 밑으로 내려 올 수록 더 많은 테스트 코드를 작성하라는 뜻을 가지고 있다. 단위 테스트 (Unit Test) 추상적이지만 가장 작은 단위로 기능을 나누어 그 기능을 테스트하는 기법. 단위의 크기가 작을수록 복잡성이 낮아져서 테스트하기가 더 용이해진다. 따라서, 테스트 대상 단위의 크기를 작게 설정해서 단위 테스트를 최대한 간단하고 디버깅하기 쉽게 작성해야 한다. 통합 테스트 (Integerat..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Testing 2. CI / CD 🔎 CI (Continuous Integration) CI란 빌드/테스트 자동화 과정으로 지속적인 통합(Continuous Integration)을 의미한다. CI를 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트 되어 공유 리포지토리에 통합되어 여러 개발자가 동시에 작업할 경우 발생할 수 있는 충돌 문제를 해결할 수 있다. CI의 실행은 소스/버전 관리 시스템에 대한 변경 사항을 정기적으로 커밋하여 모든 사람에게 동일 작업 기반을 제공하는 것으로 시작한다. 커밋할 때마다 빌드와 일련의 자동 테스트가 이루어져 동작을..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Testing 1. Good Test Principles 🔎 소프트웨어 테스팅 7가지 원칙 1. 테스트는 결함이 존재함을 밝히는 활동이다. 소프트웨어에 대해 테스트 완료 및 발견된 이슈를 모두 해결하여도 결함이 없다는 것을 증명할 수 있는 것은 아니며, 이슈가 발견되지 않았다고 해서 결함이 없다는 것이 증명되지 않는다. 테스트는 프로그램의 결함이 없음을 보장하는 것이 아니라, 결함이 존재함을 밝히기 위한 활동이다. 2. 완벽한 테스팅은 불가능하다. 매우 단순한 소프트웨어가 아닌 이상 내부조건, 입력값, 타이밍에 대한 모든 조합을 확인할 수 없다. 따라서 테스트 대상의 리스크 분석 후에..
JAVASCRIPT 코드 품질을 높여주는 JS 함수 🔎 Debounce debounce 함수는 일련의 빠른 이벤트가 반복적으로 함수를 활성화 하는 것을 방지하는 역할을 한다. 이벤트가 실행되지 않은 채로 일정 시간이 경과할 때까지 이벤트를 실행시키지 않고 함수의 실행을 연기하는 방식으로 동작한다. debounce 함수는 사용자가 버튼을 빠르게 클릭했을 때 함수들이 실행되는 것을 방지하여 성능을 향상하는 방식으로 아주 유용한 해결책이다. // JS에서 debounce 구현 function debounce(func, delay) { let timeout return function() { const context = this const args = arguments clearTimeout(timeout) t..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Tools 2. Package Manager 🔎 npm & yarn npm과 yarn은 Node.js 의 패키지 관리자로 전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스에 올리면 npm, yarn 과 같은 패키지 관리자를 통해 설치 및 삭제가 가능하다. 그리고 명령 줄 인터페이스(CLI)를 통해 패키지 설치 및 삭제뿐 아니라 패키지 버전 관리, 의존성 관리도 편리하게 할 수 있다. npm npm 은 Node Package Manager의 줄임말로 노드를 설치할 떄 자동으로 설치되는 기본 패키지 관리자. 사람들이 노드 패키지를 만들고, 업로드하고, 공..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Tools 2. Module Bundler 🔎 Module 애플리케이션의 크기가 커지면 개발하는 과정에서 파일을 여러개로 분리하게 되는데 여기서 분리된 각각의 파일을 모듈(module) 이라 한다. 모듈화의 필요성 기능의 분리가 가능하고 인터페이스가 단순해진다. 하나의 파일에 많은 기능들을 작성하면 코드 파악이 힘들고 관리가 어려워진다. 따라서 기능별로 파일을 분리하여 관리할 필요성이 있다. 각 모듈은 자신만의 스코프를 보장해준다. 하나의 파일에서 모든 코드를 관리하면 변수나 함수명이 중복되거나 다른 기능의 코드끼리 서로 영향을 끼칠 수 있다. 이러한 문제를 해결하기 위해 기능별로 여..
JAVASCRIPT Event Loop 자바스크립트는 싱글 스레드로, 한 번에 한 가지 일만 할 수 있다. 일반적으로 이는 큰 문제가 되지 않지만 30초가 걸리는 일을 수행한다고 생각했을 때 이는 30초동안 아무것도 할 수 없는 상태가 된다는 것이다. 다행히, 브라우저는 자바스크립트 엔진에서는 제공하지 않는 Web API (DOM API, setTimeout, HTTP request)를 지원한다. 이러한 Web API들은 비동기, non-block 동작을 만드는데 도움을 준다. 우리가 함수를 실행하면, 그 함수는 call stack에 추가된다. 콜 스택은 자바스크립트 엔진의 한 부분이며, 브라우저에만 한정된 것은 아니다. 이것은 선입후출의 스택으로 함수가 값을 반환하면 그 함수는 스택에서 빠져나와 사라진..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Tools 1. Version Control System 🔎 Git Git은 소프트웨어를 개발하는 기업의 핵심 자산인 소스코드를 효과적으로 관리할 수 있게 해주는 무료, 공개 소프트웨어 https://phoenixnap.com/kb/how-git-works 장점 소스코드를 주고 받을 필요 없이, 같은 파일을 여러 명이 동시에 작업하는 병렬 개발이 가능하다. 즉 브랜치를 통해 개발한 뒤, 본 프로그램에 합치는 방식(Merge)으로 개발을 진행할 수 있다. 분산 버전관리이기 때문에 인터넷이 연결되지 않은 곳에서도 개발을 진행할 수 있으며, 중앙 저장소가 날아가버려도 다시 원상복구할 수 있..
