## 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 로 이야기를 할 예정이다. ) 내 백엔드 분은 다양한..

제발 날 나줘요,,, [현재 상황] Next.js에서 Audio를 재생하려고 하는데 => 처음 렌더링 될 때 SSR 방식이라 , Audio 객체가 없을 수도 있어서 useState를 활용해서 확인해줘야 한다. [참조] (무한 감사 드립니다,,, ) https://velog.io/@brgndy/Next.js-13-Audio-is-not-defined-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0

상황 : npm run dev 실행했는데 에러 뜸 [ERR_PACKAGE_PATH_NOT_EXPORTED] 해결 : npm update && npm audit fix --force

react랑, react-dom 버전 업그레이드 하고 싶으면? npm install react@latest react-dom@latest 현재 최신 버전인 18로 업그레이드 된 것을 확인할 수 있다.