본문 바로가기

전체보기33

[JavaScript] forEach, map, flatMap, filter, find, findIndex, reduce, reduceRight, some, every 배열 메서드 📌 JavaScript 배열 메서드- 배열을 순회하고 처리하는 데 유용한 다양한 메서드들 소📍 forEach- 배열의 각 요소를 반복 실행- 반환값은 없으며 반복문처럼 요소를 처리할 때 주로 사용// 배열 값과 순서(index)const arr = ['a', 'b', 'c', 'd'];arr.forEach((val,idx) => { console.log(val) // 'a', 'b', 'c', 'd' console.log(idx) // 0, 1, 2, 3});// 배열 값 누적const number = [1,2,3,4];let sum = 0;number.forEach(num => sum += num);console.log(sum); // 10 📍map - 배열의 각 요소를 특정 함수로 변환하여 .. 2025. 3. 26.
[JavaScript] for, for...in, for...of, while, do...while, 반복문 📌 JavaScript 반복문 5가지- JavaScript에서는 데이터를 효과적으로 순회하고 처리하기 위해 사용하는 반복문 5가지가 있습니다.- 배열, 객체, 문자열과 같은 데이터 구조를 탐색하고 각 요소에 접근할 수 있는 방법 📍 for 반복문- 가장 기본적인 반복문- 특정 횟수만큼 반복할 때, 반복 수(끝)가 정해진 경우에 적합 - 초기화, 조건, 증감식을 포함 // 기본 구조for(초기화 ; 조건 ; 증감) { // 반복 실행 코드}// 예시 - 0 부터 3보다 작게 시작 1씩 증가for (let i = 0; i 📍 for...in 반복문- 객체의 속성(키)을 순회할 때 사용.- 객체의 key 값과 value 값을 뽑아내는데 유용합니다. - 배열에서 사용은 가능하지만 인덱스 순서가 보장되지 .. 2025. 3. 26.
[localhost] 로컬 서버 포트 변경하기 📌 Localhost 3000 변경- 특정 포트가 필요한 경우- 여러 프로젝트 진행 시 기본 설정된 3000으로 포트 충돌 - 이전 사용을 종료한 프로젝트의 프로세스가 백그라운드에 남아같은 포트의 새로 시작한 프로젝트가 정상적으로 보이지 않는 경우를 대비 📍 .env 파일에서 설정 // .envPORT=4000 ✅ 끝 가장 간단한 방법! 📍 package.json 파일에서 설정// ✅ Mac, Linux"scripts": { "start": "export PORT=4000 && react-scripts start",}// ✅ window "scripts": { "start": "set PORT=4000 && npm start",} ✅ 성공적으로 변경 📍 cross-env 패키지 사용하기- .. 2025. 3. 21.
[네이밍 컨벤션] 표기법 ✍️ 🤔 📌 네이밍 컨벤션 표기법📗 네이밍 컨벤션- 변수, 함수, 클래스, 파일 등의 이름을 짓는 일관된 규칙이나 패턴으로 네이밍 규칙을 통해 개발팀 내에서 코드의 의미를 명확히 전달할 수 있습니다. 📗 표기법- 네이밍 컨벤션의 핵심 요소- 단어들을 결합하여 이름을 만드는 방식을 의미 - 정보를 표현하는 규칙📍대표적인 표기법 - 카멜 케이스 , 파스칼 케이스 , 케밥 케이스, 스네이크 케이스 , 스크리밍 스네이크 케이스, 헝가리안 표기법 📗 카멜 케이스 (camelCase) - 첫 단어는 소문자로 시작하고 이후 단어의 첫 글자를 대문자로 작성하는 방식 - EX) userName, firstName, handleClick, isLoading - 주요 사용 👇 JavaScript/TypeScript 변수명.. 2025. 3. 21.
[React - Swiper.js] 옵션 정리 📌 Swiper.js 설정 옵션 가이드 🔗Swiperjs - api📍 Swiper 옵션 정보📗 많이 사용하는 기본  옵션옵션타입기본값 initialSlidenumber0초기 활성화될 슬라이드 인덱스direction"horizontal" / "vertical"horizontal슬라이드 방향loopbooleanfalse슬라이드 무한 루프speednumber300슬라이드 전환 속도slidesPerViewnumber / "auto"1한 번에 보여줄 슬라이드 개수spaceBetweennumber0슬라이드 간 간격(px)centeredSlidesbooleanfalse현재 슬라이드를 가운데 정렬slidesPerGroupnumber1그룹당 표시할 슬라이드 개수loopFillGroupWithBlankboolean.. 2025. 3. 19.
[React Swiper.js] 설치 및 사용법 알아보기 📌 Swiper.js- 캐러셀 UI를 만들기 위해 사용되는 인기 있는 라이브러리 - 이미지 슬라이드 또는 콘텐츠 이동을 구현할 때 사용 - 웹과 앱에서 터치 및 반응형 최적화 - 간단한 사용법, 다양한 옵션 제공, 다양한 환경에서 커스터마이징 가능  🔗 Swiper 공식 문서 📍 기존 React 프로젝트에 Swiper 설치npm install swiper // 📍 SwiperTest.tsx// Import Swiper React componentsimport { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';// Import Swiper stylesimport 'swiper/css';export const SwiperTest = () => { .. 2025. 3. 19.
[npm 오류] react-scripts 5.0.1 버전과 TypeScript 5.8.2 버전 충돌 해결하기 📌 react-scripts와 최신 TypeScript 버전 충돌 - TypeScript 5.8.2와 react-scripts 5.0.1 버전 - npm install / 라이브러리 설치 진행 시 아래와 같은 에러 발생npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR! npm ERR! While resolving: react-scripts@5.0.1npm ERR! Found: typescript@5.8.2....  ✅  Create React App의 react-scripts@5.0.1 버전과 typescript@5.8.2 버전(5.8.2)과 호환되지 않아 충돌 발생 📍해결 방법📗 1. TypeScript 버전 다운그레이드- reac.. 2025. 3. 18.
[React Router v7 경고] React Router will begin wrapping state updates in React.startTransition in v7 / Relative route resolution within Splat routes is changing in v7 📌 React Router v7 경고 메시지 React Router v7로의 업그레이드를 준비하는 과정에서 발생하는 경고 메시지는 향후 버전에서의 변경 사항을 대비에 대한 안내 📍 React Router will begin wrapping state updates in React.startTransition in v7 - startTransition 기능이 React Router v7에서 상태 업데이트에 적용될 것이라는 알림(경고) 📗 해결 방법  📍 Relative route resolution within Splat routes is changing in v7 - React Router v7에서는 Splat 경로 내에서 상대 경로를 해석하는 방식이 변경될 예정이라는 알림(경고)- React R.. 2025. 3. 12.
[React] 기존 React 프로젝트 TypeScript 적용 📌 TypeScript- TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어로, 정적 타입을 지원하고 확장자로 .ts를 사용하며 작성한 코드는 컴파일을 거쳐 JavaScript로 변환됩니다. - 가장 큰 특징은 정적 타입을 명시할 수 있다는 점. 이를 통해 개발 도구(IDE)와 컴파일러가 코드 자동 완성 타입 오류 감지 등의 피드백을 제공하여 생산성을 높이고 버그를 줄이며 유지보수를 쉽게 만듭니다. 👍즉, TypeScript는 실행 전에 타입 오류를 미리 잡아주는 역할을 하는 언어 ! 📍 기존 React 프로젝트에 TypeScript 설치npm i typescript @types/node @types/react @types/react-dom @typ.. 2025. 3. 12.
반응형