전체 글 (22) 썸네일형 리스트형 [Library] API개발이 아직, MSW 0. Mocking, Service WorkerService Worker : 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할을 합니다.서비스 워커의 개발을 통해서 효과적인 오프라인 경험 생성, 네트워크 요청을 가로채서 네트워크 사용 가능 여부에 따른 응답 전달, 서버의 자산 업데이트, 푸시 알람과 백드라운드 동기화 API 로의 접근이 가능합니다. 1. MSWMSW : 서비스워커를 사용하여 HTTP 네트워크 호출을 가로채는 API 모킹 라이브러리 브라우저에 기생해서 마치 백엔드API 인척하면서요청에 가짜 데이터를 응답해주는 녀석 도입 사례1. 프론트엔드 UI개발과 백엔드 API개발이 동시에 진행될 때! (백엔드API가 없다!)(특히! 백엔드의 API 제작이 .. response.json()? MSW를 공부하면서 handlers를 제작하던 중내가 직접 response를 설정해 주고, fetch 받는 과정에서몇가지 의문이 생겨 글을 쓰게 되었다. 1. 습관처럼 쓰는 fetch 코드async funtion fetchFunction(){ const response = await fetch('https://api.movie.com/data'); const data = response.json(); console.log(data);} 지금까지 습관처럼 쓰던 fetch 코드는 위와 같았다.누군가 만들어 놓은 API를 사용할 때, 그냥.. 이렇게 하면.. 데이터가 나왔었다... 습관처럼 쓰던 fetch에서 내가 놓치고 있던 중요한 두가지 포인트는1. 위의 fetch는 기본적으로 GET 요청을.. [Next.js] 2+α. Props(params, query) props 활용 방법을 알아보자!활용 방법은 컴포넌트 종류(서버, 클라이언트)에 따라 다르다. 1. {params, searchParams}서버 컴포넌트에서 params, query 정보를 얻고싶을때 사용된다.비동기처리 해야 한다!export default async function Group({ params, searchParams,}: { params: { id: number }; searchParams: { level: number; size: number };}) { // group > [id] > page.tsx // http://localhost:3000/group/1?level=6&size=15 const paramsInfo = await params; console.l.. [Next.js] 2+α. Modal 모달제작을 통해서인터셉팅 라우트와 페러렐 라우트를 이해해보자! 0. Modal?리액트에서 모달을 구현하기 위해서는 useState 혹은 전역상태를 사용해야만 했다. 그러나 Next.js에서는 "인터셉팅 라우트"와 "페러렐 라우트"를 조합하면별도의 상태없이도 모달 구현이 가능하다. (+default.tsx) 1. Intercepting RouteA페이지에서 B페이지로 이동하고자 한다.원래라면 B페이지로 이동해야 하는데A페이지에서 B페이지로 이동할 때, B페이지 말고 C페이지를 보여주고 싶을 때(페이지 이동은 soft navigation event를 의미한다.) 현재 주소를 기준으로! (A페이지에서! 라는 기준이 중요하다)이동은 세그먼트를 기준으로! 폴더 이름 앞에 (.) (..) (..)(..) (..... [Next.js] 3. client component, CSR, SSR, sever component "use client"는 클라이언트 컴포넌트를 만들기 위해서,"use server"는 서버 액션을 만들기 위해서 사용한다.서버 컴포넌트는 없다.app directory 안에 있는 모든 컴포넌트들은 기본적으로 서버 컴포넌트이기 때문이다. 서버 컴포넌트가 클라이언트 컴포넌트가 되지 않도록클라이언트 컴포넌트로 빼줄 수 있는부분은 그때그때 _component 폴더로 빼주자! 1. client component, CSR 뿐이던 시절유저가 웹에 접속하면,리액트 실행에 필요한 코드를 다운받고, 리액트 컴포넌트 트리를 만들고, 트리를 바탕으로 DOM에서 렌더링을 진행한다. 이 방식으로는 유저가 초기 화면을 보기까지 시간이 오래 걸린다. 2. SSR 등장클라이언트가 DOM을 만들지 않는다.서버가 DOM을 만들고 클.. [Next.js] 2. App Router 프레임워크의 모든 부분은 라우터를 중심으로 설계되어야 합니다.페이지 전환, 데이터 가져오기, 캐싱, 데이터 변경 및 재검증, 스트리밍, 콘텐츠 스타일 지정 등-nextjs.org/blog/next-13-4- 0. setupnpx create-next-app@latestTS - YESLint - Ysrc/ - Yapp router - Y alias - N : @/* 외 경로 별칭 사용 여부... 1. 기본구조public : 정적에셋 저장 장소 ( / 경로로 접근 가능하다.)src : 모든 소스코드 저장 장소 ( @/로 바로 접근 가능하다. (../../../ 안해도 된다.) )ㄴapp : 주소 관련 저장 장소 next.config.ts tsconfig.json ... 2. Page Router vs Ap.. [Next.js] 1. Next.js? Next.js랑 친해지기 시작!🖐️ 1. Next.js?vercel에서 제작한 React 라이브러리의 프레임워크이다. 2. Next.js 장점수많은 장점이 존재하는 Next.js하지만 그 장점들을 관통하는 핵심 장점은 라우팅과 렌더링에 있다. Next.js는라이브러리가 아닌 프레임워크이기에 직관적으로 느낄 수 있는 장점은 간편한 라우팅,리액트의 단점인 SEO을 위해 SSR, SSG를 제공한다. https://samdasoo2l.tistory.com/13 SPA? CSR? SSR?알아보자!SPA, MPA, CSR, SSR, SSG! (사실은 Next.js 학습에 대한 강한 동기부여를 위한 포스팅...) 0. 용어 정리 SPA : 단일 페이지 어플리케이션, 사용자가 웹 애플리케이션을 이용할 때 페이지.. 토큰? (JWT?) 0. 토큰서버 측에서 상태를 관리하는 세션과는 다르게,토큰은 클라이언트 측에서 상태를 관리하는 방식이다. 토큰은 인증된 사용자에게 서버가 발급하는 암호화된 문자열로,클라이언트는 서버와의 통신 시 이 토큰을 직접 전달하여 인증을 받는다. 토큰을 사용하면 서버는 클라이언트의 상태를 기억할 필요가 없고,토큰 자체에 필요한 정보가 담겨 있기 때문에 별도의 세션을 사용할 필요도 없고,서버는 토큰의 유효성만 검사하면 된다.(정보를 담고있는 만큼, 당연히 세션보다는 용량이 크다.) 대표적인 토큰으로는 JWT가 있다. 1. JWT JWT : Json Web Token 가장 중요한 기능은 위조 여부 확인에 있다.JWT 비밀키를 모르면 변조가 불가능하다.(내용은 비공개가 아니다.) 2. JWT 기본 구조 a. Header.. 이전 1 2 3 다음
