kasumil의 코딩 공작소

import React from 'react'; import Head from 'next/head'; import Nav from './Nav'; import Footer from './Footer'; type Props = { children: any; } function Layouts({children}: Props) { return ( {children} ) } export default Layouts; // 위처럼 구성했었다. 위 처럼 내용을 구성했더니... 클릭 Nav 컴포넌트의 클릭이벤트가 아무것도 작동이 안되는 버그가 있었다. 흠.... 무엇이 문제일까? 하고 Nav바만 엄청 보고 고민하고 그랬는데, 원인은 Head였다. import React from 'react'; import Nav f..

간단하게 메타마스크 내에서 굴러가는 부분을 구현하기 위해서 React로 해당 부분을 구현해보았다. 목적: 로그인 값이라던가 프론트 세션스토리지와 쿠키값 소실 여부를 체크하기 위함. 로그인 인증방식에는 세션 기반과 토큰 기반으로 구성되는데, php로 접속시 헤더값인 세션이 삭제되어 로그인 유지가 안되는 끊김이 생기는 문제가 발생하고 있었다. 그래서 React 세션스토리지 저장과 쿠키값 저장을 구현해보았더니 잘되네.. 서버 통신해서 success를 주기로 구성해놨더니 그 값을 잘 받아와서 저장하더라. 이번에 기능을 구현하면서 발견한 점이 React에선 내부 통신이 안된는 것 같더라. php는 내부 통신을 통해서 해당 Controllers에 접근하여 외부 통신을 다르게 하고, 호출시 아예 도메인을 분리하여 사..

codeigniter에서 헤더 값 유지가 안되는 메타마스크 내 브라우저였다. 통신시 모든 값을 헤더 값을 다 지워버림. 아이폰은 간간히 지우는... 혹시 몰라서 js 프레임워크를 사용해보니 값 유지가 잘된다. 실제로 페이지 이동이 되는 방식이 아니라서 그런가 흠.. 오픈씨, 매직에덴이 왜 느려터진 react로 개발하는가 했는데, 그런 이유가 이런거였나 싶기도 한다. https://youtube.com/shorts/OAHTNegOm34

만들려고 했더니 리액트 라우터 돔이 v6로 바뀌면서 호출방식이 바뀐걸 오늘 알았다. Switch 함수가 사라지고 Routes로 변경되었고, usehistory도 대체됨. 이게 뭔 이야기인가 했더니 요거 였다. 바빠서 영상이 올라온 것만 봤었다. 그리고 까먹음. https://velog.io/@ksmfou98/React-Router-v6-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%95%EB%A6%AC React Router v6 업데이트 정리 velopert님의 영상을 토대로 정리한 블로그 글입니다.동영상으로 보실분들은 velopert님의 유튜브 영상을 시청해주세요!React Router v6가 정식으로 릴리즈 되었다. 공식문서그 동안 사용했던 React Router v..

리덕스 툴킷을 다시 배우려고 정리 좀 했다. useSelector = 리덕스 라이브러리 내장된 함수로 리듀서에 있는 state값을 불러오는 함수. useDispatch = 리덕스 라이브러리 내장된 함수로 리듀서 값을 변경시키는 명령 함수. 왜 리덕스가 어렵냐 하면 보일러 플레이트가 많은 상태에서 실질적으로 용어가 많은데, 쓰임을 모르겠으니 헤매는 것. action은 payload를 가지고 있는데, 가르칠때 action도 같이 가르치니 이해가 안된상태에서 헤매게 되는 것. 쉽게 말하면 dispatch 사용하는 것을 action인데, 이를 다른 것처럼 설명하니 헤매게 되는 것이다. dispatch = action이라고 이해하면 편하다. 최상단 index.js import React from 'react'; ..

error type 3 error activity class does not exist 이 문구의 에러는 원인은 여러가지이다. 하지만 나의 경우에는 다른 init으로 만든 android를 가져와 덮어 씌우는 문제에서 발생된 문제였기에 해당문제는 제목에 따른 문제였다. ''have"라는 이름으로 프로젝트를 만들었고 이것이 gradle을 만지다가 고장나버렸다. "div"라는 이름으로 긴급하게 만들어 div android파일을 have android 파일에 덮어씌웠더니 작동은 되는데 이상한 에러 문구가 뜬다. error type 3 error activity class does not exist 이러한 이유는 프로젝트는 have이나 실제로 구동되는 것은 div 프로젝트로 인식하기에 그렇다. 기존에 있는 bui..

youtu.be/dlq1afe1ZX8youtu.be/dlq1afe1ZX8 위코드에서 적용하려고 뻘짓했으나 실패했던 코드인데 굉장히 쉽게 적용했다. 왜 고생했던거지?? 내가 그만큼 실력이 올라간건가????? 굉장히 쉽게 적용했다. 하지만, 로그인, 회원가입을 보면 리덕스에서 입력값이 초기화 되지 않는 부분이 있어 이를 수정하여 다시 적용할 필요가 있다. 회원가입이나 로그인에 나가기 버튼이 없는 것도 있고, src='public/image'를 useEffect로 호출하면 base64로 인코딩되어 글자로 들어오는 이미지들을 다시 이미지로 디코딩 하는 것을 몰라서 이를 어찌해결해야하나? 싶은 것도 있다. 이것이 해결되면 48장 사진을 인스타처럼 표시가 가능하고, 슬라이더로 볼 수 있으리라. 아직 이부분으 더 연..

리액트 라우터와 호환되지 않는 단점을 가지고 있으나, 코드스플리팅, 데이터로딩, 서버사이드 렌더링을 가장 쉽게 적용할 수가 있어 매우 각광받는 방식이다. 리액트 라우터를 쓰려고 하는 경우 직접 코드스플리팅, 데이터 로딩, 서버사이드 렌더링을 직접 구현해야한다. nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org Razzle Next.js처럼 서버 사이드 렌더링을 쉽..

useCallback, useMemo 둘다 사용방식은 동일합니다. const onInsert = useCallback(() => { const nextList = list.concat(parseInt(number)); setList(nextList); setNumber(“); }, [number, list]) useEffect의 의존성 배열 마냥 [] 대괄호 안에 있는 것이 변화가 있을때 작동하게 만듭니다. 둘다 성능의 최적화에 사용되는 함수인데, useMemo 함수내부의 연산을 주로 최적화 하는데, 사용된다. useCallback은 이벤트 함수를 필요할때만 만들게 만듭니다. 'useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에..

잠깐 서버구축으로 node로 외도한 건 비밀. 다시 돌아왔습니다. 테슬라 클론을 진행 중 입니다. 현재 스크롤이벤트에 발목이 잡혔는데요. {data && data.car.map((el, i)=> { return ( ) }) } 그 이유는 리액트에서 DOM에 직접 접근하기를 권하지 않고 있습니다. useRef란 것을 사용해야하는데, 해당 것을 사용하기가 어렵다는 것이죠. 자료가 별로 없습니다. 기껏해야 해당 위치로 버튼과 연동하는 방식? 하지만 직접 접근이 가능하니 그것으로 접근해도 됩니다. document.addEventListener('scroll', function() { var currentScrollValue = document.documentElement.scrollTop; console.log..