본문 바로가기

전체 글268

(3)API라우터의 함수 파라미터 중 하나인 Request의 구성 : Params, queryString, cookies, body, method ● 이론0_ 명칭 정리 :○ js내에서 아래와 같이 함수를 작성할 때, 그 함수가 바로 "라우터"○ 라우터 정의 : http파일에서, 서버에 GET, POST 등의 리퀘스터 요청이 들어올 때, 반응하는 함수를 의미하는 거 같다.//api/[id].jsexport default function handler(req, res){ res.send('안녕 다이나믹 라우트!');}○ 라우터의 매개인자 'Request'의 객체 프로퍼티 목록 Params : 보내진 리퀘스트의 id, query 등의 속성 정보들을 담겨있다.예 : 리퀴스트의 id를 확인해보기- request.http Post- [id].jsexport default function handler(request, response) { response... 2025. 1. 4.
(2)기본Request해보기 ● 이론0_ Next.js에서 기본 Request할때 파일 구조도○ Default 파일 구조도 : ○ 앤드 포인트 만들기 :- 용도 : 나중에 프로젝트 만들 떄, 짧은 주소 데이터를 다루는데 사용한다고 한다. //아직 뭔개소린지 모르겠음▶순서1_ [pages] 폴더 안에 [api]폴더 만들고, 그 [api]폴더안에 [short-link.js] 파일 생성▶순서2_[short-link.js] 파일에 코드 아래와 같이 함수 기재export default function handler(request, response){ response.send('안녕 API!');}★해석 :- "파일 경로대로 /api => /short-links 의 경로로 Request가 들어올 시, 위에 적힌 함수가 실행된다"- 함수의 두.. 2025. 1. 3.
(1)기본셋팅_Rest Client 사용하기,Next.js 프로젝트 생성하기 ● 이론0_ Rest_Client○ 사용 목적 :- 쉽고 편리하게 API의 동작 여부를 테스트 할수 있도록 하는 VSCode의 확장 프로그램○ 설치:- Vscode 접속 후, 왼쪽 4번째 탭의 확장프로그램을 누르고, "REST Client" 검색 후, 설치하면 된다.○ 사용 방법 :- 테스트를 위한 모의 데이터와 서버를 제공해 주는 JSON Placeholder 서비스를 이용해 볼게요. HTTP Method 엔드포인트 기능 CRUD GET/posts게시물 데이터 전체 조회ReadPOST/posts새로운 게시물 생성CreatePATCH/posts/id특정 게시물 부분 수정UpdatePUT/posts/id특정 게시물 전체 수정UpdateDELETE/posts/id특정 게시물 삭제Delete해당 AP.. 2025. 1. 3.
(8)React로 데이터 다루기_8_ "더보기" 버튼 비활성화 방법2, 비동기함수 구현시 주의해야할점 => 콜백함수로 예약시점의 값 변화 X , 현재시점의 값 변화 O ● 이론0_ hasNext를 이용하여, '더보기' 버튼을 조건부로 보였다, 안보였다 기능으로 코드 작성해보기앞에서 논리 연산자 && 을 사용해서 간단한 조건부 렌더링을 해봤는데요.이번 레슨에선 리액트에서 활용할 수 있는 조건부 렌더링에 대한 꿀팁을 알려드릴게요!논리 연산자 활용하기AND 연산자 import { useState } from 'react';function App() { const [show, setShow] = useState(false); const handleClick = () => setShow(!show); return ( 토글 {show && 보인다 👀} );}export default App;show 값이 true 이면 렌더링 하고, fal.. 2025. 1. 2.

티스토리툴바