23.01.18일단 우리는 3가지의 링크가 필요하다 🕵️♀️필수HTMLHTML에는 root 와 app을 만들어 두었다.Script우선 JSX문법을 사용하기 위해 script의 type은 text/bable 로 꼭 적어준다. <script type="text/b
새로운 React 앱 만들기 : https://ko.reactjs.org/docs/create-a-new-react-app.html
[복습] ES5 변수 , ES6 변수 ES5 : 가변변수 (VAR) VAR : 재선언 가능 , 재사용 가능 , 값이 바뀌는 변수 > ES6 : 가변변수 (let)
지난번 POFO 클론코딩 페이지를 HTML , CSS , JavaScript로 만들었고 그것을 토대로 React에 Component화 시켜서 옮기는지 간단하게 알아보는 시간이다.<body>에 기본적으로 <div id="root"></div>가 들어가고
메타에서 개발한 오픈 소스 자바스크립트 라이브러리.프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다. GitHub Star 수는 Vue가 가장 많으며(2022년 12월 04일 기준 Vue는 201K, React는 199K, An
결과HTMLCSSscript변수 Agency 함수를 만들고 init 함수 안에 사용 할 함수를 다 넣어놓는다.this : parallax( );this : header( );this : section1( );this : section2( );this : section3
Visual Studio Code Configure User Snippets 설정 2 지난번에 Configure User Snippets 설정 1 이 이번에 리액트를 하면서 JavaScript 에서는 작동이 되지 않는거 같아서 다른 방법을 알아봤다. 먼저 지난번에 쓴 JSON파일은 이렇다. 일단 지난번과 동일하게 Configure User Snipp...
결과HTMLCSSscript변수는 days : document.getElementById ('days');hours : document.getElementById ('hours');minutes : document.getElementById ('minutes');sec
결과난이도에 따라 잔여 시간은 달라지고 주어진 시간내에 타이핑을 완료하면 잔여시간이 점수에 반영되고 보너스 시간이 생기는 간단한 타이핑 게임을 만들어본다.HTMLCSSscript변수선언의 설명이다. word : 타이핑게임에서 단어들이 나오게되는 곳이다. text : 선
패럴랙스 스크롤링(parallax scrolling)은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법이다. 하나의 이미지를 여러 개의
아래와 보는 이미지는 reflection 기능을 사용하여 이미지를 반전시켰다.HTMLCSShttps://caniuse.com/ 에서 크로스브라우징이 되는지 버전체크를 한다. 파이어폭스는 지원하지 않는걸 확인하게 된다. 따라서 크로스브라우징이 필요하며 https
JQuery Progress Bar 01 >결과 >HTML >CSS >script >변수는 감싸고 있는 .progress-bar 와 안에 .bar , .num 이 있고 .num의 안에 data-num이 있는데 progressData 로 만들었다. progressBar 의 애니메이션은 progressData 의 width + '%' 의 값으로 만...
JQuery UI 의 사용법은 URL : https://velog.io/@nuyhes/Front-end-%EA%B5%AD%EB%B9%84%EC%A7%80%EC%9B%90-052%EC%9D%BCJQuery UI를 이용하여 From 태그를 사용해본다.selectm
VScode 에는 기본내장으로 emmet 기능이 있다. 가령 ! + tab 을 하면 html 구성이 자동완성된다.나는 기본으로 생성되는 자동완성 기능에 매번 link와 script를 적어주는게 너무 귀찮았고 제일 큰 이유는 오늘 script src="" defer sr
정규 표현식 또는 정규식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 정규 표현식은 많은 텍스트 편집기와 프로그래밍 언어에서 문자열의 검색과 치환을 위해 지원하고 있으며, 특히 펄과 Tcl은 언어 자체에 강력한 정규 표현식을 구현하고 있다
AJAX 와 JSON 을 다시 한번 복습하고 넘어가보자.Ajax는 웹페이지에서 새로운 데이터를 보여주려고 할 때 웹페이지 전체를 새로고침 하지 않고, 보여주고자 하는 데이터가 포함된 페이지의 일부분 만을 로드하기 위해 비동기 (non-blocking)을 사용하여 데이터