목록전체 글 (143)

leebaek

[React] 리액트 폴더 구조 2편 - Feature-Based Structure

■ FBS란?■ FBS 기본 구조FBS는 FSD의 lite한 버전(변형)이라 보시면 될 것 같아요.FSD를 알고 이번 포스팅을 읽으시는 것을 추천드려요 ~ https://leebaek.tistory.com/148 [React] 리액트 폴더 구조 1편 - Featured-Sliced-Design■ FSD란?■ FSD 기본 구조■ FSD 장점리액트 프로젝트를 진행하려고 보니,폴더 구조를 어떻게 설계해야 할지 고민이 되더군요.. ! vite+react로 시작하면 이런 폴더구조가 생성되는데요..├── publicleebaek.tistory.com■ FBS란? | Feature-Based Structure- 기능중심으로 폴더를 나누고, 각 기능 안에서 필요한 UI, 상태, API 등을 모아 관리하는 구조 FSD의..
웹/React 2025. 3. 27. 01:57
[React] 리액트 폴더 구조 1편 - Featured-Sliced-Design

■ FSD란?■ FSD 기본 구조■ FSD 장점리액트 프로젝트를 진행하려고 보니,폴더 구조를 어떻게 설계해야 할지 고민이 되더군요.. ! vite+react로 시작하면 이런 폴더구조가 생성되는데요..├── public/│ └── vite.svg ├── src/│ ├── assets/│ │ └── react.svg │ ├── App.css │ ├── App.jsx │ ├── index.css │ └── main.jsx ├── .gitignore├── index.html├── package.json├── vite.config.js 해당 구조는 제 프로젝트를..
웹/React 2025. 3. 27. 01:13
[React] props에 대해 알아보자

■ props란 ?■ props 구조 분해 할당■ props란 ?- 컴포넌트 간에 데이터를 전달하기 위해 사용되는 읽기 전용 객체- properties의 줄임말 ⭐️ 부모 컴포넌트가 자식 컴포넌트에 값을 넘겨줄 때 사용해요.React 컴포넌트는 함수라는거 잊지 않으셨죠 ?쉽게 생각하면,props는 함수의 매개변수에요.function Child(props) { return {props.name}님 안녕하세요!;}function App() { return ;}이해를 돕기 위해 일반 함수와 React 컴포넌트를 비교해볼게요. 📒↓인사말을 출력하는 greet 함수가 있어요.function greet(name) { console.log(name+"님 안녕하세요!");}  📘↓인사말을 출력하는 Child ..
웹/React 2025. 3. 23. 20:32
[React] useEffect Hook에 대해 알아보자

■ useEffect란 ?■ useEffect 사용 방법■ useEffect 예시 코드■ useEffect란 ?- 컴포넌트가 렌더링된 후 특정 작업을 실행하게 하는 함수- 함수형 컴포넌트에서 라이프사이클을 처리할 수 있도록 도와줌데이터 불러오기 (API 호출)이벤트 리스너 등록타이머 설정상태 변화에 따른 부수 효과 실행1. Render (렌더 단계)  → 2. Commit (DOM에 실제 반영) → 3. Effect (useEffect 실행) useEffect는 컴포넌트가 렌더링되는 전체 과정 중 1. 렌더 단계, 2. 커밋 단계, 3. 이펙트 단계 총 세 단계를 거쳐 작동해요. 먼저 렌더 단계에서는 JSX가 가상 DOM으로 변환되고, 이전 가상 DOM과 비교(diffing)하는 과정이 진행됩니다. 이때..
웹/React 2025. 3. 22. 18:33
[React] useState Hook에 대해 알아보자

■ useState란 ?■ useState 사용 방법■ useState 예시 코드■ useState 란 ?- React의 기본 훅(Hook) 중 하나로, 기본 함수형 컴포넌트에서 상태를 사용할 수 있게 해주는 함수 변수를 선언하고 함수로 상태를 변경할 수 있으나, 다시 렌더를 해주지 않으면 html에 반영되지 않아요.그래서 어떤 동작을 하는 함수의 마지막 줄에는 리렌더를 해줘야 하는 불편함이 있었어요 ! useState가 도입되면서,함수가 실행되면 자동으로 리렌더해주기 때문에 코드가 훨씬 간결해졌답니다.import React from 'react';function Counter() { let count = 0; function increase() { count += 1; console.lo..
웹/React 2025. 3. 22. 18:15
[CSS] 반응형 웹 - 디바이스 별 해상도를 알아보자

안녕하세요.오늘은 반응형 웹을 만들기 위해 디바이스 별 해상도를 알아보는 시간을 갖도록 하겠습니다. 캡스톤에서 UI 디자인도 맡게 되었습니다 ㅎ디자인을 시작하기 전에 디바이스별 해상도를 알아야 레이아웃을 정할 수 있을 것 같아 급하게 공부하고 있습니다~~그럼 시작해볼까용~  ■ 데스크탑 해상도■ 모바일 해상도■ 반응형 웹■ 데스크탑 해상도아래 사이트는 Statcounter Global Stats로, 전 세계의 실시간 디바이스 사용 통계를 보여주는데요.https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide/#monthly-202402-202502 Desktop Screen Resolution Stats Worldwide | Statcoun..
웹/CSS 2025. 3. 22. 15:33
이전 Prev 1 2 3 4 5 ··· 24 Next 다음