하트 모양 좋아요 버튼을 클릭하면 wishlist에 담기고 빨간색으로 버튼 색이 바뀌고 그걸 유지하는 것이 목적이었다. 처음에 어떻게 해야할지 떠오르지 않아서 구글링을 해봤는데 상태를 localStorage에 저장하여 유지하는 방법이 있었다. 그래서 localStora

발생원인 : 위 코드처럼 Action에서 첫 번째 인자로 product를 넣어줬기 때문이다. console.log로 product를 찍어봤는데, null이 떴다. null 이어서 아무값도 들어오지 않은 것이었다. 해결 방법: Action의 첫 번째 인자를 item으로

이 오류는 Next.js의 Link를 사용할 때 발생되었다. Next.js 공식문서를 읽어본 결과 'a' 태그를 빼 먹어서 발생하는 Warning이었다. Link를 쓸 때는 'a' 태그를 빼먹지 말자.이 오류는 map 함수를 사용할 때 key를 지정해주지 않아서 발생하

이벤트를 처리할 때, 기본동작을 없애고 넘겨준 것만 실행을 하고 싶다면preventDefault를 이용한다.ex) onClick 이벤트를 처리할 때 기본 동작을 없애고 onClick에 넘겨준 것만 실행되게 하고 싶다면

수평선

페이지 개발을 할 때 mui의 gridlist를 사용하여 개발을 하고 있었다.이렇게 설정을 했는데, 오른쪽 화면이 잘려보이는 현상이 발생했다.이렇게 gridlist에 속성을 주어 해결하였다.

개발을 하다보면 이미지를 다룰 경우가 많이 생긴다. 이미지의 크기가 변할 때 정사각형 비율로 유지를 하고 싶다면, 즉 이미지의 크기가 변해도 종횡비 즉 가로와 세로 크기 비율을 동일하게 만들고 싶은 경우css 속성에서이렇게 속성을 주게되면 잘 유지가 된다.

React-slick을 이용하여 슬라이더를 만들고 react-avatar를 사용해서 프로필이미지와 이름을 띄우고 인스타그램 스토리처럼 만들고 싶었다. react-avatar를 사용하여 한개의 데이터를 map 함수를 이용하여 화면에 띄우는 것 까진 순조로웠지만 데이터가

z-index 는 쉽게 말하자면 층을 쌓는 개념이다. 숫자가 높을 수록 화면의 가장 윗층에 쌓이기 때문에 화면 가장 앞쪽에 보이게 된다. 헤더를 앞으로 보이게 할 때 유용하게 쓸 수 있다.

next-redux-wrapper가 필요한 이유react에 redux를 붙이는건 react app에서는 단 하나의 redux store만 존재하므로 어렵지 않다.하지만 Next.js를 사용하게 되면 유저가 요청할 때 마다 redux store를 새로 생성하게 되므로 r

라이브러리 설치Javascript를 사용할 때는 위의 명령어로 설치를 하면 되지만, Typescript를 적용하면 styled-component를 인식하지 못한다. Typescript에서는 리액트 라이브러리에 대한 type이 정의가 되어있지 않기 때문이다. 따라서 ty

Next js 프로젝트 생성 과정은 생략next가 추천하는 tsconfig 세팅을 사용하기 위해 root 디렉토리에 next-env.d.ts 파일 생성( tsconfig.json을 생성해도 상관없음)생성 후 패키지 설치적용 확인root 디렉토리에 있는 pages 폴더

Typescript에서 useState hook을 사용할 때 해당 상태가 어떤 타입을 가지는지 Generics를 사용하여 설정해준다.하지만, Generics를 생략해도 상관없다. 알아서 타입을 잘 유추하기 때문이다하지만 꼭 써야할 경우가 존재한다. 바로 상태가 nul

Material-ui란?React 개발에서 쉽게 사용할 수 있는 UI Framework이다.설치사용법사용하고자 하는 항목 importstyles을 이용하여 각 component 커스터마이징공식 홈페이지에 모든 component의 예제가 코드와 함께 제공됨Material

Styled-component란?Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리다.설치기본문법생긴모양스타일 지정스타일을 지정하기 위해 위의 예시 처럼 tagged

Redux-thunk란?redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어이다.redux-thunk를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있다.함수를 디스패치 할 때 에는 해당 함수에서 dispatch와 getStat

Redux-persist란? >redux는 store를 종료하면 저장되어 있던 모든 상태가 없어진다. 따라서 캐시 기능을 구현하는 또 다른 장치가 필요하다. 그 작업을 지원해주는 라이브러리가 redux-persist이다. redux의 store와 localstorag

Redux란?React의 상태를 관리하는 라이브러리 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 가능, 글로벌 상태 관리도 손쉽게 관리할 수 있다.Keyword1) 액션(Action) : 상태에 어떠한 변화가 필요하게 될 때, 액션을

Next.js란? >리액트를 기반으로한 SPA를 빠르게 build할 수 있도록 도와주는 프레임워크이다. 대표적 특징 / 장점 1) 기본적으로 SSR을 제공한다 > 가장 큰 장점이자 특징! 2) SEO ( 검색엔진 최적화) 3) 더욱 빠른 페이지 로드를 위한 코드

한 개의 페이지로 구성된 어플리케이션이다.웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드한다.그 이후 새로운 페이지 요청이 있을 경우, 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다.어떤 링크를 클릭한다고 해서 그에 관련된 모든 파일을 다운