분류 전체보기 썸네일형 리스트형 [React] 팀원 구성 박스 구현 기능 요약 1. 입력 내용을 State의 배열 형태로 저장 2. 포지션 추가 시 팀원 구성 박스 생성 3. 해당 포지션 클릭 시 이름과 역할 추가 생성 3-1. 이름과 역할이 작성되지 않았다면 생성되지 않음 4. 생성된 박스과 이름,역할을 삭제 1. State 배열 형태로 저장 const [teamInfoBoxes, setTeamInfoBoxes] = useState([ { id: 1, addInfo: false, infoData: [{ id: 1, name: '', position: '', role: '' }] }, ]); 팀원 박스와 이름 역활 데이터를 각각 저장하는 2차원 배열 형태로 저장 id : 팀원 박스 addInfo : 팀원 박스를 추가하는 트리거 infoData : 팀원 박스 내 입력한 정.. 더보기 [React] 페이지네이션 UI 대량의 데이터를 한 화면에 보여주는 것은 굉장히 어렵고 대신 페이지 네이션 알고리즘을 사용한다 페이지네이션 알고리즘 순서 1. 한 페이지에 나타낼 개수와 현재 페이지를 추적할 상태를 관리 2. 각 페이지의 범위에 따라 데이터 분할 3. 페이지 상태 값을 변화시켜 페이지 이동 1. // 한 페이지에서 보여줄 개수 const items = 8; // 현 페이지를 나타낼 상태 const [currentPage, setCurrentPage] = useState(1); 2. // 보여줄 페이지의 범위 const startIndex = (currentPage - 1) * items; const endIndex = startIndex + items; // 페이지 범위에 따라 데이터 분할 const currentIte.. 더보기 RDS AWS에서 RDS로 SQL DB를 구축한 다음 서버를 통해서 사용할 수 있다 이때 스프링의 환경 설정같은 application.properties 안에 이러한 db 설정을 할 수 있다 spring.data.web.pageable.default-page-size=10 spring.datasource.driver-class-name=org.mariadb.jdbc.Driver spring.datasource.url=jdbc:mariadb://localhost:3306/inflstock?characterEncoding=UTF-8&serverTimezone=Asia/Seoul spring.datasource.username=inflstock spring.datasource.password=inflstock spr.. 더보기 Spring MVC Project 없는 현상 Spring Legacy Project에서 Spring MVC Project가 없는 경우가 종종 발생 sp 더보기 [0] Spring 환경 설정 1. 스프링 설치 https://spring.io/tools Spring | Tools spring.io 스프링을 실행하고자 하는 환경에 따라 설치 -(이번엔 전 Eclipse, Window 환경) 설치된 파일 압축 해제시 SpringToolSuite4.exe 파일 실행 2. spring 환경설정 Eclipse Marketplace에 접속 후 sts 검색 Spring Tools 4 install 더보기 bucket 이미지와 텍스트 내용을 모두 기록하는 문서를 가진 컬렉션 생성 최신 버전 firebase의 storage 설정 import { getStorage } from "firebase/storage"; //firebase storage export const storageService = getStorage(); https://firebase.google.com/docs/storage/web/create-reference?hl=ko npm install uuid 식별자를 랜덤으로 배치해줌 https://www.npmjs.com/package/uuid import { v4 as uuidv4 } from 'uuid'; uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d' .. 더보기 . 이미지 스토리지 만들기 // 이미지 파일 관리 const [attachment, setAttachment] = useState(); state를 먼저 만듬 input type file을 통해서 image파일만 가져올 수 있게하기 {/* 이미지 파일을 업로드하기 위한 input */} input file type이 변경됐을 때 함수 실행 const onFileChange = (event) => { // event.target.files 에 파일 위치 존재 console.log(event.target.files); // event 안의 target 안으로 이동해서 files을 가져오라는 뜻 // 즉 event.target.files과 동일 ES6 문법 const { target: { files }, } = event; 이벤트 발생.. 더보기 타입 스크립트 적용 타입 스크립트 설치 npm i typescript -g 컴파일 방법 tsc index.ts ts 파일을 js 파일로 컴파일 해줌 컴파일 설정 ts 파일이 위치한 디랙토리 내에 tsconfig.json 파일 추가 후 컴파일 설정을 추가하면 됩니다. compilerOptions 에 위의 공식 문서의 설정 중 필요한 것을 찾아서 넣으면 TS에서 JS로 바꾸는 컴파일 설정을 할 수 있습니다. 더보기 이전 1 2 3 4 5 6 7 ··· 12 다음
