본문 바로가기

HTML2

[IntelliJ - MacOS] 인텔리제이 IDEA Live Edit Plugin 사용하는 방법 접근 (요약)Visualization을 위한 task 를 위해서 D3.js를 연구-학습하기 위해, html 파일을 다뤄보던 중이었습니다.Next.js에서 지원이 되었던 Live Reload가 되지 않음에 불편함을 느끼고 이를 해결하기 위한 방법으로인텔리제이 Live Edit Plugin을 사용하는 방법을 다뤄봅니다.   1. Plugin설치: Live Edit   2. 크롬 확장 프로그램 설치: JetBrains IDE Support   3. Live Edit Plugin 설정방법  1. Plugin설치: Live Edit   2. 크롬 확장 프로그램 설치: JetBrains IDE Support   3. Live Edit Plugin 설정 2024. 5. 22.
[Next.js 13] 컴포넌트 생성 후, page에서 컴포넌트에 <HTML> 태그, 속성값 사용법 접근 (요약) 현재 개발중인 프로젝트에서 Next.js 13버전과 TypeScript 를 기술스택으로 갖고, 구성요소마다 최대한 잘게 컴포넌트화를 목표로 하고 있습니다. (1) 컴포넌트(components)를 빼주고, 실제 화면을 보여주는 (2) page.tsx 파일에서 (1) 컴포넌트를 사용하면서도 (3) 해당 컴포넌트 내에 태그나 속성값을 주는 방법을 학습해보겠습니다. 1. (상황) 컴포넌트화 & page.tsx 생성 (1.1). 컴포넌트화 + 컴포넌트 사용을 위한 등록 (1.2). Page.tsx 생성 + 컴포넌트 가져오기 2. 컴포넌트에 속성 값 전달하기 (2.1). 컴포넌트 파일 준비하기 (interface, props) (2.2). page.tsx( 컴포넌트를 사용할) 파일 준비하기 3. 컴포.. 2023. 9. 27.