본문 바로가기

프론트엔드/React15

[ Lodash ] _.cloneDeep 사용법과 예시 _.cloneDeep이란?_.cloneDeep은 Lodash에서 제공하는 유틸리티 함수로, 객체(Object)나 배열(Array)을 깊은 복사(Deep Copy)하는 역할을 합니다.일반적으로 자바스크립트에서 객체를 복사할 때, 얕은 복사(Shallow Copy)만 이루어집니다. 얕은 복사는 최상위 속성만 복사하고, 중첩된 객체나 배열은 그대로 참조를 복사하기 때문에, 원본 데이터에 의도치 않은 영향을 미칠 수 있습니다.반면, _.cloneDeep을 사용하면 객체의 모든 속성과 중첩된 구조까지 독립적으로 복사하여, 복사본을 수정해도 원본 데이터에는 전혀 영향을 미치지 않게 됩니다.  얕은 복사와 깊은 복사의 차이먼저, 얕은 복사와 깊은 복사가 어떤 차이를 만드는지 알아보겠습니다. 얕은 복사 예시: cons.. 2024. 9. 25.
[ React ] 리액트 파일 확장자를 .js로 사용하는 것이 안 좋은가요? 리액트 프로젝트를 진행할 때, 파일 확장자를 `.js`로 할지, `.jsx`로 할지 고민한 적이 있으신가요? 사실, `.js` 확장자를 사용하는 것이 "안 좋은" 것은 아니지만, 상황에 따라 장단점이 존재합니다. 1.  ` .js ` 확장자를 사용할 때의 장점통일된 확장자 관리모든 자바스크립트 파일을 `.js`로 관리하면 프로젝트에서 일관된 확장자를 유지할 수 있어, 파일 구조가 간단해집니다. 기존 코드와의 호환성기존에 작성된 자바스크립트 코드와 리액트 코드의 확장자를 일관되게 사용할 수 있어 유지보수에 용이합니다. 도구의 기본 지원`.js` 확장자는 모든 코드 에디터에서 기본적으로 지원되며, 특별한 설정 없이도 JSX 구문을 잘 처리할 수 있습니다.  2. `.js` 확장자를 사용할 때의 단점가독성과 .. 2024. 8. 28.
[ 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.
[ React ] 자주 쓰이는 NPM 설치 목록 모음 styled-components Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이프러리로 React 프레임워크에서 메인으로 사용되는 라이브러리이다. npm i styled-components react-dom 컴포넌트를 html과 연결하는 작업을 해준다. npm i react-dom react-router-dom React는 SPA(Single Page Application)이다. React에 router(페이지 이동)을 사용할 수 있게, 화면 전환을 지원해 주는 모듈이다. npm i react-router-dom ant-design 사용자의 인터페이스를 개발할때 다양한 UI 컴포넌트를 제공해 줘서 빠르게 개발을 할 수 있다. npm i antd ant-d.. 2024. 3. 25.
[ React ] Ant design 설치 방법 Ant design의 장점 여러 가지 기능을 빠르게 만들 수 있다. Customize가 가능하다. 모든 예제에 TypeScript, Javascript 코드가 제공된다. CodePen, CodeSandbox 보기가 제공된다. Animation이 필요한 부분에는 자연스러운 움직임이 적용되어 있다. https://ant.design/components/overview/ Components Overview - Ant Design An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises ant.desig.. 2024. 3. 23.
[ React ] VSCode에서 Hello World! 출력해보기 리액트 설치 방법https://codesign.tistory.com/298 [ React ] VSCode에서 리액트 실행하기Visual Studio Code 터미널 열기 1. VSCode를 연다. 2. 맥 기준 VSCode를 연후 상단메뉴에서 '터미널' 선택 후 '새 터미널'을 선택한다. 쇼트컷으로 control + shift + ` 를 누르면 새 터미널이 열린다. 3. 화면하단codesign.tistory.com  리액트를 설치한 뒤 프로젝트 시작하는 방법!리액트를 설치한 뒤 아래와 같은 화면이 떠있다.  리액트를 설치하면 기본으로 생성되는 폴더들은 앞으로 우리가 개발하는데 필요가 없기 때문에 삭제해 준다.아래 폴더들을 선택 후 삭제 한다.   삭제한 뒤 아래와 같이 터미널에 에러가 발생한다. 놀라지 .. 2024. 2. 14.
[ React ] Json server을 사용한 Heroku & Vercel로 배포 웹 애플리케이션을 개발하다 보면 간단한 백엔드가 필요할 때가 있습니다. 이때, 간단한 JSON 파일을 데이터베이스처럼 활용할 수 있는 JSON Server와 이를 Heroku 및 Vercel에 배포하는 방법을 사용했습니다. Heroku에 db.json 배포하기먼저, Heroku에 가입한 후 새로운 프로젝트를 생성합니다. Heroku는 무료로 제공되는 클라우드 플랫폼으로, 간단한 프로젝트를 배포하기에 적합합니다. 1. Heroku에 가입하고 새로운 프로젝트를 만든다.https://dashboard.heroku.com/  2.  데이터 저장용 db.json 파일 생성루트 디렉터리(src 밖)에 db.json 파일을 생성해 데이터를 저장합니다. 예전에는 여러 개의 JSON 파일로 데이터를 나눠 저장했지만, 하.. 2023. 2. 28.
[ React ] Hooks의 useState 1. Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. 2. useState useState는 가장 기본적인 Hook이다. 함수형 컴포넌트에서도 상태를 가지고 있을 수 있게 해 준다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 useState를 사용하면 된다. 3. useState를 사용한 예제 버튼을 누르면 숫자가 바뀌는 컴포넌트를 만들며 useState를 익혀보았다. Counter.js import React, { useState } from 'react'; cons.. 2023. 1. 31.
728x90

티스토리툴바