📱모노레포란? 여러 프로젝트의 코드와 자산을 1개의 레포지토리에서 저장하는 구조이다 모노레포 구조 예시 ✔️ 멀티레포와의 차이점 멀티레포는 모노레포와 상반된 개념으로 구조로 프로젝트를 레포지토리 별로 저장하는 구조이다 도메인별로 독립성을 보장할 수 있고 책임 경계

15장 마치며 15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항 15.1.1 유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자 리액트 16.8 이후로 훅이 소개되면서 함수 컴포넌트의 개념이 정립되어 중요한 업데이트가 이뤄졌다. 리액트 17 버전은 새루온 기능 출시 및 호환성이 깨지는 변경 사항을 최소한으로 ...

12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표 12.1 웹사이트와 성능 사용자가 웹사이트에 접속했을 때 기대하는 사항 방문한 목적을 쉽게 달성할 수 있어야 함 방문한 목적을 달성하는데 시간이 짧아야 함 웹사이트에서 개인정보가 누출되는 등의 사고 없이 보안에 철저해야 함 12.2 핵심 웹 지표란? 구글에서 만든 지표로, 웹사이트에서 뛰어난...

10장 리액트 17과 18의 변경 사항 살펴보기 대부분의 리액트 프로젝트들이 최소한 훅과 함수 컴포넌트를 사용하기 위해 16.8 버전을 기반으로 개발됐고, 이것이 고착화되어 더 이상 버전 업하지 않고 운영되고 있다. 그래서 리액트 버전 17과 18 버전은 비교적 많이 사용하고 있진 않다. 10.1 리액트 17 버전 살펴보기 16 버전과 다르게 새롭게 ...

9장 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 빈 폴더만 준비돼 있는 환경에서 가장 각광받는 라이브러리인 리액트와 Next.js로 실무에서도 쓸 수 있는 웹서비스를 구축해보기 9.1 Next.js로 리액트 개발 환경 구축하기 리액트와 Next.js에서 어떠한 설정이 필요한지 알기 위해서 package.json부터 하나씩 살펴보자 creat...

8장 좋은 리액트 코드 작성을 위한 환경 구축하기 ESLint를 활용한 정적 분석과 리액트 테스트 라이브러리를 충분히 활용한다면 웹 서비스가 서비스되기 전에 여러가지 문제를 점검하고 확인할 수 있다. 8.1 ESLint를 활용한 정적 코드 분석 ESLint는 자바스크립트 생태계에서 가장 많이 사용되는 정적 코드 분석 도구이다. 8.1.1 ESLint...

프로젝트에서 실시간 채팅을 구현하면서 기본 스크롤바가 전반적인 UI에 너무 안 어울려서 수정해야될 필요성을 느꼈다. 또한, 기본 스크롤바에 조사해보니 아래와 같은 단점들이 있었다. > #### 기본 스크롤바가 적용된 UI > - 전체 레이아웃이 왼쪽으로 밀리는 현상이 발생함 > - 전반적인 UI의 어울리지 않는 스크롤바 사용으로 UI 일관성을 저해시킴 > ...

대부분의 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다. 브라우저 렌더링 과정 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다 1️⃣ 브라우...

Babel Babel이란? 추상화 수준을 유지한 채로 코드를 변화시키는 트랜스파일러이다 바벨을 통해 ES6+의 자바스크립트 코드는 하위 버전으로 변환되고, 그로 인해 IE나 다른 브라우저에서 동작할 수 있게 만든다 설치 방법 프리셋 설치와 babel.config.json 설정 파일 작성 Babel을 사용하려면 @babel/preset-env를 설치해야...

모듈이란? 애플리케이션을 구성하는 개별적인 요소로서 재사용 가능한 코드 조각 > # 모듈의 특징 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 함 자신만의 파일 스코프를 갖는 모듈의 자산은 기본적으로 비공개 상태다. 다시 말해, 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 ...

프로젝트를 진행하면서 UI에 대해 자료조사한 내용을 작성해본다 프론트엔드 개발자는 UI의 트렌드에 대한 지식도 필요하다고 생각한다 > # 참고할만한 사이트 1. Behance 다양한 디자이너들의 포트폴리오가 모여 있는 플랫폼 URL: behance.net 2. Dribbble 디자이너들이 자신의 작업을 공유하는 사이트 URL: dribbble....

이번 주는 프로젝트를 진행하면서 사용했던 라이브러리인 Framer Motion에서 사용했던 useInView에 대해 정리해본다 > # Framer Motion이란? Framer가 제공하는 리액트용 애니메이션 라이브러리이다. 장점 타입 스크립트를 지원한다 최적화된 성능 및 풍부한 API가 있다 애니메이션을 직관적인 코드를 통해 손쉽게 제작해준다 프로...

배운 내용 리액트 훅 useEffect useLayoutEffect useID useTransition useDeferredValue useTransition vs useDeferredValue 리액트 메모이제이션 useCallback useMemo React.memo useReducer 리액트 컨텍스트 Context API useContext zus...

배열이란? 배열은 여러 개의 값을 순차적으로 나열한 자료구조다. 배열은 사용 빈도가 매우 높은 가장 기본적인 자료구조다. 배열이 가지고 있는 값을 요소라고 부른다. 즉, 원시값은 물론 객체, 함수, 배열 등 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다. 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖...

배운내용 자바스크립트 필수 자바스크립트 문법 : 템플릿 문자열, 화살표 함수, 비구조화 할당 타입스크립트 타입 : 기본 타입, 함수 타입 타입 오퍼레이터 인터페이스 타입별칭 이넘 제너릭 리액트 NPM, NPX, YARN의 차이 바벨과 웹팩 js, jsx, tsx 차이 클래스 컴포넌트, 함수형 컴포넌트 컴포넌트 CSS 스타일링 Tailwind CSS 폰트 ...

this란 무엇인가? 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this는 "지금 내가 가리키고 있는 것"이다. 어떤 객체인지에 따라 다르게 가리킨다. (this 바인딩) 객체에서의 this 사용 예시 생성자 함수에서의 this 사용 예시 예를 들어, 집에 두 마리의 강아지가 있을 때 한 마리의 이름은 "코코"이고...

프로토타입의 이해 (What) 프로토타입은 무엇인가? 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어있고 이 부모 객체를 프로토타입이라고 한다. 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다. 프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 다른 객체에 공유 프로퍼티를 제공한다. 프로토타입을 상속받은...

SPA 프레임워크 또는 라이브러리에 대해서 알아보고 차이점을 분석하여, 이후 프로젝트를 진행할 때 참고하고자 정리해본다. 요즘 어떤 게 제일 인기가 많은가? 리액트가 가장 압도적으로 사용률이 많음 왜 리액트가 가장 인기가 많은걸까? Angular 구글에서 지원하는

React+TypeScript 환경에서 개발 중 반복되는 svg 이미지가 있어 컴포넌트화하여 사용하고 싶다.컴포넌트화하여 사용하고자 하는데 올바른 이미지 경로로 작성했지만 아래와 같이 오류가 발생한다. 확장자를 타입스크립트가 받아드리지 못했음 프로젝트 최상위 경로에 @

github로 협업 시 내 작업 브랜치에 작업 후 공동브랜치(main)에 병합 후 업로드하는 과정을 정리하였다. 꼭 처음에 --single-branch로 가져 오지 않아도 되지만 난 잘 몰라서 내 작업 브랜치만 가져와서 main 브랜치를 별도로 추가하였다. 꼭 중간중간