🖥️Frontend/Next4 [Next] 데이터 베이스 연결하기 (feat. MySQL) 서버 API 구현프로젝트 구조 생성'/home' 경로 접속 시 데이터베이스의 user 테이블에서 사용자 정보를 얻어오는 API를 생성한다. 먼저 프로젝트 구조는 다음과 같다. api 폴더 아래에 home 폴더를 생성하고 route.ts 파일을 생성해줬다. 이렇게 하면 localhost:3000/api/home 호출 시 route.ts에 작성된 함수가 호출된다. route.ts먼저 호출할 함수의 HTTP Method 명으로 함수를 생성해준다. 데이터 베이스의 테이블에서 데이터를 호출할 것이기 때문에 GET으로 생성해줬다.export async function GET() { ... } 라이브러리 설치 및 접속 정보 초기화라이브러리 설치필자는 MySQL을 사용할 것이기 때문에 관련 라이브러리를 설치해준.. 🖥️Frontend/Next 2025. 4. 28. [Next] 로컬 서버 API 호출하기 서버 API 구현프로젝트 구조 생성app 폴더 내에 api 폴더를 생성하고 path로 사용할 폴더를 하나 생성한 다음 route.ts 파일을 생성한다. 프로젝트의 구조는 다음과 같다. route.ts1. 함수 생성 및 Method 지정먼저 호출할 함수의 HTTP Method의 이름으로 함수를 생성해준다. 필자는 POST로 테스트를 진행하기 위해서 POST로 작성해줬다.export async function POST() {} 만약 POST Method가 아닌 다른 Method로 호출하게 되면 405 에러가 발생하게 된다. 2. Request 객체 사용하기API 호출 시 NextRequest 타입의 객체에 사용자가 보낸 json 데이터를 받아와서 사용할 수 있다. 사용자가 입력한 id와 password 값.. 🖥️Frontend/Next 2025. 4. 27. [Next] Next에서 라우팅 구현하기 React의 라우팅React의 경우 페이지 이동을 하려면 react-router-dom 라이브러리를 설치한 후 아래의 코드처럼 Routes에 등록해줬다.import { BrowserRouter } from "react-router-dom";import { Routes, Route } from "react-router";const App = () => { return ( } /> );};export default App; react-router의 작동 방식은 url을 지정하고 사용자가 해당 url에 접근할 때 컴포넌트의 render를 요청하는 것이다. 페이지를 생성할 때마다 url과 해당 url 접속 시 보여줄 페이지를 사용자가 직접 작성해줘야 했다. .. 🖥️Frontend/Next 2024. 8. 21. [Next] 프로젝트 수동 설치하기 React와 Next.js의 차이점React는 라이브러리이고 Next.js는 프레임워크이다. 라이브러리라이브러리는 코드 내에서 사용하려고 설치하는 것이지만 사용하는 주체는 사용자다. 라이브러리를 사용해서 우리가 코드 내에서 원하는 아키텍처를 사용해서 원하는 방식으로 코드를 작성할 수 있다. 파일을 어디에 저장할 지, 폴더 구조를 어떻게 할지 사용자가 모든 결정을 내린다. 예를 들어 그래프를 그리는 기능이 필요하면 우리는 라이브러리를 가져와서 해당 기능을 구현할 것이다. 이렇듯 라이브러리는 우리가 도움이 필요할 때만 가져와서 사용하는 것이다. React 또한 UI 인터페이스를 build하는데 사용하는 라이브러리이다. React가 반응형 사용자 인터페이스를 구축하는데 도움을 주지만 결국 이것에 대한 모든 결.. 🖥️Frontend/Next 2024. 8. 20. 이전 1 다음
