본문 바로가기

전체 글

[Team Project] 크록스(Crocs) 1 기간 : 6월 20일 ~ 7월 1일 팀원: 프런트엔드 3명, 백엔드 1명 담당 페이지 : 상품 상세 페이지 HTML, CSS, Javascript 라이브러리 : React 중간 점검 제작 중 이번 주 5일 동안의 주요 기능 - 공식 홈페이지를 참고한 클론 레이아웃 - MockData를 이용하여 데이터 활용 - 캐러셀(슬라이드) UI 기능 구현 1. 공식 홈페이지를 참고한 클론 레이아웃 크록스 공식 홈페이지를 참고하여 레이아웃을 구성하고 HTML과 CSS를 적용시켜 보았다 처음부터 미디어 쿼리를 이용한 반응형을 제일 후위 순위로 놓았기 때문에 px단위를 사용하여 웹 pc 뷰에서는 UI가 늘어나거나 줄어 나지 않게 하였으며 이후 반응형 페이지 작업을 진행할 시 미디어 쿼리를 이용해서 단계별로 UI를 수정하는.. 더보기
[React] monster 컴포넌트 연습! 부트캠프 수강 중 컴포넌트를 연습할 수 있는 monster 사이트를 정리해본다 1. API 주소: https://jsonplaceholder.typicode.com/users 위 주소를 호출하여 데이터 로딩을 처리해주세요! - useEffect() - fetch - setState (monsters 에 저장) 먼저 fetch함수를 사용하여 API를 호출하여 데이터 로딩이 잘 되는지 확인한다 fetch('https://jsonplaceholder.typicode.com/users', { method: "GET" }) .then((res) => res.json()) .then((data) => { console.log(data) }) API주소를 통해 데이터 로딩이 잘 불러와졌다 콘솔 로그 무조건 자주 찍어.. 더보기
[React] react 구조분해 할당? 연습도 할 겸 react 파일 하나 만들고 시작한다 card형식의 컴포넌트 하나 만들어서 더미 데이터 하나 뚝딱 만들고 내가 했던 대로 한다면 이렇게 function App() { let [movie, setMovie] = useState(cardData) return ( { movie.map((elm, index) => { return ( {movie[index].movieTitle} {movie[index].movieRanking} ) }) } ); } cardData.js let cardData = [ { movieId: 1, movieImage: 1, movieTitle: "버즈 라이트이어", movieRanking: "Top 1" }, { movieId: 2, movieImage: 2, movi.. 더보기
[React] map()을 통한 반복적인 태그 줄이기 리액트를 접하기 시작하면 반복적으로 하드 코딩되는 부분이 발생한다 예를 들어 function App() { return ( Safari belted half shirt 6월17일 예약 발송 Flap pocket open collar shirt 6월17일 예약 발송 Aircrew half shirt 6월17일 예약 발송 Multi stripe pique tee 6월17일 예약 발송 ); } 이렇게 상품이 여러개가 존재하고 상품 한 개마다 비슷한 구조의 태그들을 가지고 있다면 State를 통해 배열안에 담거나 data로 만들어 코드를 줄이면서 효율적으로 관리할 수 있다 const [productData, setProductData] = useState([ 'Safari belted half shirt', '.. 더보기
[React] useEffect ?? useEffect란 어떠한 컴포넌트가 Mount(화면에 첫 렌더링, 시작)되었을 때 Update(재렌더링, 다시)되었을 때 Unmount(화면에서 끝날 때, 종료) 되었을 때 특정 작업을 처리해주고 싶으면 사용하면 된다 이 실습은 유튜트 별코딩님 영상을 예제로 활용한다 useEffect()는 콜백 함수를 받는다 첫 번째 방법 useEffect(() => { // 실행하고 싶은 코드 }); - 렌더링 될 때마다 실행 두 번째 방법(인자) useEffect(() => { // 실행하고 싶은 코드 }, [value]); - 화면에 첫 렌더링 될 때 실행 - value값이 바뀔 때 실행 실습을 통해 확인해본다 App.js에 버튼을 누르면 카운트수가 증가하는 코드를 작성했다 import './App.css'; i.. 더보기
[React] React State? State는 리액트에서 상태 값이다 유동적인 데이터를 주고받을 수 있는 상태 값을 말한다 class형 State가 있고 function형 State가 있다 function형 State인 useState()를 예제를 통해 알아본다 React CRA를 Load 한 App.js import './App.css'; import { useState } from 'react'; function App() { // useState(); const [state, setState] = useState(); return ( hello, react ); } export default App; function형에서 State는 useState()를 사용한다 1. useState() 사용하려면 먼저 import 해와야 한다 2.. 더보기
[React] .map() 사용 시 key값을 쓰는 이유 map()을 사용하다 보면 이러한 경고를 만나게 된다. 목록의 하위 항목에는 key가 있어야 한다??? 결국 key가 있어야 한다는 것 Key?? 1. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다 2. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다 key는 list항목을 만들 때 들어가야 하는 문자열 속성이다 어떠한 항목을 추가, 변경, 삭제 할 때 식별을 위한 것이다 map()을 사용할 때 key를 사용하는 이유 ul나 list형식을 만들었을 때 react는 list 모든 항목을 재변경하게 된다 이는 굉장히 비효율적이어서 내가 원하는 항목에 key를 식별하여 변경시키는 것이다 더보기
[React] Component? 리액트의 컴포넌트 컴포넌트는 앱을 이루는 최소한의 단위이다 props나 state를 아직 잘 모른다면 (나도 아직 모른다) Component의 사용법에 대해 알아가면 될 거 같다 컴포넌트를 통해서 UI를 재사용 가능한 개별적인 조각으로 나누고 그 조각들을 살펴 볼 수 있다 쉽게 이해 하자면 HTML을 쭉 나열하는 게 아니라 HTML을 함수에 담아 쪼개서 사용할 수 있다는 얘기다 여기서 props를 함수 인자로 받아 데이터를 받지만 일단은 props를 빼고 예제를 만들어 보았다 그전에 지금은 function형 component를 많이 사용하지만 구형 문법인 class형 component를 알고 있으면 도움이 되지 않을까 싶다 class component (rcc) class Welcome extends R.. 더보기

티스토리툴바