🔷#1 [2021 update] introduction 인터넷 익스플로는 쓰지마!! 크롬 브라우저 쓰자구~ 자바스크립트를 배워야 하는 이유 1 - 자바스크립트는 10일 만에 만듬!!! ( 그래서 JS가 부족한 부분이 있지만 계속 쓰려고함 why?? ) - 웹 프로그래밍언어를 다른걸로 바꾼다면 지금까지 만들어져있는 사이트들이 망가질꺼임 - 자바스크림트가 프로트엔드로 쓸수 있는 유일한 언어임 자바스크립트!! FE 에 유일하게 쓸 수 있는 언어임 자바스크립트 설치??? 자바스크립트는 모든 브라우저에 내장되어있음!! (브라우저가 있는 사람은 모두 자바스크립트가 있는거임) 안드로이드, 애플, 컴퓨터, 윈도우, 맥, 리눅스 …. !!!! 자바스크립트만 배우면 끝! c#??, Go ? 흠 javascript!! 자바..

웹서버 vs WAS 정적페이지 동적페이지 🔷 정적 페이지 Static Pages 바뀌지 않는 페이지 웹 서버는 파일 경로 이름을 받고, 경로와 일치하는 file contents를 반환함 항상 동일한 페이지를 반환함 🔷 동적 페이지 Dynamic Pages 인자에 따라 바뀌는 페이지 웹 서버에 의해 실행되는 프로그램을 통해 만들어진 결과물임 Servlet: WAS 위에서 돌아가는 자바 프로그램 개발자는 Servlet에 doGet() method를 구현함 🔷 웹 서버와 WAS의 차이 🧡 웹 서버 개념에 있어서 HW와 SW로 구분이됨 HW : 웹 서버가 설치되어 있는 컴퓨터 SW : 웹 브라우저가 클라이언트로부터 HTTP 요청을 받고, 정적인 컨텐츠(html, css 등)를 제공하는 컴퓨터 프로그램 🔶 웹 서..

💥 콘솔 에러 백엔드 연결 🛠서버 실행 🔶 [nodemon] app crashed - waiting for file changes before starting . . . 요즘 데이터 분석 웹 서비스 프로젝트를 진행하고 있다. 프론트 작업물은 front 디렉토리에 백엔드 작업물은 back 디렉토리에서 코드를 작성하고 있다. 나는 이번 프로젝트에서 프론트 작업을 진행하고 있고 백엔드 분의 작업물을 테스팅해보려고 백엔드 서버를 실행해봤다. 그런데 이번 포스팅의 콘솔 에러가 나오게 됐다. 에러를 보면 nodemon 앱이 충돌했다 하면서 서버가 실행이 안되고 있다. 이게 내가 작업한 코드가 아니다 보니깐 처음에는 아니 왜 에러가 나지?? 에러 코드를 어떻게 수정해야 하지?? 하면서 여러 가지 생각이 들기 시작했다..

📃데이터 분석 🧐차트 시각화 💚Recharts.js https://recharts.org/en-US/ 이전 포스팅에서 Recharts 라이브러리를 소개해드렸는데요. Recharts를 이용해서 웹사이트에 리액트로 데이터 분석한 데이터 결과를 그래프를 통해서 시각화 작업을 할 수 있습니다. 현재 진행 중인 데이터셋을 분석하고 난 후 실제로 작업한 그래프를 보면서 Recharts 커스터마이징을 어떻게 해야 할지 아이디어 얻어가셨으면 합니다. 🔷 데이터 분석 시각화 작업물 _ 원형 차트, 방사형 차트 Recharts에 있는 Pie chart를 통해서 데이터 시각화를 할 경우 해당 값들의 비율을 시각적으로 한눈에 확인할 수 있습니다. 그리고 hover를 통해서 마우스를 해당 영역에 올릴 시 해당 데이터명이 차트 ..

🌟 Recharts 📊리액트 차트 🌌 라이브러리 https://github.com/recharts/recharts 🔷 Recharts란? 리액트로 차트를 작성할 때 사용할 수 있는 라이브러리 중 하나가 recharts이다. recharts는 예시 그래프가 풍부해서 원하는 그래프를 데모를 보면서 정할 수 있다. 또한 예시 코드 또한 사이트에 제공이 되어서 가볍게 커스터마이징을 해서 원하는 그래프로 편하게 사용할 수 있다. 차트마다 자세히 보면 애니메이션 효과도 적용이 되어 있어서 시각적으로 흥미를 유발할 수 있는 좋은 차트 라이브러리이다. 🔶 Recharts 설치 방법 및 에러 발생시 해결법 //* 방법1 npm 이용 설치 //! dependency 에러 뜰수 있음 $ npm install recharts..

⏹️ MUI 💙Material UI 라이브러리 https://opentutorials.org/course/1 https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster. mui.com 🔷 mui 설치 npm install @mui/material @emotion/react @emotion/styled 터미널에 명령어..

📃 React 💻 생활코딩 ✍ 강의 메모 https://opentutorials.org/course/1 🔷 1. 수업소개 react의 핵심적인 역할은 사용자 정의 태그를 만드는것 부품을 만들고 공유하고 남들의 부품을 사용할 수 있음 🤔 react를 만드는 방법? class vs function 두가지 방법이 있고 function으로 만드는 방법 ㄱㄱ 🔷 2. 실습환경구축 (설치) react 공식문서를 참고하면 react에 대해서 자세히 알아볼수있음 참고링크 : https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app 새로운 React 앱 만들기 – React A JavaScript library for building user in..