차례[숨다][보여 주다]
- 1. 기본 지식 향상
- 2. 객체 지향 전략을 활용하라
- 3. 작은 기능이라도 활용하라
- 4. == 대신 === 사용
- 5. JSLint 사용
- 6. 스크립트는 페이지 하단에 위치해야 합니다.
- 7. 문자열을 만드는 가장 빠른 방법
- 8. 코드에 주석 추가
- 9. 템플릿 리터럴 사용
- 10. 반복자와 for ... of 루프
- 11. new Object() 대신 {} 사용
- 12. let과 const를 코드에 넣는 것을 고려하십시오.
- 13. eval()은 좋은 생각이 아니다
- 14. 스프레드 연산자가 유용합니다.
- 15. 대기 및 비동기
- 16. 자바스크립트에서 included() 메소드 사용
- 17. Splice를 사용하여 배열에서 항목 제거
- 18. 화살표 기능 활용하기
- 19. Destructuring을 사용하면 변수 값을 빠르게 할당할 수 있습니다.
- 20. 여러 프로젝트 만들기
- 결론
웹 개발에 관심이 있었다면 JavaScript를 접했을 것입니다. 객체 지향 프로그래밍 언어는 JavaScript입니다. 개발자는 이를 사용하여 웹 페이지의 클라이언트 측(프론트 엔드)을 동적이고 대화식으로 만듭니다.
또한 HTML 및 CSS를 사용하여 웹 페이지 및 웹 앱을 만드는 데 사용됩니다. 요즘 인터넷에는 JavaScript 코드가 없는 웹 페이지가 없습니다. 그것은 개발자의 일에서 떼려야 뗄 수 없는 부분이 되었습니다.
꾸준히 증가하고 있는 것이 사실입니다. JavaScript는 웹 페이지에 기능을 제공하는 것으로 가장 잘 알려져 있지만 JavaScript가 아닌 환경에서도 사용됩니다. Node.js, Apache Couch-DB 및 Adobe Acrobat이 이러한 기술의 예입니다. JavaScript를 실행하기 위해 대부분의 최신 웹 브라우저에는 JavaScript 실행 엔진이 내장되어 있습니다. 성공적인 웹 개발자가 되려면 JavaScript를 다루어야 합니다.
오늘이나 내일 해결해야 합니다. JavaScript를 미리 배워 시간이 되었을 때 대비하는 것이 어떻습니까?
이것이 이 세션에서 배울 내용입니다. JavaScript를 연마하여 동료 웹 개발자보다 한 발 앞서 나가는 방법을 설명합니다.
의 시작하자!
1. 기본 지식 향상
나는 당신이 어렸을 때부터 들었던 정말 기본적인 생각과 말부터 시작하겠습니다. 기본을 배우고 실천하세요. 많은 경우 코딩으로 논리를 적용할 것이지만 배열 분할과 같은 내장 함수가 이미 있다는 사실을 잊어버릴 것입니다. JavaScript 코드를 실행할 때 오류가 발생할 수 있으며 결과적으로 많은 추가 기능이 작동을 멈춥니다.
이것은 단일 콜론이나 역 쉼표로 인해 발생할 수 있습니다. 이러한 일들은 기본에 대한 이해 부족의 결과로 발생합니다. 단일 프로그램에서 여러 번 for, which, do while과 같은 기본 루프가 사용됩니다. 루프는 가장 기본적인 프로그래밍 구성 중 하나입니다.
코딩하기가 상당히 어렵고 루핑 및 기타 기본 사항에 익숙하지 않은 경우 회사에서 일할 기회조차 없습니다. 솔루션의 복잡한 논리와 평판을 개발할 수 있는 견고한 기반을 제공하기 때문에 기본 사항을 닦는 것이 중요합니다.
2. 객체 지향 전략을 활용하라
객체 지향 방식은 오늘날 가장 잘 알려진 프로그래밍 방식입니다. C++로 시작된 객체 지향 접근 방식은 그 이후로 엄청난 인기를 얻었습니다. 오늘날에는 모든 주요 언어를 생성하는 데 객체 지향 프로그래밍만 사용됩니다. 객체 지향 전략은 특정 객체에 초점을 맞춘 전략입니다.
그러면 항목이 기본 개체가 됩니다. 그런 다음 이 개체를 사용하여 기본으로 페이지에 속성과 기능을 추가합니다. 함수나 객체 없이 위에서 아래로 코드를 생성하는 전통적인 방법을 사용할 수도 있습니다. 이것은 너무 광범위하므로 시도해서는 안 됩니다. 코드를 개발할 때는 기능적 접근을 해야 하고, 기능을 사용할 때는 객체를 사용해야 합니다.
따라서 처음에는 광범위한 코드를 객체 지향 코드로 변환하기 위해 노력하고 항상 객체 지향 스타일로 코드를 작성하십시오. 다른 사람의 코드를 연구할 때 객체 지향 기술을 계속 보게 될 것입니다. JavaScript를 마스터하고 싶다면 손을 잡는 것이 가장 좋습니다.
3. 작은 기능이라도 활용하라
기능적 접근 방식으로 프로그래밍하는 것은 훌륭한 방법입니다. 왜요? 소프트웨어를 함께 작동하지만 여전히 서로 구별되는 모듈로 분리합니다. 이해를 돕기 위해 예를 들어보겠습니다.
정수의 Root Mean Square는 함수를 사용하여 계산할 수 있습니다. 그렇게 하려면 정수를 제곱하고 평균을 계산한 다음 평균의 제곱근을 계산해야 합니다. 이 과정에는 세 단계가 있습니다. 결과적으로 세 가지 기능을 사용할 수 있습니다. 하지만 보시다시피 이 모든 기능은 서로 연결되어 있습니다. 하나의 출력은 다른 것으로 전송되고 우리는 궁극적인 결과를 받습니다.
여러 요소를 기반으로 RMS를 계산하기 위해 세 개의 함수 대신 하나의 함수가 필요하다고 가정해 보겠습니다. 보시다시피 최종 솔루션은 올바르지 않습니다. 이 시점에서 그러한 큰 사건에서 무엇이 잘못되었는지 결정하는 것은 상당히 어려울 것입니다.
반면에 세 가지 작은 기능을 사용하면 빠르게 분석할 수 있습니다. 결과적으로 기능이 적절하지 않더라도 이를 활용하여 고유한 코드 모듈을 정의하십시오. 이 기술은 마법과 같은 JavaScript 전문가가 되는 데 도움이 됩니다.
이제 몇 가지 JavaScript 코딩 팁을 살펴보겠습니다.
4. == 대신 === 사용
JavaScript에는 두 가지 유형의 항등 연산자가 있습니다. 완전 항등 연산자 === 및 !==, 비엄격 항등 연산자 == 및 !=. 비교할 때 항상 정확한 평등을 사용하는 것이 모범 사례로 간주됩니다. 하지만 == 및 !=로 작업할 때 고유한 종류를 처리할 때 문제가 발생합니다.
비교하는 값의 유형이 다른 경우 엄격하지 않은 연산자는 값을 강제 변환하려고 하므로 예기치 않은 결과가 발생할 수 있습니다.
5. JSLint 사용
Douglas Crockford는 디버거인 JSLint를 만들었습니다. 스크립트를 상자에 넣으면 버그나 결함이 있는지 신속하게 검사합니다.
JSLint는 JavaScript 소스 파일을 검사합니다. 문제가 발견되면 문제에 대한 설명과 소스 내 대략적인 위치가 포함된 메시지를 보냅니다. 문제가 항상 구문 오류는 아니지만 자주 발생합니다.
JSLint는 문체 규범과 구조적 문제를 모두 검사합니다. 귀하의 소프트웨어가 정확하다는 의미는 아닙니다. 문제 감지를 돕기 위해 또 다른 눈을 추가할 뿐입니다. 스크립트에서 사인오프하기 전에 JSLint를 통해 실행하여 실수가 없는지 확인하십시오.
6. 스크립트는 페이지 하단에 위치해야 합니다.
사용자의 주요 목표는 페이지를 가능한 한 빨리 로드하는 것입니다. 브라우저는 전체 파일이 로드될 때까지 스크립트를 계속 로드할 수 없습니다. 결과적으로 사용자는 진행 상황을 보려면 더 오래 기다려야 합니다.
기능을 제공하는 용도로만 사용되는 JS 파일이 있는 경우(예: 버튼을 눌렀을 때) 페이지 하단의 닫는 본문 태그 바로 앞에 파일을 넣으십시오. 이것은 의심할 여지 없이 최고의 관행입니다.
7. 문자열을 만드는 가장 빠른 방법
배열이나 객체를 순환해야 하는 경우 항상 신뢰할 수 있는 for 루프 문을 사용하지 마십시오. 당신의 상상력을 사용하여 당면한 작업에 대한 가장 빠른 솔루션을 생각해내십시오. 나는 당신에게 숫자를 가져오지 않을 것입니다. 당신은 단순히 나를 신뢰해야 할 것입니다 (또는 자신을 위해 테스트).
이것은 지금까지 가장 빠른 기술입니다.
8. 코드에 주석 추가
처음에는 무의미하게 보일 수 있지만 가능한 한 자주 코드에 주석을 달아야 한다고 말씀드리니 저를 믿으십시오. 몇 달 후에 프로젝트로 돌아와 원래의 사고 과정을 기억할 수 없다면 어떻게 될까요?
동료 중 한 명이 코드를 업데이트해야 하는 경우 어떻게 해야 합니까? 코드의 중요한 부분에는 항상 주석을 달아야 합니다.
9. 템플릿 리터럴 사용
큰따옴표나 작은따옴표로 만든 문자열의 제약 조건은 많습니다. 훨씬 쉽게 작업하기 위해 일부 문자열을 템플릿 리터럴로 바꿀 수 있습니다.
백틱 문자(')는 여러 가지 장점이 있는 템플릿 리터럴을 작성하는 데 사용됩니다. 이를 사용하여 표현식을 저장하거나 여러 줄 문자열을 작성할 수 있습니다.
보시다시피 작은따옴표나 큰따옴표로 구성된 기존의 문자열 리터럴과 달리 템플릿 리터럴을 반복적으로 들락날락할 필요가 없었습니다. 이것은 입력 실수의 가능성을 최소화하고 더 깨끗한 코드를 작성할 수 있게 합니다.
10. 반복자와 for ... of 루프
반복자는 다음 값을 시퀀스에 저장하는 객체를 반환하는 next() 메서드를 구현하는 JavaScript의 객체이며 더 이상 값이 남아 있는지 여부에 따라 true 또는 false입니다. 즉, 반복자 프로토콜을 구현하면 고유한 반복자 개체를 빌드할 수 있습니다.
JavaScript에는 String, Array, Map 등과 같은 내장 반복자가 있습니다. for ... of 루프를 사용하여 루프를 반복할 수 있습니다. 일반적인 for 루프와 비교할 때 이것은 더 간결하고 오류가 발생하기 쉽습니다. for…of 루프를 사용하여 배열의 전체 길이나 현재 인덱스를 추적할 필요가 없습니다. 중첩 루프를 설계할 때 코드를 단순화하는 데 도움이 될 수 있습니다.
11. new Object() 대신 {} 사용
JavaScript에서는 다양한 방법으로 객체를 만들 수 있습니다. 표시된 대로 새 생성자를 사용하는 것이 더 일반적인 방법입니다. 반면에 이 전략은 "부실한 관행"으로 표시됩니다.
그것은 파괴적이지 않지만 약간 말투가 독특하고 독특합니다. 대신 객체 리터럴 기술을 사용하는 것이 좋습니다.
12. let과 const를 코드에 넣는 것을 고려하십시오.
let 키워드를 사용하여 자체 블록으로 범위가 지정된 지역 변수를 만들 수 있습니다. const 키워드를 사용하여 변경할 수 없는 로컬 블록 범위 변수를 구성할 수 있습니다.
변수를 선언할 때 적용 가능한 경우 let 및 const 키워드를 사용하는 것을 고려해야 합니다. const 키워드는 재할당만 비활성화한다는 것을 기억하십시오. 변수를 변경할 수 없게 만드는 것도 아닙니다.
13. eval()은 좋은 생각이 아니다
eval() 메서드를 사용하면 JavaScript 컴파일러에 액세스할 수 있습니다. 기본적으로 eval을 사용하여 문자열을 입력()으로 제공하여 문자열의 결과를 실행할 수 있습니다.
이렇게 하면 스크립트 속도가 크게 느려질 뿐만 아니라 전달된 텍스트에 너무 많은 권한을 부여하기 때문에 심각한 보안 문제도 발생합니다. 무슨 수를 써서라도 그것을 피하십시오!
14. 스프레드 연산자가 유용합니다.
배열의 모든 항목을 개별 요소로 다른 함수에 전송해야 하거나 한 배열의 모든 값을 다른 배열에 넣어야 하는 경우가 있습니까? 이것이 바로 스프레드 연산자(…)가 달성할 수 있는 것입니다. 여기 삽화가 있습니다.
15. 대기 및 비동기
명시적이든 암시적이든 항상 약속을 반환하는 async 키워드를 사용하여 비동기 함수를 만듭니다.
await 키워드는 반환되는 약속의 해결이 완료될 때까지 실행을 중지하기 위해 비동기 함수에서 사용할 수 있습니다. 비동기 함수 외부에서 코드는 계속 정상적으로 실행됩니다.
16. 자바스크립트에서 included() 메소드 사용
JavaScript에서 Include() 함수는 문자열에 제공된 문자가 포함되어 있는지 또는 배열에 지정된 요소가 포함되어 있는지 확인합니다.
이 메서드는 문자열이나 요소가 발견되면 true를 반환합니다. 그렇지 않으면 false를 반환합니다. Strings contains() 함수는 대소문자를 구분한다는 점을 언급할 가치가 있습니다. 대소문자에 관계없이 문자열을 일치시키려면 먼저 대상 텍스트를 소문자로 지정하십시오.
17. Splice를 사용하여 배열에서 항목 제거
배열에서 항목을 제거하기 위해 개발자가 삭제 기능을 사용하는 것을 보았습니다. 이는 개체를 삭제하는 대신 delete 메서드가 개체를 정의되지 않은 것으로 대체하기 때문에 잘못된 것입니다.
JavaScript에서 값에 따라 배열에서 요소를 제거하는 가장 쉬운 방법은 indexOf() 함수를 사용하여 배열에서 해당 값의 인덱스 번호를 가져온 다음 splice() 메서드로 해당 인덱스 값을 삭제하는 것입니다.
18. 화살표 기능 활용하기
화살표 함수는 JavaScript에 방금 추가된 또 다른 중요한 기능입니다.
그들은 장점이 많습니다. 우선 JavaScript의 기능적인 부분을 시각적으로 더 매력적으로 만들고 작성하기 쉽게 만듭니다. 그러나 화살표 기능을 사용하면 훨씬 더 읽기 쉽고 간결해집니다.
19. Destructuring을 사용하면 변수 값을 빠르게 할당할 수 있습니다.
이 게시물의 앞부분에서 JavaScript의 스프레드 연산자에 대해 배웠습니다. Destructuring은 배열에 포함된 데이터의 압축도 풀 수 있다는 점에서 Destructuring과 유사합니다.
차이점은 이러한 압축 해제된 값을 고유한 변수에 할당할 수 있다는 것입니다. 구문은 배열을 구성할 때 [] 단축키와 동일합니다. 그러나 대괄호는 이번에는 할당 연산자의 왼쪽에 배치됩니다. 여기 삽화가 있습니다.
20. 여러 프로젝트 만들기
모든 재능은 일관된 연습이 필요하므로 다양한 프로젝트를 구성하여 능력을 연마하고 다양한 프로그래밍 시나리오를 통해 전문 지식을 얻으십시오.
프로젝트에서 작업하는 동안 필요한 전문 지식을 제공할 몇 가지 문제와 결함을 경험하게 됩니다. 따라서 프로젝트를 생각해 내고 인터넷에 많은 아이디어와 예제가 있으므로 도움이 됩니다. 코드를 계속 개발하면 능력이 향상됩니다.
결론
JavaScript와 같은 컴퓨터 언어를 배우는 것은 어려울 수 있습니다. 훌륭한 프로그래머가 되고 첫 직장을 확보하는 것에 대해 진지하게 생각하고 있다면 이 JavaScript 학습 전략이 학습 과정의 속도를 높이는 데 도움이 될 수 있습니다.
정기적으로 코딩을 연습하고, 새로운 아이디어를 배우면서 철저하게 메모하고, 접근 가능한 모든 도구를 활용하십시오. 무엇보다 나가서 즐겁게 코딩을 시작하세요.
댓글을 남겨주세요.