본문 바로가기

전체 글

 (106)
[Git] Git정리 1. Git User설정 config는 global 모드와 local 모드로 설정이 가능하다. global 모드로 설정하면 컴퓨터 내의 모든 git의 관리를 받는 폴더에 대해 값이 설정되는 것이며, local 설정은 현재 디렉터리에만 값을 설정 git config {--global | --local} user.name "{userName}" git config {--global | --local } user.email "{userEmail}" 2. Git 저장구조 Working Directory (작업 공간) 현재 작업중인 Git 프로젝트 파일들이 있는 내 PC의 디렉토리 입니다. .git 디렉토리를 제외한 프로젝트 디렉토리 내의 모든 공간이 Working Directory라고 할 수 있습니다. Stag..
[React] web성능 메트릭 HTML 삽입 미리보기할 수 없는 소스 `CRA(create-react-app)` 디폴트 파일 중 하나 리액트 프로젝트를 생성하면 index.js에서 사용 앱의 퍼포먼스 시간들을 분석하여 객체 형태로 보여주는 것이 목적.다음과 같이 작성하여 콘솔에서 확인이 가능. 즉, 사용자들에게 편의를 제공하는 페이지나 컴포넌트는 아니므로 삭제해도 무방하다. reportWebVitals(console.log);​​​​ LCP (Largest Contentful Paint) 페이지에서 가장 용량이 큰 컨텐츠가 표시되는 시점을 나타낸다. CLS (Cumulative Layout Shift) 페이지가 로드되기 시작하는 시점과 lifecycle 상태가 숨김으로 변경되는 시점 사이에 발생하는 모든 예기치 않은 레이아웃 이동의 ..
[React] Typescript : 동적인 자바스크립트 언어에 타입을 미리 부여함으로써 컴파일 시 에러를 잡을 수가 있다. 기본 타입: number : 숫자 타입 string : 문자열 타입 boolean : 불리언 타입 any : 모든 타입을 허용하는 동적 타입 void : 반환 값이 없는 함수의 리턴 타입 undefined : undefined 값 또는 타입 null : null 값 또는 타입 배열 및 튜플 타입: `Array` 또는 `ElementType[]` : 배열 타입 `[Type1, Type2]` : 튜플 타입 객체 타입: { key: Type }: 객체 타입 interface: 인터페이스를 사용한 객체 타입 정의 함수 타입: (parameter: Type) => ReturnType: 함수 타입 void: 반환 값이 없는 ..
[React] ServerComponent, HTML Streaming 1. Server Components VS ClientComponent : React 프레임워크의 새로운 기능 중 하나입니다. 이 기능은 서버와 클라이언트 간의 데이터 및 렌더링 로직을 효과적으로 분리하여 성능을 향상시킬 수 있는 방법을 제공합니다. React v18 버전 이전까지는 React를 사용하여 어플리케이션을 렌더링하는 주요한 방법이 "전적으로(entirely)" 클라이언트에 있었다. 서버 컴포넌트와 클라이언트 컴포넌트의 가장 큰 차이점은 컴포넌트가 렌더링되는 장소가 서버냐 클라이언트냐의 차이입니다. 서버 컴포넌트는 서버에서 한차례 해석된 이후 클라이언트로 전달되고, 클라이언트 컴포넌트는 클라이언트가 js 번들을 다운로드 받은 후 해석하게 됩니다. 2. HTML Streaming React v1..
[Next.js] Tailwind CSS, ESLint, Webpack 1. Tailwind CSS GitHub과 Next.js 공식 사이트에서 사용하고 있습니다. Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 `m-1`, `flex` 와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있습니다. ChitChat You have a new message! https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI too..
[React] Next.js : Next.js는 React 기반의 웹 애플리케이션을 빌드하기 위한 JavaScript 프레임워크입니다. Next.js는 React를 사용하여 정적 및 동적 웹 페이지를 빌드하는 데 도움을 주며, 많은 기능과 성능 최적화를 제공합니다. 기존의 전통적인 SSR 방식은 웹페이지 이동 시에 페이지를 요청할 때마다 서버로부터 새롭게 생성된 HTML 파일을 받아와 화면에 렌더링하였습니다. 이러한 방식은 서버 자원을 많이 소모하고 불필요한 트래픽을 유발했습니다.Next.js는 초기 페이지 로딩에 대해서는 정적 사이트 생성(SSG), SSR 방식으로 동작시킬 수가 있고, 이후의 요청에 대해서는 기본적으로 클라이언트사이드 렌더링(CSR) 방식으로 동작하기 때문에 SSR 방식의 장점인 SEO에 유리하면서도 CSR의 이..
[React] 기본HOOKS (useState, useEffect, useContext, useMemo, useReduce, useRef) : 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. 1. useState : useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다.function Counter() { const [value, setValue] = React.useState(0); console.log(value); return ( 현재 카운터 값은 {value} { setValue(value ..
[React] React 환경구축, vscode extension 시작전 vscode extinsionlive server: Live Server는 정적 웹 페이지를 빠르게 개발 및 테스트할 수 있는 확장 프로그램입니다. Live Server를 사용하면 코드를 변경하거나 저장할 때 실시간으로 브라우저를 새로 고침할 수 있습니다. 이를 통해 웹 페이지의 변경 사항을 빠르게 확인할 수 있습니다.Reactjs code snippets, dsznajder.es7-react-js-snippets : Visual Studio Code의 확장 프로그램 중 하나로, React 개발을 보다 효율적으로 진행할 수 있도록 React 코드 조각을 제공해주는 도구입니다. 이 확장 프로그램을 설치하면 React 구성 요소, 라이프사이클 메서드, 스타일링 관련 코드 등을 빠르게 삽입할 수 있습니..

티스토리툴바