JH 개발 블로그

let age:number = 3; let isAdult:boolean = true; let a:number[] = [1,2,3]; let a2:Array = [1,2,3]; let week1:string[] = ['mon', 'tue', 'wed']; let week2:Array = ['mon', 'tue', 'wed']; let mrgintCtsfd:string | undefined = undefined; let nullableNumber:number | null = null; let color:'red' | 'orange' = 'red'; color = 'orange'; color = 'green'; // 에러 // yarn run tsc 시 오류된 부분 나옴 funtion sum( x:number..

페이지네이션 정의 페이지네이션은 전체 데이터를 보여주는 것이 아니라 그 버튼에 맞는 일부의 데이터를 보여주는 것... 과 같은 것 이전/다음 페이지 백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용됩니다. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야할 겁니다. 흔히 게시판의 "이전/다음 페이지"를 끊어 보여주는 기능으로 익숙할 텐데요. 많은 웹사이트에서 널리 사용되고 있는 개념이기에 친숙하게 느끼실 듯 합니다. 프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달합니다. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 됩니다. 구현 방식 프론트엔드..

git rebase -i main 맨 상단만 pick 하고 나머지 커밋은 s 로 남겨둔다. 그 다음 에디터가 떴을 때, 남기고 싶은 커밋 메시지만 남긴 후 나머지 커밋 메시지는 지워준다. 보통 마지막 커밋 메시지를 남김 (커밋을 깔끔하게 하나로 관리하기 위한 행위를 하고 있는 중인 것이다.) 그리고 보통 git rebase 를 하기 전에 main 브랜치에서 git pull 해주는 것은 필수이다. 또한 현재 작업하고 있는 브랜치로 가서 "git rebase -i master" 명령어로 git merge 와 같은 역할을 해줘야 브랜치가 최신 상태로 업그레이드 된다.

[ HINES ] 프로젝트 소개 우리 팀은 오늘의 집 서비스를 클론코딩 하기로 결정했고, 오늘의 집에서 뻗어나가 ‘몇십년 후의 집’ 이라고 초기 컨셉을 잡게 되었다. 몇십년 후의 집을 영어로 해서 House in decades, 줄여서 '하인즈'로 프로젝트 이름을 정하게 되었다! 우리 팀은 몇십년 후의 집은 어떤 모습일지 고민하다가 우주 컨셉이 떠올라서 우주 컨셉의 인테리어 가구나 이동도구, 우주복 등 스토어쪽으로 구현해보는 것으로 목표를 잡았다. ( 오늘의 집의 커뮤니티 기능은 프로젝트 기간상 시간이 부족할 것 같아 제외하게 되었다. ) [ 프로젝트 목표 ] - 그동안 학습했던 지식들을 2주 간의 팀 프로젝트에 활용 - 스타일컴포넌트를 이용한 초기 세팅부터 전부 실제 사용할 수 있는 서비스 수준으로 기..

이번 주 할일 페이지네이션 실습 영상 보기 - (월)까지 이력서 - (월)까지 소셜 로그인 통신 - (월)까지 상세페이지 라우팅 장바구니 담기 기능 구현 (상품 id, 수량) 리뷰 달기 기능 구현 (페이지네이션) 이번 주는 금요일에 git rebase 를 안보고 명령어를 쳐봤다가 대형 사고가 일어나서 git reset 을 10번 사용했고 이마저도 정상적으로 작동이 안되는 것 같아서 멘붕이 되었다. 주말에 천천히 기능 구현이나 해볼까 했더니 git rebase 와 몇시간 동안 씨름했다.... 결국엔 모든걸 바탕화면에 백업하고 완전 초초초초초초기 상태로 돌아갔다.... 그리고 branch 를 삭제해버리고 강제로 push... (아 이거 강제로 push 해도 될란지 모르겠다.) => 원래 하는거였다! 암튼 이..

Parameter Parameter 는 매개변수라는 뜻 즉, url 경로에 매개변수를 도입할 수 있다!! 1. Path Parameter 와 Query Parameter 의 차이점에 대해서 설명할 수 있다. 2. useNavigate, useLocation, useParams 훅의 용도가 무엇인지 설명할 수 있다. 3. URL 에서 동적인 부분을 변수로 처리할 수 있고, 이를 통해 동적 라우팅 기능을 구현할 수 있다. 4. offset 과 limit 개념을 사용하여 페이지네이션 기능을 구현할 수 있다. 라우팅의 정의를 다시 살펴보면.... (다른 경로에 따라 다른 화면을 보여주는 것) 이다. 라우팅을 사용하는 이유는 -> 리액트는 SPA 이기 때문이다. < 우리가 배운 기존의 라우팅 ..

class 선언없이 컴포넌트에 직접 장착한다. CSS IN JS import styled from 'styled-components'; // import 해와야 한다 컴포넌트에 직접 스타일 넣어서 스타일링하기 let 박스 = styled/div` padding : 20px; ` 이렇게 백틱 안에 스타일 선언한다. css 를 미리 입혀놓은 컴포넌트... className 작명이 필요 없다. let 제목 = styled.h4` font-size: 25px; `; 상세페이지 h4 태그에다가 적용하는 방법이다. 다른 컴포넌트에 전파될 실수를 방지한다. let 제목 = styled.h4` font-size: 25px; color: ${ props => props.색상 } `; 상세페이지 `글자 $ {변수명} 글자`

내가 구현하려고 하는 것은... 로그인이 성공되면 상단바의 아이콘이 사람 모양으로 바뀌어지고, 로그인을 하지 않으면 상단바의 아이콘이 LOGIN / SIGNUP 으로 나타내는 것을 구현하는 것이다. 그래서 내 생각에는 상단바 컴포넌트에서 isToken 이라는 useState 변수를 선언하여, useEffect 를 사용해 만약 isToken 이 true 이면 아이콘이 사람 모양, isToken 이 false 이면 아이콘이 LOGIN / SIGNUP 으로 바꾸도록 코드를 짰었다. (이 모든건 상단바 컴포넌트 안에서 짬) 그런데 멘토님이 조언을 해주었다. 로그인 컴포넌트가 업데이트 된다고 해서 상단바 컴포넌트가 업데이트가 되는 것이 아니다. 그러면 어떻게 하는지 도움을 여쭤봤다. 멘토님 왈..... props..

얼마 전 백엔드와 통신을 하던 중 이상한 일이 발생하였다. 사건을 설명하자면... 나와 백엔드 한 분은 장바구니 기능을 담당하고 있었는데 백엔드에서 보내온 데이터(장바구니에 담긴 상품 정보)를 받는 get 메서드, 내가 수량을 조절해서 그 데이터를 보내는 patch 메서드, 그리고 상품을 삭제할 때 보내는 delete 메서드... get 과 patch 메서드를 이용할 땐 데이터가 정상적으로 통신이 되었는데 이상하게 delete 에서만 문제가 발생되었다... 어떤 상황이냐면... 삭제 버튼을 누르면 백엔드쪽에서는 데이터가 성공적으로 삭제되었지만, 보여지는 쪽(프론트단)에서는 아무런 반응이 일어나지 않았다... 근데 새로고침하면 삭제 되있다... 이게 무슨 의미....????? 일단 확인해보니 delete ..

import React, { useState } from 'react'; import './Cart.scss'; import CartItem from '../CartItem/CartItem.js'; import '../CartItem/CartItem.scss'; const a = [{ item: 'egg' }, { item: 'egg' }, { item: 'egg' }, { item: 'egg' }]; // 불러올 데이터 function Cart({ closeCartMenu }) { const [userCart, setUserCart] = useState([]); const addUserCart = () => { setUserCart(a); }; return ( Cart List photo num pri..