본문 바로가기
반응형

Embedded169

[Git] 형상관리에 대한 내 생각 어쩌다보니 나는 아래에 있는 형상관리 툴들을 다 사용해보았다. - Git hub : 학부 때 잠깐 맛봤다. 정말 잠깐 맛보았고 처음 접했던 형상관리 툴이라 어렵다….라는 생각밖에 안 들었다. 게다가 화면 UI는 외국 사이트답게 보기가 불편했다. 마치 iPhone을 처음 접했을 때 느낌… - Git Lab : 첫번째 직장에서 사용한 형상관리 툴이다. 당시에 이전 버전들을 각자의 pc에다 저장하고 있었는데, 들어온지 얼마안된 신입이 통째로 날려버리셔서(ㅋㅋ)… 졸지에 이전 버전이 필요한 우리들 전원 멘붕. 형상관리의 필요를 느끼고, 어떤 툴을 사용할지 고민하다 정해진 것이 Git Lab이다. Git Hub와 별 차이는 못 느꼈고, 다만 좀더 Git Hub보다 UI가 이쁘다. 상대적으로 보기 편하다. 그런데 .. 2023. 10. 22.
[Web] netlify Netlify 란?Netlity는 GitHub, GitLab 등과 계정 연동 및 쉬운 호스팅을 제공하며,CDN, Continuous Deployment(지속적 배포), One-Click HTTPS 제공 등 고성능 사이트 / 웹 응용 프로그램을 제작하는데 필요한 쉽고 빠른 다양한 서비스들을 제공합니다. -> 정말 사람들이 사용하는 사이트를 제공해주는 프로그램(?)Netlify 사용법1. 정적(Static) 웹사이트를 완성했다면 GitHub/GitLab/Bitbucket에 Push합니다.2. Netlify로 이동하여 Sign-up(회원가입) 합니다. · https://www.netlify.com/ 3. 접속 후 바로 ‘New site from git’를 선택할 수 있.. 2023. 10. 22.
[JavaScript] 유튜뷰 // Youtube IFrame API를 비동기로 로드합니다. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // onYouTubePlayerAPIReady 함수 이름은, // Youtube IFrame Player API에서 사용하는 이름이기 때문에, // 다르게 지정하면 동작하지 않습니다! // 그리고 함수는 전역(Global) 등록해야 합니다! function .. 2023. 10. 22.
[JavaScript] 날짜 /** * 올해가 몇 년도인지 계산 */ const thisYear = document.querySelector('.this-year') thisYear.textContent = new Date().getFullYear() getFullYear() · 년도를 출력하는 함수입니다. getMonth() · 월을 출력하는 함수입니다. · 단, 0부터 시작합니다. 1월 -> 0 · 그래서 +1 해줘야 현재 월을 알 수 있습니다 getDate() · 날짜를 출력하는 함수입니다. getDay() · 요일을 출력하는 함수입니다. · 월요일 = 1, 화요일 = 2, 수요일 =3, 목요일 = 4, 금요일 = 5, 토요일 6, 일요일 7 그런데 년도를 가져오는 함수는 왜 뜬근없이 getFullYear()일까? getYea.. 2023. 10. 22.
[JS] 함수 function random(min, max) { // `.toFixed()`를 통해 반환된 '문자 데이터'를, // `parseFloat()`을 통해 소수점을 가지는 '숫자 데이터'로 변환 return parseFloat((Math.random() * (max - min) + min).toFixed(2)) } // 부유하는(떠 다니는) 요소를 만드는 함수 function floatingObject(selector, delay, size) { gsap.to( selector, // 선택자 random(1.5, 2.5), // 애니메이션 동작 시간 { delay: random(0, delay), // 얼마나 늦게 애니메이션을 시작할 것인지 지연 시간을 설정. y: size, // `transform: tr.. 2023. 10. 22.
[JS] forEach const myArr = [1, 2, 3, 4, 5]; myArr.forEach((currentElement, index, array) => { console.log(`요소: ${currentElement}`); console.log(`index: ${index}`); console.log(array); }); 위 코드를 실행한 결과는 다음과 같다. 2023. 10. 22.
[JS] addEventListener addEventListener() document의 특정요소event를 등록할 때 사용합니다. [ 자주 사용하는 이벤트의 종류 ] click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다. mouseover – 마우스를 HTML요소 위에 올리면 발생한다. mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다. mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다. mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다. mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다. focus – HTML요.. 2023. 10. 22.
[JS] querySelector querySelector함수를 이용해서 html에 있는 요소를 불러올 수 있다. [js] const searchEl = document.querySelector('.search') const searchInputEl = searchEl.querySelector('input') // 검색창 요소를 클릭하면 실행. searchEl.addEventListener('click', function () { searchInputEl.focus() }) // 검색창 요소 내부 실제 input 요소에 포커스되면 실행. searchInputEl.addEventListener('focus', function () { searchEl.classList.add('focused') searchInputEl.setAttribut.. 2023. 10. 22.
[JavaScript] const & let const는 상수이다. 상수의 값은 재할당할 수 없다. 예를 들어보자 // MY_FAV를 상수로 정의하고 그 값을 7로 함 const MY_FAV = 7; // 에러가 발생함 MY_FAV = 20; // 7 출력 console.log("my favorite number is: " + MY_FAV); 그 외에는 기본적으로 let을 사용한다. 원래는 var를 사용했다고 하는데 수많은 문제점과 그로 인해 버그를 일으킬 수 있다는 이유로 현재는 var보다 let을 쓴다고 한다. 2023. 10. 22.
[CSS] backface-visibility backface-visibility 뒤집어진 뒷면이 보여질지 안보여질지를 결정한다(visible/hidden) See the Pen Untitled by Bockchi Blood (@Bockchi-Blood) on CodePen. 2023. 10. 22.
반응형