## 내가 원하는 것.  사용자가 저 하트를 누르면 새로고침하지 않아도 즉시, 화면에 빨갛게 ~~ 또 다시 하트를 누르면 하얗게 ~~ 만드는 코드를 작성해보자.  ## react-query 활용하는 이유 useState나 redux-toolkit을 사용하여 상태를 관리할 경우, 그 상태는 클라이언트 측에서 로컬 또는 전역적으로 유지되며, 백엔드 DB 데이터와 직접적으로 연동되지 않는다.  즉,  찜 상태가 클라이언트 애플리케이션 내부에서만 유지되며, 백엔드 DB 데이터와는 분리된 상태라는 뜻 ~~ 로컬 상태(useState)는 개별 컴포넌트에 종속되며, 일시적이고 컴포넌트 단위로 유지. 전역 상태(redux-toolkit)는 클라이언트 애플리케이션 전체에서 공유되지만, 백엔드 데이터와의 동기화는 수동으로..

Google Fonts 사이트에서 파일을 다운로드하는 방법을 소개하려고 한다.  배포 과정에서 google fonts api 주소랑 연결이 잘 안되는 에러를 발견했기 때문이다. 이참에 다양한 font도 구경해보자 ~~ 쉬워서 금~방 적용할 수 있다. 거두절미하고 바로 시작 !  01. Google Fonts 사이트 접속 https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com 위 사이트에 접속하자.  02. 각종 설정 페이지에 왼쪽에 설정할 것들이 있다. - 언어 설정 Korean으로 ~ - serif , sans..

지역 조건, 정렬순과 관련된 컴포넌트는 두개다 - Condition: 상세검색 버튼- AllPerformances : 상세검색 버튼 결과에 따라 데이터를 뿌려주는 상위 컴포넌트  redux-toolkit으로 상태를 관리해야겠다고 생각한 이유는 사용자가 선택한  정렬순과 지역 상태를 변경하겠다고 useState를 남발하게 됐기 때문이다. 코드로 확인해보자.  상위 컴포넌트인 AllPerformances 에서 정렬과 지역의 초기 상태값을 설정한 코드다.  하위 컴포넌트 Condition에 해당 상태를 변경하는 함수를 내려줬다.  Condition 함수에서 사용자가 선택한 지역값하고, 정렬 string 상태를 관리한다.  상위 컴포넌트에서 받아온 변경 상태를 적용하는 함수를 이용해서 사용자가 선택한 값으로 상..

01. 찜 버튼 컴포넌트화 필요성 찜 버튼을 원래 상세페이지에 구현했었다.  하지만 찜 버튼을 컴포넌트화 하기로 했다.  왜냐하면,,,, ?  상세페이지에 지금 온갖 기능이 다 들어가있다. - 공연 정보 - 리뷰 기능 - 찜 버튼등등...  말 그대로 코드가 내 컨트롤의 영역에서 벗어나기 일보 직전이다. 아마 이미 벗어난 것 같다.  그래서 기능을 더 추가하기 전에 내 코드들을 기능별로 분리해서 가독성을 높이는 작업이 필요하다고 느꼈다.  두번째 이유는 재사용성이다. 우아한형제들 페이지에는 온갖 곳에 찜 버튼을 해놨는데 참 편했다. (나도 찜 버튼을 여러곳에 둬야겠다. ) 세번째 이유는 유지보수성이다. 내가 애정을 갖고 있는 프로젝트이기도 하고, 이 웹의 유저에게 다양한 기능을 제공할 수 있기 때문에 정..

제목 그대로 하라는 거 다했는데 안됐다.  redirect url 도 잘 써줬었고, 오타도 아니였다. 어떤 설정을 빼놓지도 않았다.  뭐가 잘못됐는지, 카카오 dev 공식문서에서 하라는 것도 해봤는데 안됐었다. 근데 문제는 구글 auth 도 안되는것이다.  무언가 내가 NextAuth에서 놓치고 있구나 생각은 들었지만 뭔지는 나오지 않았다.   그런데 오늘 이게 웬걸 ? 프로젝트 npm run dev 시작하는데 터미널에 떡하니 `warn`이 떠있더라. 이게 웬 떡이냐 주소를 따라 들어가봤다.  https://next-auth.js.org/warnings#nextauth_url Warnings | NextAuth.jsThis is a list of warning output from NextAuth.js...

## 01. 문제 상황 input 창을 눌러도 글이 작성이 안된다.  물론 value나, onChange를 이용해서 input 창에 사용자가 작성하는 글을 상태관리하는 코드를 완성했었다. (혹시 모르는 분들 위해 알고가기 쪽에 관련 코드 올려두겠습니당)그런데? 돋보기 아이콘 `IoSearch` 를 추가한 후에 focus가 안됐다. 그러니, 돋보기랑 관련 됐다고 생각했다.  그런데?  애매하게 저 input 창의 테두리를 클릭하면 focus가 된다. (아래 문제를 해결하면서 그 이유를 발견했다.) ###  알고 가기 1. input 창 값을 실시간으로 관리하는 법 1) onChange는 사용자가 입력하는 event를 감지할 수 있도록 돕는다. 2) value는 input 창에 들어가는 값이다. 만약 '1'..

4. 프로그램 업데이트 sudo apt update 패키지 업그레이드 sudo apt upgrade 1. cpu 성능 줄이기 sudo apt-get install cpufrequtils 사용 가능한 cpu 주파수 프로파일 보기 cpufreq-info 나온 결과 sudo cpufreq-set -r -g powersave sudo cpufreq-set -r -g performance

이 영상을 적극 참고하여 실행했습니다. 다만 , 영상 속 코드로만 성공할 순 없어서 제 방식으로 문제를 해결해나간 것까지 포함 했습니다 !! 또, 영상 속에서 생략한 것들이 있어서 그것까지 보충해서 작성하였습니다 ! 먼저 server 부분을 이렇게 작성해줘야 한다. sudo vi /etc/nginx/nginx.conf Let's Encrypt를 설치하고 인증서를 생성해야 한다. ( Ubuntu를 기준) 먼저, certbot을 설치하고 Let's Encrypt 인증서를 발급하는 것 ! 패키지 설치 명령어 sudo apt update sudo apt install certbot python3-certbot-nginx 인증서 발급하고, 구성 파일 자동으로 업데이트 명령어 sudo certbot --nginx ..

현재 진행하고 있는 웹사이트에서 검색창을 만들었다. 사실, 검색 기능이란거 우리 생각의 기본대로 하면 된다. input 창에 사용자가 작성하는 글을 event.target.value로 값을 관리하고, 그 값과 일치하는 공연 이름 데이터만 조건식에 맞게 뿌려주면 된다. 코드로 살펴보자. 하지만? 나는 더 똑똑한 검색 기능을 원했다. 먼저 기본 검색 기능먼저 살펴보자. 01. 기본 검색 기능 1) 코드 이 중 useState만 import 하면된다. 함수 내에 밑과 같은 코드를 작성하면 된다. (다른 코드들은 무시 부탁드립니다 ^^) const [searchTerm, setSearchTerm] = useState(""); const handleSearch = (event: React.ChangeEvent) ..

눈물이 좀 날 뻔 했다. 다른 FE 개발자 분들은 헤매지 마시라고 기록을 남긴다. (...빠이팅! ) 거두절미하고 바로 시작 00. 백엔드에서 가져와야할 데이터 형식 내가 백엔드에서 받아온 데이터 형식은 이렇다. 만약 백엔드에서 가져온 데이터가 pageNo(이 데이터가 몇번째 페이지인지 나타냄)나 totalPages(총 전체 페이지가 몇개인지 나타냄)를 포함하고 있지 않다면 곤란하다. 없다면 공손하게 백엔드 분께 부탁드리자. ! 1) swagger에서 볼 수 있는 response 2) front에서 보는 데이터. (나는 data로 된 이름이 2개여서 이해를 쉽게 돕고자 더 큰 data를 data1, 그 아래 실제 데이터 갖고 있는 data를 data2 로 이야기를 할 예정이다. ) 내 백엔드 분은 다양한..