Frontend

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

에러 전문: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable'.ts(2684) No overload matches this call. Overload 1 of 11, '(op1: OperatorFunction, op2: OperatorFunction): Observable', gave the following error. Argument of type 'Observable' is not assignable to parameter of type 'OperatorFunction'. Type 'Observable' provides no match for the signature '(source: ..

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 ..

#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..

* 자막 없이 영어로 들어서 중간중간 영어가 많이 섞여있을 수 있음. #2.0 Snack https://snack.expo.dev/ Snack - React Native in the browser Write code in Expo's online editor and instantly use it on your phone. snack.expo.dev 웹 페이지에서 react native 코드도 치고, 바로 옆에 에뮬레이터로 결과도 보여줌. QR코드 찍어서 개인 핸드폰으로도 바로 볼 수 있음. 군대, 폰이 없는 경우 등 다양한 환경에서 웹 브라우저만 접속이 가능하면 들어가기 가능. #2.1 The Rules of Native - RN은 웹사이트, html이 아니라 div, span등이 존재하지 않음. -> ..

#1.1 Welcome - 강의 소개~~ 환영~~ #1.2 Requirements - 강의 이해하기 위해 미리 알아야 하는 것들 : 'React', 특히 state, props, useEffect, useState - 얘네만 알면 그냥 들어도 무방! 리액트 엄청 고수일 필요 없음! #1.3 Software Requirements - 실제로 배포하고 제대로 사용하기 위해선 안드로이드 스튜디오, 에뮬, 자바 등 깔아야 할게 많음. - 해당 강의에선 쉽고 빠르게 바로 코딩을 배우기 위해 바로 결과를 보여주는 툴을 사용할 것. - 다 들은 후에 실제로 배포하고 등등 하고 싶으면 그 땐 위의 것들을 셋팅해야할 것임. #1.4 Installing Requirements - RN app is not made only..