Project 기록 (22) 썸네일형 리스트형 [react] 저장된 데이터 불러올 때 줄바꿈을 어케할까(개행,줄바꿈,\n,split,textarea) 게시물의 에 다음과 같이 쳤는데 결과를 보면 줄바꿈이 안 되어 있다 디비 저장시 \n과 함께 저장이 되는데 React.js 에선 이 취약점을 원천차단하기위하여 그냥 무조건 텍스트형태로만 렌더링하게 설정되어 있다고한다. => 불러 올 때 react는 \n처리를 안해준다 출력할 사이 난 this.props.data.content에 내용 데이터가 들어있다 \n 기준으로 자르고 line마다 태그를 사용해 준다 {this.props.data.content.split("\n").map((line) => { //this.props.data.content: 내용 return ( {line} ); })} {/* {this.props.data.content} */} 결과: 잘나온다 참고:velopert.com/1896 [.. 게시판만들기 db에 저장된 데이터를 목록으로 보여주자(react,mysql) ↓↓↓↓↓ 지난 번에 미리 초기화한 객체배열을 리스트로 보여줬다 꼭 보시길 ㅜㅜ coding-hwije.tistory.com/56 게시판만들기 데이터를 목록으로 보여주자(react,list,map) 만들고 잇는 게시판 게시물인데 밋밋하다 댓글 리스트를 보여주고 싶다 먼저 데이터 리스트가 필요하다 바로 반응하기 위해서 난 state값으로 list이름의 배열을 만들어 줫다 class Boardreple extends Co coding-hwije.tistory.com 저번 게시물에 만든 목록인데 미리 초기화가 아니라 디비에서 가져오고 싶다 먼저 데이터 리스트가 필요하다 class Boardreple extends Component { constructor(props) { super(props); this.st.. 게시판만들기 데이터를 목록으로 보여주자(react,list,map) 만들고 잇는 게시판 게시물인데 밋밋하다 댓글 리스트를 보여주고 싶다 먼저 데이터 리스트가 필요하다 바로 반응하기 위해서 난 state값으로 list이름의 배열을 만들어 줫다 class Boardreple extends Component { constructor(props) { super(props); this.state = { list: [], // ( // 리스트를 하나씩 살펴본다 //이제 표현 하고싶은데로 하면 됨 //현재 객체의 number {list.nick} //현재 객체의 nick {list.time} //현재 객체의 time 좋아요: {list.recomend} //현재 객체의 recomend {list.reple} //현재 객체의 reple )); return {content}; //여기서.. [javascript] 현재 시간/날짜를 알고싶다(Date(), getDate,getFullYear,getHours..) 게시판 댓글을 만드는 중이다 등록을 하면 현재의 날짜와 시간 정보가 업로드 됐으면 좋겠다 어케구할까 Date(); 데이트라고 기본 제공 해준다. 아래와 같이 사용하면 date data타입을 반환한다. let time = new Date(); //현재 날짜와 시간 let time = new Date(1996,05,18,6,00); let time = new Date('2996-05-18 06:00:00'); 그리고 time에서 getFullYear() :연도 getMonth() : 달 (+1)해야됨 getDate() : 날짜 getDay() : 요일 getHours() : 시간 getminutes() : 분 getMilliseconds() : 밀리 초 getSeconds(): 초 getTime(): UNI.. [react]하위 컴포넌트에서 props변화 감지 어케할까(componentDidUpdate) 졸작으로 웹만들고 있다 상단에 다른 카테고리를 누르면 (현재 C) 게시판 목록은 바뀌는데 띄워놨던 게시물 컴포넌트가 남아있다 메뉴를 새로 선택할 때 마다 게시판 컴포넌트를 끄고 싶다 상위 컴포넌트 : 에서 어떤 메뉴선택을 햇는지 state값이 바뀌고 clickmenu: "C", // or Java ,Python ,Javascript... 하위 컴포넌트 : 에서 contentOn: state값을 이용해 키고껏다가 제어한다 contentOn: "none", (하위)에 무엇을 클릭했는지 전달 했다. import BoardMete from "./boardMete"; // 게시물 컴포넌트 . . render( 하위컴포넌트가 props의 변화할때를 감지하고 그때 명령을 주고싶다 결국 이말하고 하고싶은거였다 comp.. 대기정보알리미 UML diagram(usecase, class, sequence) 대기 정보알리미 웹 프로그램의 UML 다이어그램이다 과제 제출용이니 전문성 없다. UML다이어그램은 통합 모델링 언어를 사용하여 시스템 상호작용, \업무흐름, 시스템 구조, 컴포넌스 관계등을 그린도면이다 프로그래밍을 단순화 시켜 표현하여 의사소통하기 좋고 대규모 프로젝트 구조의 로드맵을 만들거나 개발을 위한 시스템 구축에 기본을 마련한다. 사용자 요구사항 요구 사항이란, 소프트웨어를 사용할 고객 또는 그것의 개발과 관계되는 사람들이 출시 될 소프트웨어에 대해 바라는 모든 것들을 말한다. 이것을 수집하는 것은 소프트웨어를 개발하기 위한 시작점이고 어떤 사항들이 수집되는지, 그 중 어떤 것들을 구현하기로 결정하는가에 따라 소프트웨어의 개발 방향이 달라질 수 있다. customer에게 제안 받은 요구사항이다 .. 상태(state값)에 따라 출력 이미지를 다르게 해보자 (React) 과제로 프로젝트 진행 중이다. 미세먼지 농도 데이터를 받아 오는데 API명세를 보면 등급 값에 따라 1,2,3,4(좋음,보통,나쁨, 매우나쁨)으로 나뉜다. 나는 이것을 받아온 Grade값에 따라 이미지를 다르게 하여 그림으로 보여주고싶다 그림 4개를 준비해야한다. 교수님이 스타를 좋아하신다 // default 이미지 우선 사용할 .js파일에 import import bad from '../marine/bad.jpg';//bad 나쁨 import good from '../marine/good.jpg';//good 좋음 import middle from '../marine/middle.jpg';//middle 보통 import sobad from '../marine/sobad.jpg';//sobad 매우나쁨.. 빙글빙글 돌아가는 프로그레스(progress)를 만들자 (React,meterial-ui) 데이터를 요청하고 받을 때 까지 뭐가 ui적으로 눈에 보이면 좋다. 이게 돼가는지 안돼가는지 봐야 된다. 얘를 들면 요론거 버튼을 눌러 데이터를 요청하고 받아오기 전까지 저 프로그레스가 떴으면 좋겠다. 해보자 난 react에서 제공해주는 material-ui를 사용했다 여기가면 무료로 사용할 수 있다 material-ui.com/ 먼저 material ui를 사용하기 위해 패키지 설치 npm install @material-ui/core 좌측 메뉴 Component - Feedback 에 가면 Progress 보인다 나 이걸 사용하고 싶다. 소스코드와 함께 친절하게 있다 사용하고 싶은 .js파일에 import 해주기 // style은 안쓸거다 저거만으로 예쁘니깐 import CircularProgress.. 이전 1 2 3 다음
