기존의 디자인은 사진을 교체할 필요 없이, 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 속성의..

이번 프로젝트에서 사용할 URL 복사 기능을 구현해 볼 것입니다. 우선 '공유' 버튼을 눌렀을 때 띄울 모달창을 먼저 만들었습니다. '주소' 부분에 해당 페이지의 URL이 출력되게 하고, '복사'버튼을 눌렀을 때 URL이 복사되게 해야 합니다. 이를 위해서는 우선 해당페이지의 URL을 먼저 알아와야 합니다. 이를 위해 useLocation을 사용합니다. useLocation()은 현재 경로와 관련된 정보를 담고 있는 객체를 반합니다. 이 친구가 담고 있는 내용 중 pathname은 현재 url의 경로 부분을 나타내는 문자열입니다. 현재 로컬 주소를 baseUrl 변수로 저장하고 location 훅에서 가져온 경로를 pathUrl 변수로 저장합니다. 이후 출력해 보면 현재 페이지의 주소가 잘 나오는 것을 ..

어쩌다 보니 한 달 동안 투 두 리스트를 무려 세 번이나 만들고 있다 하핫... 물론! 몇 번이나 다시 만들어도 재밌게 만들 수 있지만... 아이디어 고갈이 가장 큰 난관이다. 다행히 마지막이라는 생각으로 쥐어짜다 보니 옥스포트 노트가 생각났고, 바로 만들었다. 예상하던 완성본에 비해서 많이 부족하지만, 아무튼 완성했으니 만족! 흐 이젠 JS 챌린지도 끝이다 리액트로!, 프로젝트로! 다시 돌아갈 시간! https://yongjin-todolist.netlify.app/ 최종 미션 todoList yongjin-todolist.netlify.app 모바일 말고 PC로 봐야 함! 미디어쿼어리이???? 반응혀엉?.? 그런 거 없습니다요...