프로그래밍 공부16 npm과 yarn??? 무엇이 다를까? 패키지 관리자란 무엇인가? 패키지 관리자는 프로젝트 환경을 만들고 외부 종속성을 쉽게 가져올 수 있는 도구. 패키지 관리자를 사용하여 프로젝트 환경에서 종속성을 설치, 업그레이드 , 구성 및 제거하는 프로세스를 자동화 할수 있다. NPM 이란? 일반적으로 NPM, Inc.에서 유지 관리하는 노드 패키지 관리자로 알려져 있다. npm은 자바스크립트 개발자 사이에서 인기있는 패키지 관리자이다. node.js를 설치하면 자동으로 설치되는 기본 패키지 Yarn이란? 2016년 페이스북에서 개발한 패키지 관리자 자바스크립트 프로그래밍언어의 또다른 패키지 관리자이다. NPM의 대안으로 속도, 일관성, 안정성 및 보안을 제공 속도 둘의 주요 차이점은 패키지 설치 프로세스이다. Yarn 패키지를 병렬로 설치한다. 한 .. 2022. 6. 28. [Js] - 콘솔창에 입력하기 자바스크립트에서는 readline 모듈을 이용하면 콘솔을 통해 값을 입력받을 수 있다. readline 모듈 자바스크립트에서 입출력을 하기 위한 readline 모듈에 대해 알아보자 readline 모듈은 자바스크립트에 내장된 모듈로 Readable 스트림에서 한줄씩 입출력을 처리할 수 있도록 도와준다. 모듈 불러오기 모듈을 불러오기 위해서는 require(모듈 이름) 을 이용해야 함 const readline = require("readline"); 불러온 모듈은 readline 이라는 변수에 저장한다. 여기서 const는 선언한 변수가 상수임을 나타내며, 해당 변수의 값을 변경하는 것은 불가능하다. readline interface 객체 만들기 정의한 변수를 이용해 readline interface .. 2022. 3. 10. [Js] - 별찍기 (콘솔) 자바스크립트를 이용하여 콘솔에 별찍기를 작성해보았다. for문은 익숙한 반면 forEach문은 사용할때마다 좀 헷갈리는 경우가 많아 forEach문으로도 다시 작성을 해보았다. 1. 삼각형찍기 // 1.for문 for(let i = 0 ; i < 5 ; i ++){ console.log('*'.repeat(i+1)); } // 2. forEach문 const arr = ['*','*','*','*','*']; arr.forEach(function(e,index){ console.log(e.repeat(index + 1)); }); // 결과 * ** *** **** ***** 2. 삼각형 찍기 - 역순 // 1. for문 for(let i = 0 ; i < 5 ; i ++){ console.log('*'.. 2021. 12. 27. [Css] - 미디어쿼리란? 미디어쿼리란 pc뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문 반응형 → 자연스러운 리사이즈가 일어나는 현상 적응형 → 뚝뚝 끊겨서 레이아웃에 폰트크기가 달라지는 현상 → 즉 자연스럽냐 아니냐 Orientation : landscape (가로에 적용) / portrait(세로 적용) Please flip your phone :( viewport 위의 코드가 작성되어 있지않으면 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있음. viewport너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나 다양한 디지.. 2021. 11. 1. [Css] - @keyframes , 애니메이션 (animation) 속성 참고 : css 애니메이션 사이트 : https://animista.net/ Animista - CSS Animations on Demand Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use. animista.net @keyframes 은 CSS문법 중 하나로 애니메이션이 만들어지는 부분 키프레임 애니메이션을 정의한 후 요소에 애니를 적용할라면 "aniamtion" 속성을 이용해 키프레임을 연결해야한다 From to 형 @keyframes 애니메이션 이름{ form{ Transfrom :.. 2021. 11. 1. [Css] - Transformation , 트랜스폼 Transform 웹 요소의 위치를 이동시키거나 크기 조절 및 회전시킬수 있는 강력한 기능 3d 처럼 표현가능 적용시켜도 박스 요소가 변형되지않는데 일종의 3d transformation 이기 떄문이다 트랜스폼을 적용시켜도 다른 요소에는 영향을 끼치지않는다 웹사이트의 특정영역에서 오브젝트의 각도를 튼다거나 , 크기조절을 한다거나 , 위치변경을 한다는 등 속성을 변경하는 속성 img { border: 1px solid black; transition: all 2s ease-in-out; } img:hover { transform: scale(0.5) rotateZ(90deg); border-radius: 50%; } rotate, scale rotate(45deg) : 입력한 각도만큼 회전. 음수도 입.. 2021. 10. 31. 이전 1 2 3 다음 728x90 반응형
