[JS] 정규표현식 (RegExp)

01정규표현식 (Regular expression)정규표현식이란 일정한 패턴(특정한 규칙)을 가진 문자열의 집합을 다루는 데 사용하는 형식언어(formal language)입니다. 자바스크립트 고유의 문법이 아닌 다양한 프로그래밍 언어에 지원되고 있습니다. 왜 사용하나요?텍스트 데이터를 효율적으로 사용하기 위해서는 필요한 텍스트와 불필요한 텍스트를 구분해야 합니다. 컴퓨터 입장에서는 모든 문자가 동일하기 때문에 필요/불필요를 가려낼 수 없습니다.그렇기에 사람이 자세하게 '00 형식,ㅁㅁ규칙을 가진 텍스트를 골라줘'라고 명령을 내려줘야 컴퓨터가 수행합니다. 예를 들어 한국의 주민등록번호는 '990101-1234567' 라는 고정된 규칙을 사용하고 있습니다.여기서 뒷자리 7개의 숫자 중 첫 숫자가 5~8 사..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 6. 21.
• textsms

[React] export 모듈 불러오기 에러

01개발 환경 ViteReactJavascript  02문제 상황  폴더 구조: src 폴더 아래에 components와 api 폴더를 생성했습니다. api 폴더에는 axios.js와 requests.js 파일이 있고, 이를 index.js에서 한 번에 export 하려고 했습니다.components 폴더의 Banner.jsx에서 api/index.js를 import하여 사용하려고 했습니다.문제: Banner.jsx에서 api/index.js를 import했을 때 SyntaxError가 발생했습니다. //axios.jsimport axios from 'axios';const instance = axios.create({ // 설정...});export default instance;//request..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 6. 15.
• textsms

[React] Vite-App 생성하는 방법

vite 란빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구입니다.프랑스어로 Vite(빠르다)라는 단어입니다. '바이트'가 아닌 '비트'라고 불러야 합니다. ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev   React 설치우선 설치가 필요한 것Node.js- 웹브라우저 환경이 아닌 곳에서도 Javascript를 실행할 수 있게 해주는 자바스크립트 런타임입니다.- React 앱은 웹 브라우저에서 실행되는 코드이긴 하지만 프로젝트를 개발하는데 주요 도구들이 Node.js를 사용하기 때문에 필요합니다.(Babel, Webpack 등)- npm 은 node.js가 설치될 때 같이 설치됩니다. IDE- 통합 개발 환경(Integrated Development Env..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 6. 14.
• textsms

[JS] let,const 와 var

01var의 문제점01. 변수 중복 선언 허용var x = 1;var y = 2;// 변수 x 중복선언var x = 100;var y = 1;console.log(x); // 100console.log(y); // 1-  위 코드와 같이 변수 x와 y를 중복선언이나 재할당을 해도 에러가 없이 작동을 합니다. -  마지막에 할당된 값이 최종으로 변수의 값으로 저장됩니다. 02. 함수 레벨 스코프var는 block scope가 아닌 function scope단위 변수입니다.function counter(){ var i = 10; console.log(i); // 10 for(var i = 0; i -  위 코드에서 for문 안에서 var 키워드로 선언한 변수 i는 의도하지 않았더라도 전역변수..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 5. 22.
• textsms

[React] State와 Hooks(useState, useEffect...)

01StateState는 컴포넌트의 상태를 나타내며, 변화 가능한 값을 관리하는 데 사용됩니다.State는 직접 수정할 수 없고, setState를 통해 수정해야 합니다.// 잘못된 예시this.state = { name: '박서방' };// 정상적인 사용법this.setState({ name: '박서방' }); 상태가 변경되면 컴포넌트가 다시 리렌더링 됩니다. 따라서 렌더링과 데이터 흐름에 필요한 값만 state에 포함시켜야 성능 저하를 막을 수 있습니다.함수형 컴포넌트에서는 React 16.8부터 useState Hook을 사용하여 상태를 관리할 수 있습니다.02Lifecycle (생명주기)React 컴포넌트는 생성, 업데이트, 제거라는 세 가지 주요 생명주기를 가집니다.이 과정을 통해 컴포넌트의 동..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 5. 20.
• textsms

[React] Components와 Props

01Components- Component란 웹 페이지의 한 부분을 나타내는 코드 블럭이며 재사용이 가능한 UI 요소입니다.작은 Component들이 모여서 하나의 Component를 구성하고 이러한 Component를 모아서 전체페이지를 구성합니다.이렇게 하나의 Component를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어 개발시간과 유지보수 비용을 줄일 수 있습니다. - 개념적으로는 Javascript의 함수와 비슷합니다. 입력을 받으면 정해진 출력을 합니다.React는 어떠한 속성(Props)들을 입력받아서 그에 맞는 React element를 return 해주는 것입니다.* React element: React를 구성하는 가장 작은 블럭들. Javascript 객체 형태로 존재하면 화..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 5. 17.
• textsms

[React] React-App 생성하는 방법

React 란React.js 는 페이스북에서 개발한 사용자 인터페이스 라이브러리입니다.현재 많은 프론트엔드 개발자들이 사용하고 있는 인기 있는 라이브러리입니다.  React 설치우선 설치가 필요한 것Node.js- 웹브라우저 환경이 아닌 곳에서도 Javascript를 실행할 수 있게 해주는 자바스크립트 런타임입니다.- React 앱은 웹 브라우저에서 실행되는 코드이긴 하지만 프로젝트를 개발하는데 주요 도구들이 Node.js를 사용하기 때문에 필요합니다.(Babel, Webpack 등)- npm 은 node.js가 설치될 때 같이 설치됩니다. yarm- npm의 약점(일관성, 보안성, 성능)을 보완해서 Facebook에서 나온 npm 확장 패키지 매니저입니다.- npm과 동일하게 터미널에서 " npm in..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 5. 13.
• textsms

[JS] Todo-List

실행결과 미리 보기목표목표1. 할 일 클릭 시, 완료체크표시하기2. 삭제 버튼 클릭 시, 해당할 일만 삭제3. todo 할일 내용 localStorage에 저장/삭제하기4. todo 할일은 객체로 저장해서 관리하기 코드리뷰01메인 화면 TO DO LIST 추가  todo main.todo-list{ width: 100%; height: 630px; padding: 15px 20px; background-color:#d1ccc0; overflow-y: scroll; display: flex; flex-direction: column; align-items: end;}/* 스크롤바 css */.todo-list::-webkit-scrollba..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 5. 13.
• textsms