전체 글

Vue 스타일 가이드  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org  프로젝트 버전업을 하면서 Vue의 스타일 가이드를 참고하여 코딩 컨벤션을 정했다.가장 중점적으로 생각한 것은 코딩 문법과 파일 이름 설정이다. (변수명은 엔진과도 맞춰야 했기 때문에 비교적 유동적으로 고려했다.)  1. prettier 설정 통해 코드 컨벤션 강화 { "semi": true, // 문장 끝에 세미콜론 사용 "tabWidth": 2, // 탭 너비는 2칸 "bracketSpacing": true, // 중괄호 안에 양쪽 공백 생성 "trailingComma": "all..

interface Props { myObj?: { name: string, icon: string };} const props = withDefaults(defineProps(), { myObj: { name: '', icon: '' },}); optional props를 작성하면 초기값을 설정해주는 것이 권장된다.그러나 이때 객체 타입의 props의 초기값을 저렇게 단순하게 설정하게 되면 eslint 에러가 나게 된다. Type of the default value for 'myObj' prop must be a function. 기본값 객체는 공유된다.즉, { name: ‘’, icon: ‘’ } 를 여러 컴포넌트 인스턴스에서 동일하게 참조하기 때문에, 한 곳에서 해당 객체가 바뀌면 모든 곳에서 변..

[ React ] React에서 slot 사용하기Vue3에서는 v-slot을 통해 간편하게 slot을 사용할 수 있었다. 그렇다면 React에서는 어떻게 slot을 구현할까?  사용처(?)공통 컴포넌트 중 Modal을 만들다가, Head와 Footer는 공통적이면서도 Content 영역zodev.tistory.com위의 글에서 JSX를 이용해서 slot을 구현한다고 했는데, 그럼 JSX는 무엇이고 어떤 특징을 가지고 있을까공식 문서를 간단하게만 정리해봤다.    JSX는 Javascript를 확장한 문법이다.JSX는 React 엘리먼트를 생성한다.React에서 Javascript 코드 안에서 UI 관련 작업을 하기 위해 사용한다.    JSX도 표현식이다.JSX는 Javascript 객체로 컴파일된다. ..