본문 바로가기

프론트엔드

(23)
vscode에 git 연동해 사용하기 보호되어 있는 글입니다.
[리액트] 초기세팅 및 실습 1차 [참고] 자습서 - React 시작하기 ko.reactjs.org/tutorial/tutorial.html 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트로 tic tac toe 만들면서 실습해보기 코드 : github.com/GoldK11/React/tree/main/practice/tictactoe [자동 새로고침] 리액트는 코드 변경 후 저장 시 live-reload 기능을 지원한다. 이런 자동 새로고침이 불편해서 비활성화하는 법을 알아봄 okky.kr/article/546683 OKKY | React live-reload 비활성화하는 방법이 궁금합니다. react 에서 소스코드 수..
프론트엔드 개발환경의 이해 (중) - 바벨, 린트 참고 강좌 - [김정환] 프론트엔드 개발환경 이해 www.youtube.com/playlist?list=PL9mhQYIlKEhcQStzo0dQiBThjwU8TroCt 토크ON 68차. 프론트엔드 개발환경 이해 | T아카데미 T아카데미 온라인 강의- [토크ON세미나] 프론트엔드 개발환경 이해 (총8강) ▶ https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174 [과정 소개] 이번 강의에서는 NPM 프로젝트와 모듈 시스템 www.youtube.com 1. 바벨 Babel - 크로스 브라우징 - ES6, 타입스크립트, JSX 등이 브라우저에 상관없이 동작하도록 변환해(트랜스파일) 호환성을 맞춰줌 - 파싱(Parsing), 변환(..
[리액트] 기본 개념 익히기 React [참고] 주요개념가이드 ko.reactjs.org/docs/hello-world.html Hello World – React A JavaScript library for building user interfaces ko.reactjs.org 1) JSX - javascript 확장 문법 ( 마크업 + JS ) - 기본적으로 html 보다 javascript 객체로 인식 - 문자열(따옴표) 및 표현식(중괄호) 삽입 가능 - 리액트 엘리먼트로 표현 가능 ( React.createElement(...) ) 2) 렌더링 ReactDOM.render(렌더링 대상 엘리먼트, DOM 노드); 렌더링 대상 엘리먼트 : const element = Hello, {name}; (JSX 표현식) DOM 노드 : ..
프론트엔드 개발환경의 이해 (상) - npm, 웹팩 참고 강좌 - [김정환] 프론트엔드 개발환경 이해 www.youtube.com/playlist?list=PL9mhQYIlKEhcQStzo0dQiBThjwU8TroCt 토크ON 68차. 프론트엔드 개발환경 이해 | T아카데미 T아카데미 온라인 강의- [토크ON세미나] 프론트엔드 개발환경 이해 (총8강) ▶ https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174 [과정 소개] 이번 강의에서는 NPM 프로젝트와 모듈 시스템 www.youtube.com 1. 프론트엔드에서 node.js의 필요성 1) 최신 스펙으로 개발 - 바벨, 웹팩, npm과 같은 노드 기반 개발환경은 typescript, SASS/SCSS 등의 고수준 프로그..
[javascript] 객체지향 - 함수&프로토타입과 클래스 보호되어 있는 글입니다.
[javascript] 저장용 [비고] 상시 추가중 0. about:blank 아무것도 없는 빈 페이지. 콘솔에서 간단하게 테스트 하고 싶을 때, 빈 html에 엘리먼트 생으로 넣어보면서 테스트 하고 싶을 때 사용하면 좋다. 1. 즉시실행함수 (IIFE, Immediately Invoked Function Expression) (function(){ // statements })(); 익명함수를 정의와 동시에 즉시 실행 안전한 스코핑을 위해 사용 - 내부에서 외부로 변수 등록 방지(전역변수 등록x), 외부에서 내부로 접근 방지 2. console.log [로그가 찍히는 시점에 주의할 것] console.log로 디버깅을 하는 것은 좋지만 로그를 맹신하면 안된다. 가장 치명적인 문제는 console.log가 객체(Array, Objec..