본문 바로가기

react
11

📌 React Router를 활용한 동물 정보 웹 페이지 만들기를 통한 개념 정리 이번 프로젝트는 React Router를 사용하여 동물 정보를 보여주는 웹 페이지를 구현해보는 실습이었다.메인 페이지에서 동물 목록을 보여주고, 클릭하면 상세 정보로 이동하며,검색 기능까지 구현하면서 라우팅에 필요한 여러 개념을 자연스럽게 익힐 수 있었다.아래는 내가 만든 코드 예시를 중심으로, 각 개념을 하나씩 정리해본 것이다.1️⃣ BrowserRouter – 라우팅의 시작React에서 여러 페이지로 이동하려면 BrowserRouter로 애플리케이션을 감싸야 한다.나는 main.jsx 파일에서 이처럼 설정했다.import { createRoot } from 'react-dom/client';import { BrowserRouter } from 'react-router-dom';import App fr.. 2025. 4. 10.
📌 SPA랑 MPA, CSR이랑 SSR 개념 한 번에 정리 해봄 React로 프론트엔드 개발을 공부하면서 자꾸 듣게 되는 용어들이 있다.바로 SPA, MPA, CSR, SSR.처음엔 “뭔 차이야…?” 싶었는데, 알고 보면 웹 구조와 렌더링 방식에 대한 개념 차이였다.이해해두면 프레임워크를 고를 때나 프로젝트 구조를 설계할 때 정말 유용할 것 같아서개념 + 차이점 + 장단점을 한 번 정리해보았다!1️⃣ SPA vs MPA✅ SPA (Single Page Application)SPA는 말 그대로 "단일 페이지 애플리케이션"이다.하나의 HTML 안에서 필요한 화면만 부분적으로 바꾸는 방식으로 동작한다.처음에 한 번만 HTML과 JavaScript 번들을 로드하고,이후에는 페이지 이동이나 인터랙션이 발생하더라도 전체 페이지를 다시 요청하지 않는다.대신, JavaScript가.. 2025. 4. 7.
📝 [250404/오답노트] - React filter와 map 제대로 쓰기 JavaScript가 끝나고 이제는 React를 배우게되었다... JavaScript도 아직 잘 모르는데 React라니...!!!filter()와 map()을 사용해서 배열에서 조건에 맞는 데이터를 화면에 렌더링하는 과제를 풀었다.근데 몇 가지 실수를 해서 원하는 출력이 되지 않았다...👩‍💻 내가 쓴 코드import './App.css';//문제: users 배열 중 거주지가 서울인 사람의 이름과 나이를 화면에 렌더링해주세요.const users = [ { id: 1, 이름: '홍길동', 나이: 25, 거주지: '서울' }, { id: 2, 이름: '김철수', 나이: 30, 거주지: '부산' }, { id: 3, 이름: '박영희', 나이: 22, 거주지: '서울' }, { id: 4, 이름:.. 2025. 4. 5.

최근댓글

최근글

skin by © 2024 ttuttak

티스토리툴바