제로초님 강의 정리 https://www.inflearn.com/course/next-react-query-sns MSW 목업 mswjs.io public 폴더의 mockServiceWorker.js가 호출을 가로채서 목업 서비스를 하는 방식 컴포넌트 생성 후 브라우저인지 체크하고 환경변수를 통해 로컬환경에서 끄고 킬 수 있는 방식으로 정리되어 있음. next.js와 매끄럽게 호환이 안됨. 노드 서버의 도움을 받아야함. 어차피 express로 실행을 해야된다면 FE 코드와 분리하여 환경변수로 서버 주소를 바꾸는 방식이 더 낫지 않나 라는 생각이 듬. pocketbase 등을 활용하면 실제로 CRUD 테스트까지 가능함. 서버 컴포넌트에서 Server Actions 사용하기 함수안에 “use server”;..

제로초님 강의 정리 https://www.inflearn.com/course/next-react-query-sns ActiveLink 만들기 라우터에서 현재 경로를 알고 싶으면 use client를 사용하여 클라이언트 컴포넌트 이용 import { useSelectedLayoutSegment } from “next/navigation”; "use client"; import { useSelectedLayoutSegment } from "next/navigation"; const NavMenu = () => { const segment = useSelectedLayoutSegment(); console.log(segment); //경로 출력 return ( NavMenu ) } export default ..

제로초님 강의 정리 https://www.inflearn.com/course/next-react-query-sns Next 프로젝트 시작하기 x (twitter) 클론코딩 - 홈, 탐색하기, 쪽지, 프로필 url을 그대로 가져가기 새로고침 시 다르게 동작하는 것 확인 반응형 설치 npx create-next-app@latest 설치옵션 ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you like ..

제로초님 강의 정리 https://www.inflearn.com/course/next-react-query-sns 리액트 압축 요약 강좌 React 현재 점유율 1위 라이브러리 경쟁자 : vue, angular, svelte 등 역사 : jQuery -> Angular -> React -> Vue -> Svelte 왜 나왔나 페이지 전환없이 앱같은 느낌을 원함 ->한 페이지에서 다하는 SPA(Single Page Application) 방식의 유행 프론트의 비중이 점점 높아짐(데이터를 많이 다룸) -> MVC등의 개발 방식은 대규모 개발에 적합치 않음 -> 대안 필요 Angular의 등장 Gmail(AJAX) -> SPA SPA으로 MVC 구현 앱같은 느낌은 성공함 MVC라서 동일한 문제 -> 프론트에서..