개발기록

*️⃣ 모듈 번들러Module(분리된 코드 조각) + Bundler(묶는다) 모듈 번들러는 분리된 코드 조각들을 하나로 병합하는 개발 도구이다.핵심 작업은 JS 파일, CSS 파일 등 여러 리소스를 하나로 결합하여 단일 파일을 만드는 것이다.따라서 크롬과 같은 브라우저는 하나의 단일 파일을 로드함으로써 애플리케이션이 동작하게 된다. ℹ️ 모듈 번들러를 사용하는 이유모든 브라우저가 모듈 시스템을 완전하게 지원하지 않는다.코드의 종속성 관계를 관리하는데 도움이 되며 종속성 순서대로 모듈을 로드한다.이미지 에셋, css 에셋 등 종속성 순서대로 에셋을 로드하는 데 도움이 된다. *️⃣ 모듈 번들러 역사와 설명아래 글에 모듈 시스템에 대한 설명이 자세히 되어 있습니다. 참고하세요https://yozm.wish..

1. EC2 생성키페어 생성     2. 탄력적 IP 주소 할당 태그는 원하면 추가해주고 할당 누르면 됨   3.인바운드 규칙 추가    2.인스턴스 연결                     4. 도메인 연결

보호되어 있는 글입니다.

*️⃣ Routing App router 방식은 파일시스템 베이스 방식으로 라우팅이 작동된다. 즉, 폴더와 파일로 라우팅을 구성하는 것이다. 기본적인 Next.js의 Routing Conventions(관례)이 있다. 모든 라우팅은 app 폴더 안에 있어야 한다. 라우팅이 매치되는 파일이름은 page.js(pages.tsx) 등 "page"라는 이름이어야 한다. 폴더 이름이 브라우저에서 보이는 URL의 path가 된다. *️⃣ 주소의 최상단 페이지 가장 처음 접하는 주소는 바로 '/'이다. Next.js에서는 app 폴더 바로 밑에 있는 page.tsx 파일이 '/' 주소에 해당한다. 'src/app/page.js' 여기서 app 폴더 바로 밑에 있는 page.js는 바로 브라우저의 최상위 주소인 '/'..

✪ 상태 - 어떠한 의미를 지닌 값 - 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값 - 웹 애플리케이션을 구성하는 변경될 수 있는 데이터 ✪ 웹에서의 상태 ✧ UI: 상호 작용이 가능한 모든 요소의 현재 값은 상태이다. 예) 다크/라이트 모드, 각종 input, 알림창의 노출 여부 등 ✧ URL: 브라우저에서 관리되고 있는 상태값. 상태는 사용자의 라우팅에 따라 변경됨. 예) https://www.airbnb.co.kr/rooms/2024?adults=2 ➔ 상태: roomId=2024, adults=2 ✧ 폼(form): 로딩 중인지(loading), 현재 제출됐는지(submit), 접근이 불가능한지(disabled), 값이 유효한지(validation) 등 모두가 상태로 관리된다. ✧..

1. 로그인, 회원가입 UI 구현  2. Firebase 연동firebase 가입한 뒤, 프로젝트 생성해주고 기타 설정해준다. 자세한 설명은 docs 참고//firebase.ts// Import the functions you need from the SDKs you needimport { initializeApp } from "firebase/app";import { getAnalytics } from "firebase/analytics";// TODO: Add SDKs for Firebase products that you want to use// https://firebase.google.com/docs/web/setup#available-libraries// Your web app's Fireb..

🌱  결과물 🌱  디바운싱(Debouncing): 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 아래는 디바운싱을 적용하기 전과 후의 검색어 요청 모습이다. "안녕하세요" 라는 검색어를 입력 중인데, 적용 전은 매 입력마다 요청을 하고, 적용 후에는 최종 검색어만 요청을 한다.// 디바운싱 const [debouncedInput, setDebouncedInput] = useState(input); useEffect(() => { const handler = setTimeout(() => { setDebouncedInput(input); }, 300); // 300ms 지연 return () => { clearTimeout(hand..

🌱  결과물  🌱  React Query - useInfiniteQuery thecatapi에서 고양이 사진을 무한으로 불러오기 위해 react-query에서 제공하는 useInfiniteQuery 훅을 사용했습니다.//UseFetchInfiniteData.tsimport { useInfiniteQuery } from '@tanstack/react-query';async function fetchInfiniteData({ pageParam = 1 }) { const limit = 10; // 한 번에 불러올 데이터 수 const response = await fetch(`https://api.thecatapi.com/v1/images/search?limit=${limit}&page=${pageP..