Dev study and Repost

노마드코더 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..

이번 강좌에서는 강좌명 그대로 웹툰 앱을 만듭니다.이전의 강좌는 기본적인 플러터 사용을 위한 연습용 앱(디자인 연습, 타이머 앱)을 만들었다면, 플러터를 통해 웹툰 앱을 만드는 것입니다.#6 WEBTOON APP #6.0 Introduction (05:09) 이제까지 배운 것을 활용합니다.네이버 웹툰 사이트의 api 사용합니다.데이터 불러오기, 인터넷에서 패키지를 다운 받아 사용하기, 스마트폰 api 사용하는 법,폰에 데이터를 저장하는 법을 알게 될 것입니다.​니꼬가 만든 비공식 네이버 웹툰 api를 사용합니다https://webtoon-crawler.nomadcoders.workers.dev/ 네이버 웹툰 Unofficial API webtoon-crawler.nomadcoders.workers.de..

이번시간엔 간단한 앱으로 타이머를 만드는 강좌입니다.#5 POMODORO APP #5.0 User Interface (13:35) main.dart 수정(소스)import 'package:flutter/material.dart';import 'package:toonflix/screens/home_screen.dart';void main() { runApp(const App());}class App extends StatelessWidget { const App({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( colorScheme: ColorSc..

안녕하세요 데브런치입니다.​노마드코더의 Flutter로 웹툰 앱 만들기 4번째 챕터 부분 정리, 기록해 보았습니다.​#4 STATEFUL WIDGETS #4.0 State (07:33)플러터 코딩시 위젯에 관한 설명기존 main.dart 에 새로운 코드로 타이핑 합니다.플러터 소스의 클릭아이콘 까지 생성 및 클릭 오류 전까지 구현합니다.소스코드(아래)import 'package:flutter/material.dart';void main() { runApp(const App());}class App extends StatefulWidget { const App({super.key}); @override State createState() => _AppState();}class _AppState ex..