우당탕탕 아장아장

State란? - 컴포넌트가 가질 수 있는 상태 (동적인 값의 상태) State의 종류 - 클래스형 컴포넌트의 state 속성 (React Hooks가 나오기 이전에 사용) - 함수형 컴포넌트의 useState 함수 (16.8버전 이후) Hooks란? - 16.8버전 이후 새로 도입된 기능 - 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능을 제공 기능 : 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능 특징 : state와 lifecycle과 같은 기능을 사용 가능하게 해줌 종류 : useState, useEffect, useReducer, useMemo, useCallback, useRef 규칙 : 최상위에서만 호출, 오직 React 함수 내에서만 호출 useState()..

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

유쾌하지 못한 Git 오류 기록 - 1 사용한지 얼마 안된 Git 팀 프로젝트 사용하면서 뿐만 아니라, 나 혼자 사용할 때에도 절대로 만나고 싶지 않았던 충돌을 만났다. 아직 Git이랑 낯가리는데 진짜 주먹으로 부시고 싶었음. 해결했다고 생각했는데, 너무 태연하게 시간역행한 모습을 보여주길래, 당황해서 한 겨울에 혼자 다한증 걸릴 뻔😂 주절주절.. 혼자 내는 충돌도 나쁘진 않아요.. 함께 내는 것보다 덜 우울하니까.. 내 목표는 가볍고 소소하게, 테이블에 스티키헤더를 적용하는 것이었다.. Mui 가져다 써서 완성을 했는데, 브랜치를 잘못 설정을 한 듯(추측) 해결 방법 사이에 있는 문장들을 지워주라고 한다. 지워주고 뭔가 이 짓을 그만한다는 뜻인줄알고 closed를 어디선가 눌렀떠니 갑자기 빨갛게 뜸 초..

JavaScript 개인 프로젝트 과거에서 온 기록 등산을 좋아해서 등산관련된 정보를 뿌려주는 걸 해볼지, 나에 대한 기록을 할지 고민을 해봤다! 종이에 슥삭슥삭 그려서 틀부터 잡아버리기! 이런 저런 사이트나 앱에서 봤던 거 중 내가 사용해보고 싶은 것들 사용해보기! 요렇게해서 다 구현을 하고 싶었으나, 어느 순간 현실과의 타협이 시작됨.. 이걸 리액트로 멋있게 예쁘게 다시 만들어봐야지.. 여기에 < 저건,, 또.. 왜!! 오타ㅠㅠ 사라짐! 경상 전라 제주가 안찍힘 왜? 뱉어낼 수 있는 산들이 이렇게나 있는데!? 해결..! 다시 문제.. 또 다시 해결.. 데이터 로드가 끊긴 부분 확인해보기! XML파일에서 뭔갈 하는건 아주아주 힘든 일인 것 같ㄷㅏ.... 이렇게,, 뭐,, ,,, 이미지 나오면 됐지.....

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