React37 [error] 저장시 eslint 자동으로 fix되지 않음 prettier/prettier 에러 좀 그만 보고 싶다.. setting.json 에 아래를 추가하니 잘 된다. 왜인지 모르겠지만 setting이 초기화 되었던 것 같다. "typescript.format.enable": false, "eslint.alwaysShowStatus": true, "eslint.autoFixOnSave": true, 7stocks.tistory.com/101 ESLint 를 이용한 코드 규격화 ESLint란? 다양한 사람들이 하나의 프로젝트를 작업하다 보면 서로 다른 코딩 규칙들로 스트레스를 받는다. 설령 규칙을 모두 정의 했다고 해도 실제 작업시 실수로 인한 오류들이 많이 발생 할 �� 7stocks.tistory.com 2020. 10. 16. [React 스터디] 7 : 다른 라이브러리와 통합하기 이 가이드는 jQuery와 Backbone의 통합에 중점을 맞추어 일반적인 몇 가지 사용 사례를 살펴봅니다. 동일한 아이디어로 기존 코드와 컴포넌트를 통합하는 데도 적용할 수 있습니다. 주의 이 방법이 가능하다고 해서 React 앱에 대한 최상의 접근 방법임을 의미하지는 않습니다. 가능하다면 React 컴포넌트를 사용하는 것을 권장합니다. React 컴포넌트는 React 애플리케이션에서 더 쉽게 재사용할 수 있으며, 해당 동작과 모양에 대해 더 많은 제어를 제공해 줍니다. DOM 조작 플러그인과 통합하기 DOM에 영향을 미치는 다른 라이브러리와의 충돌을 피하기 위해 React 컴포넌트가 업데이트할 필요가 없는 빈 를 렌더링한다. componentDidMount 내부에서 jQuery 플러그인에 전달하기 위.. 2020. 10. 12. SVG 파일을 컴포넌트로 만들기 react-svgr.com/playground/ SVGR Transforms SVG into React Components. react-svgr.com 2020. 10. 6. [React 스터디] 6 : 고차 컴포넌트 고차 컴포넌트란? Higher-order Component (HOC) 즉 컴포넌트 내에서 자주 반복되는 코드를 재사용하기 위한 React 기술 반복되는 코드 찾기 // Post.js import React, { Component } from 'react'; import axios from 'axios'; class Post extends Component { state = { data: null } async initialize() { try { const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1'); this.setState({ data: response.data }); } catch (e) { console.lo.. 2020. 9. 28. useState를 사용한 배열 set const [config, setConfig] = useState({ id: 1 width: '100px', items: array, }); const { width, items } = selectConfig; const changeSelectConfig = (value: string) => { setSelectConfig({ ...selectConfig, id }); }; 2020. 9. 22. 객체를 사용한 style 작성 const marginTop = -(id * 30); m.blog.naver.com/PostView.nhn?blogId=lth9036&logNo=221732813650&proxyReferer=https:%2F%2Fwww.google.com%2F [react-native] 컴포넌트 스타일2 (margin, padding, position, Style, StyleSheet ,css, android, ios) margin과 padding 속성 지정과 예제ㆍ컴포넌트를 명시적으로 위치시킬 수 있지만 반응형으로 동작하는 레이... blog.naver.com 2020. 9. 22. [React 스터디] 5 : Ref 전달하기 Ref란? 일부 구성 요소가 참조한 데이터를 하위 항목에게 전달하는 기능입니다. Ref를 사용할 때 input/textarea 등에 포커스를 해야 할 때 특정 DOM의 크기를 가져와야 할 때 특정 DOM에서 스크롤 위치를 가져오거나 설정을 해야 할 때 외부 라이브러리를 사용 할 때 1. ref 전달하기 // FancyButton.js const FancyButton = React.forwardRef((props, ref) => ( {props.children} )); import FancyButton from './FancyButton'; const ref = React.createRef(); render() { return ( Click me!; ) } 직접적인 부모-자식간이 아닌, ref 를 자식에게.. 2020. 9. 20. [React 스터디] 4: Context Context란? 부모의 props를 여러 자식 컴포넌트들에 전해줘야 하는 경우 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 값을 전달할 수 있습니다. context 만들기 context 만들기 연습을 하면서 느낀 점은 context, provider, consumer 등의 코드 작성 방법이 매우 다양하다는 것이다. 구글링하면 나오는 여러 context 예제를 보면 어떤 사람은 state, function을 context.js에 작성하는가 하면 어떤 사람은 app.js에서 작성하기도 한다. 다양한 코딩이 가능한 만큼 본인이 가장 이해하기 쉬운 방법을 찾아야겠다. import React, { createContext } from "react.. 2020. 9. 3. [React 스터디] 3 : 코드 분할 번들링 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. // App.js import { add } from './Math.js'; // Math.js export function add(a, b) { return a + b; } Math.js에서 export된 모듈이 App.js에서 import된 후 Webpack으로 빌드했을 때 번들링됩니다. https://velog.io/@bigbrothershin/Webpack-JS-ES6-%EB%AA%A8%EB%93%88%EC%8B%9C%EC%8A%A4%ED%85%9C-%EC%9D%B4%ED%95%B4 Webpack .. 2020. 8. 31. 이전 1 2 3 4 5 다음
