React란SPA , MPA 차이Next.js란RESTful API 란HTTP메서드 종류 React란SPA웹 애플리케이션을 개발하기 위한 라이브러리UI를 여러 독립적인 컴포넌트 구조로 나누어 개발하기 때문에 재사용성에 용이하다메모리에 저장된 가상 DOM을 이용해 배치 업데이트로 여러 변경사항을 하나로 묶어 실제 DOM에 반영하여 효율적인 업데이트가 가능하다 SPA , MPA 차이SPA (Single Page Application)하나의 HTML 페이지 기반으로 동적으로 콘텐츠를 변경하며 사용자와 상호작용하는 웹 애플리케이션특징초기에 필요한 모든 자원(HTML, CSS, JavaScript)을 로드한 후, 페이지 전환 또는 수정 시 필요한 데이터만 동적으로 로드하여 콘텐츠를 업데이트한다.페이지 새로고침 없..
프로젝트 성능 최적화 방법CI / CD클라우드 서비스자바스크립트 특징타입스크립트 특징프로젝트 성능 최적화 방법next.js의 렌더링 방식을 활용하여 초기 로딩 속도 개선next.js Image 컴포넌트를 사용해 이미지 크기를 최적화하고, 필요한 크기의 이미지를 동적으로 로드레이지 로딩을 사용해 용량이 큰 데이터의 로딩 속도 개선 리액트 쿼리를 이용해 데이터를 캐싱하여 로딩 속도 개선공통으로 사용되는 코드나 기능을 별도의 모듈로 분리하여 중복을 줄임버셀( Vercel )정적 웹사이트 호스팅 및 서버리스 함수 호스팅을 주로 지원하는 플랫폼React, Vue, Angular 등의 프론트엔드 프레임워크 및 정적 사이트를 배포하고 호스팅 하는 데에 사용된다서버리스 함수를 통해 백엔드 기능을 구현할 수 있다.(로그..
바벨원시 타입바벨 (Babel)자바스크립트 코드를 여러 환경에서 동작할 수 있도록 변환해 주는 도구자바스크립트 레거시 코드를 최신 JavaScript 문법으로 변환하여 최신 문법을 사용하면서 구형 브라우저 호환성을 유지하기 위해 사용된다원시 타입 (Primitive Types)자바스크립트에서 기본적으로 제공하는 데이터 타입.불변성을 유지하며, 객체와 다르게 참조가 아닌 값을 직접 저장한다.string : 문자열number : 숫자boolean : 논리형 (참, 거짓)null : 존재하지 않는 값undefined : 값이 할당되지 않음symbol : 유일하고, 변경 불가능한 데이터(ID)bigint : 엄청 큰 정수
메모이제이션레이지로딩모듈 번들러*모듈번들러는 실제로 사용해 보고 다시 정리할 것(아직 이해 못함*)메모이제이션(리액트) 데이터 캐싱을 통한 성능 최적화 기법 React.memo컴포넌트를 캐싱해 불필요한 리렌더링을 방지한다부모컴포넌트가 리렌더링 될 경우, 자식 컴포넌트의 props가 변경되지 않으면 리렌더링을 방지한다 useCallback함수를 캐싱해 의존성 배열이 변경되지 않으면 동일한 함수를 반환한다리액트 메모로 리렌더링을 방지할 자식 컴포넌트를 캐싱해도 부모 컴포넌트가 리렌더링 될 경우 자식 컴포넌트로 전달되는 함수도 재생성되므로 자식 컴포넌트의 리렌더링 방지를 위해 사용된다 useMemo값의 계산을 메모이제이션해 의존성 배열이 변경되지 않는 한 동일한 값을 반환한다큰 계산식 등의 함수를 리렌더링..
리액트 생체주기에따른 브라우저 변화
리액트 컴포넌트의 생명주기는 컴포넌트 생성, 업데이트, 소멸되는 과정으로 리액트 생명주기의 각 단계에서 가상 DOM과 실제 DOM 간의 효율적인 업데이트 과정을 통해 브라우저에서의 변화를 관리하며. 사용자는 빠르고 일관된 인터페이스를 경험할 수 있다. 간결한 설명마운트컴포넌트가 생성되고 JSX가 가상 DOM에 반영되며, 가상 DOM을 통해 실제 DOM에 반영된다.업데이트상태가 변경된 경우 배치 업데이트를 통해 여러 변경사항을 가상 DOM에 반영하고, 실제 DOM에 효율적으로 반영한다언마운트페이지 전환이나 브라우저 종료 시 컴포넌트가 언마운트되며 가상 DOM과 실제 DOM에서 제거된다정석 마운트 단계 (Mounting)컴포넌트가 처음 생성되며 DOM에 삽입되고 constructor()가 호출되며 초기 상태..
프레임워크와 라이브러리의 차이점CSS, SASS,SCSS이벤트 버블링, 캡쳐링, 위임CORS프레임워크와 라이브러리의 차이점프레임워크애플리케이션의 특정 영역이나 전체 구조를 제공하는 틀개발자는 프레임워크가 제공하는 규칙과 구조에 따라 코드를 작성해야 한다제어의 역전을 제공하며, 프레임워크가 실행 흐름을 제어하고 필요한 기능을 호출한다라이브러리개발자가 필요한 기능을 사용할 수 있는 도구 모음라이브러리 함수 또는 클래스를 호출해 사용할 수 있다개발자가 직접 코드 흐름을 제어할 수 있다 정리 프레임워크는 애플리케이션의 구조와 흐름을 제어하여 특정 기능을 제공한다예를 들어 next.js같이 앱 라우터를 사용함으로 app폴더 내부 page에 자동 라우팅을 사용할 수 있게 하는 것이 구조와 흐름을 제어해 주는 것라이..
실제돔과 가상돔의 차이자바스크립트 호이스팅변수의 호이스팅이벤트 루프동기와 비동기의 차이, 비동기프로그래밍의 필요성실제돔과 가상 돔의 차이 실제돔(Real DOM)HTML 문서 구조를 표현하는 객체 모델브라우저 웹 페이지의 실제 요소들을 나타낸다.특징즉각적인 렌더링 : 개발자 도구 사용으로 직접 변경 가능하며, 즉각 반영된다.비효율성 : 한 번에 많은 변경이 발생하거나 복잡한 구조의 DOM을 자주 업데이트할 경우, 성능이 저하될 수 있다(느린 로딩, 브라우저 과부하 등) 모든 변경마다 브라우저가 레이아웃과 페인팅 과정을 반복해야 하기 때문API: document.getElementById, document.createElement와 같은 브라우저 API를 통해 직접 조작할 수 있다.동작 예시DOM 요소를 ..
[깃허브 Github] 프로필 꾸미기
결과물https://github.com/seokahee seokahee - Overviewseokahee has 13 repositories available. Follow their code on GitHub.github.com 타이핑 효과https://github.com/DenverCoder1/readme-typing-svg GitHub - DenverCoder1/readme-typing-svg: ⚡ Dynamically generated, customizable SVG that gives the appearance of typing and del⚡ Dynamically generated, customizable SVG that gives the appearance of typing and delet..
yarn과 typescript로 웹 포트폴리오를 만들어보자작업은 2일 안에 완성할 것 프로젝트 생성 단계 프로젝트 생성 yarn npm yarn create vite@latest v-up-portfolio --template react-tsnpm create vite@latest v-up-portfolio -- --template react-ts 패키지 설치yarn npm yarn OR yarn install npm install ESLint , Prettier 설치 ESLint Prettier 코드 품질 보장, 버그 예방, 스타일 가이드를 준수하도록 돕는다변수 선언 전에 사용되지 않도록 하거나, 특정 스타일 가이드를 따르도록한다코드 형식을 일관되게 유지해코드 스타일을 자동으로 포맷해준다.중..
SEO (Search Engine Optimization)검색 엔진은 웹 페이지의 콘텐츠를 수집하여 검색 엔진의 데이터베이스에 저장한다 이것을 인덱싱이라 한다검색 엔진은 웹 페이지 콘텐츠를 수집하여 인덱싱 하고 결과에 따라 색인화를 통해 검색 키워드에 따른 페이지 관련성을 결정한다 검색 엔진 최적화웹사이트 또는 웹 페이지가 검색 결과 페이지에서 상위에 노출되도록 하는 것seo를 통해 상위에 노출될수록 방문자 및 사용자를 증가시킬 수 있다 SEO 최적화 방법시멘틱 태그 사용으로 검색 엔진이 웹 페이지의 구조를 이해하게한다메타태그를 통한 키워드 추가를 통해 페이지의 콘텐츠 분석을 용이하게 한다서버사이드 렌더링을 활용한 사이트 속도 최적화