뚱이의 개발일기

일단 기본적으로 리액트는 컴포넌트 기반의 프로그래밍 언어이다. 컴포넌트는 재사용 가능한 요소들이며 이런 재사용성을 이용해 효율적인 프로젝트를 만들수 있다고 한다. 그렇다면서 리액트 프로젝트시 어떻게 하면 효율적으로 컴포넌트들을 효율적으로 재사용할수 있을까? 🤔 프론트엔드 부트캠프를 진행하면서 리액트 초기세팅과 디렉토리 구조, 컴포넌트 구조 어떤게 더 보기 쉽고 효율적일지 궁금해져 정리해볼려고 한다! CRA 초기 세팅 후 폴더 구조 🔍node_modules : 프로젝트의 모든 패키지들이 설치되는 디렉토리 public: 정적 파일을 보관하는 폴더로, 빌드 시 파일들이 그대로 복사되어 빌드 결과물에 포함됨 src/: 애플리케이션의 소스 코드를 보관하는 폴더 assets/: 애플리케이션에 사용하는 이미지, ..

지난번에 리액트 포탈에 대해 공부하다 문득 의문이 들었다.리액트에선 포탈을 이용하여 모달이나 툴팁 등을 사용하는게 더 좋다라고 그러면 자바스크립트를 이용하는건 안되는건지 된다면 어떤 이유때문에 사용을 안하는지 알아보았다.  React Portalimport React, { useState } from 'react';import ReactDOM from 'react-dom';// 모달 컴포넌트const Modal = ({ children, onClose }) => { return ReactDOM.createPortal( {children} Close , document.getElementById('modal-root') // Portal을 ..

Portal(포탈)React Portal은 컴포넌트의 DOM 계층 구조를 유지하면서도, 실제로는 그 컴포넌트를 다른 DOM 노드에 랜더링할 수 있게 해주는 기능이라고 하며, 주로 모달, 알림, 툴팁과 같은 UI 요소를 화면의 상위 레이어에 표시할때 유용하다고 한다. 예시index.html - 모달 위치 생성   App.tsx - 버튼 클릭시 모달을 보여주기 위한 화면 작업import React from 'react';import './App.css'import Modal from './conpornents/Modal';function App() { const [isOpen, setIsOpen] = React.useState(false); const openModal = () => ..

CSR이란클라이언트 사이드 렌더링(Clinent side rendering)이라고 하며 대표적으로 사용하는 프레임워크 및 라이브러리로는 React와 vue, angular가 있다.CSR은 SPA(싱글 페이지 어플리케이션)를 작업하는 렌더링 방식이라고 이해하면 좋을 거 같다.클라이언트는 브라우저를 말하며, HTML 파싱부터 JS 읽기까지 브라우저가 렌더링 한다. CSR 장점과 단점초기 로딩이 길다 : CSR은 클라이언트인 브라우저가 렌더링을 도맡아 처리하는 방식이다보니 서버에서 필요한 데이터를 한 번에 받아오고 받은 데이터를 브라우저가 렌더링하게 된다. 즉 모든 페이지를 한번에 불러와 로딩후 화면에 보여지고 페이지간 전환에 바로바로 반응이 가능해 페이지 이동시 깜빡임 증상이 거의 없다서버 부하가 적다 : ..