Frontend

React로 파일 업로드 하는 법을 검색해보면input 태그와 label태그를 활용해서 하는 코드가 많이 나온다.나는 이미 코드에 커스텀해둔 버튼이 있어서, 해당 태그를 label로 감싸거나 해당 태그 안쪽에 label을 넣든 뭘해도 작동하지 않았다. 그래서 onChange로 input태그 ref에 접근하여 파일 업로드 하는 방식으로 구현을 했다.이때 react로만 개발하면 useRef에 타입지정을 다로 하지 않아도 잘 실행이 되나,나는 프로젝트에서 typescript를 쓰고있기 때문에 타입을 지정해주지 않으면 타입 에러가 났고,아래 코드로 해결했다. 코드import { useRef } from "react";//구현해둔 Button ui를 누르면 input type=file이 클릭돼서(.click())..

정말 초초초초 간단하게 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등이 존재하지 않음. -> ..