PROGRAMMING CODE/Web24 [React] 함수형 컴포넌트에서 데이터 전달 (props) https://songzzi.github.io/2021/11/21/react-2/[React] 함수형 컴포넌트에서 데이터 전달props란? 상위(부모) 컴포넌트가 하위(자식) 컴포넌트에게 데이터를 넘겨줄 때 사용한다. 하위 컴포넌트는 전달받은 props를 변경할 수 없다.songzzi.github.iohttps://han-py.tistory.com/428 [React] 데이터 받아와서 보여주기더미데이터를 fetch로 받아와서 화면에 보여주는 실습을 해보자. 데이터는 상위 컴포넌트에서 받는다. 그리고 받은 데이터를 prop로 내려준다. 이 때 반복되는 부분을 컴포넌트로 쪼개서 화면을 han-py.tistory.comhttps://goforit.tistory.com/132 20210610 React09 : .. 2022. 11. 14. [React] 이미지를 배열로 저장하고 불러오기(Map) 이미지를 배열로 저장하고싶은데 웹에 대해 배운 적도 없고 map을 사용하는 방법도 서툴러서 검색을 열심히 해봐도 어려웠다. 단순히 이미지 배열 쓰는 방법을 검색하니 아래 블로그와 같이 로컬 이미지 파일이 아니라 http형식으로 시작하는 url을 가져다가 사용하는 것이 대부분으로 올라와있는데, 저 방식으로 로컬 이미지를 불러오면 엑스박스가 떠서 여간 골칫거리가 아니었다. 하나하나 붙여넣을수도 없고,,, https://velog.io/@pock11/React%EC%97%90%EC%84%9C-map-%EC%93%B0%EA%B8%B0 React에서 map 쓰기 Map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.map() 괄호 안에 함수를 넣어 사용할 .. 2022. 9. 22. [React] 리액트 프로젝트 핸드폰에서 실행하는 방법(Mac) 리액트 프로젝트를 다른 기기에서 실행시키려면 1. 네트워크 주소 확인 2. 같은 네트워크(와이파이, 핫스팟 등)에 연결 3. 프로젝트의 포트 확인 후 주소 형식 만들기 다음과 같은 순서로 진행해야한다. 1. 네트워크 주소 확인 mac환경은시스템 환경 설정의 네트워크에 들어가서 연결됨 아래의 172.20.10.2 부분을 확인해준다. *윈도우는 cmd로 확인* 2. 같은 네트워크에 연결 연결 할 기기(아이패드, 핸드폰 등)가 나의 컴퓨터와 같은 와이파이, 핫스팟 등에 연결되어 있는지 확인해준다. 3. 프로젝트의 포트 확인 후 주소 형식 만들기 리액트 프로젝트를 npm start 해서 주소창 부분을 확인한다. 3000포트로 실행되어 있다. (다른 포트여도 상관 없음) 요 숫자를 확인 해 준다. 형식은 " ht.. 2022. 9. 22. [React] 폰트 적용하기 1. 먼저 해당 링크를 통해 마음에 드는 폰트를 찾는다. 눈누 상업용 무료한글폰트 사이트 noonnu.cc 2. 라이선스에 웹사이트가 포함되어있는지 확인한다. 3. 리액트 파일에 넣기 4. 다음과같이 코드 확인시켜주기 font-family 는 이름을 지정해주는것 @font-face { font-family: "diary"; src: url("./fonts/EF_Diary.ttf"); } 5. css에 추가하기 .font { color : #AFAFAF; height : 20vh; font-family: "diary"; 2022. 8. 28. [REACT] 화면 비율에 맞춰 요소 조절하기 브라우저 크기를 조절할때 그 크기에 맞게 요소를 조절하려면 vh를 사용해야 한다. vh는 %대신 사용하는것이기 때문에 .app { height: 100vh; } 이것은 100%를 의미 하며, .app{ height : 40vh; } 이것은 전체 크기의 40%를 의미한다. 2022. 8. 28. [REACT] SWAL 사용해서 알림창 구현하기 공식 홈페이지 가이드 여기서 맘에 드는거 따라 쓰면 됨! 2022. 6. 5. 이전 1 2 3 4 다음
