Dev Lemmy

1. input과 rolling을 겹친다input에는 움직이는 효과를 넣을 수 없다.그래서 input과 롤링 컴포넌트를 겹쳐 놓은 후에 둘중에 하나를 투명하게 만들면 된다. 2. 보였다 안보였다 하기사용자가 검색창을 클릭해서 글을 입력하려면 기존에 롤링되어 보이던 글들은 방해되니 사라지게 만든다. 아래와 같이 스타일 컴포넌트를 정의한다const SearchWrapper = styled.div` position: relative; display: flex; align-items: center; width: 60vw; background: var(--white); border: 1px solid #ddd; border-radius: 20px; overflow: hidden; //롤링 문..

white-space: nowrap; : 줄바꿈을 하지 마라! (한 줄로만 써라)overflow: hidden; : 박스 밖으로 나가는 건 숨겨라!text-overflow: ellipsis; : 잘리는 부분은 ...으로 표시해라!위 세가지 속성을 넣어주면 된다. 그냥 공식 수준 3개 세트로 사용

설치 가능 조건터미널 사용이 가능한 환경인지 여부 로컬 개발 환경 또는 서버 환경에서 터미널 접근이 가능한 상태여야 합니다.CLI 실행을 위한 기본 런타임 설치 여부 Node.js 20 이상이 설치되어 있어야 하며, npm 사용이 가능한 상태여야 합니다.구글 계정 및 제미나이 사용 권한 보유 여부 최초 실행 시 Google 계정 로그인을 통해 인증 절차가 진행됩니다.네트워크 및 인증 관련 제한이 없는 환경인지 여부 사내망, 방화벽, 보안 정책 등으로 인해 외부 인증이 차단되어 있지 않아야 합니다.출처는 https://www.elancer.co.kr/blog/detail/1006 (매우 도움 됨 고맙습니다) Gemini CLI는 nodejs 버전 20 이상에서 가능 설치방법)1. 터미널에서 npm ins..

진행중인 프로젝트의 장바구니 페이지에서 수량 증가 감소 버튼으로 수량을 변경해보겠음.일단 수량은 store.js의 items 슬라이스에 있으니 items 슬라이스에서 리듀서 함수(state 변경 함수)를 작성해보자. 먼저 store에서 리듀서 함수를 만들자.플러스 버튼을 눌렀을 때 수량이 증가할 countUp이라는 함수와마이너스 버튼을 눌렀을 때 수량이 감소할 countDown이라는 함수를 만들어주겠음.countUp, countDown 함수 모두 공통적으로 버튼을 클릭한 배열의 요소에 접근해야하니 state와 action 두 매개변수를 사용하고,index에 접근하기 위해 action.payload를 사용하여 변수를 만들어준다. countUp 함수는 수량이 증가하는 것이므로 수량이 음수값을 가질 일 이 없..

Redux 라이브러리 사용 중리듀서 함수(state 변경 함수)를 JSX에서 호출 시 name 속성을 변경하도록 코드를 작성하였는데state가 객체 배열로 정의되어있으나 리듀서 함수에서 return 문자열을 반환하고 있어서 에러가 발생하였다.이것을 해결하기 위해 배열의 특정 요소를 update하도록 코드를 수정하고,어떤 요소를 수정하도록 할지 payload 프로퍼티를 사용하는법을 포스팅 하겠음. 먼저 JSX에서 state의 배열 요소중에 어떤것을 변경하도록 할지 인덱스를 store.js의 리듀서 함수 호출시에 넘겨주기 위해dispatch(changeName(i))} 으로 넘겨주겠음. JSX에서 dispatch()로 리듀서 함수를 호출할 때 넘겨주는 인자를 payload라고 관용적으로 부르고 작명한다. 그..

리덕스에서 state 변경하는 방법을 알아보자.지금까지 useState처럼 변경하는게 아닌 다른 방법을 사용해야하는데,일단 store.js에서 user라는 slice를 변경한다고 가정하자그럼 먼저 slice를 수정하는 함수를 reducers 속성에 작성하고slice를 수정하고 싶은 컴포넌트에서 이 함수를 실행해달라고 store.js에 요청하면 된다. 3step으로 정리하자면 step 1- slice 수정해주는 함수 만들기changeName의 매개변수인 state는 기존 state를 뜻하고 (여기선 'Da Hee')자유로이 작명 가능하지만 관습적으로 state라고 작성하여 사용한다.이 state를 사용하고 싶으면return 'lemmy ' + state 하여 사용 할 수 있음이제 changeName() 함..

저번 글에서 + 버튼을 누르면 숫자가 1씩 증가하도록 코드를 작성해봤는데이번엔 - 버튼을 누르면 숫자가 1씩 감소하도록 코드를 작성해보겠음 count state를 변경시켜주면 될것임.  추가해야할 것은수량이 음수일 수는 없으니 count state는 음수값을 가질 수 없도록 해주면 될 것이다.

상품 목록 페이지에서 플러스 버튼을 누르면 주문 수량이 1씩 증가하는 버튼을 만들어보자. 먼저 list 페이지에서 버튼과 수량을 나타내보겠음 이제 버튼 클릭 시 JS 코드를 실행시키려면 onClick 속성을 하용하면 된다.하지만 이렇게 사용하면 에러가 발생한다. 이유는 클라이언트 컴포넌트가 아니라 서버 컴포넌트이기 때문에 에러가 발생하는 것이다.(onClick 속성은 클라이언트 컴포넌트에만 사용 가능함) 그래서 클라이언트 컴포넌트로 바꾸어 줘야한다.        onClick 잘 되는것을 확인했으니이제는 원하는데로 onClick시 수량이 증가하도록 코드를 작성해보자. 먼저 상품 수량을 담을 state를 만든다.(state를 쓰면 값이 변경되면 자동 재렌더링이 되므로 아주 좋음) 이제 JSX에서 중괄호 문..

컴포넌트간에 데이터 전송해주려면 props 문법을 사용하면 된다.db에서 데이터를 가져오겠지만현재 DB가 없으므로 DB에서 가지고 왔다 치고 Cart 컴포넌트에 변수를 하나 만들어주겠음. 이 cart라는 데이터를 JSX에 넣으려면 어떻게 해야할까?중괄호 사용해서 cart 안에 있는 데이터 집어넣음 될 것이다.그래서 Cart컴포넌트의 자식 컴포넌트인 CartItem에서 사용해보면에러가 날 것이다. 이유는 cart라는 변수는 부모컴포넌트인 Cart 에서 정의되어 있기 때문에 하위 컴포넌트인 CartItem 컴포넌트에서는 사용할 수가 없기 때문임. 그럴땐 props 문법을 사용해서 부모 컴포넌트의 데이터를 자식 컴포넌트로 보내주어야 한다.단 중요한것은 부모 컴포넌트에서 자식 컴포넌트로만 props 문법으로 데..

데이터를 Redux store 안에 보관해 Cart.js 페이지에서 데이터 바인딩 해보자.데이터 갯수에 맞게 표 생성하고 반복문 쓰면 될 것이다.장바구니에 담긴 데이터라고 가정하고 장바구니 목록을 만들 것임. 먼저 store.js 파일에서 createSlice 함수를 사용해 state를 만들자 그리고 reducer에 등록해준다. 그러면 이제 사용 가능할것임.한번 사용해보자 먼저 Cart 컴포넌트에서 items 스테이트를 사용할 수 있도록useSelector로 변수를 만들어준다. 이제 map() 함수로 반복문을 만들자tbody 안의 내용을 items state의 array 갯수만큼 반복문을 돌리면 될것이니items.map() 해보자 map()를 사용하고고유 key갑으로는 item의 id값으로 하자. 그리고..