🎀

[과제] 확장 가능한 DataTable 컴포넌트

라이브러리 예시

The standard data-table will by default render your data as simple rows. # Custom filter You can override the default filtering used with search prop by supplying a function to the custom-filter prop.

https://vuetifyjs.com/en/components/data-tables/#external-pagination

데이터의 형태

테이블 용어

React에서 SVG 활용하기

[React] React에서 SVG 활용하기

'사진', '이미지' 를 떠올렸을 때, 우리에게 익숙한 확장자는 .jpg, .png 일 것입니다. 하지만 개발 할 때 왜 디자이너들이 SVG 아이콘을 사용하는 것일까요? SVG란 'Scalable Vector Graphics' 의 약어로 각 위치 값을 표시하는 벡터와 같은 방식의 2차원 그래픽용 XML 기반의 형식입니다. XML(Extensible Markup Language)은 W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다.

https://velog.io/@juno7803/React-React%EC%97%90%EC%84%9C-SVG-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

참고 자료

React를 사용한 table 구현

[react] 리액트 테이블 게시판 만들기 ver.2 (데이터 추가, 수정, 저장, hooks, form)

구현내용 · npm package: creat-react-app · css 라이브러리: tailwind · axios를 통한 서버 통신 · 테이블 형식의 게시판 구현 · 데이터 추가/수정/삭제 기능 추가 · 모달 팝업창 오픈..

https://goddino.tistory.com/155?category=902116

React : 영화목록 만들기 (table 구조, 데이터 삭제, 페이징, 분류)

https://whydoihavetousehypon-0.tistory.com/39

[React] 함수형 컴포넌트로 리액트 표 만들기 (table)

연구실 과제의 사용자 UI 개발 스택으로 리액트가 활용된다. 그래서 리액트를 공부해야하는데, 공부할게 많다. 막막했는데 webpack,babel 의 활용방법 이해 부터 props, state 의 구분과 활용, tree구조, lifecycle 등을 공부하니 react 코드의 맥락 파악은 가능해졌다. 이전에 html css 를 공부해놓으니까 js 부분만 열심히 파면 될 듯. 0.

https://choichumji.tistory.com/61

[리액트 vs 위즈모] React 스마트 데이터 테이블 생성하기 > 블로그 & Tips

테이블은 웹페이지에서 데이터를 표시하는 가장 쉬운 방법의 하나입니다. 플레인 HTML 테이블은 데이터 프레젠테이션의 기본적인 필요 요건을 충족할 수 있어도, 정교한 데이터를 입력하는 것은 어렵습니다. 이제는 응용 프로그램 개발 커리어에 있어 중요한 결정을 내릴 때입니다. 프로젝트에 대한 집중력을 잃을 수 있는 위험이 있어도 구식 HTML 테이블에서 코딩 개선을 시작하느냐, 혹은 문제 해결을 위해 고안된 제품에 눈을 돌리느냐 하는 것입니다.

https://dev.grapecity.co.kr/bbs/board.php?bo_table=wijmo_bntips&wr_id=101

React 게시판(CRUD) 만들기 2

React를 쉽게 익히기 위해서 데이터 입출력(CRUD) 기능을 가진 게시판을 구현한다. React 만으로 구현하기 위해 배열에 데이터를 저장하고 출력하는 방식으로 게시판을 구현한다. 여기서 정리한 내용은 React 게시판 만들기 시리즈의 첫번째 내용이다. 1. React 게시판(CRUD) 만들기 2. React + Redux 게시판(CRUD) 만들기 3. React(Redux) + Firebase 게시판(CRUD) 만들기 앞서 간단한 설치와 사용법을 정리하였고, 여기서는 다음과 같이 단계별로 제작한다.

https://forest71.tistory.com/187

리알못 React: 4. 필터링 및 정렬(Filtering and Sorting) - ING-YEO

이 글은 Code with Mosh의 Mastering React 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다... 리알못 React: 3. 페이지 매기기(Pagination) 글에 이어 영화 정보를 장르에 따라 필터링하여 보여주거나 특정 컬럼(Column) 기준으로 정렬하는 방법 을 한번 알아봅니다. 최대한 간단하게 필터링과 정렬 코드를 설명해보려 했지만 너무 복잡해졌습니다...

https://ing-yeo.net/2020/10/react-beginner-4/

colspan과 rowspan

[HTML] 테이블(table)의 colspan과 rowspan 사용법과 예시

안녕하세요. 소다맛사탕 입니다. 지난 HTML 포스팅인 '[HTML] 테이블(table) 설명 및 레이아웃 만들기 (html table description and create lay-out)'에 이어서 table의 셀 속성인 colspan과 rowspan에 대해 알아..

https://develop-sense.tistory.com/entry/HTML-%ED%85%8C%EC%9D%B4%EB%B8%94table%EC%9D%98-colspan%EA%B3%BC-rowspan-%EC%82%AC%EC%9A%A9%EB%B2%95%EA%B3%BC-%EC%98%88%EC%8B%9C

테이블 스타일링

표 스타일링 - Web 개발 학습하기 | MDN

이제 그래픽과 색상으로 넘어가겠습니다! 표에는 punk and attitude 가 가득하기 때문에, 밝은 인상적인 스타일링을 제공해야합니다. 걱정하지 마십시오. 표를 크게 만들 필요는 없습니다 - 더 미묘하고 세련된 것을 선택할 수 있습니다. 아래에서 다시 CSS 를 style.css 파일에 추가하고, 다시 시작하십시오: 다시 말하지만, 여기에는 표에만 해당되는 것이 없지만, 몇 가지 주목할 가치가 있습니다.

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Styling_tables#%EC%9A%B0%EB%A6%AC%EC%9D%98_%ED%91%9C_%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81

HTML+CSS (기초) table 스타일 적용하기

우선 새 파일을 만들고 테이블을 만들어 보자. 테이블은 요소를 사용해도 알아서 줄이 그어져 있지 않다. 테이블에 선을 그어보자. 이 모양은 우리가 원하는 모양이 아닐 것이다. 안에 th,td에도 선을 그어야 한다. 만약 경계선이 두줄이 마음에 안들면 합칠 수 있다. 테이블 칸에 너무 글자들이 꽉찬 느낌이다 간격?을 주자. 글자들이 왼쪽에 위치해 있다..

https://lcw126.tistory.com/139

폴더 구조

[setting] React 컴포넌트 분리와 폴더 구조화

React를 배우면서 좋았던 점은 라이브러리라는 점이다. 단점은 라이브러리라는 점이다. 프로젝트마다 특색이 다르기 때문에, 아키텍처 구성이 달라질 수 있어 프론트 작업 시 자유도가 높아질수록 해당 프로젝트의 맞게 아키텍처를 구성할 수 있었다. 하지만, 자유도가 높아짐에 따라 폴더구조와 컴포넌트 사고방식을 생각하는 시간 비용이 상당히 높았다. 처음으로 리엑트 프로젝트 도입한 시점에서는 페이지도 단순하고 리액트를 사용에만 집중을 가졌다.

https://ventos06.tistory.com/4

[React] 프로젝트 설계

최근에 리액트를 사용하여 개발을 하면서 초창기에는 깊게 고민해보지 못했던 프로젝트 설계에 대한 고민 을 팀 프로젝트라는 계기로 다른 사람들과 이야기해볼수 있었던 기회가 있었다. 팀원과 이야기를 하면서 고민했던 내용들은 다음과 같다. 처음에는 컴포넌트에 대한 고민 이었다. 리액트를 라이브러리라 지칭하는만큼 정해진 패턴이 없고 너무나도 자유롭기 때문에 컴포넌트 설계에 대한 통일성이 필요했다.

https://velog.io/@jiseong/React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%A4%EA%B3%84

Prettier


{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.codeAction.showDocumentation": {
"enable": true
}
}

알게된 점

button type="button"을 form 내부에서 클릭하면 formEvent가 발생하지 않는다.

SVG의 transform에서는 단위를 사용할 수 없다.


transform="rotate(180deg)" // error
transform="rotate(180)" // ok

비교함수

리턴값은 a의 위치를 결정한다.
리턴값이 -1이면 a는 낮은 인덱스로 배정된다. 즉, 앞에 온다.
리턴값이 1이면 a는 높은 인덱스로 배정된다. 즉, 뒤에 온다.
리턴값이 0이면 변경이 없다.
숫자와 문자 정렬의 차이 알아보기

border-collapse: collapse

경계선이 두 줄이면 합치는 속성이다.