새싹 4

새싹 프론트엔드 실무 과정 13주차 팀프로젝트 Rechart 원하는 데이터 뿌려주기

새싹 프론트엔드 실무 과정 13주차 팀프로젝트 Rechart 원하는 데이터 뿌려주기 상위 컴포넌트로부터 받은 title, data, name, domain, stroke을 이용 title : 그래프 상단 제목 data : 그래프에 출력될 데이터 name : X축 값의 기준 domain : Y축 값의 범위 stroke : 선 색상 되는게 있고 안되는게 있나 보다..😣 나는 이 아이로 결정! 원하는 데이터 값을 뿌려줘봐야지! Try the demo in codesandbox >> 를 클릭 const data = [ { name: "Page A", uv: 4000, pv: 2400, amt: 2400 }, { name: "Page B", uv: 3000, pv: 1398, amt: 2210 }, { name:..

새싹 프론트엔드 실무 과정 8주차 React 라우터

8주차 목요일 14. 리액트 라우터 싱글 페이지 어플리케이션 - 페이지 전환 속도가 빠름 - 주소가 변경되어도 서버에 추가로 웹 문서를 요청하는 작업 필요❌ 단점) - 어플리케이션 규모가 커지면 자바스크립트 파일 또한 커짐 - 페이지 로딩 시, 사용자가 실제로 방문하지 않을 수도 있는 페이지 스크립트까지 불러옴 라우팅이란? - 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 import React from "react"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; const router = createBrowserRouter([ { path: "/", element: Home, errorEleme..

새싹 프론트엔드 실무 과정 8주차 React Context

8주차 수요일 13. Context Context - 어플리케이션에서 전반적으로 사용할 값을 관리 - 예) 사용자의 언어, 로그인 상태, UI 테마 등 환경 설정 ➡ App.js function App() { return ; } function GrandParent({ value }) { return ; } function Parent({ value }) { return ; } function Child({ value }) { return ; } function Message({ value }) { return 전달받은 데이터 : {value}; } export default App; 길어 길어🤦‍♂️ 한번에 보내줄 수는 없지만, 새로운 영역을 생성해서 전달 가능! Context 사용 방법 1️⃣ Con..

청년취업사관학교 후기 - 프론트엔드 마포 2기

청년취업사관학교 후기 - 프론트엔드 마포 2기 참여중인 청년취업사관학교, 생각지도 못한 지원을 많이 해주셔서 너무나 만족함! 우선, 강사님의 열정 + 수업내용은 말할 것도 없고❤❤ 간식 지원 및 리프레쉬를 위한 연극이라니! 청년취업사관학교 새싹 Seoul Software ACademy 의 줄임말! 건물 내 있는 구내식당에서 매일 바뀌는 밥과 반찬 그리고 국을 먹을 수도 있고, 프로젝트가 끝났다고 이렇게 맛있는 음식을 가득 주문해주셨다~!💕 용산에 있는 본사에서 마포까지 와주셧다! 감사합니다! 피자, 치킨, 떡볶이! 오늘 먹은 음식들이라 더욱 신이 나서 쓰는 청년취업사관학교 후기! 그리고 오늘 즐거웠던 연극관람까지!!! 이렇게 잠을 쫓을수도 있고, 배고픔을 달래줄 수 있는 간식까지 제공을 해준다!!🌼🤍 거..