티스토리

프론트 개발 블로그

검색하기

블로그 홈

프론트 개발 블로그

maybe-b50.tistory.com/m

maybe.b50 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[React] 절대 경로 사용하여 모듈 가져오기 문제 리액트에서 컴포넌트 모듈 가져올 때 경로 설정하는 방법. depth가 깊어질수록 경로 설정이 불편하기 때문에 사용. 해결 jsconfig.json (타입 스크립트를 사용한다면 tsconfig.json) 파일을 생성하여 옵션을 작성하면 된다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } create-react-app.dev/docs/importing-a-component/#absolute-imports 공감수 0 댓글수 0 2021. 3. 11.
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. 문제발생 CRA 에서 npm install node-sass 설치 시 위와 같은 에러 문구가 발생하였다. 왜? CRA 사용 시 미리 설치된 sass-loader 에서 발생하는 에러로 node-sass@latest 는 v.5.0.0 버전이고 (내가 설치한 node-sass 가 5.0.0 버전) sass-loader는 v4.0.0을 예상하므로 버전이 호환되지 않음으로 생긴 에러라고 한다. -> stackoverflow 인용 노드 버전에 지원 정책에 따라 지원되는 node-sass 버전이 다르므로 node-sass 설치 시 노드 버전을 확인해봐야 한다. github.com/sass/node-sass/re.. 공감수 0 댓글수 0 2021. 1. 5.
windowing 라이브러리 애플리케이션에서 긴 목록을 렌더링 하는 경우 ' Windowing' 이라는 기법을 사용하는 것을 추천합니다. 이 기법은 주어진 시간에 목록의 부분 목록만 렌더링 하며, 컴포넌트를 다시 렌더링하는 데 걸리는 시간과 생성된 DOM 노드의 수를 크게 줄일 수 있습니다. React 공식 문서에서 추천하는 windowing 라이브러리 react-window react-virtualized react-window VS react-virtualized NPM Trends 사이트로 확인 해보면 react-virtualized 패키지의 사용자가 더 많은 것을 확인 할 수 있습니다. 그러나 React-virtualized는 React-window 패키지의 비해 크기가 무겁기 때문에 React-virtualized 에서도 .. 공감수 1 댓글수 0 2021. 1. 5.
Ref 와 DOM Ref 란? React 에서 컴포넌트에 접근할 수 있는 특수한 어트리뷰트를 말합니다. React.createRef() 함수 / 콜백 함수 / 문자열(레거시 API) 로 생성할 수 있습니다. ref 어트리뷰트가 콜백 함수인 경우, 함수는 DOM 엘리먼트나 Class 인스턴스를 인자로 받습니다. Ref 사용 함수형 컴포넌트를 사용할 땐 : useRef() Hook API 클래스형 컴포넌트를 사용할 땐 : React.createRef() 메서드 React 에서 DOM 을 직접 선택 해야 할 떄, Ref 를 사용합니다. 특정 엘리먼트의 크기나 위치를 선택 해야 할 때 포커스 설정을 해야 할 때 스크롤 바의 위치나 설정 등 미디어의 재생을 관리 할 때 (VideoJS 등 HTML5 비디오 관련) 서드 파티 DOM.. 공감수 0 댓글수 0 2020. 12. 17.
Forwarding Refs (React.forwardRef) Refs 전달하기 React.forwardRef 는 부모 컴포넌트에서 자식 컴포넌트로 ref 를 전달하여 부모가 자식 ref 를 참조 하는 기술입니다. - DOM 컴포넌트에 Refs 전달하기 - 컴포넌트 라이브러리 관리자를 위한 참고 사항 - 고차 컴포넌트(HOC)에서의 forwarding Refs - 개발자도구(DevTools)에 사용자 지정 이름 표시하는 방법 이 기법은 잘 사용되지 않지만, 아래의 두 시나리오에서는 특히 유용합니다. DOM 엘리먼트로 ref 전달하기 고차 컴포넌트(HOC) 로 ref 전달하기 DOM 컴포넌트에 Refs 전달하기 1 2 3 4 5 6 7 function FancyButton(props) { return( {props.children} ); } React 컴포넌트는 렌더.. 공감수 0 댓글수 0 2020. 12. 14.
Context API context 를 이용하면 컴포넌트 단계마다 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 props 를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에게 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있다. context 를 사용하면 트리마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유할 수 있다. 언제 context 를 써야 할까 하위에 있는 여러 컴포넌트들에게 props를 전달 해야 할 때 Context 를 이용하면 중간에 있는 엘리먼트들에게 props 를 넘겨 주지 않아도 전달 할 수 있다. context 를 사용 전에 고려 해야 할 것. context 를 사용하면 .. 공감수 0 댓글수 0 2020. 12. 10.
[Errer] name can no longer contain capital letters Cannot create a project named "Mashup-Todolist" because of npm naming restrictions : * name can no loger contain capital letters Please choose a different project name. 리액트 프로젝트 생성 시, 프로젝트 네이밍에 대문자가 들어가면 안된다. 리액트 프로젝트 이름은 소문자로! 공감수 0 댓글수 0 2020. 10. 28.
What is StrictMode in React? // index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( , ); React.StrictMode 는 버전 16.3에 추가된 기능입니다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링 하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화 합니다. StrictMode는 개발 모드에서만 활성화되기 때문에 프로덕션 빌드에는 영향을 끼치지 않습니다. Create-react-app 으로 웹앱을 설정하면 .. 공감수 1 댓글수 0 2020. 10. 27.
[Error] create-react-app / jest 설치 후 발생하는 에러 jest 를 설치 후 npm start 혹은 yarn start 로 리액트를 브라우저에 띄우려고 할 때 아래와 같이 에러가 발생한다. 프로젝트 종속성 트리에 문제로 Create React App 의 버그는 아니고 앱에서 수정해야 한다고 나왔다. 해당 매뉴얼 대로 확인해보니 Create React App 으로 리액트를 설치 했을 때 react-scripts 패키지에 jest가 이미 설치되어 있어서 에러가 나고 있었다. yarn run v1.22.1 $ react-scripts start There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you nee.. 공감수 0 댓글수 0 2020. 10. 14.
[React] render가 두번씩 발생하는 문제 create-react-app 으로 react 개발 환경을 설정해줄 때, 자동으로 index.js 파일 내에 코드가 추가 됩니다. 해당 코드로 인하여 render가 두번씩 발생합니다. React.StrictMode 는 버전 16.3에 추가 된 기능이며, 애플리케이션에서 잠재적인 문제를 찾는 데 도움을 줍니다. medium.com/nmc-techblog/wait-youre-not-using-react-strictmode-a9713927a33b Wait, you’re not using ?! Last month on twitter, I encountered a tweet by Sebastian Markbåge a React core team member asking developers if there app .. 공감수 0 댓글수 0 2020. 10. 12.
[Error] Warning: Each child in a list should have a unique "key" prop. 아래와 같은 코드를 작성할 때 Warning: Each child in a list should have a unique "key" prop. 이와 같은 에러 문구가 발생된다. 리스트의 원소마다 유니크한 'key' prop를 가져야 된다는 말이다. 리액트의 원소는 유일해야 되는데 원소가 리스트에 포함되면서 유일성이 없어졌기 때문이다. 불러오는 데이터에 id를 추가해 각각 원소마다 유니크한 값을 주고 key props를 불러오면 에러문구는 사라진다. 리액트는 컴포넌트가 서로 다르다는 것을 알 수 없기 때문에 이렇게 각각의 유니크한 key props 값을 주어야 한다. const foodILike = [ { name: 'banana', number: 1, image: 'https://www.google.co.. 공감수 0 댓글수 0 2020. 10. 12.
[React] Props Props란? React가 컴포넌트를 발견하면 JSX 어트리뷰트를 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props 라고 한다. props 란? attribute 와 properties 차이 props로 name, color 값 가져오기 props 값을 구조분해할당으로 가져오기 defaultProps children 조건부렌더링 props란? React가 컴포넌트를 발견하면 JSX 어트리뷰트를 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props(property)라고 한다. * props는 객체의 형태로 parameter 를 가져온다. attribute 와 propertices 의 차이 Attribute는 HTML문서에서 elements에 추가적인 정보를 넣을 때는 요소이고, Prope.. 공감수 0 댓글수 0 2020. 3. 7.
[React] JSX 기본규칙 JSX란? 자바스크립트 확장 문법으로 React 컴포넌트의 생김새를 정의합니다. JSX란? JSX 기본규칙 1. JSX에 표현식 포함하기 2. 두 개 이상 태그는 하나의 태그로 감싸기 self closing tag Fragment 사용방법 3. Style 설정 방법 4. Class 설정 방법 5. JSX 주석처리 6. return();은 가독성을 위해서 사용한다. 7. 컴포넌트는 네이밍은 항상 대문자로 JSX란? 자바스크립트 확장 문법으로 React 컴포넌트의 생김새를 정의한다. Bebel은 JSX문법을 React.createElement()로 호출한다. JSX문법이 자바스크립트로 변환되는 것을 확인할 수 있다. JSX 기본규칙 1. JSX에 표현식 포함하기 JSX를 if, for loop 안에 사용하고.. 공감수 0 댓글수 0 2020. 3. 6.
[React] React 시작하기 Facebook 이 만든 자바스크립트 라이브러리로, 사용자 인터페이스를 만들 때 사용한다. 왜? React인가? React 작업환경 구성 React 테스트 환경 구성 중 [Yarn start not found] 에러 발생 VSCode 터미널 권한 정책 문제 왜? React인가? 기존에는 Javascript를 사용하여 DOM을 변형하는 방식으로 사용자 인터페이스를 구현했다. 허나 이렇게 DOM을 직접적으로 건드리면 코드가 복잡해진다. 그래서 Ember, Backbone, AngularJS의 경우엔 자바스크립트의 특정 값이 바뀌면 특정 DOM의 값이 변경되어 업데이트하는 방법으로 간소화시켰다. React의 경우에는 상태가 바뀌었을 때 모든 것을 새로 만들어서 보여준다. 가상의 DOM(Virtual DOM)을.. 공감수 0 댓글수 0 2020. 3. 6.

문의안내

티스토리
로그인
고객센터

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