study 코딩하자

텍스트 관련 태그 글씨를 특별한 이유로 평범한 글자와 구분하기 위해서는 태그를 사용합니다. 글씨를 중요성과 관련성을 전달하지 않고, 다른 텍스트와 구별 할 때 태그를 사용합니다. 글씨를 강조하고 싶다면 태그를 사용합니다. 글씨를 강조하고 중요성까지 강조하고 싶다면 태그를 사용합니다.

Vue.js Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. Vue.js 기본 구조 Vue 컴포넌트의 경우 세개의 구역으로 나누어져 있다. template: html부분이다. 이 안에 style태그와 script태그를 사용할 수 없다. script: 이 템플릿에서 사용할 스크립트 코드이다. import로 외부라이브러리를 가져올 수 있다. style: 이 템플릿에서 사용할 css이다. scoped속성을 부여하면 딱 이 스타일에서만 사용할 수 있다. 아무것도 없으면 자식 컴포넌트도 일괄 적용된다.

리액트 네이티브 리액트 네이티브는 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크입니다. JavaScript로 개발이 가능하며 하나의 프로그래밍 언어로 IOS와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼입니다. 리액트 네이티브는 네이티브 브릿지를 통해 네이티브 스레드(Native Thread)와 통신하면서 웹앱과 다르게 성능을 최적화시킵니다. 이런 웹을 사용하지 않고 네이티브와 통신하는 방법을 사용하는 것을 하이브리드 앱(Hybrid App)이라 블리며 자마린, 네이티브 스크립트, 플루터 등이 있습니다. 리액트 네이티브의 장점 1. 러닝 커브가 낮다. 리액트 네이티브의 가장 큰 장점이라고 할 수 있는 것은 앱을 만들기 위해 다른 언어를 학습하지 않아도 된다는 것입니다. 물론 J..

리액트 명령어 리액트를 시작할 때 알고 있으면 좋은 명령어들이다. npx create-react-app 폴더명 위 명령어를 입력하면 create-react-app을 이용한 개발환경이 설치된다. npm start 위 명령어를 입력하면 자동 빌드된다. (브라우저가 열림) npm run build 위 명령어를 입력하면 배포환경에서 사용할 파일을 만든다. npx serve -s build 위 명령어를 입력하면 로컬에서 웹 서버를 띄워 확인할 수 있다. npx test 위 명령어를 입력하면 테스트 코드가 실행된다. npm run eject 위 명령어를 실행하면 숨겨져 있던 create-react-app의 내부 설정 파일이 밖으로 노출된다. npm install react-router-dom 위 명령어를 실행하면 ..

리액트 훅이란? Hooks 는 리액트 v16.8 에 새로 도입된 기능이다. 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공한다. 그렇다면 왜 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔야할까? react를 배우는 데에 있어서 클래스는 큰 진입장벽이었다. 코드의 재사용성과 코드 구성을 어렵게 만들고, this의 사용이나 이벤트 핸들러의 등록 등 기본적인 JS 문법 사항을 알아야 다룰 수 있기 때문이다. 또한 클래스는 잘 축소되지 않고, reloading을 깨지기 쉽고 신뢰하기 어렵게 만든다. 따라서 react의 최신 기술들이 클래..

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect08.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 const sliderBtn = document.querySelector(".slide..

https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect07.html const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 const sliderBtn = document.querySelector(".slide..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect08.html 마우스 이펙트 마우스 이펙트 - 텍스트 효과 1 2 3 4 5 6 7 8 소스보기 HTML CSS Javascript 닫기 garenchoi.github.io 8번째 마우스 이펙트는 수업으로 만들지 않고 혼자 만들었다. (코드펜을 많이 참고함.) 랜덤으로 색을 뽑는 코드를 알게 됐다. var shapes = [ 'circle', 'square', 'triangle' ]; // create array of colors var colors = [ '#A32734', '#195259', '#C38542' ] // Function that will randomize two nu..