Dev study and Repost

PERN - 마크다운 설정 03 markdown / react npm markdown​웹서비스 제공중 태그 및 내용 작성을 했으나 마크다운 형식의 글을 표현해야하는 경우가 있습니다.즉 react 앱에서 마크다운을 직접 보여할 경우, 이 기능을 구현해야하죠.--사용자가 작성한 텍스트를 마크다운으로 랜더링 하거나, 문서형 콘텐츠를 보여줘야할때, 이럴때 간단히 패키지를 이용해서 쉽게 구현이 가능합니다,​---react-markdown 패키지를 사용하면 되는데요.https://www.npmjs.com/package/react-markdown react-markdownReact component to render markdown. Latest version: 10.1.0, last published: 6 mont..

PERN - 설정 시작 setting first 01 - lucide-react​---*FIRST​/root$ npm create vite@latest$ yclientreactJavascript---​$ cd client$ npm install$ npm install react-router-dom$ npm install lucide-react​*lucide-react는 React용 아이콘 라이브러리한마디로 설명하자면:"Lucide 아이콘을 React 컴포넌트로 사용할 수 있게 해주는 패키지"Lucide는 Feather Icons의 포크(fork)로, 오픈소스로 유지보수되고 있는 깔끔하고 일관된 스타일의 벡터 아이콘 모음!​*lucide-react 주요 특징React 컴포넌트 형태로 아이콘 사용SVG 기반..

노마드코더 ReactJS로 영화 웹 서비스 만들기 07 무료강좌 리액트 API 의 json을 받아 값을 처리하여 간단 웹페이지 구현을 하게 됩니다.이어서 react router 기능을 실습하게 됩니다. ***Command npm i react-router-dom*** ***React Router DOM***React Router DOM은 웹페이지의 주소(URL)에 따라 화면을 바꿔주는 도구로,예를 들어, /about 주소로 가면 "About 페이지"가 보이고, /home으로 가면 "Home 페이지"가 보이게 만들어줍니다. 페이지를 새로고침하지 않고 부드럽게 동작합니다.쉽게 말해, React 앱에서 주소별로 화면(컴포넌트)을 연결해 주는 역할을 합니다. https://reactrouter.com/ Rea..

노마드코더 ReactJS로 영화 웹 서비스 만들기 06 무료강좌 리액트 useEffect 간단 요약 useEffect는 React에서 컴포넌트가 화면에 렌더링되거나 업데이트될 때, 특정 작업(예: 데이터 가져오기, 구독 설정)을 수행하도록 도와주는 함수입니다.사용자가 지정한 조건(의존성 배열)에 따라 실행됩니다.컴포넌트가 사라질 때 정리(clean-up) 작업도 처리할 수 있습니다. 예를 들어, 처음 렌더링 시 API 호출을 하거나, 이벤트 리스너를 추가/제거하는 데 자주 사용됩니다.상세한 설명과 예시는 아래 링크를 참고해주세요.참고 링크: https://ko.legacy.reactjs.org/docs/hooks-effect.html Using the Effect Hook – ReactA JavaScri..

노마드코더 ReactJS로 영화 웹 서비스 만들기 05-2 무료강좌 진행중 npm start 후 오류 코드Failed to compile.[eslint] src/Button.js Line 7:8: Typo in static class property declaration react/no-typossrc/index.js Line 18:1: 'reportWebVitals' is not defined no-undefSearch for the keywords to learn more about each error.ERROR in [eslint] src/Button.js Line 7:8: Typo in static class property declaration react/no-typossrc/..

노마드코더 ReactJS로 영화 웹 서비스 만들기 05-1 무료강좌 🔻🔻🔻node.js 설치 방법 확인하기ㅣhttps://blog.naver.com/devlunch4/223724591778 맥북 node js 설치 macOS Node.js install 설치 버전 확인맥북 node js 설치 macOS Node.js install 설치 버전 확인 웹 개발 시 node.js를 사용하는 경우가 있습...blog.naver.comreact app 설치 생성하지만 오류가 발생..이 에러는 주로 React 프로젝트를 생성하거나 패키지를 설치할 때 발생하며, 주된 원인은 의존성 충돌입니다.아래 단계에 따라 문제를 해결해 보았지만.. (실패..)1. 에러의 원인 react 버전 19.0.0이 설치되어 있는데, ..

노마드코더 ReactJS로 영화 웹 서비스 만들기 04 무료강좌​PropTypes 란?PropTypes는 React에서 컴포넌트의 props가 올바른 타입인지 확인하기 위한 도구입니다.이를 통해 컴포넌트가 예상치 못한 props를 받아 발생할 수 있는 오류를 방지할 수 있습니다.PropTypes를 사용하는 이유 문서화: props의 타입과 사용법을 명시적으로 알 수 있습니다.오류 방지: 잘못된 props를 전달했을 때 경고를 띄워줍니다.유지보수 용이: props의 예상 타입을 명확히 정의하여 코드 가독성을 높입니다.코드 설명 text: PropTypes.string.isRequiredtext는 문자열(string)이어야 하며, 필수(isRequired)로 전달해야 합니다.fontSize: PropType..

노마드코더 ReactJS로 영화 웹 서비스 만들기 03 무료강좌JSX와 React 모드 간단 설명JSX에서 HTML 속성 이름JSX는 JavaScript와 HTML의 예약어 충돌을 피하기 위해 속성 이름을 약간 다르게 사용합니다.class → classNamefor → htmlForJSX: javascript: React.createElement('div', { id: 'root' });React 모드Development 모드: 개발 중에는 버그를 쉽게 찾을 수 있도록 자세한 에러 메시지를 제공합니다.Production 모드: 배포용으로 최적화되어 에러 메시지를 간소화하고 성능을 높입니다.​더 쉽게 말하면, JSX는 HTML을 JavaScript에서 사용하기 편리하게 변형한 것이고, React는 개발과 ..

노마드코더 ReactJS로 영화 웹 서비스 만들기 01 02 무료강좌​바닐라js 무료강좌, 수강 완료 진행하는 것을 추천드립니다.(아래링크 참고)https://blog.naver.com/devlunch4/223475803246 바닐라 JS로 크롬 앱 만들기 #2.0 Your First JS Project 노마드코더 무료강좌바닐라 JS로 크롬 앱 만들기 #2.0 Your First JS Project 노마드코더 무료강좌 안녕하세요 데브런치...blog.naver.com  2.1 강좌에서 스크립트 관련 react 링크는 아래를 사용.(react 설치)​https://unpkg.com/react@18.1.0/umd/react.production.min.jshttps://unpkg.com/react-dom@18..