바닐라 코드/Java Script (23) 썸네일형 리스트형 23. 자바스크립트 닌자코드 닌자 코드 🥷✨: 절대 하지 말아야 할 코딩 습관"닌자 코드"란 마치 닌자가 연막탄을 터뜨리고 사라지듯, 다른 사람이 절대 알아볼 수 없게 코드를 작성하는 것을 비꼬는 말입니다. 닌자 코드는 동료 개발자들에게 혼란을 주고, 유지보수와 디버깅을 악몽으로 만듭니다. 여기서는 피해야 할 닌자 코딩 스타일을 살펴보고, 올바른 코딩 방식도 함께 배워보겠습니다.1️⃣ 코드 짧게 쓰기 ✂️닌자 코드 스타일:삼항 연산자 ? :를 과도하게 사용해 짧게 쓴 코드:i = i ? i 문제점:읽기 어렵고, 디버깅하기 힘들다.조건문이 중첩될수록 가독성은 바닥으로 떨어진다.올바른 코드:가독성을 위해 명확한 조건문 사용:if (i) { if (i 설명:삼항 연산자는 짧고 간단한 조건에만 사용하세요.조건문이 복잡해질수록.. 22. 주석 주제: 주석(Comment) 작성의 예술 🎨1. 주석이란 무엇인가요? 🤔주석은 코드의 설명서입니다. 코드가 왜 이렇게 작성되었는지, 어떻게 동작하는지를 사람들에게 알려줍니다.하지만, 주석은 신중히 작성해야 하며, **"필요하지 않은 곳엔 주석을 남기지 않는 것이 더 좋은 주석이다"**라는 철학도 중요합니다.좋은 주석은 코드의 이해를 돕습니다.나쁜 주석은 코드의 가독성을 망칩니다.2. 나쁜 주석의 예 🛑나쁜 주석은 "코드 자체가 이미 말해주는 내용을 반복"하거나 "불필요한 정보를 포함"합니다.// 두 숫자를 더합니다let sum = a + b;🙅♀️ 왜 나쁜가요?코드를 읽어 보면 a + b가 두 숫자를 더하는 것을 바로 알 수 있습니다. 이런 주석은 쓸모없어요!3. 좋은 주석의 예 ✅좋은 주석은 .. 21. 코딩 스타일 가이드 누구나 따라하기 쉬운 깨끗한 코드 작성법목표좋은 코딩 스타일이 왜 중요한지 이해하기중괄호, 들여쓰기, 세미콜론 등 구체적인 규칙 배우기ESLint와 같은 자동화 도구 활용법 익히기1. 왜 코딩 스타일이 중요한가?정리된 방 vs 엉망인 방정리된 방: 필요한 물건을 쉽게 찾을 수 있고 사용하기도 편리하다.엉망인 방: 물건을 찾으려면 시간이 걸리고, 사용하기도 어렵다.코드는 마치 방처럼, 정리된 스타일로 작성하면 유지보수와 협업이 훨씬 쉬워진다.2. 중괄호의 사용법기본 규칙여는 중괄호는 같은 줄에 작성, 앞엔 공백 한 칸한 줄짜리 if 구문도 가독성을 위해 중괄호 사용 추천코드 예제// 올바른 예제: 깔끔한 중괄호 사용function feedDragon(food) { if (!food) { consol.. 20. chrome 개발자 도구 디버깅 방법 꼭 사용해야 하는 건 아니지만, chrome 개발자 도구를 잘 알아두면 디버깅에 많은 도움이 된다.‘Sources’ 패널Chrome을 사용해 페이지를 연다.F12(MacOS: Cmd+Opt+I)를 눌러 개발자 도구를 연다.Sources 탭을 클릭 패널(panel)을 연다.Open file을 클릭 해당하는 파일을 클릭한다.토글 버튼 을 누르면 navigator가 열리면서 현재 사이트와 관련된 파일들이 나열된다.파일 목록에서 디버깅 하려는 js 파일을 클릭Sources 패널은 크게 세 개의 영역으로 구성된다.파일 탐색 영역 – 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여준다.Chrome 익스텐션도 여기에 표시된다 코드 에디터 영역 – .. 18. 화살표 함수 (Arrow Functions) 화살표 함수는 ES6에서 도입된 문법으로, 함수 표현식보다 간결하고 단순한 방식으로 함수를 작성할 수 있습니다.일반적인 함수 표현식과 비교하여 문법에 차이가 있습니다.1. 기본 문법화살표 함수는 function 키워드를 제거하고, 파라미터 리스트와 함수 본문 사이에 화살표(⇒)를 추가한 형태입니다.기본 형태// 함수 표현식let func = function(arg1, arg2, ...argN) { return expression;};// 화살표 함수let func = (arg1, arg2, ...argN) => expression;function 키워드 제거: 화살표로 대체.자동 반환: 중괄호 없이 표현식으로 작성하면 return이 없어도 결과값이 자동으로 반환됩니다.예제// 일반 함수 표현식let s.. 17. 함수 표현식 함수는 값이다JavaScript에서 함수는 값으로 취급됩니다.이는 다른 프로그래밍 언어와의 중요한 차이점이며, JavaScript를 유연하게 만들어주는 강력한 기능입니다. 함수가 값이라는 점은 함수를 다른 변수에 할당하거나, 함수의 인수로 전달하거나, 반환값으로 사용할 수 있음을 의미합니다.함수를 만드는 방법JavaScript에서는 함수를 만드는 두 가지 주요 방법이 있습니다.1. 함수 선언(Function Declaration)함수를 독립적인 구문으로 정의하는 방식입니다.이 방식은 코드 실행 전에도 함수가 미리 준비되므로 **호이스팅(hoisting)**됩니다.// 함수 선언function sayHi() { alert("Hello");}sayHi(); // Hello2. 함수 표현식(Function .. 16. 함수 함수(Function): 코드의 재사용성과 가독성을 높이는 비밀 무기함수는 반복적으로 사용되는 코드를 효율적으로 관리하는 도구로, 개발자들이 생산성을 높이고 유지보수를 간편하게 만들 수 있도록 돕습니다. 한 번 정의하면 여러 곳에서 호출해 재사용할 수 있으며, 잘 작성된 함수는 코드의 가독성을 크게 향상시킵니다.함수 선언 방식함수는 function 키워드를 사용해 선언합니다. 이름, 매개변수, 그리고 실행될 코드를 작성하면 됩니다.문법function 함수명(매개변수1, 매개변수2) { // 여기에서 매개변수를 사용해 작업을 수행합니다. console.log("이 함수는 매우 쓸모있습니다!");}예시: 안부를 전하는 함수function sayHello() { console.log("안녕하세요, 코딩 .. 15. switch문 if 조건문과 switch문의 비교 및 활용if 조건문은 다양한 조건을 처리하는 데 유용하지만, 조건이 많아질수록 가독성이 떨어지고 유지보수가 어려워질 수 있습니다. 이를 해결하기 위해 switch문을 활용할 수 있습니다. switch문은 특정 변수의 값을 여러 경우에 비교하고, 각 경우에 따라 코드를 실행할 수 있는 구조를 제공합니다.문법switch문은 case문과 선택적으로 사용할 수 있는 default문으로 구성됩니다. 각 case문은 특정 조건을 만족할 때 실행될 코드를 포함하며, break문을 사용해 실행을 종료할 수 있습니다.switch (변수) { case 값1: // 변수 === 값1 // 실행할 코드 break; case 값2: // 변수 === 값2 // 실행할 코드 break;.. 이전 1 2 3 다음
