우당탕탕 아장아장

새싹 프론트엔드 실무 과정 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:..

새싹 프론트엔드 실무 과정 13주차 팀프로젝트 firebase data fetch 우리조 노션에 올라가있던 firebase data fetch방법! import React, { useEffect, useState } from "react"; const 폴더명 = () => { const [data, setData] = useState([]); const fetchdata = async () => { try { const res = await fetch( "firebase 경로" ); const result = await res.json(); setData([...result]); } catch (error) { console.log(error); } }; useEffect(() => { fetchdata..

React를 사용한 첫 팀 프로젝트 작업 기간 2022.12.16 ~ 2023.01.26 (5주 + a) 기술 스택 - HTMl / CSS - React - SASS 플로우 차트 만들기 피그마를 이용한 개인이 맡은 부분 플로우차트 만들기 그리고 전체 연결하기! 컴포넌트 기능 단위로 구분하기 이걸 통해 페이지단위, 컴포넌트 단위, 기능 단위로 구분을 해서 좋았지만 하다보면 그대로 따라가긴 어려울 것 같기도..😂 차트 활용을 위한 Chart.js 사용해보기 ⬆⬆⬆

새싹 프론트엔드 실무 과정 10주차 깃과 깃허브 사용하기 10주차 월요일 11. 깃(Git) & 깃허브(GitHub) 깃 - 2005년 리누스 토르발스가 처음 소개 특징 - 버전 관리 - 백업 - 협업 깃 프로그램의 종류 - 깃허브 데스크톱 - 토터스깃 - 소스트리 - 커맨드 라인 인터페이스(CLI) 줄바꿈 문자열 - \r : carriage return - \n : line feed 윈도우와 맥이 서로 달라 충돌 가능성 있음 윈도우 : $ git config --global core.autocrlf true 맥 : $ git config --global core.autocrlf input 버전 만들기 - 깃에서 문서를 수정하고 저장할 때마다 생기는 것 - 이전 버전으로 되돌아갈 수 있음 스테이지와 커밋..

9주차 금요일 4. 제네릭 제네릭 타입 함수가 다양한 타입을 전달 받아 처리하기 위해서는 함수 선언부에 해당 타입을 모두 명시해야 함 ➡ 제네릭 타입으로 선언하면 함수 선언부를 간단하게 작성 가능 제네릭 프로그래밍 - 작성된 코드를 다양한 타입의 객체에 대해 재사용하는 객체 지향 기법 (하나의 코드로 숫자, 문자열 등 처리 가능) import React from "react"; const Generic = () => { function printArray(arr: T[]): void { console.log(arr); } const arr1 = [10, 20, 30]; printArray(arr1); const arr2 = ["a", "b", "c"]; printArray(arr2); const arr3..

9주차 목요일 3. 인터페이스 + 클래스 인터페이스 특징 - 코드 재사용성을 높임 - 작성중인 코드에 대한 더 많은 정보를 타입스크립트에 제공하기 위해 사용 - 인터페이스는 자바스크립트 코드로 컴파일 되지 않음 이름 규칙 - 첫글자를 대문자로 표기 - 인터페이스 이름 앞에 대문자(I)를 붙이지 않음 ➡ App.tsx const App = () => { interface Language { name: string; level: number; } let p1: Language = { name: "react", level: 5, }; // 에러 발생 let p2: Language = { name: "typescript" }; // level let p3: Language = { level: 5 }; // na..

9주차 수요일 1. TypeScript 2. TypeScript 함수 Type이 필요한 이유 - 개발자는 age 변수에 숫자 값이 저장되길 원함 - 사용자는 age 변수에 숫자 값이 저장되는지 모름 - 숫자 값을 저장하는 변수에 문자열을 저장함 특징 - 변수 값에 데이터 타입 지정 가능(예측 가능, 디버깅 편리) - 객체지향 프로그래밍 가능(클래스 기능 제공) 동작 과정 기존에는 별도의 변환 과정 필요❌ 타입스크립트는 자바스크립트로 변환을 시켜줘야함 *컴파일 : 특정 언어의 코드를 다른 언어로 바꿔주는 과정 TypeScript 문법 유형 자바스크립트 타입 타입스크립트 타입 숫자 타입 Number number 불리언 타입 Boolean boolean 문자열 타입 String string 객체 타입 Obje..

9주차 월요일 15. 네트워크 통신 동기와 비동기 - 동기 방식(synchronous) : 요청을 보낸 후 응답을 받아야 다음 동작을 실행할 수 있는 방식 - 비동기 방식(Asynchronous) : 요청을 보낸 후 응답을 받기 전에 다음 작업을 먼저 실행하는 방식 ex) fetch함수, useState import React from "react"; const Async = () => { console.log("1. 안녕하세요"); setTimeout(() => console.log("2. 반가워요"), 3000); console.log("3. 안녕히계세요"); return ; }; export default Async; async와 await - async : 함수 선언부에 async 키워드 작성 -..

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

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..