23일차. ui와 api를 연결해보자(터미널에 입력값 뜨게)

 

 

이제부터는 db로 직접 npm에게 command 를 하고 싶어. 프로젝트를 실행하는 명령어를 알려줘

 

npm을 pnpm으로 바꾸려고 하는데 PS C:\Users\sej10\Documents\project\ui-server> corepack enable Internal Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\pnpm' Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\pnpm' 이렇게 에러가났어 어떻게 해결해야ㅐ?

ChatGPT의 말:

좋아, 아주 흔한 상황이야 👍
이 오류는 관리자 권한 부족으로 corepack이 C:\Program Files\nodejs 폴더에 접근하지 못해서 발생한 거야.

다음 순서로 해결하면 돼 👇

---

✅ 해결 방법 1: PowerShell을 관리자 권한으로 실행

1. 윈도우 검색창에 "PowerShell" 입력
2. “Windows PowerShell”을 오른쪽 클릭 → 관리자 권한으로 실행
3. 아래 명령어 입력:
4.  
   corepack enable
5. 정상적으로 동작하면 다음으로:
6.  
   corepack prepare pnpm@latest --activate
7. 이후 확인:
8.  
   pnpm -v

---

✅ 해결 방법 2: 수동으로 pnpm 활성화 (관리자 권한 없이)

만약 회사 PC처럼 관리자 권한을 쓸 수 없다면,
corepack 대신 pnpm을 로컬에 설치하는 방법도 있어 👇

 

npm install -g pnpm

설치 후:

 

pnpm -v

로 버전이 잘 뜨면 성공이야.

---

✅ 참고 (corepack 관련)

Node.js 16.9 이상부터 corepack이 기본 포함되어 있어서,
npm, yarn, pnpm 등을 쉽게 전환할 수 있어.
하지만 Program Files에 접근하려면 관리자 권한 필수야.

---

원래 목적이 “npm 대신 pnpm으로 프로젝트 실행하기”라면,
위 작업 후에 그냥 프로젝트 폴더에서 아래처럼 하면 돼:

 

pnpm install

 

pnpm run dev

 

 

pnpm dev 

이제부터 이렇게만 해도 됨!

 

npm쓰면 에러날 것임 

---

 

@soccer 리액트 에서 axios 로 검색 쿼리로 findByKeyword 로 검색어를 주는데, player, scehdule, stadium , team 중 어느 질문이 들어올 지 모르겠어. 나는 이것을 퍼사드 패턴으로 해결하려고 하는데, 더 좋은 패턴이 있으면 알려주고, 아니면 이 패턴으로 넘어온 검색어를 sysout 으로 출력까지만 하는 코드를 작성해줘.

 

 

 

 

세개의 파일이 작성되고 수정됨 퍼사드 파일로 만들어줌

 

 

---

여기서 받은 메세지를 axios를 통해 localhost:8080/soccer/search 여기컨트롤러에 연결되도록 코드를 작성해줘

 

설치하기

 

 

 

이부분이 핵심 코드

 

 

 

완료했습니다! ✅ 프론트엔드를 GET 방식으로 변경했습니다.

 

***프론트엔드와 백엔드가 post방식인지 get방식인지 통일해야함!

하지만 프론트엔드 쪽을 수정하는게 나으므로 get방식으로 통일

 

 

 

 

프론트에서 입력값을 보내면 백엔드 터미널에 뜨게 해줘

 

 

try {

// axios를 통해 백엔드 API 호출 (GET 방식)

const response = await axios.get('http://localhost:8080/soccer/search/keyword', {

params: {

keyword: userInput

}

});//프론트엔드에 이렇게 작성했는데 여기서 입력받은게 터미널에 출력되지 않아. 고쳐줘

 

 

 

경로가 맞지 않아서 발생한 에러였음! 동일하게 변경해줌

 

 

 

 

성공!