<출처> 시니어 개발자들이 공통적으로 얘기하는 효율적인 프로그래밍 방법 - JSCODE 박재성

개발자 도구(Developer Tools)는 웹 브라우저에 내장되어 있는 도구로, 개발자들이 웹 페이지를 디버깅하고, 분석하고, 최적화하는데 사용

1. 요소 검사(Inspect Element): 웹 페이지의 HTML과 CSS를 실시간으로 확인하고 수정할 수 있습니다. 이는 디자인 변경을 미리보거나, 문제를 찾아 해결하는데 유용합니다.

2. 콘솔(Console): 자바스크립트 코드를 실행하고, 에러와 경고를 확인할 수 있습니다. 또한, 페이지에서 발생하는 로그를 확인하거나, 디버깅 정보를 출력할 수 있습니다.

3. 네트워크(Network): 웹 페이지가 서버와 어떻게 통신하는지 분석하고, 로드 시간을 최적화하거나, 네트워크 요청을 모니터링할 수 있습니다.

4. 소스(Source): 웹 페이지의 소스 코드를 확인하고, 디버깅할 수 있습니다. 또한, 브레이크포인트를 설정하여 코드의 실행 흐름을 제어할 수 있습니다.

5. 퍼포먼스(Performance): 페이지의 렌더링 성능과 실행 성능을 프로파일링하고, 최적화할 수 있습니다.

6. 메모리(Memory): 메모리 누수를 찾거나, 메모리 사용량을 분석할 수 있습니다.

7. 어플리케이션(Application): 웹 스토리지, 쿠키, 웹 워커, 서비스 워커 등을 관리하고 검사할 수 있습니다.    

   📌 인터넷 프로토콜

      

   📌 프레임워크와 라이브러리

      

   📌 API와 서비스

      

   📌 IDE

      

   참고자료

   • VScode 단축키
   • 웹 개발을 위한 익스텐션 추천

📌 Internet (Inter + network)

전 세계 컴퓨터 네트워크가 서로 연결되어 정보와 데이터를 주고받을 수 있는 거대한 네트워크 시스템    

📌 웹서버

웹 서버(Web Server)는 인터넷을 통해 사용자의 웹 브라우저에 웹 페이지나 웹 관련 데이터를 제공하는 컴퓨터 시스템 또는 소프트웨어    

📌 웹사이트, 웹페이지, 웹브라우저

웹사이트 (Website)

웹사이트는 인터넷상에 공개된, 연관된 웹페이지들의 모음입니다.

웹사이트는 일반적으로 특정 도메인 이름을 가지며, 특정 주제나 목적을 가진 정보를 제공합니다. 예를 들어, 학교, 정부 기관, 뉴스 채널, 온라인 쇼핑몰 등이 자신들의 웹사이트를 갖고 있습니다.

웹페이지 (Webpage)

웹페이지는 웹사이트를 구성하는 개별적인 문서로, 보통 HTML(HyperText Markup Language)로 작성됩니다.

각 웹페이지는 고유한 URL(Uniform Resource Locator)을 가지며, 이를 통해 인터넷 브라우저에서 접근할 수 있습니다.

예를 들어, "www.example.com/about" URL은 'example.com'이라는 도메인의 'about'이라는 웹페이지로 이동하게 됩니다.

웹브라우저 (Web Browser)

웹브라우저는 사용자가 웹페이지를 볼 수 있게 해주는 소프트웨어 어플리케이션입니다.

웹브라우저는 사용자가 URL을 입력하면 해당 웹사이트의 서버로부터 웹페이지 데이터를 요청하여 화면에 표시합니다. 브라우저는 HTML, CSS, JS 코드를 해석하고 사용자에게 시각적으로 이해하기 쉬운 형태로 렌더링합니다.

대표적인 웹브라우저로는 Google Chrome, Mozilla Firefox, Safari, Microsoft Edge 등이 있습니다.    

참고자료

• What is a Web Server? (NGINX)
• What is a Web Browser? (Mozilla)
• Who invented the Internet? And why? (Kurzgesagt)
• What is Cloud Computing? (Amazon)
• Browser Engines (Wikipedia)

• CookAndroid Studio(T_13.0).exe를 다운 받으면 'Android Studio 개발 환경'을 원클릭으로 설치할수 있다.

for...of문 활용

function solution(numbers) {
   let average = 0;
   for (let number of numbers){
       average += number;
   }
    average = average / numbers.length;

    return average;
}

📌 다른 풀이

Array.reduce()을 이용한 풀이

• 화살표 함수

  function solution(numbers) {
  return numbers.reduce((a, c) => (a + c), 0) / numbers.length;
  }

1. for 문

function solution(n) {
    let sum = 0;
    for(let i = 0; i<= n; i++){
        if(i % 2 === 0){
            sum += i;
        }
    }
    return sum;
}

📌 다른 풀이

1. for문

• 괄호안을 수정하면, 반복횟수를 줄일수 있다.

  function solution(n) {
    var answer = 0;
  
    for(let i=2 ; i<=n ; i+=2)
        answer += i;
  
    return answer;
  }
  

### 2. 메소드 체이닝(~~어렵다....~~)
```javascript
function solution(n) {
  return Array(n)
    .fill()
    .map((_, i) => i + 1)
    .filter((v) => v % 2 === 0)
    .reduce((acc, cur) => acc + cur, 0);
}

참고자료

• JavaScript 알고리즘 100일 챌린지 5번째 도전

1. if 문을 활용한 풀이

• 틸트연산자를 활용한 풀이

  function solution(n, k) {
    var price = n*12000 + k*2000;
    var service = ~~(n/10) * 2000;
  
    price = price - service;
  
    return price;
  }

📌 다른 풀이

• 틸트연산자를 활용한 풀이

• 음료수 개수에서 서비스 음료수 개수를 빼고 계산

  function solution(n, k) {
  // 음료수가 10개 이상이라면, 서비스 음료수 개수 빼기
    if (n >= 10){ 
        k -= ~~(n/10);
    }
  
    return 12000 * n + 20000*k;        
  }

참고자료

JavaScript 알고리즘 100일 챌린지 4번째 도전

1. if 문을 활용한 풀이

• 이전 조건문을 통해 0 < angle <= 90경우가 사라졌으므로, 묵시적으로 90 < angle을 의미

• 따라서, 90 < angle은 생략 가능

  function solution(angle) {
    var answer = 0;
    if(0 < angle && angle < 90){
        answer = 1;
    }else if(angle === 90){
        answer = 2;
    }else if(90 < angle && angle < 180){
        answer = 3;
    }else{
        answer = 4;
    }
  
    return answer;
  }

  📌 다른 풀이

  1. if문을 활용한 풀이

  function solution(angle) {
    if(angle && angle < 90){
        return 1;
    }else if(angle === 90){
        return 2;
    }else if(angle < 180){
        answer = 3;
    }else{
        answer = 4;
    }
  
    return answer;
  }

2. Array fliter를 사용한 풀이(이해못함...)

• 화살표 함수
• Array filter()

  function solution(angle) {
    return [0, 90, 91, 180].filter(x => angle>=x).length;
  }

3. 삼항 연산자를 활용한 풀이(좋은 코드인지는 모르겠음)

function solution(angle) {
    return angle < 90 ? 1 : angle === 90 ? 2 : angle < 180 ? 3 : 4;
}

참고자료

• JavaScript 알고리즘 100일 챌린지 3번째 도전

1. 사칙연산

function solution(age) {
    var answer = 0;
    answer = (2022 - age) +1;
    return answer;
}

📌 다른 풀이

1. 사칙연산

function solution(age) {
    var answer = 0;
    answer = 2023 - age;
    return answer;
}

2. Date 객체(2022년에만 사용가능)

function solution(age) {
    return new Date().getFullYear() - age + 1;
}

참고자료

• JavaScript 알고리즘 100일 챌린지 2번째 도전

1. if 문을 활용한 풀이

function solution(num1, num2) {
    var answer = 0;

    if(num1 === num2){
        answer = 1;
    }else{
        answer = -1;
    }
    return answer;
}

📌 다른 풀이

1. 삼항 연산자를 활용한 풀이

return num1 === num2 ? 1 : -1;

참고자료

• JavaScript 알고리즘 100일 챌린지 1번째 도전

1. parseInt를 활용해서 형변환하기

function solution(num1, num2) {
    var answer = 0;
    answer = parseInt(num1 / num2);
    return answer;
}

📌 다른 풀이

1. Math.floor(내림) 활용하기

const solution = (num1, num2) => Math.floor(num1 / num2)

2. 틸트 연산자를 활용한 풀이

• 비트단위 연산자를 사용하면 소숫점을 버리고 계산한다.
• ~~ 연산자는 Math.floor()와 같은 의미이다.

  const solution = (num1, num2) => ~~(num1 / num2)

참고자료

• JavaScript 알고리즘 100일 챌린지 1번째 도전

롤플레이

would like(=want to)는 예의바른 표현 would be도 예의바른 표현, stuff는 복수표현 불가능

한줄회고]

can I, would like to 같은 예의바른 표현을 배워두면 존중을 받을수 있다.

two stop: 두 정거장 Get on/off는 큰 운송수단 차같은것은 Get in/out

롤플레잉

how long does it take?(얼마나 걸려요?)

한줄회고]

How can i get to 장소?, how long does it take?(얼마나 걸려요?)

재밌는 표현 ㅋㅋㅋ

롤플레이

Yeah, it was nice talking to you

한줄회고]

연습만이 살길!

롤플레잉

Are we gonna eat chicken?

한줄회고]

문장을 그대로 암기하지말고 동사를 바꿔가면서 다양하게 암기하는것도 좋음