닭발에서 개발까지

assets : 이미지등의 에셋을 보관하는 곳 node_modules : 앱을 실행할 떄 필요한 모든 라이브러리들의 보관하는 곳 babel.config.js : 바벨을 이용하여 어떻게 코드를 transpile 할지 설정하는 곳 app.json : 리액트 네이티브 앱 자체의 설정을 넣어준는 곳 app.js 화면에 보이게 되는 소스 코드를 작성하는 곳 Packge.json : 해당 프로젝트에 대한 정보들이 들어있는곳, 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전 등이 명시되어짐 앱을 시작할 스크립트, 빌드할 때, 테스트할 때 사용되는 스크립드 등이 명시되어있음.

Study/JS 2023. 4. 30. 21:19

getBoundingClientRect().height getBoundingClientRect().width 해당 엘리먼트의 높이값과 넓이값을 구할 수 있다 예 : const navbar = document.querySelector("#hd_wrap"); //헤더를 담는 변수 naver const navbarHeight = navbar.getBoundingClientRect().height; //naver의 높이값을 담는 navberHeight document.addEventListener("scroll", () => { //scroll이 내려가면 이벤트 발생 if (window.scrollY > navbarHeight) { //만약 윈도우의 스크롤값이 navbarHeight보다 크다면 실행 navbar..

Study/JS 2021. 3. 3. 11:48

AOS - Animate on scroll library michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io GSAP greensock.com/gsap/ GSAP Timeline Tip: Understanding the Position Parameter The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter which controls the placement of your tweens, ..

Study/JS 2021. 2. 22. 14:02

기존 탭모습 일정 넓이로 줄어들면 이렇게 변한다 클릭시 참고 dico.me/java-script/articles/242/ko html First Second Third Fourth First tab content Second tab content First Second Third Fourth 2Depth First tab content 2Depth Second tab content 2Depth Third tab content 2Depth Fourth tab content Third tab content First Second Third Fourth 2Depth First tab content 2Depth Second tab content 2Depth Third tab content 2Depth Fourt..

Study/JS 2021. 2. 19. 14:45

About Portfolio Contact Travel About Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially uncha..

Study/JS 2021. 2. 17. 11:49

이벤트 e.preventDefault() - 대상을 클릭했을때 발생하는 이벤트를 방지(링크 이동 등등 막기) $(this) - 현재 이벤트가 적용된 개체 (DOM) .ready(fn); - 페이지 로딩시 fn 실행 .click(fn); - 클릭시 fn 실행 .one(fn); - 딱한번만 이벤트가 실행되고 해제됨 .dblclick(fn) - 더블클릭시 fn실행 .blur(fn) - 포커스를 잃었을때 fn실행 .focus(fn) - 포커스를 얻었을때 fn실행 .toggle(fn1,fn2); - 클릭시 fn1 과 fn2을 번갈아 실행 .scroll(fn) - window 창에서 scroll 이벤트가 발생할때마다 콜백함수 fn 을 실행 .change(fn) - 대상이 바뀌는 지 감지하여 fn을 실행 .keyUp..

Study/JS 2021. 2. 16. 13:59

HOISTING(호이스팅)이란?? 호이스팅이란 변수나 함수의 호출 코드가 선언코드보다 아래쪽에 있음에도 불구하고 에러가 발생하지 않고, 선언코드를 위로 끌어올려서 함수 유효범위의 최상단에서 선언되어지는 것을 말한다. ​ 즉 함수 내에서 아래쪽에 존재하는 내용 중 필요한 것들만을 끌어올리는 것이다. (실제로 끌어올려지는 것이 아닌 먼저 실행되어진다는 개념으로 이해하면 쉽다) ​ ​ *호이스팅의 대상 ​ var변수선언과 함수 선언문에서만 호이스팅이 일어나게 된다. ​ 그 극명한 차이를 알 수 있는 예시가 있는데, 바로 자바스크립트에서 함수를 생성하는 두가지 방법인 "함수 선언식"과 "함수 표현식"을 통해 알아볼 수 있다. 자바 스크립트에서 함수를 만드는 방법은 크게 함수 표현식을 이용한 방법, 함수 선언식을..

Study/JS 2021. 2. 16. 11:52

간단한 키다운 이벤트 $(window).keydown(function(e){ //13 : enter //27 : esc //37 : ← //38 : ↑ //39 : → //40 : ↓ //48~57 : left 0~9 //96~105 : right 0~9 if(e.keyCode==40||e.keyCode==39){ // ↓ 나 → 를 눌렀을 때 발생하는 이벤트 } if(e.keyCode==38||e.keyCode==37){ //↑ 나 ← 를 눌렀을 때 발생하는 이벤트 } if(e.keyCode==27){ close_guide(); } }) 주로 쓰이는 키의 번호는 다음과 같고 13 : enter 27 : esc 37 : ← 38 : ↑ 39 : → 40 : ↓ 48~57 : left 0~9 96~105 ..

Study/JS 2021. 2. 16. 11:48