우당탕탕 아장아장

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

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 키워드 작성 -..

뚝딱 만들 수 있는 그 날을 위해 재도전! 이번 컨셉은 .... 흑회백! 여백의 미..? 왜 화면에 안나오니 왜😩😩😩😩 거짓말.. 나한테 왜그래.. App.js에서 괄호를 다른 함수위에 닫음..... 내가 넣어놓은 값까지는 보임! 추가와 삭제까지..! 으아아아 두번째를 했지만,, 아직 내께 아니다.. 느낌이 아닌 확신.. 가계부는 언제쯤..

To Do List 정도는 껌으로 만들어야하는데, 나는 이가 없는 사람..🤐 힙겹고 어렵게 만들었고, 이제 다시 만들어볼 예정인 To Do List! 밥먹기 같은건 매일매일 잘 할 수 있는데, 리액트 공부하기와 투두리스트 만들기는 언제쯤.. 내 자신 화이팅.. 기능 ➕ 누르거나, 엔터를 치면 일정 입력 ✔ 를 누르면 텍스트 색 변경 + 중간에 줄 긋기 ➖ 누르면 아이템 삭제! 추가하고 싶은 기능 - 귀여운 폰트로 글씨체 변경 - 글자가 입력되지 않았을 경우 강조표시 🤦‍♂️ To Do List를 하면서 느끼고 배운 점 과정 1. 그림그리기 2. 전체적인 틀 만들기 3. UI만들기 (전체적인 틀, 입력 추가, 리스트 등) 4. 기능 구현 (체크박스 밑줄, 일정의 추가, 제거, 수정) map함수에는 key값..

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