React

정말 초초초초 간단하게 react, html에서 css로 misspell 혹은 틀린 글자 등 아래에 wavy underline, 즉 밑줄이 보이게 하는 코드입니다! span 전체 코드 : {text.children} 즉, textDecoration: 'underline wavy 원하는컬러코드(ex: #FFFFFF, red, black 등)' 이부분만 추가해주시면 됩니다 ㅎㅎ 완성!!! 끝입니다!!!! 저는 Draft.js를 사용중인데, 모든 editor에 대해 맨 앞글자만 해당 스타일이 적용되도록 구현한 결과입니다. 참고로 저는 저 부분을 클릭할 수 있게 해야해서, hover했을 때 포인터 모양을 바꿔주기 위해 cursor: 'pointer'를 추가해줬어요! 참고 : https://stackoverflo..

Synchronous Actions Till now, as soon as an action was dispatched, the state was immediately updated. If you dispatch the BUY_CAKE action, the nomOfCakes was right away decremented by 1. Async Actions Asynchronous API calls to fetch data from an end point and use that data in your application. Goals for our application Fetches a list of users from an API end point and stores it in the redux stor..

Middleware Suggested way to extend Redux with custom functionality. Provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. Use middleware for logging, crash reporting, performing asynchronous tasks etc. We will use 'redux-logger' in this example. Previous code // index.js const redux = require('redux') const createStore = redux.createStore co..

Middleware 미들웨어 Custom functinoality로 Redux를 확장시키기 위한 방밥으로 권장되는 방식. Action을 dispatch할 때와 action이 reducer에 도달하는 순간의 사이에 third-party extension을 사용할 수 있도록 해준다. 로깅, 크래시 리포트, 비동기 처리등의 작업을 할 때 사용된다. 이 예제에서는 'redux-logger' 미들웨어를 사용해보았다. 이전 코드 // index.js const redux = require('redux') const createStore = redux.createStore const combineReducers = redux.combineReducers const BUY_CAKE = 'BUY_CAKE'; const ..

에러 전문 : E/unknown:ReactNative: Exception in native call java.lang.RuntimeException: Unable to load script. Make sure you're either running Metro (run 'npx react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release. AndroidMenifest.xml 파일을 포함해 몇가지 설정을 바꾼 후에 안드로이드 스튜디오에서 실행이 계속 안되는 에러가 발생.. 요런식으로 계속 떠서 'Invalidate Caches' 도 몇번 하고 이것저것 건드려보고 구글링 해봤는데 다 안됨. 그러다..

#3.0 Introduction - terminal에서 원하는 폴더로 가서 다음 코드를 친다 expo init WorkHardTravelHardApp --npm -전에 했던거와 같이 아래 사진에서 그냥 blank에서 엔터친다. #3.1 Touchables - 우리가 만들 어플 디자인 링크 - 우선 맨 위의 'Groceries', 'Work' 라고 적혀있는 곳에 해당되는 헤더를 만들 예정. - Styles 의 paddingVertical, paddingHorizontal 은 css에는 없는 속성들. Button components (1) TouchableOpacity : sort of a view(a box?) that is ready to accept or listen for pressing events..

Error : Render Error Minified React error #321; visit https://reactjs.org/docs/error--decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 니꼬쌤 react native 강의를 따라하다가 위와 같은 에러가 났다. 조금 찾아보니 심각한 에러는 아니었고, useEffect, useState를 쓸 때 자동완성으로 잘 안보고 잘못된 곳에서 import 했기 때문. 해결 방법은 다음과 같다. 에러가 난 코드 : import { useEffect, useSta..

Error : Uncaught Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. 노마드 코더의 'ReactJS로 영화 웹 서비스 만들기' 강의 들으면서 치는데 혼자 이 에러가 나서 열심히 찾아보다가 찾은 해결책. 문제가 되고 있던 코드 : const App = () => { const data = React.useState(); console.log(data); return ( Total Clicks: 0 Click me ); } ReactDOM.render(, root); 해결 방법은 진짜 매우 간단.... 수..