전체 글787

• 

  [Chrome]크롬 개발자 도구 실행 방법 크롬 개발자 도구 실행 방법 일반적으로 F12 단축키를 통해 크롬 개발자 도구를 실행할 수 있지만, 특정 웹 사이트에서 F12 단축키에 특정 이벤트 핸들러 함수를 등록했거나 사용 중인 OS가 Mac인 경우 F12 단축키가 동작하지 않습니다. 이번 포스팅은 F12 단축키를 사용하지 않고 크롬 개발자 도구를 실행할 수 있는 몇 가지 방법을 소개합니다. 참고로 제가 사용하고 있는 PC의 운영체제는 Mac이므로 사진과 다를 수 있습니다. 마우스 우클릭 첫 번째 방법으로 마우스 우클릭으로 크롬 개발자 도구를 실행할 수 있습니다. 특정 HTML DOM 요소의 스타일 또는 속성을 확인하고 싶은 경우 요소를 마우스 우클릭 버튼으로 클릭하고 검사를 선택합니다. 예를 들어, Naver 메인 사이트에서 로고의 스타일 또는 .. 개발자 도구/크롬(Chrome) 2022. 10. 14.

• 

  [JavaScript]콘솔 로그 스타일 적용하는 방법 콘솔 로그 스타일 적용하는 방법 콘솔(console)은 애플리케이션 개발 프로세스에서 매우 유용합니다. 주로 변수에 할당된 값을 확인하거나 연산 결과를 확인하기 위한 용도로 사용합니다. JavaScript에서는 console.log() 메서드를 사용하여 콘솔에 특정 데이터를 출력할 수 있으며, 출력 결과에 스타일을 적용할 수 있습니다. 예를 들어, 티스토리 접속 후 크롬 개발자 도구의 콘솔 탭을 들어가면, 스타일이 적용된 문자열을 볼 수 있습니다. console.log() 메서드 출력 결과에 스타일을 적용한다고 개발 프로세스에 큰 영향은 없지만, 특정 웹 사이트에 대해 특별함을 각인시킬 수 있습니다. 물론, 개발자 한정이겠지만요... 이번 포스팅은 console.log() 메서드 출력 결과에 스타일을 적.. JavaScript/Tip 2022. 10. 13.

• 

  [JavaScript]객체의 값으로 키를 가져오는 방법 객체의 값으로 키를 가져오는 방법 JavaScript에서 객체의 프로퍼티는 Key-Value 쌍 구조로 이루어진 데이터 집합입니다. 예를 들어, Person이라는 객체의 name 프로퍼티의 Key는 name이고 Value는 'Hong Gil Dong'입니다. const Person = { name: 'Hong Gil Dong', // Key: name, Value: '홍길동' age: 20, // Key: age, Value: 20 gender: 'male' // Key: gender, Value: 'male' }; 객체의 키에 해당하는 값은 점(.) 표기법 또는 대괄호([]) 표기법을 사용하여 가져올 수 있지만, 값에 해당하는 키를 가져오는 방법은 쉽지 않습니다. 값에 해당하는 키를 가져오려면, Obj.. JavaScript/객체 2022. 10. 12.

• 

  [JavaScript]URLSearchParams 객체 사용 방법 URLSearchParams 객체 사용 방법 Query String이란 URL에서 물음표(?)부터 시작하는 문자열입니다. 주로 검색 기능이 있는 웹 사이트에서 검색 키워드를 Query String으로 설정합니다. 제가 개발 자료를 참고하는 stackabuse 사이트에서 url이란 키워드를 검색하면, URL은 다음과 같습니다. https://stackabuse.com/search/?q=url 위에서 언급했듯이 Query String은 물음표(?)부터 시작하므로 해당 URL의 Query String은 q=url입니다. JavaScript 개발자는 위 예시와 같은 URL에서 Query String 추출 후 원하는 정보를 가져와야 하는 상황이 발생할 수 있는데, JavaScript는 친절하게도 복잡한 Query.. JavaScript/Tip 2022. 10. 10.

• 

  [JavaScript]화살표 함수를 사용하면 안 되는 경우 화살표 함수를 사용하면 안 되는 경우 JavaScript ECMAScript 6부터 도입된 화살표 함수(arrow function)는 function 키워드를 사용하여 함수를 정의하는 것보다 적은 타이핑을 요구하고 깔끔한 코드를 작성할 수 있으며, React 클래스 컴포넌트의 생성자에서 이벤트 핸들러 함수를 바인딩하지 않아도 된다는 장점이 존재합니다. 하지만, 모든 기능은 장점이 있으면, 단점도 존재합니다. function 키워드 또는 리터럴 방식으로 정의된 함수와 화살표 함수는 동일하게 동작하지 않습니다. 따라서, 이 둘의 차이점을 모르면, 화살표 함수를 잘못 활용할 수 있습니다. 이번 포스팅은 JavaScript에서 화살표 함수를 사용하면 안 되는 경우에 대해 소개합니다. 객체의 메서드 객체의 메서드.. JavaScript/함수 2022. 10. 9.

• 

  [JavaScript]URL 객체 생성 및 파싱하는 방법 URL 객체 생성 및 파싱하는 방법 이번 포스팅은 JavaScript에서 URL 객체 생성 및 파싱하는 방법을 소개합니다. URL 객체 생성자 JavaScript에서 URL 객체는 new 키워드와 URL() 생성자 함수를 사용하여 생성할 수 있습니다. const url = new URL(url [, base]); url - 절대 또는 상대 URL입니다. - 생략할 수 없습니다. base - 첫 번째 매개변수가 상대 URL인 경우 두 번째 매개변수는 절대 URL입니다. - 첫 번째 매개변수가 절대 URL인 경우 생략할 수 있습니다. - 첫 번째 매개변수가 상대 URL인데, 두 번째 매개변수를 생략하면 TypeError가 발생합니다. 다음 예제는 동일한 URL을 절대 URL과 상대 URL 방식으로 URL 객.. JavaScript/Tip 2022. 10. 9.

• 

  [JavaScript]금액 포맷 방법 금액 포맷 방법 JavaScript에서 숫자를 금액으로 포맷해야 하는 상황은 자주 발생합니다. 숫자를 금액을 포맷하는 방법으로 개발자가 직접 하드 코딩하거나 정규 표현식(Regex), toLocaleString() 메서드를 사용할 수 있지만, Intl.NumberFormat() 메서드를 사용하여 더 쉽게 포맷할 수 있습니다. 이번 포스팅은 Intl.NumberFormat() 메서드를 사용하여 JavaScript에서 금액을 포맷하는 방법을 소개합니다. Intl.NumberFormat() 메서드 Intl.NumberFormat() 메서드는 기본적으로 PC에 설정된 기본 locale 형식으로 숫자를 포맷합니다. 예를 들어, PC에 설정된 locale이 한국인 경우 세 자리마다 콤마를 찍습니다. var num .. JavaScript/Tip 2022. 10. 9.

• 

  [JavaScript]거듭제곱 구하는 방법 거듭제곱 구하는 방법 이번 포스팅은 JavaScript에서 거듭제곱을 구할 수 있는 몇 가지 방법을 소개합니다. 방법 1. Math.pow() 메서드 가장 잘 알려져 있는 방법으로 Math 객체의 pow() 메서드를 사용하여 거듭제곱을 구할 수 있습니다. pow() 메서드의 첫 번째 매개변수는 밑이며, 두 번째 매개변수는 지수입니다. const result = Math.pow(2, 3); console.log(result); // 8 두 번째 매개변수인 지수에 실수를 할당할 수 있습니다. console.log(Math.pow(27, 1/3)); // 3 console.log(Math.pow(4, 0.5)); // 2 만약, 첫 번째 매개변수가 음수이며, 두 번째 매개변수가 실수인 경우 제곱근이 존재하지 .. JavaScript/Tip 2022. 10. 9.

• 

  [JavaScript]객체의 프로퍼티를 제거하는 방법 객체의 프로퍼티를 제거하는 방법 JavaScript에서 더 이상 사용되지 않는 객체의 프로퍼티를 제거해야 하는 상황이 발생할 수 있습니다. 일반적으로 객체에 존재하지 않는 프로퍼티를 접근하면, undefined를 반환합니다. const Person = { name: '홍길동', age: 20, address: '서울' }; console.log(Person.email); // undefined 하지만, undefined로 설정된 프로퍼티도 undefined를 반환하므로 점(.) 표기법 또는 대괄호([]) 표기법으로 프로퍼티가 존재하는지 체크하는 방법은 좋은 방법이 아닙니다. const Person = { name: '홍길동', age: 20, address: '서울', home: undefined }; .. JavaScript/객체 2022. 10. 6.

• 

  [JavaScript]객체의 키 이름 변경하는 방법 객체의 키 이름 변경하는 방법 이번 포스팅은 JavaScript에서 객체의 키 이름을 변경하는 몇 가지 방법을 소개합니다. 방법 1. 새로운 키 추가 후 기존 키 제거 객체의 키 이름을 변경하는 기본적인 방법은 기존 키를 새로운 키에 할당하고 기존 키를 제거하는 것입니다. 다음 예제는 Person 객체의 Money 프로퍼티를 salary 프로퍼티에 할당 후 delete 연산자를 사용하여 money 프로퍼티를 제거합니다. const Person = { name: '둘리', age: 20, money: 20000 }; // 이름 변경 전 console.log(Person); // {name: '둘리', age: 20, money: 20000} // money 프로퍼티를 salary 프로퍼티에 할당 Perso.. JavaScript/객체 2022. 10. 6.

• 

  [JavaScript]URL에서 Query String 제거하는 방법 URL에서 Query String 제거하는 방법 URL의 Query String은 물음표(?)부터 시작하는 Key=Value 형식을 말합니다. 주로 Naver와 Google 또는 검색 기능이 있는 웹 사이트에서 특정 키워드를 검색하는 경우 해당 키워드를 Query String으로 설정합니다. 다음 예시는 stackabuse 사이트에서 ur이라는 단어를 검색했을 경우의 URL입니다. https://stackabuse.com/search/?q=url 위에서 언급했듯이 Query String은 물음표(?)부터 시작하므로 Query String은 q=url입니다. 위 URL은 간단한 예시이므로 파싱 하는데, 큰 어려움이 없지만, Naver 또는 Google은 Query String이 상당히 복잡합니다. 다음 예.. JavaScript/Tip 2022. 10. 6.

• 

  [JavaScript]URL Query String 파싱 방법 URL Query String 파싱 방법 웹 애플리케이션을 개발할 때, 중요한 정보를 BackEnd에 전달하기 위해 Query String방식을 사용할 수 있습니다. 예를 들어, Naver와 Google은 웹 사이트에서 특정 키워드를 검색하는 경우 해당 키워드를 Query String으로 설정합니다. 다음 예시는 stackabuse 사이트에서 url이라는 단어를 검색했을 경우의 URL입니다. https://stackabuse.com/search/?q=url 참고로 stackabuse 사이트는 개발 자료를 참고하기 위해 제가 주로 방문하는 곳입니다. URL의 Query String은 물음표(?)부터 시작하며, 검색 키워드인 url이 Query String에 포함된 것을 확인할 수 있습니다. 위 URL은 간.. JavaScript/Tip 2022. 10. 5.