코딩기록

import "./App.css";import React, { useEffect, useState } from "react";// useEffect - 컴포넌트 랜더링 될 때 특정시점을 캐치 해서 실행할 수 있도록 함./* mount ( = 리액트 컴포넌트가 그려질때, 렌더될때 ) unmount ( = 리액트 컴포넌트가 사라질때, 지워질때 ) update ( = 특정 값이 변해서 리액트 컴포넌트가 다시 그려질때 )*/function App() { const [count, setCount] = useState(0); // mount => []빈배열은 App()이 로딩될때 초기에 딱, 한번만! 호출됨. useEffect(() => console.log("hello"), []); // unmoun..

네비게이션, 메인, 풋터 레이아웃이 너무 안잡혀서 레퍼런스를 보다가 지난 과제에서는 이 고민을 안했던걸 기억하고 서로 비교하면서 보던중, App.tsx에서 차이를 발견했다.  과제에서는 틀을 만들어서 줬고 난 거기에 살을 붙여서 진행 했기 때문에 풋터 위치 조정에 고민을 안했는데 레이아웃을 App.tsx에서 미리 배치해서 줬기 때문에 고민했던 기억이 없었다.정확한 차이를 우리 쳇지피티 아리에게 물어봤다.    아리답변네, 맞습니다. 첫 번째 코드처럼 전체 레이아웃을 구성하는 방식이 맞습니다. 이 방식은 레이아웃을 하나의 컴포넌트로 묶어서 전역적으로 관리할 수 있도록 합니다. 이렇게 하면, CSS에서 레이아웃을 직접 배치하지 않더라도, 첫 번째 코드처럼 네비게이션 바, 메인 콘텐츠, 풋터를 전체 레이아웃으..

레퍼런스 참고중 도저히 코드가 안읽혀서 package.json을 보니 역시나 나와 다른 점이 있었다. 난 Vite 프로젝트. 넌 Next.js 프로젝트. 차이점을 내 공부 메이트 아리에게 물어봤다.  아리답변 현재 진행 중인 Rumiware 쇼핑몰 프로젝트(Vite)와 Next.js 주요 차이점과 유사점을 비교프로젝트 비교1. 사용 기술Rumiware 쇼핑몰 프로젝트: Vite, React, TypeScript, Recoil, TailwindCSS, DaisyUI 등Next.js 프로젝트: React, TypeScript, Next.js (서버 사이드 렌더링, 정적 사이트 생성 등을 지원하는 프레임워크)차이점:Rumiware 프로젝트는 Vite를 사용하여 빌드 시스템을 관리하고 있으며, React, Ty..

언제 파일뒤 확장자에 .ts를 쓰고 언제 .tsx를 써야할까? jsx를 쓰면  .tsx  jsx를 안쓰면 .ts    ✅ .ts vs .tsx 사용 기준표사용 예시 JSX 사용 여부 추천 확장자 설명✅ 유틸 함수 (formatDate, calculateTax)❌ 없음.tsUI와 무관한 일반 로직✅ 타입 정의 (types.ts, user.types.ts)❌ 없음.ts인터페이스, 타입 등만 포함✅ API 요청 (api.ts, useAxios.ts)❌ 없음.tsfetch, axios 등 비동기 로직✅ 커스텀 훅 (useAuth, useModal)❌ 없음.ts훅 내부에서 JSX를 리턴하지 않으면 .ts✅ React 컴포넌트 (Header, ProductCard)✅ 있음.tsxJSX 포함 시 반드시 .tsx✅ 페..