Javascript
-
내가 헷갈려서 정리하는 자바스크립트 네이밍 규칙들...~! PascalCase (파스칼 케이스)각 단어의 모든 첫 글자는 대문자로 작성하는 표기법e.g. ) CardType, UserService, PaymentInterface사용 케이스생성자 함수, 클래스, 인터페이스 등의 이름을 작성할 때 사용한다.camelCase (카멜 케이스)첫 단어는 소문자로 시작하고, 이후의 각 단어는 대문자로 작성하는 표기법e.g. ) myVariable, calculateInterestRate(), getUserDetails()사용 케이스 변수나 함수, 메서드 등의 이름을 작성할 때 사용한다.kebab-case (케밥 케이스)모든 단어를 소문자로 작성하고, 단어 사이를 하이픈(-)으로 구분하여 작성하는 표기법예) us..
리액트 코드 네이밍 규칙 (Coding Conventions) (+ 초보도 쉽게하는 단축키 설정하기!!)내가 헷갈려서 정리하는 자바스크립트 네이밍 규칙들...~! PascalCase (파스칼 케이스)각 단어의 모든 첫 글자는 대문자로 작성하는 표기법e.g. ) CardType, UserService, PaymentInterface사용 케이스생성자 함수, 클래스, 인터페이스 등의 이름을 작성할 때 사용한다.camelCase (카멜 케이스)첫 단어는 소문자로 시작하고, 이후의 각 단어는 대문자로 작성하는 표기법e.g. ) myVariable, calculateInterestRate(), getUserDetails()사용 케이스 변수나 함수, 메서드 등의 이름을 작성할 때 사용한다.kebab-case (케밥 케이스)모든 단어를 소문자로 작성하고, 단어 사이를 하이픈(-)으로 구분하여 작성하는 표기법예) us..
2024.05.13 -
오늘은 우테코를 진행하면서 배운 디바운스와 스로틀 개념에 대해서 정리해 보겠다. 이 정리는 우테코 수업과 모던 자바스크립트 딥 다이브 책을 읽고 정리해보았다. 짧은 시간에 과도한 이벤트가 연속으로 발생한다면? 이러한 이벤트에 바인딩한 이벤트 핸들러가 과도하게 호출되어서 성능에 문제를 일으킬 수 있다. 또 데이터 호출 버튼을 매우 빠르게 연속해서 눌러 생기는 성능 저하를 막고 싶다면? 사용자가 창 크기 조정을 멈출 때까지 기다려다가 resize event 를 해주고 싶다면? 입력창에 자동완성을 보여주고 싶은데 키보드 입력키 하나하나마다 해주고 싶지 않다면? 디바운스와 스로틀을 사용하여 불필요한 잦은 요청 제어와 일정 주기마다 원하는 동작을 제어하게 할 수 있다. debounce 디바운스는 짧은 시간에 연속..
[JavaScript] debounce, throttle 개념 정리오늘은 우테코를 진행하면서 배운 디바운스와 스로틀 개념에 대해서 정리해 보겠다. 이 정리는 우테코 수업과 모던 자바스크립트 딥 다이브 책을 읽고 정리해보았다. 짧은 시간에 과도한 이벤트가 연속으로 발생한다면? 이러한 이벤트에 바인딩한 이벤트 핸들러가 과도하게 호출되어서 성능에 문제를 일으킬 수 있다. 또 데이터 호출 버튼을 매우 빠르게 연속해서 눌러 생기는 성능 저하를 막고 싶다면? 사용자가 창 크기 조정을 멈출 때까지 기다려다가 resize event 를 해주고 싶다면? 입력창에 자동완성을 보여주고 싶은데 키보드 입력키 하나하나마다 해주고 싶지 않다면? 디바운스와 스로틀을 사용하여 불필요한 잦은 요청 제어와 일정 주기마다 원하는 동작을 제어하게 할 수 있다. debounce 디바운스는 짧은 시간에 연속..
2024.04.03 -
package.json 속 dependencies와 devDependencies의 차이가 뭘까? 리액트를 하다보면 npm i 를 통해 많은 라이브러리를 설치하면서 dependencies 가 늘어나는 걸 본 적이 있을 것이다. 나도 처음엔 두 차이에 대해서 잘 알지도 못했고 사실 궁금하지도 않았던거 같다. 그저 패키지를 설치하게 되면 어떤 패키지가 설치되었는지 확인하는 용도로만 사용했던거 같다. 그러다가 우테코 3번째 미션을 진행하면서 이러한 코멘트가 달렸다. 헉! 그리고 그제서야 부랴부랴 이 차이에 대해서 찾아보았던거 같다. dependencies 는 프로덕션 환경에서 필요한 패키지를 말하여 어플리케이션이 실행될 때 필요한 패키지들을 정의하는 것이었다. 리액트 같은 프레임워크를 사용하여 라이브러리를 설치..
[JavaScript] dependencies와 devDependencies의 차이 정리package.json 속 dependencies와 devDependencies의 차이가 뭘까? 리액트를 하다보면 npm i 를 통해 많은 라이브러리를 설치하면서 dependencies 가 늘어나는 걸 본 적이 있을 것이다. 나도 처음엔 두 차이에 대해서 잘 알지도 못했고 사실 궁금하지도 않았던거 같다. 그저 패키지를 설치하게 되면 어떤 패키지가 설치되었는지 확인하는 용도로만 사용했던거 같다. 그러다가 우테코 3번째 미션을 진행하면서 이러한 코멘트가 달렸다. 헉! 그리고 그제서야 부랴부랴 이 차이에 대해서 찾아보았던거 같다. dependencies 는 프로덕션 환경에서 필요한 패키지를 말하여 어플리케이션이 실행될 때 필요한 패키지들을 정의하는 것이었다. 리액트 같은 프레임워크를 사용하여 라이브러리를 설치..
2024.03.18 -
이번 우테코 웹 기반 미션 로또를 진행하면서 HTML 내의 텍스트를 다루어야 하는 일이 있었습니다. 미션을 진행하면서 어떤 텍스트 요소를 사용하는 것이 좋은 코드일까 고민하면서 공부한 개념들을 살짝 정리해 보았습니다. 웹 개발에서 JavaScript를 활용하여 HTML 요소의 텍스트를 다루는 것은 아주 흔한 일입니다. 이를 다루기 위해서는 innerHTML, innerText, textContent 등의 다양한 속성들을 사용하여 다룰 수 있고, 각각 다른 특성을 가지고 있어 이를 이해하고 사용해야 합니다. 1. innerHTML innerHTML은 HTML 요소의 속성으로, 해당 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 새 내용으로 설정할 수 있는 기능을 제공합니다. 이를 통해 쉽게 내..
[JavaScript] innerHTML, innerText, textContent 차이 정리이번 우테코 웹 기반 미션 로또를 진행하면서 HTML 내의 텍스트를 다루어야 하는 일이 있었습니다. 미션을 진행하면서 어떤 텍스트 요소를 사용하는 것이 좋은 코드일까 고민하면서 공부한 개념들을 살짝 정리해 보았습니다. 웹 개발에서 JavaScript를 활용하여 HTML 요소의 텍스트를 다루는 것은 아주 흔한 일입니다. 이를 다루기 위해서는 innerHTML, innerText, textContent 등의 다양한 속성들을 사용하여 다룰 수 있고, 각각 다른 특성을 가지고 있어 이를 이해하고 사용해야 합니다. 1. innerHTML innerHTML은 HTML 요소의 속성으로, 해당 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 새 내용으로 설정할 수 있는 기능을 제공합니다. 이를 통해 쉽게 내..
2024.03.04