본문 바로가기

프론트엔드3

[React] React와 TypeScript로 구현하는 다양한 텍스트 들여쓰기 기법 이번 포스팅에서는 React 컴포넌트를 활용하여 텍스트 들여쓰기 효과를 다양하게 구현하는 방법을 소개합니다.특히, 첫 번째 줄은 18px, 두 번째 줄부터는 36px 들여쓰기가 적용되는 "indentDouble" 타입을 포함한 여러 타입의 구현 예제를 제공하여, UI의 가독성을 높이는 데 도움이 될 것입니다.import React from 'react';import { Box, Typography } from '@material-ui/core';interface FaqAnswer { type: 'br' | 'indent' | 'indentAll' | 'indentDouble' | string; text: string;}// 다중 텍스트 들여쓰기 구현 함수const generateAnswer = (co.. 2025. 2. 11.
[면접 대비] 브라우저에 google.com을 입력하면 무슨 일이 일어날까? 개요웹 개발자나 네트워크 엔지니어 면접에서 자주 나오는 질문 중 하나가 **"브라우저에 google.com을 입력하면 무슨 일이 일어나는가?"**이다. 이 질문은 웹의 동작 원리, 네트워크 구조, 브라우저 렌더링 과정 등을 얼마나 이해하고 있는지 평가하는 데 사용된다.  google.com을 입력하고 엔터를 누르는 순간부터 웹페이지가 표시될 때까지의 전체 흐름에 대하여 정리했다.1. 사용자가 google.com 입력 후 Enter를 누름먼저 사용자가 브라우저의 주소창에 google.com을 입력하고 Enter를 누르면, 브라우저는 이 URL을 처리하기 시작2. DNS(Domain Name System) 조회브라우저는 google.com을 IP 주소로 변환하기 위해 DNS 요청을 보냄.로컬 캐시 확인: 브.. 2025. 2. 10.
[React] React 프로젝트마다 다른 버전 설치해도 괜찮을까? 완벽 정리 📌 React 프로젝트마다 다른 버전 설치해도 괜찮을까?React 프로젝트를 여러 개 작업하다 보면 각 프로젝트에서 다른 React 버전을 사용해야 할 때가 있습니다.그런데, 한 폴더에서 React 17을 쓰고, 다른 폴더에서 React 18을 설치해도 괜찮을까요?결론부터 말하면, 각 프로젝트 폴더마다 React 버전을 다르게 설치해도 문제가 없습니다.✅ React 프로젝트별 버전이 충돌하지 않는 이유각 프로젝트는 독립적인 패키지 환경을 가짐다른 프로젝트의 node_modules/ 폴더와 충돌하지 않음package.json과 package-lock.json을 기반으로 버전이 고정됨🔹 현재 프로젝트에서 사용 중인 React 버전 확인하기터미널에서 해당 프로젝트 폴더로 이동 후 아래 명령어를 실행하세요... 2025. 2. 6.