리액트

기존 React 프로젝트(v18.2.0)에서 Next.js(v14.1.0)로 마이그레이션

최근 쇼핑몰을 공부해보고 싶어서 리액트로 간단하게 쇼핑몰을 만들었는데, 이를 고도화시키고 싶은 욕심이 있었다. 고도화를 하면서 기존에 쇼핑몰을 어떻게 만들었는지 기억이 가물가물하기도 해서 이를 Next.js로 마이그레이션하면서 쇼핑몰에 대해 다시 복기하고 기능을 고도화시키고자 하였다. 또, 리액트로 사이트를 만들고 나서도 그랬듯이 최종적으로 다 만들고 기억이 안 날수도 있기에 이에 대해 공부도 하고 기록으로 남기고자 한다. 최초 프로젝트를 마이그레이션하고자 결심하고 뭔부터 해야할 지 막막해 검색을 하고 사이트[링크]를 참고해 프로젝트를 시작했다. 참고사이트에서는 먼저 Next.js를 CRA로 시작하라고 돼있었지만 처음 시작부터 참고하고 싶어서 새로운 깃헙 프로젝트를 파서 거기에 기존 프로젝트를 기록으로 ..

DOM onclick vs React onClick

아래 두 코드의 차이가 뭘까? ex1 ex2 위의 버튼에서 작성한 onClickButton()의 경우에는 DOM의 Event, 아래는 리액트의 Event이다. 둘의 가시적인 차이는 react에서는 camelCase 컨벤션을 따른다. 또한 DOM Event의 경우에는 외부 자바스크립트를 언제든 쓸 수 있지만 React의 경우에는 이벤트를 반드시 컴포넌트가 생성될 때 명시돼있어야 한다. 참고자료 아티클

프로젝트에 필요한 무료 favicon과 로고를 만들 수 있는 사이트

사이드 프로젝트를 하면서 간단한 파비콘이나 깃헙 리드미 파일에 로고 이미지를 넣어 꾸미고 싶을 때 유용한 사이트. 다양한 폰트가 있어서 이쁜 폰트를 사용할 수도 있다. 사용한 폰트나 이모지의 저작권은 각각 확인해야 한다. 'Terms Of Use' 메뉴에 있으니 참고해서 사용하면 엄청 유용하게 쓸 사이트인 것 같다. 다만 이미지를 로고로 만들고 싶을 경우에는 제한적이다. 그럴 땐.. 지인 찬스.. https://favicon.io/ Favicon.io - The Ultimate Favicon Generator (Free) With Favicon.io you can quickly generate a favicon for your website for free! favicon.io

[React] React Hooks - useMemo, useCallback, useRef

1. useMemo 의존성 변수가 변하지 않은 경우 기존의 값을 그대로 반환함으로서 렌더링 속도를 빠르게 할 수 있는 hook. useMemo함수는 렌더링이 진행되는 과정에서 실행되기 때문에 유의해서 사용해야한다. 예를 들어 서버에서 데이터를 받아오거나 DOM 객체에 접근해야하는 경우는 useEffect를 사용해야 한다. 의존성 배열을 넣지 않을 경우 렌더링 때마다 항상 실행된다. 혹은 의존성 배열을 빈 배열로 남겨둔 경우 useEffect와 같이 마운트 시에만 호출된다. const memoizedValue = useMemo( () => { return updatedValue(deps1,deps2); },[deps1, deps2] ); 2. useCallback useMemo와 달리 값이 아닌 함수를 반..