https://www.udemy.com/course/react-query-react/ udemy의 'React Query / TanStack Query : React로 서버 상태 관리하기' 강의를 보고 정리했습니다. 리액트 쿼리란? TanStack Query는 리액트 앱의 서버 상태를 관리하는 라이브러리이다. 클라이언트 상태란 웹 브라우저 세션과 관련된 모든 정보를 의미한다. 이는 서버와 관련이 없다. 서버 상태는 클라이언트에 표시하는데 필요한 데이터를 말하며, db에 저장되는 블로그 게시물 데이터 등이 이에 해당한다. 게시물을 표시하기 위해 클라이언트에 데이터가 있어야 하지만, 데이터는 여러 클라이언트에 표시될 수 있도록 서버에 저장된다. 리액트 쿼리는 클라이언트에서 서버 데이터 캐시를 관리한다. 리액..

최근에 프로젝트 api 주소를 github에 올렸다가 서버비 폭탄 맞고 ncp에 구제 요청하는 상상을 해본 적이 있습니다. 그런 김에 해결책을 찾아보았는데요 마침 '환경변수'를 이용하는 방법을 찾았습니다. 왼쪽의 파일은 .env 파일이고, 이 파일을 gitignore에 입력하여 github에 올라가지 않게 합니다. 그리고 컴포넌트에서 오른쪽처럼 사용하면 특정 문자열을 숨길 수 있습니다. 지금까지 환경변수를 사용해본 적은 없지만, 다른 사람의 프로젝트를 참고해서 쉽게 사용해 봤습니다. 하지만 역시 인생은 쉽지 않습니다. 바로 process가 not defined 라네요. 어떻게 써봐도 안 돼서 문제점을 더 찾아보다가, vite에서는 환경변수 사용법이 다르다는 것을 알게 되었습니다. 위의 방법은 CRA에서 ..

기존의 디자인은 사진을 교체할 필요 없이, CSS 설정만 하면 됐었습니다. 하지만 변경된 디자인에서는 두 개의 사진을 교체하는 작업이 필요하게 됐습니다. 조건은 두 가지입니다. 1. 버튼 클릭하면 두 번째 사진이 렌더링 되고, 클릭을 떼면 다시 첫 번째 사진으로 돌아오기 2. ★버튼을 누르는 동안 두 번째 사진이 유지★ 정말 간단해 보일 수도 있으나, 이를 위해 여러 번의 눈물겨운 삽질이 있었습니다. 1. 조건부 렌더링 처음 시도해 본 방법은 useState와 삼항연산자를 통해 조건부 렌더링을 하는 것이었는데요, 클릭할 때마다 T/F값이 변하며, 변하는 T/F값에 따라 다른 사진을 렌더링 하는 방식입니다. 단 true로 변경되어도, setTimeout을 통해 0.2초 뒤에 다시 false로 돌아오게 했습..

https://studysmart.tistory.com/126 리액트 사진 슬라이드 구현하기 이번 프로젝트의 서비스 소개 페이지가 슬라이드 형식으로 구성되어 있기에, 연습 겸 슬라이드를 구현해 볼 겁니다. 시작에 앞서 인터넷에서 맘에 드는 사진 3개를 다운받아서 기본 세팅을 했습 studysmart.tistory.com 지난번에 만든 슬라이드에 모바일 터치 슬라이드를 추가해 볼 겁니다. 지난번 코드에서 useRef를 통해 사진을 감싸는 div를 참조해줍니다. 그리고 터치가 시작된 위치와 끝난 위치를 저장하기 위한 touch State도 생성합니다. 모바일 화면의 터치를 구현해야 하기에, onTouchStart, onTouchMove, onTouchEnd 이벤트를 이용합니다. 참조하고 있는 div태그 내에..

이번 프로젝트의 서비스 소개 페이지가 슬라이드 형식으로 구성되어 있기에, 연습 겸 슬라이드를 구현해 볼 겁니다. 시작에 앞서 인터넷에서 맘에 드는 사진 3개를 다운받아서 기본 세팅을 했습니다. 제가 진행하는 프로젝트는 웹 앱이라 아쿠아색으로 웹 앱을 표현했습니다. flex를 통해 사진을 가로정렬 시켰으며, 버튼을 누를 때마다 각 사진이 넘어갑니다. 최종적으로 overflow:hidden을 적용해서 화면에서 벗어나는 요소는 숨길 거임 핵심 1. 인덱스 값을 통해 사진을 조정 2. 버튼을 눌렀을 때 웹 앱의 가로 값(사진의 크기)만큼 사진을 왼쪽 또는 오른쪽으로 이동 useState를 통해 인덱스 값과 기본 style값을 설정합니다. 또한 설정한 style값을 인라인 스타일 요소로 지정합니다. 초기 인덱스는..

이번 크리스마스🎄는 flex 개념과 함께합니다😎 프로젝트 전에 한 번 정리를 하면 좋을 것 같아서 예시 사진까지 다 만들어서 정리해 봤습니다.    flex속성은 기본적으로 안에 있는 모든 요소를 행(row) 방향으로 나열하고, 행의 왼쪽부터 요소를 배치한다.  flex 규칙 주축과 교차축레이아웃은 기본적으로 행(row) 형태이기에 자식 요소들이 가로로 정렬됩니다. 이것을 주축이라고 합니다.  display 속성을 flex로 지정하면 주축은 자동으로 수평축이 됩니다. 교차축은 주축과 수직을 이루는 축으로, 즉 주축이 행 방향 정렬이라면 교차축은 열 방향 정렬을 의미합니다.   flex container 속성 flex-directiondisplay: flex를 적용하면 flex-direction 속성의..