webSocket에 이전부터 관심이 있어서 찾아보았는데 webSocket은 크로스 브라우징이 안되는 곳이 있다고 해서 socket.io라이브러리로 만들어 보았다.처음에 백엔드에서 설정을 해줘야 해서 폴더를 server와 client로 만들어 준 후 client에는 np

redux store처럼 전역상태를 관리해주는 store를 만들어 줄 수 있다.redux와 똑같이 store를 만들어 주면 된다.그리고 이걸 Home.svelte에서 사용하면이렇게 subscribe를 통해서 가져와서 볼 수 있다.그리고 수정을 하기 위해서는 update

이미지 하나면 html에 다운 속도는 문제가 없는데 만약 이미지가 여러개면 유저가 페이지를 들어갈 때 바로 안보이고 다운로드가 완료된 이미지 먼저 보여준다.하지만 이거는 사용자 경험에 안좋은 것이 되서 lazy loading을 시키면된다.만약 백엔드에서 이미지를 받아

react 18 버전에서는 여러 기능이 추가 되었다.첫 번째 기능으로는 Reaact Suspense이다.이거는 16버전에도 있었는데 실험적으로 테스트 하고 있었는데 18버전 부터는 더이상 실험적이지 않고 서버 사이드 렌더링과 함께 더욱 강력해졌다.Data Fetchin

react query로 간단히 pagenation기능을 만들려면 간단하다.useState를 이용해서 page를 세팅해주고이렇게 한 후 버튼을 만들어 주면 된다.일반적이지는 않지만 이 keepPreviousData옵션은 useInfiniteQuery후크와도 완벽하게 작동

Svelte는 react와 달리 가상 돔을 이용하지 않고 적은 코드로 페이지를 보여줄 수 있다고 메인화면에 나와있다.(뭔가..리엑트를 저격한 느낌)뭔가 신기해서 한번 공부해 보았다.Svelte의 문서에 보면 이런식으로 되어 있는데 뭔가 간단하였다. 스크립트안에는 구성

인피니티 스크롤을 구현하기 위해서는 보통 js 나 react 같은 경우 제일 하단에 div를 숨겨놓아서이전 previousData를 array라는 변수에 저장해놓고intersectionObserver를 이용해 감지를 해서 페이지네이션 처럼 다음 페이지를 호출하여 arr

redux와 redux-saga만을 이용하여 프로젝트를 진행하였다.하지만 refresh로 다시 api호출하는 것이 유저 측면에서도 안좋다고 생각을 해서 찾아보니 react query라는 라이브러리가 있었다.설치 방법은 간단하였다.문서에 가면 이렇게 설치를 진행하고 qu

react native 메인에서 useEffect 에서 api를 사용할려 하려 하였다.하지만 첫 렌더 할때만 실행이 되고 다른 스택으로 넘어가서 돌아올때는 실행이 안된다.해당 이슈를 찾아 보았는데 아래와 같이Listening to the 'focus' event wit

나는 항상 list에서 뽑을 때 tag에 data-set 을 사용해서 onClick할 때 e.target.dataset.set을 사용하여 해당 리스트에 맞는 id 를 가져와서 작업을 했다.하지만 이는 실제 DOM을 건드리는 일이라고 해서 성능에 살짝 안좋다고 한다. 그

이제껏 redux 와 redux-saga를 사용할때 일일히 사용자 token을 store에서 꺼내서 넣어주었다. 하지만 이렇게 하는 것 보다 로그인 할때 axios에 인스턴스를 생성할때이런식으로 client.defaults.headers.common"Authorizat

react와 마찬가지로 next js 를 Amplify로 배포할때 이슈가 여러가지 있었다.처음에 배포할때는 이상이 없었지만 여러번 배포를 진행하면 pc는 문제가 없는데 스마트폰에서 확인을 하면 이미지를 못 가져오고 작동이 안되는 이슈가 생겼다. 그래서 구글링을...해보

프로젝트 마다 redux와 redux saga를 사용해왔다. 하지만 api가 나오면 일일히 lib > api 폴더에 여러 api를 export해왔었는데 이런것이 뭔가 힘이 들고 찾기도 어려웠다. 그래서 생각해 낸게 만약 API 가 '/test/tesed/'로 get하는

react 와 next js 로 개발을 시작한지 1년이 넘었을 때 문득 앱쪽도 건드려 보고 싶은 마음이 생겼다..react native를 처음 사용을 해봤는데 처음 환경설정에서 부터 어려움이 있었다.환경설정을 expo cli 와 react native cli 가 있는데

scrollIntoView는 Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.이를 사용하면 특정 버튼을 누르면 해당 element까지 도달할 수

react 할때 redux와 redux설정이 쉬웠는데 next에서 리덕스와 리덕스 사가를 설정하려 하였는데 상당히 까다로웠다. redux폴더에 store를 만들어서 이런식으로 middleware로 사가를 연결해주고 store를 만들어 준다. 그리고 \_app.js 에서

Next js를 처음 사

js에는 녹음기능을 하기 위해 navigator 객체에서 미디아를 가져와서 녹음을 할 수 있다.이렇게 권한을 얻고 녹음 기능을 만들수 있다.하지만 더 여러 옵션들을 편리하게 주기 위해 recordRTC라는 라이브러리를 사용하였다.사용 방법은 간단 하다.이렇게 권한을 가

회사에서 기능을 만들다가 javascript로 처음 csv 파일 다운로드 기능을 만들어 보았다.처음엔 와... 어떻게 하지... 구글구글... 역시 구글엔 많은 정보가 있었다.push를 할때 replaceAll(',','')을 하여 아이템 안에 ,이거를 다 제거해주고

Action을 하기 전에 state가 구상되어 있어야 한다.액션은 사실 그냥 객체 입니다. (플레인 객체)두 가지 형태의 액션이 있습니다.{type:'TEST'} // payload없는 액션{type: 'TEST', params: 'hello'} // payload 있