현재 작업 브랜치에서 원격에 있는 dev 브랜치의 작업 내용을 가져오려고 한다.dev에는 다른 사람이 별도의 커밋을 생성한 상태이다.pull 명령어를 실행하면 아래와 같은 warning이 뜰 것이다.이는 pull을 실행할 때 pull 방식을 지정해 주어야 한다는 경고이

데브코스를 진행한지 어느덧 3개월이 지났다. 지난 한 달동안 데브코스를 진행하고 느꼈던 점을 정리하고자 8월 회고를 작성하려고 한다. ✏️ 뷰 과제 + 2차팀 편성 뷰 강의가 끝난 후 과제를 진행하던 중 함께하던 1차팀이 해체되고 2차팀이 편성되었다. 이제는 새로운

create-vite 모듈을 전역적으로 설치 프로젝트 생성 프로젝트 이동 종속성 모듈 설치 개발 서버 실행 스토리북 설치 스토리북 시작 emotion 설치 styled 설치

Storybook 설치 .storybook: 설정 파일들이 모여있는 폴더 stories: 등록된 story들 Storybook 실행 Box.stories.js 작성 argument의 타입을 지정하면 Storybook에서 값 지정 가능 Circle.stories

Custom Hook 자주 사용되는 상태 로직을 별도의 사용자 정의 훅으로 만들어서 사용하면 중복 코드를 제거할 수 있고, 편하게 사용이 가능하다. 기존 훅을 조합해서 사용이 가능하다. 예제 체크박스의 체크 여부를 감지하는 훅 마우스 over를 감지하는 훅 특

useCallback 재정의를 통한 리렌더링을 막기 위해 사용하는 훅 주로 이벤트 핸들러나 콜백 함수를 메모이제이션하는 데 사용된다. 함수를 메모이제이션하여 동일한 함수 인스턴스를 재사용하며, 이로 인해 불필요한 리렌더링이 발생하지 않도록 한다. 컴포넌트도 함수이다.

useMemo 리렌더링을 최적화 하기 위해서 사용하는 훅 특정 계산을 수행하고 그 결과를 기억한다. 해당 연산의 결과가 변하지 않는 한 계산을 다시 실행하지 않는다. 컴포넌트도 함수이다. 컴포넌트가 렌더링 된다는 것은 함수가 호출된다는 것이다. 컴포넌트가 리렌더링

React에서 CSS를 적용하는 방법은 크게 세 가지가 있다. 1. 스타일시트를 이용한 적용 2. 인라인 스타일 적용 3. CSS in JS 다양한 라이브러리들이 있지만 여기서는 emotion을 다룬다. 별도로 스타일시트 파일을 만들지 않아도 되고 중복되지 않는

리액트 프로젝트 시작하기 component에 props 전달하기 객체 비구조화 할당을 사용하면 좀 더 간단하게 작성할 수 있다. defaultProps를 정의 할 필요가 없다. 컴포넌트 내부에 작성한 요소를 전달하려면 children 속성을 이용할 수 있다. ch

개발 환경 구성하기 프로젝트 생성 패키지 설치 eslint, prettier 설치 .eslintrc.json .prettierrc 라우터, pinia(상태관리 라이브러리) 설치 라우터, pinia 등록 라우터 생성 vercel 서버리스 함수 연결하기 p

Pinia Vue의 상태관리 라이브러리로 State, Getters, Actions의 3가지 개념으로 동작한다. vuex의 Mutation이 사라지고 modules도 기본적인 구조이므로 관리하지 않아도 된다. 사용법 pinia 설치 main.ts에 pinia 등록

CompositionAPI와 OptionsAPI의 차이점 ref, method, lifecycle ref: 동적 데이터 정의, 값이 아닌 참조 객체 따라서 값을 참조할 때는 value 속성으로 참조 method는 script 내부에 함수를 정의해서 사용 create

API를 호출할 때 숨겨야 할 내용들이 존재한다. 이 내용들은 서버를 통해 숨겨야 하는데 Netlify에서는 간단하게 사용할 수 있는 서버리스 함수가 존재한다. package.json의 scripts 작성 netlify.toml 파일 생성 후 작성 루트 경로에 f

Transition 애니메이션 전환 효과를 추가 특징은 css에 지정한 시간을 판단해서 전환을 실행 전환할 때 순간적으로 요소에 클래스를 삽입 Animate.css css 애니메이션 라이브러리 애니메이션 구조를 만들어 놓음 main.ts에서 import "anima

interactjs 요소를 늘리고 줄일 수 있는 패키지 import 후 사용 contenteditable에 placeholder 추가하는 법 속성 선택자로 선택 후 가상 선택자 empty에 before를 생성 content에 attr함수로 placeholder 속성

PostCSS란 - 후처리도구 (css를 확인하고 후에 처리)bable에서 플러그인을 설치한 것 처럼 마찬가지로 플러그인을 세팅해줘야 함대표적으로 Autoprefixer 등..Autoprefixer란?\-webket- -ms-등 공급업체 접두사를 자동으로 후처리해서 붙

최신 JS 문법(2015+)을 구형 JS로 변환하는 트랜스컴파일러프로젝트 초기화babel 설치package.json에서 scripts 설정플러그인 설치해당 플러그인이 개입해서 코드를 변환babel.config.json 파일 생성하고 플러그인을 통해 옵션을 세팅변환 실행

네비게이션 가드 Vue 라우터에서 페이지 전환을 제어하는 기능 이를 사용하여 사용자가 특정 URL로 이동할 때 라우터가 전환을 허용하거나 거부하도록 설정할 수 있다. > beforeEach: 라우터가 페이지를 렌더링하기 전에 실행되는 가장 일반적인 네비게이션 가드입니

Hash 도메인/#/~ 새로고침 해도 서버에 요청이 전송되지 않음 서버 setting이 없어도 페이지를 구분해서 만들어낼 수 있다. 하지만 하나의 페이지만 구성되고 주소에 불필요한 #이 존재 HTML5(History) 도메인 /~ 단점: 서버에 요청이 전송됨 허나 S

Vue-Router 사용하기 vue-router 설치 src/routes/index.js 파일 생성 후 작성 main.js에 router 플러그인 적용 라우터 사용 `: 페이지 링크, ` 태그와 유사 ``: 페이지 렌더링 부분 $router: page에 대한 제어