우당탕탕 아장아장

유쾌하지 못한 오류 기록 🤯문제 : 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 깃에서 풀을 당겨온 후, npm start를 하려고 하니, 저런 멘트가 떴다. 🥳 해결방법 yarn add global react-scripts npm install -g react-scripts 평소에 npm을 이용하지만, 저렇게 npm으로 문제가 생기면 yarn으로 해결 중.. (아무것도 모르는 사람) 아직까지는 yatn으로 해결했을 때, 문제가 없었다!

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

was not found in '경로' 이거 뜻 경로에서 찾을수 없습니다 아닌가?? 저 경로에 있잖아! 왜저래! 같은 폴더 안에 차곡차곡 잘 있으면서 거짓말치지마,,, react-jsx-dev-runtime.development.js:87 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and n..

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

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

React에서 Chart.js 사용하는 방법 헤매지 않기 위한 기록 1. 리액트에서 Chart.js를 사용하려면 우선 두개가 필요 npm install chart.js npm install react-chartjs-2 chart.js 나는 쪼랩이니까 그냥 터미널에 두개 입력해서 설치 컴포넌트는 이렇게 준비 그리고 App.js에 연결함 ➡ Chart.js import styled from 'styled-components'; import { Line } from 'react-chartjs-2'; const Chart = () => { return ( ); }; export default Chart; const Container = styled.div` width: 90vw; max-width: 900px;..

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