📍목표- robots.txt 파일에 대해 알아보기 📍왜 페이지 색인이 생성되지 않나요?서브 블로그를 새로 만들고 구글 서치콘솔에 등록한 다음날, 페이지 색인이 만들어지지 않는다는 메일을 받았다 구글 서치콘솔에서 자세한 내용을 살펴보니, robots.txt에 의해 차단되었다는 메시지가 있었다 (나는 robots.txt를 만든 적이 없는데!!) 차단된 URL은 아래와 같음 살펴보니 /manage 는 관리자 페이지이고, /guestbook은 방명록 페이지이다. 그렇다면 구글 봇을 차단하는게 이해가 된다. 그런데 별도로 robots.txt를 만들지 않았는데? 찾아보니, 기본 적용되고 있는 robots.txt 파일은 다음과 같았다. 아마 티스토리에서 내부적으로 robots.txt 파일을 만들어 놓은 것 같다...

ch8. 컴포넌트 간 연계SFC(Single File Component)- .vue 확장자로 이루어지는 파일로 HTML + CSS + JS 세트 (.jsx와 비슷) scoped CSS 메커니즘1) 컴포넌트별 hash 문자열이 생성되고, 해당 컴포넌트가 렌더링되면 HTML data attributes를 통해 엘리먼트에 이름이 붙여짐예) v-eee87bea 라는 has 문자열 data attributes 생성 v-model을 포함한 컴포넌트 이름 없음 님이네요! 이름 없음 님이네요!  2) CSS에서 해당 attributes에 스타일링section[data-v-eee87bea] { border: orange 1px dashed; margin: 10px;} 전역적으로..

ch5. 양방향 데이터 바인딩과 기타 디렉티브v-model: 템플릿 변수(예 - ref)와 컨트롤 값(input의 value) 간 양방향 데이터 바인딩- v-bind:value와 v-input을 조합하여 v-model로 간단히 표현 v-model 수식어- lazy: input 대신 change 이벤트로 양방향 데이터 바인딩 수정- number: 입력값을 숫자로 취급- trim: 입력값의 전후 공백 제거 Input 이벤트와 Change 이벤트 비교- onInput: input 마다 이벤트 발생 -> v-model- onChange: input이 blur 되면 이벤트 발생 -> v-model.lazy- 예시 v-model 입력 문자열: {{ textOnInput }} ..

ch1. 프런트엔드 개발 흐름과 VueWebkit: Safari 브라우저의 HTML/CSS 렌더링 엔진- Chrome 브라우저는 Webkit 기반으로 시작하여, Blink라는 Webkit에서 분기한 새로운 HTML/CSS 렌더링 엔진 채택 프레임워크 vs 라이브러리라이브러리- 편리한 코드를 모아놓은 것- 라이브러리를 활용한 코드 작성은 개발자가 직접 수행 -> 애플리케이션 규모가 커질수록 코드가 복잡해지고 중복이 발생- 어떤 동작을 제어하는 코드를 개발자가 작성하고 필요한 부분만 라이브러리를 사용 프레임워크- 애플리케이션 작동에 필요한 정형화된 코드를 포함 -> 라이브러리를 활용한 코드 작성을 간소화- 핵심 비즈니스 로직 구현에 집중하기 쉬움- 어떤 동작을 제어하는 코드를 프레임워크에 맡김 -> 제어의 ..

📍Query Key의 형태- 직렬화가 가능한 값들의 배열이어야 함- 직렬화가 가능하다 => json.stringify()를 적용할 수 있고, 적용하면 항상 동일한 문자열로 변환된다// 일반적인 배열const userQueryKey = ["user", 1];// JSON.stringify(usersQueryKey) // '["user",1]'// 객체const postQueryKey = ["user", { id: 42 }];// JSON.stringify(postQueryKey) // '["post",{"id":42}]'// An individual todouseQuery({ queryKey: ['todo', 5], ... })// An individual todo in a "preview" format..

📍목표- Nuxt3(Vue.js) 에서 형제 컴포넌트끼리 데이터 공유하기 📍React vs Vue 데이터 공유 비교- React는 단방향 데이터 플로우이므로 아래 사진처럼 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐른다- 반면, Vue 에서는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 있다. event emit을 활용하면 된다  📍자식1 컴포넌트에서 상태 변경- defineEmits() 를 활용해서 emit 함수 정의하기- 상태를 변경할 자식 컴포넌트에서 먼저 defineEmits()로 emit 함수를 선언한다- 그리고 컴포넌트가 마운트 되면 mountain 기본값을 emit 해준다- 상태가 변경될 때마다 emit을 실행하기 위해 watch를 사용한다 MountainHeader.vue ..