본문 바로가기

프론트엔드66

[ JavaScript ] findIndex와 indexOf의 차이점 알아보기 JavaScript를 사용할 때, 배열에서 특정 값을 찾는 것은 자주 사용되는 작업입니다. 이를 위해 주로 `findIndex`와 `indexOf` 메서드를 활용할 수 있는데, 이 둘은 비슷해 보이지만 중요한 차이점이 있습니다. 이번 글에서는 `findIndex`와 `indexOf`의 차이점을 예제와 함께 알아보겠습니다. findIndex 메서드findIndex는 배열의 각 요소를 콜백 함수로 검사해, 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만약 조건을 만족하는 요소가 없으면 -1을 반환합니다. 사용 방식arr.findIndex(callback(element, index, array), thisArg);리턴 값콜백 함수의 조건을 만족하는 첫 번째 요소의 인덱스를 반환하며, 없을 경우 -1을.. 2024. 10. 17.
[ Lodash ] _.cloneDeep 사용법과 예시 _.cloneDeep이란?_.cloneDeep은 Lodash에서 제공하는 유틸리티 함수로, 객체(Object)나 배열(Array)을 깊은 복사(Deep Copy)하는 역할을 합니다.일반적으로 자바스크립트에서 객체를 복사할 때, 얕은 복사(Shallow Copy)만 이루어집니다. 얕은 복사는 최상위 속성만 복사하고, 중첩된 객체나 배열은 그대로 참조를 복사하기 때문에, 원본 데이터에 의도치 않은 영향을 미칠 수 있습니다.반면, _.cloneDeep을 사용하면 객체의 모든 속성과 중첩된 구조까지 독립적으로 복사하여, 복사본을 수정해도 원본 데이터에는 전혀 영향을 미치지 않게 됩니다.  얕은 복사와 깊은 복사의 차이먼저, 얕은 복사와 깊은 복사가 어떤 차이를 만드는지 알아보겠습니다. 얕은 복사 예시: cons.. 2024. 9. 25.
[ javascript ] HTML, CSS, JS로 음악 플레이어 만들기 HTML, CSS, JavaScript를 사용해 음악 플레이어를 만들어보았습니다.  이 플레이어는노래 정보 표시, 재생/일시정지, 이전/다음 곡으로 넘어가기, 진행 바 등기본적인 음악 플레이어 기능을 구현합니다.    30분 만에 영상 보며 따라만들기 1. HTML 구조우선, HTML 파일을 작성합니다. 음악 플레이어의 기본 구조는 다음과 같습니다. Song Artist 0:00 0:00   container: 전체 플레이어를 감싸는 컨테이너입니다.song-info: 노래 이름, .. 2024. 9. 9.
[ React ] 리액트 파일 확장자를 .js로 사용하는 것이 안 좋은가요? 리액트 프로젝트를 진행할 때, 파일 확장자를 `.js`로 할지, `.jsx`로 할지 고민한 적이 있으신가요? 사실, `.js` 확장자를 사용하는 것이 "안 좋은" 것은 아니지만, 상황에 따라 장단점이 존재합니다. 1.  ` .js ` 확장자를 사용할 때의 장점통일된 확장자 관리모든 자바스크립트 파일을 `.js`로 관리하면 프로젝트에서 일관된 확장자를 유지할 수 있어, 파일 구조가 간단해집니다. 기존 코드와의 호환성기존에 작성된 자바스크립트 코드와 리액트 코드의 확장자를 일관되게 사용할 수 있어 유지보수에 용이합니다. 도구의 기본 지원`.js` 확장자는 모든 코드 에디터에서 기본적으로 지원되며, 특별한 설정 없이도 JSX 구문을 잘 처리할 수 있습니다.  2. `.js` 확장자를 사용할 때의 단점가독성과 .. 2024. 8. 28.
[ Ant Design ] 엔트디자인 왜 배워야 하고, 그 미래는 어떻게 될까요? 오늘은 많은 개발자들이 주목하고 있는 UI 라이브러리, Ant Design에 대해 이야기해보려고 합니다!혹시 React로 프로젝트를 진행하고 계신가요? 그렇다면 Ant Design은 여러분의 개발 생산성을 크게 향상시킬 수 있는 도구가 될 것입니다. 이 글에서는 Ant Design의 주요 장점, 배워야 할 이유, 그리고 앞으로의 전망에 대해 다뤄보겠습니다.  Ant Design의 주요 장점1. 통합된 디자인 시스템Ant Design의 가장 큰 매력 중 하나는 일관된 디자인 시스템입니다. 많은 UI 라이브러리가 있지만, Ant Design은 특히 대규모 기업 애플리케이션을 염두에 두고 설계되었습니다. 다양한 UI 컴포넌트와 스타일 가이드를 제공하여, 사용자에게 일관된 경험을 제공할 수 있습니다. 디자인의 .. 2024. 8. 9.
[ React ] Lodash - sumBy, filter, includes 최종 목표users의 총목록에서 선택된 사용자들의 time의 총합을 구하기  selectedUserList은 선택된 사용자들의 목록const selectedUserList = ['홍길동', '고길동']  사용사들의 총 기록 목록const users = [ { name: "홍길동", time: 120, }, { name: "고길동", time: 60, }, { name: "김영희", time: 60, },]  Lodash 사용1. filter, includes 사용해 선택된 user 목록 출력하기 _.filter(배열, 배열의 각 값)// return 필터된 새로운 배열 반환 _.includes(검색할.. 2024. 7. 15.
[ React ] 콘솔 경고들 수정하기 프로젝트 개발 중에 생긴 콘솔 경고들을 해결해 보았다. 경고 수정 #1  Form.Item을 사용하기 위해서는 Form 태그에 감싸주어야 한다.Warning: Cant not find FormContext. Please make sure you wrap Field under From. 경고문에서 수정 힌트를 주니 좋다. 원래 코드 {inputtype === 'ColorPicker' ? setMeta(meta => ({ ...meta, color: color.toHexString() }))} /> : null} {inputtype === 'ColorPicker' ? null : setMeta(meta => ({ ...meta, name: e.target.value }))} />} 수정 코드아.. 2024. 6. 4.
[ Next.js ] next-intl을 활용한 다국어 웹사이트 구현하기 Next.js 애플리케이션에서 다국어 지원을 손쉽게 구현하기 위해, next-intl 라이브러리를 사용해 보았습니다. 이 글에서는 next-intl의 주요 기능, 사용 방법, 그리고 프로젝트 통해 다국어 웹사이트를 구현해 보겠습니다. next-intl이란?next-intl은 Next.js를 위한 국제화(i18n) 라이브러리로, 간단하고 직관적인 API를 제공하여 복잡한 설정 없이도 다국어 지원을 구현할 수 있습니다. 이 라이브러리는 가벼운 번들 크기를 유지하면서도 효율적인 다국어 기능을 제공합니다. 주요 기능:간단한 API: 복잡한 설정 없이도 다국어 지원 추가 가능.동적 로드: 언어별 번역 파일을 동적으로 로드하여 효율적 사용 가능.리치 포맷 지원: 날짜, 숫자 등의 형식을 현지화된 형태로 제공.작은 .. 2024. 5. 30.
[ Next.js ] next/babel 에러 Next.js 개발을 위해 파일 설치 후 아래와 같은 에러가 뜬다 Parsing error: Cannot find module 'next/babel'  npm run dev를 하면 실행은 되지만, 파일에 빨간 줄이 나타나는게 너무나도 신경이 쓰인다.  해결 방법.babelrc file을 생성해 주고 아래와 같은 코드를 적고{ "presets": ["next/babel"]} .eslintrc파일 생성우 아래 코드를 적어주면  빨간 줄이 바로 없어진다. { "extends": ["next", "next/babel", "next/core-web-vitals"]}  하지만 더 쉬운 방법!새로운 파일 생성없이 기존에 존재하는 .eslintrc.json파일의 코드만 수정해주면 된다!.eslintrc.json 파.. 2024. 5. 23.
728x90

티스토리툴바