나는 프론트엔드는 Next.js, 백엔드는 Nest.js로 웹 개발을 진행했다.  풀스택? 을 가능하게 한 AI에게 무한한 감사 인사를 드리고 시작한다. 요즘 AI에 대한 부정적 인식과는 다르게 나는 AI에 대하여 아주 긍정적 & 낙관적 인식을 가지고 있다. '이번 AI 만큼은 삶의 파괴를 가져올 것이다 ' 는 말이 안된다고 생각한다.  지난 두려움을 생각해보자. - 산업혁명 (러다이트 운동: 기계가 일자리를 뺏는다는 이유로 기계 파괴)- 자동차 시대 (말과 마차를 생업으로 삼던 사람들 생계 위협, 도시의 소음과 대기 오염 증가에 대한 우려)- 인터넷 등장 - 스마트폰의 보급  변화는 언제나 두렵지만, 늘 반갑다.  초개인화된 사회에서 AI는 더욱이 필요하다. 각자도생이 된 사회에서 AI는 희망이다.. ..

문제 상황 회원가입 파일에서 아이콘을 가져오는 코드만 6줄이 된다. 코드 가독성을 해친다는 생각을 했다. 이를 해결하기 위해  아이콘을 별도의 컴포넌트로 분리하기로 했다.  아이콘 컴포넌트로 분리아이콘 컴포넌트를 아래와 같이 작성했다. 해당 파일에는 아이콘 관련 코드를 모아둘 것이다.   그러면 회원가입 파일에서는, 어떤 아이콘 관련 코드 없이, 적합한 아이콘을 불러올 수 있게 되었다.

에러 발생React Hook "useForm" is called conditionally.React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?  문제 코드 아래 해당 코드를 MyPage()의 맨 밑에 위치시켰을 때 에러가 발생했다. 문제 이유 React Hook 인 `useForm`을 return 문 뒤에 선언되도록 해서 문제가 생긴 것이다.  컴포넌트가 호출될 때, 1. 해당 컴포넌트에서 사용되는 상태들을 확인하고 2. return을 만나면 페이지를 렌더링한다.  하지만 return 문 이후에 useForm ..

에러 메시지 The above error occurred in the  component:React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. 에러 발생 코드 에러 이유 - input 태그는 닫는 태그 없이 사용해댜 한다. - 즉, input 태그는 self-closing 태그이다.  코드 수정 - input의 value 속성으로 값을 넣는다. => input 필드가 data.nickname 값으로 초기화되고, => 값이 update 될 때마다 input 필드의 값도 자동으로 업데이트 된다.

1. [의도]사용자의 로그인 상태를 관리해야한다. => "마이페이지 접근 권한", "리뷰 댓글 권한", "navbar의 로그인, 로그아웃 버튼" 시에 필요함.  1. 백엔드 api를 활용해서 현재 사용자가 로그인 상태인지, 아닌지 확인할 수 있다. 2. 사용자의 로그인 상태를 매번 서버의 응답으로 판단 하기엔 부담이다. 3. 사용자가 로그인, 로그아웃 할 때만 서버에 요청을 한 응답 값으로 사용자의 로그인 상태를 변경한다.  장점: redux toolkit 상태 관리를 통해 서버 통신 없이, 해당 상태값에 여러번 접근할 수 있다.   2. [문제 상황] 3. [문제 코드] useEffect(() => { let res = checkLogin();//사용자의 로그인 상태 확인하는 함수 if ..

## 내가 원하는 것.  사용자가 저 하트를 누르면 새로고침하지 않아도 즉시, 화면에 빨갛게 ~~ 또 다시 하트를 누르면 하얗게 ~~ 만드는 코드를 작성해보자.  ## 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...