TO_FE

이슈 클라이언트 측에서 White labeling한 앱에서 오류가 있다고 연락이 온 상태다.백그라운드에서 오래 뒀다가 다시 앱으로 진입했을 때, 피드(webview)만 보이지 않는다는 오류를 말씀해주셨다.클라이언트 측에서 보내준 사진을 보아하니 iOS 하단 바가 보여서 iOS상황임을 추측하고 핸들링하기 시작했다.   문제 핸들링검색을 해보니 같은 문제를 겪고 있는 사람들이 많이 있었다. (Webview 백화현상이라고 치면 많이 나온다.)https://hyggeinx.tistory.com/91 [iOS] WKWebView 웹뷰를 백그라운드에 오래 두면 흰 화면만 보이는 백화현상 해결 (webViewWebContentProcess웹뷰화면을 사용하다가 백그라운드로 내려둔 채 다른 앱들을 사용한 후 다시 웹뷰화..

Workspace  정의workspace는 여러 패키지를 하나의 프로젝트에서 효율적으로 관리하기 위한 설정을 말한다.  특징workspace로 사용되는 패키지를 node_modules에 설치하여 관리한다. 공통되는 의존성과 설정 등이 프로젝트 Root에서부터 공유된다. Hoisting: 공통 의존성을 루트 수준에서 관리하여, 중복 설치를 줄이고 일관성을 유지한다.개별 관리: 개별 패키지에서만 가지고 있는 의존성은 패키지 내부에서만 독립적으로 관리한다.즉, 프로젝트 Root에서 npm 설치 시 공통의 모듈을 설치하며, 패키지 내부에서 독립적으로 필요한 모듈은 각 내부의 패키지에서 개별적으로 모듈을 설치한다.// 폴더 구조├── node_modules│ ├── package1│ ├── package2..

사용 이유 한 달간의 웹사이트 서비스를 만드는 프로젝트를 하면서 사용해야하는 API가 많아지고, 이 모든 API와 통신해서 변하는 상태를 빠르고 쉽게 업데이트 하기 위해서 잘 알려진 react-query를 선택했다. 장점 1. 캐싱 2. get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. 3. 데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries) 3. 동일 데이터 여러번 요청하면 한번만 요청한다. (옵션에 따라 중복 호출 허용 시간 조절 가능) 4. 무한 스크롤 (Infinite Queries (opens new window)) 5. 비동기 과정을 선언적으로 관리할 수 있다. 6. react hook과 사용하는 구조가 비슷하다. Step 1 : Re..

채팅 기능 구현시 웹소켓 사용하는 이유 : 요청을 보내야 연결이 되는 http 통신과 달리, 실시간으로 양방향 통신이 가능하다. 보통은 이런식으로 Websocket API를 사용하지만, 필자의 경우에는 지원하지 않는다는 오류가 떠서 다른 라이브러리를 찾아보게 되었다. const socket = new Websocket() 코드 구성이 짧고 사용방법이 간단해 알아보기 쉬워서 SockJs와, 백엔드에서 stomp를 사용하기 때문에 두가지 라이브러리를 선택하게 되었다. 다음은 전체 채팅방의 코드이다. const ChatRoom = ({ setOpenChat }: any) => { const scrollRef = useRef(null); const userId = useSelector((state: any) =..

const [ state, setState ] = useState(false); // 이전 상태 사용 : 함수형으로 전달 setState(prev => !prev) // 객체로 사용시 const [ state, setState ] = useState({ a: '', b: 0 }) // 객체에서 한가지 키의 값만 바꾸고 싶다면 setState({…state, a: 'value'}) // 또는 key와 value를 변수로 지정하여 동적으로 바꾸면서 사용할 때 setState({…state, [key] : value}) setState(prev => { return { ...prev, [key] : value } } // 배열로 이전 값 사용하기 const [ state, setState ] = useStat..

쇼핑몰 프로젝트 진행시 장바구니 목록 체크박스 구현 문제점 처음엔 그냥 input 컴포넌트 자체에서 체크박스 구현하려고 했는데 물품의 id와 개별로 일치하는 체크박스를 만들어야 하기 때문에 컴포넌트 자체에서 각각의 input을 구분할 수 있는 방법을 찾기가 어려웠다. → map 돌리기 전에 check 된 id만 배열로 넣는 함수를 정의하고 prop으로 전달 전체 체크하는 input과 개별 체크 하는 input을 같은 컴포넌트안에서 처리하려고 함 → 기능 별로 나누고 check 된 id 배열과 장바구니 담긴 물품(배열)의 갯수가 같으면 true : false 폴더구조 : Cart > CartItem > CheckboxInput Cart > CartHeader > 전체 체크할 수 있는 input // Car..

API 연결 (2023.11.22 ~2023.11.25) (feat.트러블 슈팅) 1. api 구현시간이랑 서버 부하를 생각했을 때 서버랑 통신해서 삭제 및 수정 하는게 아니라 프론트에서 다하고 넘겨주는게 나을 것 같아서 redux로 변경 및 삭제 함수들 관리 ⇒ initialState에 get 요청 불러오기 //cartSlice.js export const setInitialData = () => { return async (dispatch) => { try { const data = await getCartProducts(); dispatch(GET_INITIAL_ITEMS(data)); } catch (error) { console.error('error setting initial data', e..

1. 함수형 컴포넌트 타입 추론 React.FC => 함수형 컴포넌트에 적용 가능하며, children을 ReactNode로 암묵적으로 수용한다. undefined로 들어올수도 있어 안쓰려는 사람들도 많다. 출처: https://itchallenger.tistory.com/entry/React-children-with-typescript-리액트-children-컴포넌트-타이핑 React children with typescript. 리액트 children 컴포넌트 타이핑 원문 : https://isamatov.com/react-typescript-children-prop/ Using React children prop with TypeScript I'll cover each of the types use..