Dev study and Repost

노마드코더 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는 개발과 ..

바닐라 JS로 크롬 앱 만들기 8장 강좌들 노마드코더 무료강좌​노마드코더 바닐라JS 자바스크립트 강좌 #8.0 Geolocation 요약:1. Geolocation API를 사용하면 사용자의 현재 위치 정보를 가져올 수 있습니다.2. navigator.geolocation.getCurrentPosition 메서드를 통해 위도와 경도를 얻는 방법을 설명합니다.3. 위치 정보는 콜백 함수로 처리되며, 성공 및 에러를 처리하는 구조를 배우게 됩니다.​index.html 과 weather.js 생성하면됩니다.​*weather.js 소스코드function onGeoOk(position) {const lat = position.coords.latitude;const lng = position.coords.longi..

바닐라 JS로 크롬 앱 만들기 7장 강좌들 노마드코더 무료강좌​실질적인 TODO LIST를 생성하게 됩니다.​*JSON.stringify()JavaScript 객체를 JSON 문자열로 변환하는 함수입니다.​*간단예시 코드const obj = { name: "Julia", age: 99, city: "London" };const jsonString = JSON.stringify(obj);console.log(jsonString); // 출력: '{"name":"Julia","age":99,"city":"London"}'*JSON.parse()JSON 문자열을 javaScript 객체로 변환하는 함수입니다.const jsonString = '{"name":"Julia","age":99,"city":"Lond..

바닐라 JS로 크롬 앱 만들기 6장 강좌들 노마드코더 무료강좌*Math.ceil()소수점을 올림하여 더 큰 정수로 만들어줍니다.*Math.floor()소수점을 내림하여 더 작은 정수로 만들어 줍니다.*document.body.appendChild(bgImage);bgImage 요소를 HTML 문서의 에 추가하는 자바스크립트 코드입니다,*각 상위/하위 요소를 생성하고 그 생성한 변수를 활용.소스는 깃허브 참고!끝!

바닐라 JS로 크롬 앱 만들기 5장 강좌들 노마드코더 무료강좌이번 강좌에서는 시간, 날짜 함수와 웹페이지 로딩시, 실시간, 현재시간을 출력하는 실습을 진행합니다.코드 또한 정말 쉽습니다.주요 코드내 함수를 정리해보았습니다.*Date()현재 날짜와 시간을 객체로 변환*setInterval()지정된 시간 간격 마다 특정코드를 반복 실행하는 타이머 함수*setTimeout()지정된 시간이 지난 후 한번 특정 코드를 실행하는 타이머 함수*padStart()문자열의 길이가 부족할 경우, 앞에 지정된 문자를 추가해 원하는 길이로 맞춤-예시) "5".padStart(2, "0") → "05" 단순합니다.끝!

바닐라 JS로 크롬 앱 만들기 4장 강좌들 노마드코더 무료강좌이번 4강 강좌에서는 html과 자바스트립트 소스를 이용하여 간단한 웹페이지를 만들어보게 됩니다.로그인 기능 구현 전의 실습으로 아이디 입력 후 버튼을 눌렀을 때 greeting(인사) 문구가 화면에 나타나도록 합니다.아주 간단한 html 코드와 js 코드를 사용하게 됩니다.기본적인 소스코드 작성 및 약간의 유용한 코드 스킬을 배울 수 있게 됩니다.​이번 포스팅엔 4장 강좌들에 대한 최종 소스코드를 남깁니다.포스팅 내용은 각 파일 명 그리고 소스코드로 대체합니다.html Log In jsconst loginForm = document.querySelector("#login-form");con..

바닐라 JS로 크롬 앱 만들기 3장 강좌들 노마드코더 무료강좌​안녕하세요 데브런치입니다.노마트코더 바닐라js로 크롬앱 만들기 3장은 자바스크립트를 통해 웹페이지의 이벤트 관련 강좌입니다.​클릭 이벤트 등 다양한 이벤트 발생시 여러 기능을 구현하게 됩니다.​#3.0 The Document Object (08:14)#3.1 HTML in Javascript (10:31)#3.2 Searching For Elements (12:23)#3.3 Events (12:38)#3.4 Events part Two (08:31)#3.5 More Events (09:48)#3.6 CSS in Javascript (06:51)#3.7 CSS in Javascript part Two (09:34)#3.8 CSS in Javas..

바닐라 JS로 크롬 앱 만들기 2장 강좌들 노마드코더 무료강좌안녕하세요. 데브런치입니다.#2.3 const and let (09:45)const는 상수를 선언하는데 사용합니다. 선언 시 반드시 값을 초기화 해야하며, 한번 선언된 값은 변경할수 없습니다. 재 선언이 불가능 합니다.let은 블록 범위 변수를 선언하는데 사용되며, 선언 시 값을 초기화 할수 잇고 선언후 나중에 값을 선언할수 있습니다. 선안된 변수의 값을 변경할수 있습니다. 재선언이 가능하며 재선언된 값으로 유지됩니다. 이전 값은 유지되지 않습니다.이어서 자바스크립트의 기본 강좌가 이어집니다.2장에 대한 나머지 목록을 남겨봅니다. #2.4 Booleans (07:22)#2.5 Arrays (13:53)#2.6 Objects (13:05)#2.7..

바닐라 JS로 크롬 앱 만들기 #2.0 Your First JS Project 노마드코더 무료강좌​안녕하세요 데브런치입니다.노마드코더에서 제공하는 자바스크립트 무료강좌 '바닐라 JS로 크롬 앱 만들기'의 진행을 기록으로 남겨봅니다. 바닐라 js는 순수한 자바스크립트(javascript)를 사용하는 것으로 외부 라이브러리나 프레임워크를 쓰지 않는 순수 JavaScript를 이르는 말입니다. 강좌 진행에 앞서 기본적으로 간단한 html, css, javacsript 언어를 알고 있다면 쉽게 따라하면서 진행할수 있습니다.유튜브를 통해 무료강좌를 보며 진행하면 됩니다.​https://youtu.be/5xj5DjyQK_8 저의 경우 replit에서 진행을 했습니다. 이후 vscode순수한 자바스크립트 사용이므로 ..