참고로 내이름은 골디다. 회사에서 쓰는 닉네임인데, 그 이유가 뭔지 아는가. 금붕어의 일기장이라는 블로그를 운영하기 때문이다. 그렇다 이 블로그의 이름은 금붕어의 일기장이다. 신년을 맞이해서 이런 저런걸 하다가 생각을 했다. 뭐라도 남기자. 내 몇 안되는 인생에서도 깨달은 내용은 뭐라도 남아야 개이득이라는 것이다. 그리고 이때에만 남길수 있는 것이 있다. 나의 생각, 가치관, 지식, 경험 등등. 그래서 적어보려 한다. 나는 어떤 사람이며, 어떤 마음가짐을 가지고 있으며, 어떤 생각을 하며, 어떤 로직을 거쳐 그런 생각을 가지고 있는지. 어차피 이 블로그는 HTML 이스케이프와 Tailwind CSS 설치법이 최고 조회수인 사실상 그냥 일기장이기 때문에 편한 마음으로 적어본다. 그래서 노가리 까듯 말해볼 ..

Vue 객체로 속성에 바인딩하기 기본적으로 HTML 코드가 브라우저에서 DOM으로 파싱이 되고 나면, 기존에는 값을 바꾸거나 이벤트를 추가하는 등의 동작을 하려면 DOM 객체에 직접 접근해서 변경해줘야 했다. Vue에서는 엘리먼트에 이벤트, 변수등을 바인딩하여 스크립트에서 더 쉽게접근할 수 있도록 하였다. // html 버튼 // js 디렉티브 (directive) 엘리먼트에 기본적으로 넘겨줄 수 있는 Prop들 외에도, Vue에서 제공하는 Prop들이 있다. 앞에 v-가 붙는 prop들이 Vue에서 제공해주는 것들인데, 이 v-를 디렉티브라고 한다 {{ item }} 단축어 위에서 사용한 v-bind와 v-on은 간단하게 축약해서 사용할 수 있다. // v-bind:prop -> :prop // v-o..

오랜만에 create-next-app으로 프로젝트를 생성했더니 폴더 구조가 달라졌길래 공식 문서를 확인해봤다. the app Router 13버전에서부터 새로운 App Router라는게 도입되었다고 한다. 이전에 사용하던 pages도 여전히 동작하며, 혼용이 가능하다. 두 라우터 (pages와 app router)가 충돌할 경우, app router가 더 우선적으로 적용된다고 한다. 경로가 충돌하면 빌드 과정에서 에러가 발생한다. 또한 서버 컴포넌트와 클라이언트 컴포넌트를 사용할 수 있다. 폴더와 파일의 역할 폴더는 라우트를 뜻한다. src/app/page.tsx는 기존의 src/pages/index.tsx와 동일하다. 다른 예로, src/app/foo/bar/page.tsx는 src/pages/foo/..

제목을 뭘로 지어야 할지 모르겠어서 대충 써봤다. 갑자기 생각났는데, 기존의 고민을 해결할 수 있을 것 같아 급하게 써본다. 다양한 기능을 가지는 최하위 UI 컴포넌트 기능 개발을 하다보면 UI 컴포넌트를 관리하게 된다. 제일 복잡한 데이터테이블 컴포넌트를 가져와보자 이해를 돕기 위해 props의 설명을 써두겠다. columns: 컬럼 정보. 타이틀, 색상, 정렬가능등의 옵션이 포함됨 rows: 데이터 배열 header: 데이터테이블 상단에 표시되는 제목 cellStyleOption: 셀에 적용되는 스타일관련 옵션들 emptyRender: 조회 전이거나, rows가 빈 값일 때 표시되는 내용 (React Component 타입) paginationOption: 페이지네이션 관련 옵션들 만약 이 컴포넌트를..