블로그 이름을 입력해주세요

오늘 제로콜라 한잔 했습니다.. 드디어 2주간 팀 프로젝트, 쓰레빠 프로젝트를 마무리(manuree)했습니다 저희 팀은 다른 팀들보다 한 명이 적은 상태로 출발했습니다 팀원들 전부 mbti가 i로 시작하는 사람들이라 싫어도 싫은 소리 못 냈을 팀원분들 너무 고생 많이 하셨습니다 처음 해보는 팀 프로젝트, 그리고 딱 겹친 장마철의 습함 덕분에 불쾌지수도 올라가고 코딩의 열기도 올라가ㄱㅗ... 응?? 음악 하나 틀고 들으면서 마무리 스크롤 한번 내려보겠습니다 클릭클릭클릭클릭클릭클릭클릭클릭클릭 프로젝트 명 : 쓰레빠(Threppa) Project 팀 구성 : Front 3명, Back 1명 Github(깃허브) 본인 담당 : 제품 상세 페이지, 푸터 Demo 영상부터 보겠습니다 유튜브 영상 구성은 이렇습니다 ..

usePrams는 url의 파라미터의 값을 가져올 수 있는 라우터 hook 예를 상품 페이지를 랜더링 할 때 사용할 수 있다 pruduct/3이라는 url 주소가 있다 usePrams 사용법을 알아보자 import { useParams } from "react-router-dom"; 먼저 useParams를 import 해온다 const params = useParams(); 변수에 useParams를 담는다 Route.js product/에 :id 주소를 params로 가져올 수 있다 이제 URL 주소에 따라 페이지를 동적으로 보여주고 싶다고 하면 URL을 받는 코드에 템플릿 리터럴을 사용하여 보여주면 된다

react에서 CSS의 class를 동적으로 주는 방법을 알아보자 예제) App.js function App() { return ( Color ); } App.css .App { text-align: center; } .container { width: 500px; height: 200px; background-color: royalblue; font-size: 50px; color: #fff; } .red { background-color: red; } 동적으로 구현하려면 className에 조건을 주어야 한다 조건을 주려면 가장 간단한 방법은 빈 state주어 true와 false값으로 on off 방식을 주는 것 function App() { const [onOff, setOnoff] = useSt..

무분별하게 component를 쪼개면 나중에 데이터를 받아왔을 때 데이터를 활용하기 까다롭다 예를 들어 최상위 컴포넌트에서 데이터를 받아왔다고 하자 사이즈 컴포넌트가 있고 색상 컴포넌트도 있고 이렇게 있다고 한다면 보통 color에 관한 컴포넌트를 하나 만들고 size에 관한 컴포넌트를 하나 만든다 하지만 데이터를 같이 공유하고 있고 그 데이터를 나중에 백엔드 쪽으로 넘겨줘야 한다면 이 두 개의 컴포넌트는 자식 컴포넌트가 되어 최상위 컴포넌트에 있는 데이터를 자식 컴포넌트에 내려줘야 하기에 이 과정에서 데이터를 주고받는 게 복잡해질 수 있기 때문에 하나의 컴포넌트로 활용하는 게 좋은 방법 일 수 있다

기간 : 6월 20일 ~ 7월 1일 팀원: 프런트엔드 3명, 백엔드 1명 담당 페이지 : 상품 상세 페이지 HTML, CSS, Javascript 라이브러리 : React 중간 점검 제작 중 이번 주 5일 동안의 주요 기능 - 공식 홈페이지를 참고한 클론 레이아웃 - MockData를 이용하여 데이터 활용 - 캐러셀(슬라이드) UI 기능 구현 1. 공식 홈페이지를 참고한 클론 레이아웃 크록스 공식 홈페이지를 참고하여 레이아웃을 구성하고 HTML과 CSS를 적용시켜 보았다 처음부터 미디어 쿼리를 이용한 반응형을 제일 후위 순위로 놓았기 때문에 px단위를 사용하여 웹 pc 뷰에서는 UI가 늘어나거나 줄어 나지 않게 하였으며 이후 반응형 페이지 작업을 진행할 시 미디어 쿼리를 이용해서 단계별로 UI를 수정하는..

부트캠프 수강 중 컴포넌트를 연습할 수 있는 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 파일 하나 만들고 시작한다 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..

리액트를 접하기 시작하면 반복적으로 하드 코딩되는 부분이 발생한다 예를 들어 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', '..