react (24) 썸네일형 리스트형 [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}; //여기서.. [react]하위 컴포넌트에서 props변화 감지 어케할까(componentDidUpdate) 졸작으로 웹만들고 있다 상단에 다른 카테고리를 누르면 (현재 C) 게시판 목록은 바뀌는데 띄워놨던 게시물 컴포넌트가 남아있다 메뉴를 새로 선택할 때 마다 게시판 컴포넌트를 끄고 싶다 상위 컴포넌트 : 에서 어떤 메뉴선택을 햇는지 state값이 바뀌고 clickmenu: "C", // or Java ,Python ,Javascript... 하위 컴포넌트 : 에서 contentOn: state값을 이용해 키고껏다가 제어한다 contentOn: "none", (하위)에 무엇을 클릭했는지 전달 했다. import BoardMete from "./boardMete"; // 게시물 컴포넌트 . . render( 하위컴포넌트가 props의 변화할때를 감지하고 그때 명령을 주고싶다 결국 이말하고 하고싶은거였다 comp.. [react] 폰트파일(.ttf) 로컬 폰트 적용하기 기본 폰트는 밋밋하다 가지고 있는 파일을 적용해보자 내가 가지고있는 괜찮은 애들인데 구글폰트 여기서 다운받아도 된다. fonts.google.com/ 경로만 설정하면 되기 때문에 아무데나 src 폴더에 font폴더를 만들었다 드래그해서 넣어주기만 하면 끝 쿠키런체와 지마켓체를 사용한다 에서 다음과 같이 입력해준다 @font-face { font-family: "cookie"; // 이름 선언 src: url("./font/cookie.ttf"); // 내가 저장한 경로! } @font-face { font-family: "gmarket"; src: url("./font/gmarket.ttf"); // 내가 저장한 경로! } 졸작땜ㅁ에 만들고있는 페이지인데 생긴게 재미없다 사용: 저 제일 위에 제목텍스트 .. 상태(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.. 공공데이터API(미세먼지경보발령) 웹에 사용해보자(react,node.js) 저번 포스트와 같은 프로젝트이기 때문에 생략된부분이 있을 수 잇습니다. 내가 사용 할 공공데이터포털의 API다 공공데이터포털: www.data.go.kr/index.do 검색창에 ↓요래 치면 나온다 사용자가 "지역"을 검색했을 때 그 "지역"의 가장 최근 발령 현황을 알려주고 싶다. 왜냐하면 과제이기 때문이다. API명세를 보면 아래 글을 찾을 수 있다. 문제가 있다. 나는 '지역'을 검색하고 싶은데 "조회연도"를 입력하여 경보조회를 한다. 가공해 보자 그래서 나는 조회연도를 2020으로 하고 최근 100개 데이터를 뽑아오고 , 제일 최근 데이터를 보여줄꺼다 먼저 프론트앤드이다. '경남'을 선택 후 "클릭"버튼을 누르면 서버에 요청을 하고 빈공간에 내용이 출력되게 한다 우선 state 값 construc.. 이전 1 2 3 다음
