개발새발

Node.js란 무엇인가?Node.js는 웹 브라우저가 아닌 환경에서도 JavaScript를 실행할 수 있게 해주는 자바스크립트 런타임(Runtime)이다.런타임(Runtime)이란 코드를 실행할 수 있도록 환경을 제공하는 프로그램을 뜻한다. 쉽게 말해, 자바스크립트 코드를 동작시키는 구동 엔진이라고 할 수 있다.왜 Node.js가 필요할까?원래 JavaScript는 웹페이지 내에서 간단한 기능을 만들기 위해 탄생한 언어이다.C나 Java 같은 기존의 언어들과는 다르게 문법이 유연하고 간결해서 개발 생산성이 뛰어나다.이렇게 웹 브라우저 내에서만 사용되던 JavaScript는 점점 더 많은 개발자들이 웹 브라우저 외부에서도 사용하기를 원하면서 변화가 필요해졌다. 그 결과 등장한 것이 바로 Node.js다...

새로운 프로젝트에서 프론트엔드 기술 스택으로 React를 사용하게 되어 공부를 시작하게 됐다.공부 방법으로 유튜브 강의, 인프런 강의, 책 등을 고민했지만, 가장 기본이 되는 공식 문서부터 정독하기로 결정!단순히 읽는 것보다는 블로그에 정리하면서 공부하는 게 더 도움이 될 것 같아 기록을 시작한다. React를 처음 공부하는 입장에서 중요한 것 같은 개념과 나의 학습 과정을 정리할 것 !이 글이 React를 공부하는 다른 사람에게도 도움이 되길 …! 🚀 📌 참고 자료:React 공식 문서React GitHub리액트를 공부하기 전에 "React가 정확히 무엇인지" 먼저 알고 싶어서 공식 사이트를 탐색했는데,의외로 react.dev에서는 기본 정의를 찾을 수 없었다. 결국 GitHub README.md..

html 코드모두 선택 항목 1 항목 2 항목 3 전체 선택(전체 해제)하기JavaScriptconst selectAll = document.getElementById('selectAll');const items = document.querySelectorAll('.item');selectAll.addEventListener('change', () => { items.forEach(item => item.checked = selectAll.checked);}); jQuery$('#selectAll').on('change', function() { const isChecked = $(this).is(':checked'); $('.item').prop('checked', is..

.on(event, handler): 이벤트 리스너를 동적으로 추가한다$('#checkItems').on('change', function() { console.log($(this).is(':checked'));}) .change(handler): 특정 입력 요소의 값이 변경 되었을 때 실행된다$('#checkItems').change(function() { console.log($(this).is(':checked'));}) .click(handler): 클릭 이벤트에 반응한다$('#selectAll').click(function() { console.log('모두 선택 클릭')}).on(), .click(), .change() 의 차이 1. .on()동적으로 추가된 요소에도 이벤트를 ..

jQuery는 JavaScript를 간단하고 효율적으로 작성할 수 있게 도와주는 JavaScript 라이브러리이다. 특징간결한 코드: 복잡한 JavaScript 코드를 몇 줄로 대체 가능DOM 조작: HTML 요소를 쉽게 선택하고 조작이벤트 처리: 브라우저 간 차이 없이 클릭, 입력 등의 이벤트를 처리AJAX: 비동기 요청을 간편하게 처리크로스브라우징 지원: 다양한 브라우저에서 동일하게 동작기본 문법$() 로 요소 선택$('#id') // id$('.class') // class$('tag') // 태그 DOM 조작$('#example').text('새로운 텍스트'); // 텍스트 변경$('.example').css('color', 'red'); // CSS 스타일 변경 이벤트 처리$('#button')..

html 코드체크박스체크박스 상태값 읽기JavaScriptconst checkbox = document.getElementById('checkItems')console.log(checkbox.checked); // true 또는 false jQueryconst isChecked = $('#checkItems').is(':checked');console.log(isChecked ? '체크' : '해제');체크박스 상태 변경하기JavaScriptconst checkbox = document.getElementById('checkItems');// 체크박스 선택checkbox.checked = true// 체크박스 해제checkbox.checked = false jQuery// 체크박스 선택$('#checkI..

1. 배열 (Array)순서가 있는 데이터의 집합으로, 인덱스를 통해 데이터에 접근한다길이가 동적으로 변하며, 다양한 데이터 타입을 포함할 수 있다주요 메서드push(), pop(): 끝에 요소 추가/제거shift(), unshift(): 앞에 요소 추가/제거slice(), splice(): 특정 범위의 요소를 복사하거나 수정map(), filter(), reduce(): 데이터 변환 및 처리const arr = [1, 2, 3];arr.push(4); // [1, 2, 3, 4]const doubled = arr.map(x => x * 2); // [2, 4, 6, 8]2. 객체 (Object)키-값 쌍으로 데이터를 저장하는 구조키는 문자열이나 심볼, 값은 어떤 타입이든 가능하다주요 메서드Object...

const firstElement = objectList[0]  objectList가 비어있을 수도 있으므로, 안전하게 확인하려면 다음과 같은 조건을 추가할 수 있다const firstElement = objectList.length > 0 ? objectList[0] : null;

리터럴 정규식(/.../)정규식 리터럴은 고정된 정규식을 작성할 때 사용한다코드가 간결하며, 컴파일 단계에서 정규식을 바로 생성한다const regex = /^\d+(\.\d{1,2})?%/; new RegExp()문자열로 정규식을 생성하며, 런타임에 동적으로 정규식을 만들 때 유용하다문자열로 전달하기 때문에, 역슬래시( \ )를 두 번( \\ ) 사용해야 한다const decimalPlaces = 2;const regex = new RegExp(`^\\d+(\\.\\d{1,${decimalPlaces}})?$`);특수 문자 처리리터럴 정규식정규식의 특수 문자( \d, \w, \s 등)를 사용할 때, 이스케이프 처리가 간단하다new RegExp()정규식 문자열을 전달하기 때문에, 역슬래시를 두 번 사용해..

정규식(Regular Expressions)은 문자열 패턴을 정의하는 도구로, 문자열 검색, 매칭, 추출, 치환 등 다양한 작업에 활용된다. 1. 정규식의 기본 구조1-1. 정규식 리터럴슬래시( / )로 감싸서 정의한다const regex = /abc/ 1-2. RegExp 객체new RegExp() 를 사용하여 동적으로 정규식을 생성한다const regex = new RegExp('abc'); // 'abc'라는 문자열을 찾는 정규식 2. 정규식의 주요 기능2-1. 매칭 (검색)정규식을 사용하여 문자열에서 특정 패턴을 검색한다const regex = /hello/;const str = 'hello world'console.log(regex.test(str)); // true 2-2. 문자열 추출정규식을..