귀여운 눈높이에서 작성된, 🐰

하루 한 걸음씩, 성장 하는 중 입니다 🫶🏻

전체 글 171

리액트 공부하기 - 최적화 lazy & Suspense

리액트는 클라이언트 사이드 렌더링을 한다= 서버에서 일단 비어있는 html 파일을 받아온 뒤, 같이 받아온 자바스크립트를 사용해서 최종화면을 그려준다는 뜻자바스크립트를 사용해서 화면을 완성하기 때문에, 클라이언트가 렌더링의 주체가 된다 그런데 만약, 빈 html은 받아왔긴 한데.. 화면을 그리기 위한 javascript 파일이 엄청 크게 되면?당장 필요하지 않는 페이지는 됐고,, 필요한 페이지 부터 우선. 최적화 => 이럴 때 사용할 수 있는 Lazy, Suspense 1. Lazy. lazy 사용 방법은 다음과 같다. 임포트 해올 때, 첫번째와 같은 기본 방식이 아닌, import를 리액트 lazy 함수 사용해서 임포트 해오면 된다. 더보기🔹 React.lazy()동적 import를 통해 컴포넌트를..

Studying/React 2025.05.14

리액트 공부하기 - 최적화 함수 useMemo(), useCallback(), memo()

리렌더링이 발생되는 기존 조건 때문에, 꼭 리렌더링 될 필요 없을 때, 불필요하게 발생되는 비효율적인 순간들이 있다.규모가 복잡해질 수록, 성능좋고 빠르게 만들기 위해, 최적화 함수! 등장 배경은? 바로 함수형이라서 그렇다 ? 이게 무슨 말이냐면.. 함수형 컴포넌트는 함수를 호출해서 화면에 그리는 식.이런 함수형 컴포넌트에서 상태변경이 일어나면, 그 함수는 더 이상 사용하지 않고 새 상태값으로 함수를 새롭게 호출.따라서 상태가 변경되면 이전의 기존의 함수는 사라지고, 새 함수로 대체되는. 재사용 가능 한 것도 새로만들어쓰는 비 효율 발생! 그렇다면.. 해결 방법은? 따라서 리액트 최적화 함수들은, 이런 생각에서 만들어진 함수들이다 ! 저장 했다가 재 사용 하자 !각각 함수를 어떻게 사용하는지 살펴보자. ..

Studying/React 2025.05.14

네트워크 기초 - LAN, MAN, WAN, http, https, SOP, CORS

💡 네트워크 종류📡 1. LAN (Local Area Network)작은 지역 네트워크예: 집, 학교, 사무실 안에서 컴퓨터들이 서로 연결돼서 자료를 주고받을 수 있는 네트워크.빠르고 설정이 간단함.계층형 구조를 사용해 네트워크를 구성.보통 **스위치(Switch)**를 사용해서 장비들을 연결하고,**라우터(Router)**를 통해 외부 인터넷(WAN)과 연결돼. 🏙️2. MAN (Metropolitan Area Network)도시 단위의 네트워크야.주로 기업, 통신사, 정부기관이 운영.광케이블, 이더넷 링 등을 사용해 도시 내 여러 지점을 연결.VLAN, MPLS 같은 기술로 네트워크 분리 및 트래픽 효율화함.🌍3. WAN (Wide Area Network) 전 세계적으로 연결된 네트워크야.인터..

카테고리 없음 2025.05.14

리액트 - 회원가입, 로그인 창 구현하기 (백엔드 없이 화면 구현 먼저)

또 한번의 시련 ~ 공부해야지.. 익숙해져야지.. 🐇 로그인 / 회원가입 페이지 UI지금은(처음엔) 백엔드가 없으니, 가짜 데이터를 이용한 UI/UX 설계부터 먼저 해! 4-1. 로그인 UI 흐름const handleLogin = () => { if (email === "test@test.com" && password === "1234") { alert("로그인 성공"); navigate("/"); } else { alert("아이디 또는 비밀번호가 잘못되었습니다."); }}; - 일단은 임시 조건문으로 로그인 성공/실패 처리를 하고, - 후에 Supabase 같은 백엔드 연동 시 실제 인증 로직을 연결하면 돼. 4-2. 회원가입 UI 흐름const..

Studying/React 2025.05.09

리액트 공부하기 - 파일구조

프로젝트를 했을 때 컴포넌트나 페이지의 파일을 어떻게 나뉘어야 하지 ?에 대한 고민이 있었고앞으로 더 다양한 프로젝트를 할 때 관리해야 할 파일이 늘어남에 따라, 효율적으로 직관적으로 파일을 분류해야 할 필요가 생기겠지..어떻게 파일을 나누면 좋을까? 에 대한 정답은 없지만, 우선 리액트 공식 문서에서 권장하는 방식은 아래와 같다. 파일 구조 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org참고하면 좋을 블로그 [React] 리액트의 폴더 구조프로젝트를 진행하다 보면 크기가 커질수록 관리해야할 파일은 늘어나고 이에 따라 각 파일들을 용도에 맞게 분류해야할 필요가 생깁니다.velog.io 🗂️ 리액트에서 자주 쓰..

Studying/React 2025.05.09