React

우선 cmd 에서node -vnpm -v 를 확인해서node.js가 설치되어있는지 확인한다.폴더를 하나 생성하고, Terminal 에서npm create vite@latest를 입력.위 화면과 같이 나오면,Project 이름을 설정하고 enterReact를 선택한 후

Section 컴포넌트 의 class 속성을 줘야하는데,원래 section 이라는 태그로 되어있을 때는 라고 썼으면 됐는데, 컴포넌트로 변환하니 class가 적용이 안된다. 그럴땐 spread operator 를 사용하면된다. Section.jsx 에서 Sec

Tabs.jsx 는 다음과 같다그런데 Tabs 컴포넌트를 사용하다보면 menu 태그를 div로 바꾼다거나, li를 바꾼다거나 해야할 일이 생길 것이다. 그럴땐Container 변수를 만들어 container 로 지정해주고 태그에 Container 를 써주면된다.소문자로

useReducer 를 이용해서 간단한 count 버튼을 만들어보자 .

숙박 예약 모달에서 리뷰 섹션을 구현하던 중, 리뷰내용은 더미데이터로 넣고, 날짜는 랜덤으로 날짜를 생성하여 넣고 있었음.그런데 Modal 컴포넌트에서, 체크인/체크아웃 달력 클릭 이나, 인원수 선택 등 다른 상태가 변경될 때마다 컴포넌트가 리렌더링 되면서 리뷰 날짜가

팀프로젝트 진행중 , 숙소 검색, 리스트 불러오는 중에 이미지 파일이 로딩이 지연되는 문제가 발생했다. 문제 해결을 위해 이것저것 찾아보다가, 로딩중 상태를 사용자에게 알려주는 UI중 Skeleton 이라는게 있어서 사용해보았다. Skeleton은 다음 이미지와

팀프로젝트 진행중 원래 Swiper로 보여주고 있었던 List들이, 이미지 로딩이 생각보다 오래 걸려서 skeleton ui를 사용해서 로딩중 ui를 보여주려고 했는데, swiper에서 breakpoint로 중단점을 주고 있던걸 바꾸기 귀찮아서 swiper 안에 ske

팀프로젝트 진행 후 Nodejs (백엔드)는 cloudtype으로 배포하고, React (프론트) 는 Netlify로 배포했다. 그러나 Cloudtype에서 제공하는 무료 서버가 매일 서버를 다시 켜줘야하는 문제가 있어서 oracle cloud에서 제공하는 무료 서버

문제 상황 팀프로젝트 진행중, modal창을 띄웠는데 외부 스크롤이 활성화 되는 문제점을 발견했다. desktop에서는 크게 상관 없다고 생각할 수 있지만, 모바일에서도 이런 문제가 발생했는데, 모바일에서 우리 페이지는 모달창을 화면을 꽉 채워서 보여주다 보니 사용

문제 상황 팀 프로젝트 진행 도중, 특정 메뉴 (mypage 등)에 로그인한 사용자만 접근할 수 있도록 설정해야 했습니다. 로그인 인증은 JWT기반으로 관리하고 있었고, 페이지 이동은 React Router로 관리하던 도중, 인증되지 않은 사용자가 URL로 직접 접