분류 전체보기166 [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. VS Code Tasks와 PowerShell로 백엔드 서비스 Git 업데이트 자동화하기 백엔드 서비스가 여러 개 있어 매번 해당 디렉터리로 이동해 git pull을 실행하는 것이 번거로웠던 경험이 있으실 것입니다. 이번 포스팅에서는 VS Code의 Tasks와 PowerShell 스크립트를 활용하여, 한 번의 커맨드 실행으로 여러 서비스의 Git 업데이트를 자동화하는 방법을 소개합니다.사용 환경 및 목적환경: VS Code, Windows PowerShell목적: 여러 Git 리포지토리를 하나의 명령어로 업데이트구성: VS Code의 tasks.json과 PowerShell 스크립트1. VS Code Tasks 설정 (tasks.json)아래 예시는 프로젝트 루트 또는 .vscode 폴더에 위치시킵니다.여기서는 환경 변수 BASE_DIR를 이용해 현재 워크스페이스 경로를 전달합니다.{ ".. 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. [VSCode] ctrl+enter 단축키 변경 기존 : 다음줄로 이동업데이트 후 : GitHub Copilot Suggestions 열림 -> 다시 기존으로 바꾸는 방법!!! 단축키 설정에서 직접 변경Ctrl + K Ctrl + S를 눌러 키 바인딩 설정을 엽니다.ctrl+enter를 검색합니다.GitHub Copilot: Accept Inline Suggestion 항목이 있다면 우클릭 → 키 바인딩 제거를 선택합니다.여기까지 하면 기존처럼 다음줄로 이동이 작동될 것! 여전히 안된다면 4번을 해보자!!(Insert Line After 항목을 찾아 Ctrl + Enter를 다시 할당합니다.)이제 다시 Ctrl + Enter를 입력하면 자동완성 대신 원래대로 다음 줄로 이동할 갓! 😊 2025. 2. 5. [React] 구조 분해 할당(Destructuring Assignment) 함수에 객체나 배열을 전달해야 할 일이 많음. 하지만 항상 전체 데이터를 사용할 필요는 없고, 일부 값만 필요한 경우도 있음.이럴 때 유용한 게 바로 구조 분해 할당(destructuring assignment). 배열이나 객체에서 원하는 값만 쏙쏙 골라 변수로 저장 가능. 덕분에 코드도 깔끔해지고 가독성도 좋아짐.1. 배열 분해하기배열을 구조 분해 할당하면 특정 요소를 쉽게 변수에 담을 수 있음.let arr = ["Bora", "Lee"];// 구조 분해 할당을 이용한 변수 선언let [firstName, surname] = arr;console.log(firstName); // Boraconsole.log(surname); // Lee위 코드에서 firstName 변수에는 arr[0], surna.. 2025. 2. 5. [React] Context API 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업3~4개 이상의 컴포넌트를 거쳐서 전달을 해야한다면?프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수 있다.여기서 “값”은 상태뿐만 아니라, 함수, 외부 라이브러리 인스턴스, DOM 모두 가능⇒ 리액트의 Context API와 dispatch를 사용하여 이러한 복잡한 구조를 해결해보자Context API 만들어보기React.createContext()const UserDispatch = React.createContext(null);createContext의 파라미터에는 Context의 기본 값을 설정Context를 만들면, 안에 Provider라는 컴포넌트가 들어있는데, 이것을 통하여 Context의 값을 정할 수 있음이 컴포.. 2025. 2. 5. [React] class형 컴포넌트 VS function형 컴포넌트 과거에는 클래스형 컴포넌트를 주로 사용현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장컴포넌트데이터가 주어졌을 때 이에 맞추어 UI를 만들어주는 기능라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행Class형 컴포넌트state 기능 및 라이프 사이클 기증을 사용할 수 있고, 임의 메서드를 정의할 수 있다.render함수가 꼭 있어야 한다.Function형 컴포넌트클래스형 컴포넌트보다 선언하기 좀더 편리메모리 자원을 덜 사용한다는 장점과거에는 함수형 컴포넌트에서 state와 라이프 사이클 API를 사용할 수 없었지만, → 리액트 훅이 도입되면서 단점이 해결됨일반적인 함수 선언 방식과 / 화살표 함수(arrow function) 방식 모두 가능화.. 2025. 2. 5. [React] Context Provider, useEffect, useMemo React에서 context provider, useEffect, 그리고 useMemo는 모두 중요한 개념이며 React 애플리케이션을 개발할 때 자주 사용됩니다. 각각의 역할과 사용법에 대해 자세히 설명하겠습니다.Context Provider:역할: Context Provider는 React 컴포넌트 트리 전체에서 데이터를 공유하는 데 사용됩니다. 주로 전역 상태 관리에 활용됩니다.사용법: Context를 생성하고, 해당 컨텍스트의 공급자(Provider)를 사용하여 컴포넌트 트리에 값을 제공합니다. 컴포넌트에서는 해당 컨텍스트의 값을 소비(consume)할 수 있습니다.// 예시: 컨텍스트 생성const MyContext = React.createContext();// 예시: 컨텍스트 공급자 사용fu.. 2025. 2. 5. 이전 1 2 3 4 ··· 19 다음
