티스토리

나를 위해 기록하기

검색하기

블로그 홈

나를 위해 기록하기

sunsetinthegarden.tistory.com/m

개발 가보자Go!

구독자: 4

방명록 방문하기

주요 글 목록

[React 리액트] React + TypeScript / react-table 에러 해결 getSortByToggleProps() react-table의 공식문서를 보고 그대로 했는데 계속해서 에러 발생 나머지는 수정했으나 마지막까지 위의 이미지의 에러는 못 고쳐서 그냥 테이블을 만들었었다. 근데 react-table에 있는 기능(정렬 / 페이지네이션)은 포기 못하겠어서 해결해보기로 하고 서치하다가 드디어 수정! 참고로 나는 나는 React + TypeScript 조합으로 개발중 에러 메시지는 아래와 같다. HeaderGroup' 형식에 'getSortByToggleProps' 속성이 없습니다. {headerGroups.map((headerGroup) => ( {headerGroup.headers.map((column) => ( // 생략 해결방법은 column의 interface를 any로 박아주기 {headerGroups.map.. 공감수 0 댓글수 0 2023. 2. 14.
[React 리액트] Hook의 개념과 useState React Hook ? ✔️ 버전 16.8에서 새롭게 등장한 개념인 Hook(훅) ✔️ React의 state와 생명주기 기능에 갈고리(hook)을 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것 ✔️ React Hook의 이름은 모두 use로 시작 ✔️ React Hook은 개발자가 직접 커스텀도 가능한데, 이때도 이름 앞에 use를 붙여서 훅이라는 것을 나타내는 것이 좋음 ✔️ 내장 Hook 제공(useState, useEffect 등) 🌟 특징 • 선택적 사용 : 기존의 코드를 다시 작성할 필요 없이 일부 컴포너트 안에서 Hook 사용 가능 • 직관적인 API 제공 : props, state, context, refs, lifecycle와 같은 React 개념 useState ✔️ 가장 대표적.. 공감수 1 댓글수 0 2023. 2. 7.
[React 리액트] react-calendar - 캘린더 적용하기 📌 설치 ✔ npm npm install react-calendar ✔ yarn yarn add react-calendar 📌 사용 방법 1. Import import Calendar from 'react-calendar'; 2. 를 추가하고 value와 onChange를 사용한다. 📌 예시 코드 import React, { useState } from 'react'; import Calendar from 'react-calendar'; function MyApp() { const [value, onChange] = useState(new Date()); return ( ); } 📌 데모 확인 https://projects.wojtekmaj.pl/react-calendar/ React-Calendar U.. 공감수 0 댓글수 0 2023. 2. 2.
[React 리액트] react-icons - 인기 있는 Icon 쉽게 사용하기 보통 Icon을 사용할 때, Font Awesome 또는 Heroicon 사이트를 통해 Icon을 가져와서 사용했다. 하지만 react-icons 라이브러리를 사용하면 React 프로젝트에 인기 있는 아이콘을 쉽게 사용할 수 있다. 📌 설치 ✔ npm npm install react-icons --save ✔ yarn yarn add react-icons 📌 사용 방법 https://react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include.. 공감수 0 댓글수 0 2023. 2. 2.
[React 리액트] Swiper 라이브러리 - Carousel 쉽게 구현하기 Carousel ❓ 이미지 슬라이더(?)의 정식명칭은 캐러셀이다. 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX 구성 요소이다. 아래 링크로 들어가면 다양한 carousel을 볼 수 있다. https://ant.design/components/carousel Carousel - Ant Design A carousel component. Scales with its container. When To Use When there is a group of content on the same level.When there is insufficient content space, it can be used to save space in the form of a revolving door.Commonly used .. 공감수 0 댓글수 0 2023. 2. 2.
[React 리액트] react-loading 라이브러리 - 로딩 스피너 만들기 react-loading 라이브러리를 이용하면 별도의 css코드를 입력하지 않아도 쉽게 로딩 애니메이션을 만들 수 있다. 📌 설치 npm 또는 yarn을 통해 라이브러리를 설치하여 사용한다. ✔ npm npm i react-loading ✔ yarn yarn add react-loading 📌 다양한 로딩 타입들 blank balls bars bubbles cubes cylon spin spinningBubbles spokes 📌 데모 확인하기 📌 예시 코드 import React from 'react'; import ReactLoading from 'react-loading'; const Example = ({ type, color }) => ( ); export default Example; 🔗 출처.. 공감수 0 댓글수 0 2023. 2. 2.
[React 리액트] react-new-window 라이브러리 - 새로운 window창 띄우는 방법 📌 설치 npm i react-new-window --save 📌 예시 코드 import React from 'react' import NewWindow from 'react-new-window' const Demo = () => ( Hi 👋 ) 📌 내 코드 onOpen} > NewWindow를 클릭하면 컴포넌트를 띄우도록 구현했다. 🔗 참고 react-popout 이라는 라이브러리도 있다. ❗ 데모 확인하기 http://jake.ginnivan.net/react-popout/ Document jake.ginnivan.net 🔗 출처 https://www.npmjs.com/package/react-new-window react-new-window Pop a new window in React, using.. 공감수 0 댓글수 0 2022. 12. 28.
[React 리액트] 파이어베이스 오류 Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase'). 파이어베이스를 설치 후 콘솔로 찍어봤는데, 위와 같은 오류가 발생했다. Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase'). ERROR in ./src/firebase.js 12:15-37 export 'default' (imported as 'firebase') was not found in 'firebase/app' firebase를 import 했는데, ./src/firebase.js 에서 에러 발생! 찾을 수 없다고 한다. https://exerror.com/solved-export-default-imported-as-firebase-was-not-found-in-fireba.. 공감수 0 댓글수 0 2022. 11. 5.
[React 리액트] Cannot read property 'map' of undefined 오류 해결 오류가 나서 해결 후 이미지 캡처를 하려고 일부러 오류를 만들었는데, 오류가 안 생긴다. 아무튼 map이 안 돌아가서 생긴 문제인데 {steps.map((step, idx) => ~~~~~} 만일 코드가 위와 같이 생겼다면 아래와 같이 변경해주면 오류가 해결된다. {steps && steps.map((step, idx) => ~~~~~~ } &&로 문제 해결 cf / JavaScript true / false 공감수 0 댓글수 0 2022. 10. 13.
[React 리액트] Module not found: Can't resolve 'web-vitals' 오류 해결 yarn을 통해 react를 실행했더니 오류가 발생했다. Module not found: Can't resolve 'web-vitals' 아주 간단한 해결 방법 - 터미널에 아래와 같이 입력한 뒤 다시 yarn start를 입력하면 compiled successfully를 확인 할 수 있다 :) npm i web-vitals --save-dev 참고: https://stackoverflow.com/questions/65396568/react-js-npm-start-shows-failed-to-compile-web-vitals React JS npm start shows failed to compile web-vitals I'm getting the error: failed to compile -/src/.. 공감수 1 댓글수 0 2022. 9. 26.
[React 리액트] useState const [state, setState] = useState(initialState); 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다. setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다. setState(newState); 다음 리렌더링 시에 useState를 통해 반환받은 첫 번째 값은 항상 갱신된 최신 state가 됩니다. 출처: https://ko.reactjs.org/docs/hooks-reference.html#usestate Hooks API Reference – React A JavaScrip.. 공감수 0 댓글수 0 2022. 8. 25.
[React 리액트] CSS 적용 * 이미지 불러오기 이미지 파일은 import 구문을 통해 불러오고, 불러온 이미지 주소를 src 속성으로 사용 import tistoryImg from './assets/tistory.png'; function Tistory() { return ; } export default App; 1) 인라인 스타일 : 리액트에서 인라인 스타일은 문자열이 아닌 객체형으로 사용 - 프로퍼티 이름: CSS 속성 이름 - 프로퍼티 값: CSS 속성 값 ⚠️ border-radius 또는 font-size와 같이 가운데 대시가 들어가는 것 그대로 쓰면 에러 발생 ➡️ 대시기호 없이 카멜 케이스로 작성해야함 eg/ borderRadius, fontSize const style = { borderRadius: '50%', .. 공감수 0 댓글수 0 2022. 8. 13.
[React 리액트] Props / Children Props: Properties의 약자 - 리액트에서 컴포넌트에 지정한 속성들을 Props라고 부름 - 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달 //App.js import Lotto from './Lotto'; function App() { return ( ); } export default App; //Lotto.js import lottoBlue01 from './assets/dice-blue-1.svg'; function Lotto(props) { console.log(props) return ; } export default Lotto; App 함수에서 사용하는 Lotto 컴포넌트에 color라는 속성을 blue로 지정, Lo.. 공감수 0 댓글수 0 2022. 8. 12.
[React 리액트] JSX 간단 문법 JSX : 자바스크립트와 HTML을 섞어서 쓸 수 있는 자바스크립트의 확장된 문법 : HTML의 태그를 그대로 사용할 수 있음 1) 속성을 추가하는 경우, HTML에서는 class를 사용하지만 JSX에서는 className을 사용해야함 Why? 자바스크립트에서는 객체지향의 개념으로 class라는 키워드를 사용하기 때문! 2) for라는 속성도 그대로 사용 불가! JSX에서는 htmlFor을 사용해야함 Why? HTML에서는 label 태그와 함께 쓰이지만 자바스크립트는 반복문에 for라는 키워드를 사용하기 때문! 3) eventhandler의 이름도 다름 onblur / onfocus -> onBlur / onFocus 와 같이 camelCase로 사용해야함 4) JSX로 HTML 태그를 작성할 때는 반.. 공감수 0 댓글수 0 2022. 8. 10.
[React 리액트] 엘리멘트 렌더링 > #### 엘리먼트 + 엘리먼트의 정의 + 리액트 앱의 가장 작은 빌딩 블록들 + 화면에 나타나는 내용을 기술하는 자바스크립트 객체 + 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현 + 엘리먼트의 생김새 + 엘리먼트는 자바스크립트 객체 형태로 존재 + 컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체 + 엘리먼트의 특징 + 불변성을 갖고 있음 + 엘리먼트 생성 후에는 자식이나 속성을 바꿀 수 없음 > #### 엘리먼트 렌더링하기 + 렌더링을 위해 ReactDOM의 render()라는 함수를 사용 + 리액트 엘리먼트를 HTML 엘리먼트에 렌더링하는 역할 + 렌더링되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정 > #### 렌더링된 엘리먼.. 공감수 0 댓글수 0 2022. 7. 6.
[React 리액트] JSX의 개념 / 역할 / 장점 / 사용법 JSX 개념 - A syntax extension to JavaScript 자바스크립트의 확장 문법 - JavaScript + XML/HTML JSX 역할 - 내부적으로 XML/HTML 코드를 JavaScript로 변환하는 역할(리액트의 createElement()함수가 이 역할을 함) JSX 장점 - 코드 간결 - 가독성 향상 - 보안성 향상(Injection Attack이라 불리는 해킹 방법을 방어) JSX 사용법 - 기본적으로 모든 자바스크립트 문법 지원 - 자바스크립트에서 XML/HTML 섞어서 사용 - 중괄호를 사용하여 자바스크립트 코드를 삽입 ex/ {`이 블로그의 이름은 ${props.name}입니다.`} 공감수 0 댓글수 0 2022. 6. 27.
[React 리액트] 에러 해결 리액트로 프로젝트 하는 도중에 에러 발생! Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? 제대로 하라네... 원래 이렇게도 되는데 JSX 까다로운 친구다 맨 끝쪽을 로 크게 묶어주면 문제 해결이다 ++++ 추가 합니다. 저때는 리액트 잼민이 시절이라 1도 모르고 했을 때라 원래 되는 거라고 생각했지만 아니었습니다... JSX는 자식 태그를 감싸는 부모 태그가 꼭 있어야하고, 저렇게 써도 되지만 이렇게 빈 태그를 사용해도 됩니다. 공감수 0 댓글수 0 2022. 6. 15.
[React 리액트] npm install react-router-dom 오류 해결 react를 하면서 router를 설치했다 npm install react-router-dom 하지만 아무 화면도 안 나왔다 오류면 말이라도 좀 해봐... 그래서 접었다 내일이면 되겠지라는 심정으로... 오늘 다시 했더니 오류 메세지가 떴다 A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 음... 그래~ 뭔지 모르겠고 그냥 json으로 보니까 나의 react-router-dom 버전이 높은 것 같아서 다운그레이드 했다 npm install react-router-dom@5.3.0 해결 완! 이상하다 어제 분명 내가 uninstall 했다가 새로 깔고 난리부르스를 쳤는데 안 더.. 공감수 0 댓글수 0 2022. 6. 13.
[React 리액트] 리액트 만들고 실행하기 react 리액트를 해보기 전에 준비를 해봅시다. 저는 VS Code를 사용하겠습니다. 준비1. Node.js 설치하기Node.js가 설치되어 있는지 확인하기윈도우-명령 프롬프트 / 맥os-터미널에서 아래와 같이 입력하기(버전이 나오면 설치된 것 / 'node은(는) 내부 또는...' 이렇게 나오면 설치가 안 되어있으니 설치 ㄱㄱnode -vNode.js가 설치 되어 있지 않다면? 설치하기!https://nodejs.org/en/2. npm 설치 확인하기npm -v3. npx 설치하기npm을 통해 npx를 설치하고 버전까지 확인 해주기npm install npx -gnpx -v 4. VS Code 설치하기https://code.visualstudio.com/5. 깃 설치하기https://git-scm... 공감수 0 댓글수 0 2022. 6. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.