프로젝트

뭔가 내가 저렇게 검색했었던 것 같아서 제목을 이렇게 지었다. 데이터 배열을 map함수로 쪼개서 렌더링 하는 코드이다. onClick을 적용했기에, 분명 클릭했을 때 console.log(“ㅎㅇ”)가 실행될 거라고 생각했지만, 항상 실행이 안 됐다. 그래서 위와 같은 방식으로, div 태그를 한번 더 씌우고 div에 onClick 이벤트를 적용했었는데, 오늘 해결책을 알았다!.! 일반 HTML 요소에 직접적으로 이벤트 핸들러를 추가할 때는 해당 요소에 이벤트 리스너를 직접 연결하고, 클릭 등의 이벤트가 발생하면 이벤트 핸들러가 실행되지만! 리액트 컴포넌트는 클릭과 같은 이벤트를 처리하도록 내장된 기능이 없으며, 대신 props로 전달하여 처리할 수 있도록 한다고 한다. 즉! 지금까지 내가 컴포넌트에 적용..

마우스를 올려놓으면, hover 효과처럼 배경색이 사라지는 오류가 발생했다. 모바일 기준으로도 똑같이 배경색이 사라지고 멈추는 걸 보니 hover가 맞다고 생각했다. 의아한 점은 모바일에서 hover가 적용되지않는다는 것을 깨닫고.. 분명히 hover를 전부 제거했기 때문이다! 해결을 위해 알아보다가 처음 알게 된 것인데, 개발자도구의 :hov를 클릭해서 hover를 적용하면 hover일 때 적용되는 css를 알 수 있다. 적용 후 찾아보니 이런 코드가 들어있는 것을 확인할 수 있었다. 뭔가 익숙한걸 보니 내가 쓴 게 맞는 거 같았다. 그러다 문득 라이브러리를 커스텀했던 게 떠올랐다. 라이브러리에서 기본적으로 제공하는 hover 효과를 안 보이게 하려고 위와 같은 코드를 썼었던 것이다. 아무 생각 없이 ..

오늘 새벽 찡찡찡찡 거리면서 썼던 이번 작업 회고다. 컴포넌트 분리와 스타일링에 대한 고민을 했었다. 어찌 보면 기초의 기초의 기초를 모른다고 봐도 무방한,,, 컴포넌트 분리를 통해, 유지 보수 용이와 재사용성을 늘리는 것이 리액트의 장점이라고 하는데..... 나는 이런 거 1도 생각 안 하고 그냥 들이박으면서 개발을 하니 기본적인 것도 몰랐던 것이다. 그래서 복잡하게 생각 말고 기본으로 돌아가기로 했다. 그냥 유지 보수하기 편한 만큼까지만 완성하고 분리시켜 버리자! 일단 페이지에 구현할 내용을 하드코딩으로 때려 박고 CSS까지 전부 적용한다. 그리고 완성된 코드를 그대로 복사해서 새로운 컴포넌트를 생성한다. Header 포지션에 위치하기에 컴포넌트 이름을 Header로 설정했다. 기존의 코드를 지우고 ..

최근에 프로젝트 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태그 내에..