분류 전체보기 (34) 썸네일형 리스트형 23. 자바스크립트 닌자코드 닌자 코드 🥷✨: 절대 하지 말아야 할 코딩 습관"닌자 코드"란 마치 닌자가 연막탄을 터뜨리고 사라지듯, 다른 사람이 절대 알아볼 수 없게 코드를 작성하는 것을 비꼬는 말입니다. 닌자 코드는 동료 개발자들에게 혼란을 주고, 유지보수와 디버깅을 악몽으로 만듭니다. 여기서는 피해야 할 닌자 코딩 스타일을 살펴보고, 올바른 코딩 방식도 함께 배워보겠습니다.1️⃣ 코드 짧게 쓰기 ✂️닌자 코드 스타일:삼항 연산자 ? :를 과도하게 사용해 짧게 쓴 코드:i = i ? i 문제점:읽기 어렵고, 디버깅하기 힘들다.조건문이 중첩될수록 가독성은 바닥으로 떨어진다.올바른 코드:가독성을 위해 명확한 조건문 사용:if (i) { if (i 설명:삼항 연산자는 짧고 간단한 조건에만 사용하세요.조건문이 복잡해질수록.. Jetpack Compose란? 목표Jetpack Compose의 개념을 이해하고, Android Studio에서 개발 환경을 설정한 후, 간단한 프로젝트를 통해 기본 동작을 확인합니다.1. Jetpack Compose란 무엇인가?Jetpack Compose는 안드로이드의 UI 툴킷으로, Kotlin 코드만으로 UI와 동작을 통합적으로 구현할 수 있습니다. 🛠️Jetpack Compose의 주요 특징기존 XML 파일 대신 Kotlin 코드로 UI를 작성함수 기반 UI 구성데이터 상태 변경 시 자동으로 UI 업데이트컴포저블 함수를 활용한 재사용성 높은 설계 가능2. 기존 View 시스템과의 차이점 및 Compose의 장점기존 View 시스템의 한계점 😟UI와 로직 분리: XML과 Kotlin/Java 코드로 나뉘어 복잡함.중복 코드:.. 22. 주석 주제: 주석(Comment) 작성의 예술 🎨1. 주석이란 무엇인가요? 🤔주석은 코드의 설명서입니다. 코드가 왜 이렇게 작성되었는지, 어떻게 동작하는지를 사람들에게 알려줍니다.하지만, 주석은 신중히 작성해야 하며, **"필요하지 않은 곳엔 주석을 남기지 않는 것이 더 좋은 주석이다"**라는 철학도 중요합니다.좋은 주석은 코드의 이해를 돕습니다.나쁜 주석은 코드의 가독성을 망칩니다.2. 나쁜 주석의 예 🛑나쁜 주석은 "코드 자체가 이미 말해주는 내용을 반복"하거나 "불필요한 정보를 포함"합니다.// 두 숫자를 더합니다let sum = a + b;🙅♀️ 왜 나쁜가요?코드를 읽어 보면 a + b가 두 숫자를 더하는 것을 바로 알 수 있습니다. 이런 주석은 쓸모없어요!3. 좋은 주석의 예 ✅좋은 주석은 .. 21. 코딩 스타일 가이드 누구나 따라하기 쉬운 깨끗한 코드 작성법목표좋은 코딩 스타일이 왜 중요한지 이해하기중괄호, 들여쓰기, 세미콜론 등 구체적인 규칙 배우기ESLint와 같은 자동화 도구 활용법 익히기1. 왜 코딩 스타일이 중요한가?정리된 방 vs 엉망인 방정리된 방: 필요한 물건을 쉽게 찾을 수 있고 사용하기도 편리하다.엉망인 방: 물건을 찾으려면 시간이 걸리고, 사용하기도 어렵다.코드는 마치 방처럼, 정리된 스타일로 작성하면 유지보수와 협업이 훨씬 쉬워진다.2. 중괄호의 사용법기본 규칙여는 중괄호는 같은 줄에 작성, 앞엔 공백 한 칸한 줄짜리 if 구문도 가독성을 위해 중괄호 사용 추천코드 예제// 올바른 예제: 깔끔한 중괄호 사용function feedDragon(food) { if (!food) { consol.. Vim 단축키 정리 기능단축키설명이동 커서 이동h왼쪽으로 이동 j아래로 이동 k위로 이동 l오른쪽으로 이동단어 단위 이동w다음 단어의 시작으로 이동 e현재 또는 다음 단어의 끝으로 이동 b이전 단어의 시작으로 이동줄의 처음과 끝으로 이동0줄의 처음으로 이동 ^줄의 첫 번째 비어 있지 않은 문자로 이동 $줄의 끝으로 이동화면 이동Ctrl-d화면 아래로 반 페이지 이동 Ctrl-u화면 위로 반 페이지 이동 Ctrl-f화면 아래로 한 페이지 이동 Ctrl-b화면 위로 한 페이지 이동특정 위치로 이동G파일의 끝으로 이동 gg파일의 처음으로 이동 :nn번째 줄로 이동 (:10 → 10번째 줄로 이동)입력 모드 입력 모드 시작i현재 커서 위치에서 입력 모드 시작 I줄의 처음에서 입력 모드 시작 a현재 커서 위치 다음에서 입력 모드.. 20. chrome 개발자 도구 디버깅 방법 꼭 사용해야 하는 건 아니지만, chrome 개발자 도구를 잘 알아두면 디버깅에 많은 도움이 된다.‘Sources’ 패널Chrome을 사용해 페이지를 연다.F12(MacOS: Cmd+Opt+I)를 눌러 개발자 도구를 연다.Sources 탭을 클릭 패널(panel)을 연다.Open file을 클릭 해당하는 파일을 클릭한다.토글 버튼 을 누르면 navigator가 열리면서 현재 사이트와 관련된 파일들이 나열된다.파일 목록에서 디버깅 하려는 js 파일을 클릭Sources 패널은 크게 세 개의 영역으로 구성된다.파일 탐색 영역 – 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여준다.Chrome 익스텐션도 여기에 표시된다 코드 에디터 영역 – .. 19. 기본문법 요약 기본문법 요약코드 구조자바스크립트의 코드 구조는 구문과 세미콜론을 중심으로 구성됩니다. 다음은 주요 특징입니다:세미콜론 사용여러 구문은 세미콜론으로 구분됩니다. 줄바꿈만으로도 구문을 구분할 수 있지만, 정확성을 위해 세미콜론을 사용하는 것이 좋습니다.alert('Hello'); alert('World');alert('Hello') alert('World')세미콜론 자동 삽입줄바꿈으로 구문이 구분될 경우, 브라우저가 세미콜론을 자동으로 삽입합니다. 그러나 일부 경우, 자동 삽입이 예상대로 동작하지 않을 수 있습니다.alert("이 메시지가 출력된 후 에러가 발생합니다.")[1, 2].forEach(alert)// 위 코드는 아래와 같이 해석됩니다:alert("이 메시지가 출력된 후 에러가 발생합니다.")[.. 18. 화살표 함수 (Arrow Functions) 화살표 함수는 ES6에서 도입된 문법으로, 함수 표현식보다 간결하고 단순한 방식으로 함수를 작성할 수 있습니다.일반적인 함수 표현식과 비교하여 문법에 차이가 있습니다.1. 기본 문법화살표 함수는 function 키워드를 제거하고, 파라미터 리스트와 함수 본문 사이에 화살표(⇒)를 추가한 형태입니다.기본 형태// 함수 표현식let func = function(arg1, arg2, ...argN) { return expression;};// 화살표 함수let func = (arg1, arg2, ...argN) => expression;function 키워드 제거: 화살표로 대체.자동 반환: 중괄호 없이 표현식으로 작성하면 return이 없어도 결과값이 자동으로 반환됩니다.예제// 일반 함수 표현식let s.. 이전 1 2 3 4 5 다음
